.admin-portal-trigger {
  --portal-progress: 0deg;

  position: relative;

  width: 30px;
  height: 30px;

  flex: 0 0 30px;

  display: inline-grid;
  place-items: center;

  padding: 0;

  border: 0;
  border-radius: 50%;

  background:
    conic-gradient(
      #f0dfad var(--portal-progress),
      rgba(216, 200, 160, 0.2) 0
    );

  cursor: pointer;

  opacity: 0.82;

  box-shadow:
    0 0 0 1px rgba(216, 200, 160, 0.12),
    0 0 18px rgba(216, 200, 160, 0.08);

  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.admin-portal-trigger::before {
  content: "";

  width: 22px;
  height: 22px;

  border-radius: 50%;

  background: #07100c;

  box-shadow:
    inset 0 0 0 1px rgba(216, 200, 160, 0.34);
}

.admin-portal-trigger::after {
  content: "";

  position: absolute;

  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: #f0dfad;

  box-shadow:
    0 0 12px rgba(240, 223, 173, 0.85);
}

.admin-portal-trigger:hover,
.admin-portal-trigger.is-holding {
  opacity: 1;
  transform: scale(1.1);

  box-shadow:
    0 0 0 1px rgba(240, 223, 173, 0.25),
    0 0 30px rgba(216, 200, 160, 0.24);
}

.admin-portal-trigger.is-complete {
  transform: scale(1.22);

  box-shadow:
    0 0 42px rgba(240, 223, 173, 0.55);
}

.footer-admin-access {
  display: flex;
  align-items: center;
  gap: 14px;
}

.admin-portal {
  position: fixed;
  inset: 0;
  z-index: 6000;

  display: grid;
  place-items: center;

  padding: 20px;

  visibility: hidden;
  opacity: 0;

  transition:
    opacity 0.55s ease,
    visibility 0.55s ease;
}

.admin-portal.is-open {
  visibility: visible;
  opacity: 1;
}

.admin-portal-backdrop {
  position: absolute;
  inset: 0;

  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(35, 66, 56, 0.34),
      rgba(2, 7, 4, 0.92)
    );

  backdrop-filter:
    blur(18px)
    saturate(80%);
}

.admin-portal-dialog {
  position: relative;
  z-index: 1;

  width: min(100%, 560px);

  padding:
    clamp(56px, 8vw, 82px)
    clamp(28px, 7vw, 68px);

  overflow: hidden;

  border:
    1px solid rgba(216, 200, 160, 0.32);

  border-radius: 38px;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(216, 200, 160, 0.18),
      transparent 38%
    ),
    linear-gradient(
      150deg,
      #28493d,
      #10231b 58%,
      #07100c
    );

  color: #f8f7f3;
  text-align: center;

  box-shadow:
    0 60px 150px rgba(0, 0, 0, 0.62),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);

  opacity: 0;

  transform:
    translateY(30px)
    scale(0.96);

  transition:
    opacity 0.65s ease,
    transform 0.75s cubic-bezier(.2, .8, .2, 1);
}

.admin-portal.is-open .admin-portal-dialog {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);
}

.admin-portal-close {
  position: absolute;
  top: 18px;
  right: 20px;

  width: 42px;
  height: 42px;

  border:
    1px solid rgba(216, 200, 160, 0.25);

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.04);

  color: #f0dfad;
  cursor: pointer;

  font-size: 25px;
  line-height: 1;
}

.admin-portal-emblem {
  width: 76px;
  height: 76px;

  display: grid;
  place-items: center;

  margin: 0 auto 30px;

  border:
    1px solid rgba(216, 200, 160, 0.46);

  border-radius: 50%;

  box-shadow:
    0 0 0 11px rgba(216, 200, 160, 0.035),
    0 0 42px rgba(216, 200, 160, 0.15);

  animation:
    portalBreathe 4s ease-in-out infinite;
}

.admin-portal-emblem span {
  width: 9px;
  height: 9px;

  border-radius: 50%;

  background: #f0dfad;

  box-shadow:
    0 0 20px rgba(240, 223, 173, 0.85);
}

@keyframes portalBreathe {
  0%,
  100% {
    transform: scale(0.96);
    opacity: 0.75;
  }

  50% {
    transform: scale(1.04);
    opacity: 1;
  }
}

.admin-portal-brand {
  margin: 0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 21px;
  letter-spacing: 0.25em;
}

.admin-portal-kicker {
  margin: 14px 0 0;

  color: #d8c8a0;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.admin-portal h2 {
  margin: 31px 0 0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(40px, 6vw, 62px);

  font-weight: 400;
  line-height: 1.03;
  letter-spacing: -0.045em;
}

.admin-portal-copy {
  max-width: 420px;

  margin:
    23px auto
    0;

  color:
    rgba(248, 247, 243, 0.64);

  font-size: 15px;
  line-height: 1.75;
}

.admin-portal-enter {
  min-height: 56px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-top: 35px;
  padding: 0 32px;

  border-radius: 999px;

  background:
    linear-gradient(
      135deg,
      #f0dfad,
      #cbb988
    );

  color: #17271f;

  text-decoration: none;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;

  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.3);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.admin-portal-enter:hover {
  transform: translateY(-3px);

  box-shadow:
    0 28px 60px rgba(0, 0, 0, 0.4);
}

.admin-portal-hint {
  margin: 25px 0 0;

  color:
    rgba(248, 247, 243, 0.34);

  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.admin-portal-open {
  overflow: hidden !important;
}

body.admin-portal-open main,
body.admin-portal-open footer,
body.admin-portal-open header {
  transform: scale(0.985);
  filter: blur(1.5px);

  transition:
    transform 0.65s ease,
    filter 0.65s ease;
}

.program-footer .admin-portal-trigger {
  margin-left: 14px;
  vertical-align: middle;
}

@media (max-width: 620px) {
  .admin-portal {
    padding: 12px;
  }

  .admin-portal-dialog {
    padding:
      64px 24px
      36px;

    border-radius: 28px;
  }

  .admin-portal-close {
    top: 13px;
    right: 13px;
  }

  .footer-admin-access {
    gap: 10px;
  }
}