/* =============================================================
   LAPPUNGCTF — Login (system access)
   Loaded after style.css: reuses its tokens, base, space scene, the 90%
   page scale and the .warp launch overlay.
   -------------------------------------------------------------
   1. Stage + brand        4. Flight deck (pad, beam, floor, sponsors)
   2. Hologram glass       5. Lift-off
   3. Fields + actions     6. Responsive
   Everything decorative is static gradients; only opacity and transform
   animate, and never on the element that holds the inputs.
   ============================================================= */

/* ---------- 1. STAGE + BRAND ---------- */
.login__stage {
  --deck-h: clamp(130px, 25vh, 240px);
  position: relative;
  z-index: 1;
  min-height: var(--full-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 4vh, 40px);
  /* the hologram ends just above the projector pad */
  padding:
    max(clamp(10px, 3vh, 32px), env(safe-area-inset-top)) 16px calc(var(--deck-h) * .8);
  /* the deck drops out of view on lift-off without growing the page */
  overflow: clip;
}

/* the scene's nav-beacon readout (style.css) would sit behind the title here */
.login .space__veil::after {
  content: none;
}

.brand {
  display: grid;
  justify-items: center;
  text-align: center;
}

.brand__logo {
  height: clamp(54px, 12vh, 120px);
  width: auto;
  filter: drop-shadow(0 0 14px rgba(98, 230, 255, .45));
}

.brand__title {
  margin-top: 6px;
  font-size: clamp(32px, min(6.4vw, 9vh), 76px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
  /* the trailing tracking would push the word off centre */
  margin-right: -.06em;
  color: #8AF0FF;
  transform: skewX(-9deg);
  filter: drop-shadow(0 0 16px rgba(98, 230, 255, .45));
}

/* gradient lettering where the browser can clip a background to text */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .brand__title {
    color: transparent;
    background: linear-gradient(180deg, #fff 8%, #8AF0FF 42%, #5C7BFF 74%, #B9A8FF);
    -webkit-background-clip: text;
    background-clip: text;
  }
}

.brand__tag {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: clamp(6px, 1.2vh, 12px);
  font-family: var(--font-mono);
  font-size: clamp(10px, 1.5vw, 15px);
  font-weight: 500;
  letter-spacing: .34em;
  white-space: nowrap;
  color: var(--primary);
}

.brand__tag::before,
.brand__tag::after {
  content: "";
  width: clamp(18px, 4vw, 52px);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary));
}

.brand__tag::after {
  scale: -1 1;
}

/* ---------- 2. HOLOGRAM GLASS ---------- */
.holo {
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: grid;
  gap: 14px;
  width: min(560px, 100%);
  padding: 46px clamp(18px, 5vw, 48px) 22px;
}

/* The glass is its own layer behind the form: the outline is a drop-shadow of the
   clipped shape (cyan top-left, violet bottom-right), rastered once. Typing in the
   fields never repaints it. */
.holo__glass {
  position: absolute;
  inset: 0;
  z-index: -1;
  filter:
    drop-shadow(-1.5px -1.5px 0 #62E6FF) drop-shadow(1.5px 1.5px 0 #C058FF) drop-shadow(0 0 16px rgba(60, 150, 255, .55));
  animation: holo-flicker 6s steps(1) infinite;
}

.holo__glass i {
  position: absolute;
  inset: 0;
  clip-path: polygon(26px 0, calc(100% - 26px) 0, 100% 26px, 100% calc(100% - 26px), calc(100% - 26px) 100%, 26px 100%, 0 calc(100% - 26px), 0 26px);
  background:
    repeating-linear-gradient(0deg, rgba(98, 230, 255, .07) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgba(14, 30, 110, .74), rgba(6, 12, 50, .8));
}

/* projector scan band sweeping down the glass */
.holo__scan {
  position: absolute;
  inset: 6px;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.holo__scan::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -100px;
  height: 100px;
  background: linear-gradient(180deg, transparent, rgba(98, 230, 255, .14), transparent);
  animation: holo-scan 5s linear infinite;
}

@keyframes holo-flicker {

  0%,
  100% {
    opacity: 1;
  }

  47% {
    opacity: .8;
  }

  48% {
    opacity: 1;
  }

  71% {
    opacity: .9;
  }

  72% {
    opacity: 1;
  }
}

@keyframes holo-scan {
  to {
    transform: translateY(720px);
  }
}

/* title plate riding the top edge, speed stripes either side */
.holo__head {
  position: absolute;
  top: 0;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 12px;
  translate: -50% -50%;
}

.holo__head i {
  width: clamp(24px, 8vw, 54px);
  height: 14px;
  background: repeating-linear-gradient(90deg, var(--primary) 0 8px, transparent 8px 15px);
  transform: skewX(-32deg);
}

.holo__title {
  padding: 9px clamp(18px, 5vw, 38px);
  font-size: clamp(14px, 2.4vw, 17px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .2em;
  white-space: nowrap;
  color: #fff;
  background: linear-gradient(180deg, #1d4fd8, #0e2a8e);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 100%, 0 100%);
}

/* ---------- 3. FIELDS + ACTIONS ---------- */
.holo__fields {
  display: grid;
  gap: 16px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.field {
  position: relative;
}

.field>.icon {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 20px;
  height: 20px;
  translate: 0 -50%;
  color: var(--primary);
  pointer-events: none;
}

.field input {
  width: 100%;
  height: 50px;
  padding: 0 14px 0 46px;
  border: 1px solid rgba(98, 230, 255, .5);
  border-radius: 4px;
  font: inherit;
  font-size: 16px;
  color: #fff;
  caret-color: var(--primary);
  background: rgba(5, 10, 40, .72);
  outline: 2px solid transparent;
  transition: border-color var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}

.field input::placeholder {
  color: var(--text-2);
}

.field input:focus-visible {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary), 0 0 16px rgba(98, 230, 255, .35);
}

/* invalid only after the player touched the field */
.field input:user-invalid {
  border-color: #FF5F7A;
  box-shadow: 0 0 0 1px #FF5F7A;
}

.field--pass input {
  padding-right: 54px;
}

.field__eye {
  position: absolute;
  right: 3px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  translate: 0 -50%;
  color: var(--text-2);
  outline: 2px solid transparent;
  outline-offset: -4px;
}

.field__eye:hover,
.field__eye[aria-pressed="true"] {
  color: var(--primary);
}

.field__eye:focus-visible {
  outline-color: var(--primary);
}

/* hex-ended plate; the shape lives on ::before so the focus outline is not clipped */
.holo__submit {
  position: relative;
  isolation: isolate;
  justify-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: min(320px, 100%);
  height: 54px;
  margin-top: 6px;
  padding: 0 40px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .16em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(5, 8, 23, .6);
  outline: 2px solid transparent;
  outline-offset: 4px;
}

.holo__submit::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 50%, calc(100% - 20px) 100%, 20px 100%, 0 50%);
  background:
    linear-gradient(#8AF0FF, #8AF0FF) top / 100% 2px no-repeat,
    linear-gradient(180deg, #2a7de8, #1b55d8 55%, #1438a8);
  transition: filter var(--t-base) var(--ease);
}

.holo__submit .icon {
  stroke-width: 2.6;
}

@media (hover: hover) {
  .holo__submit:enabled:hover::before {
    filter: brightness(1.2);
  }
}

.holo__submit:focus-visible {
  outline-color: var(--primary);
}

.holo__fields:disabled .holo__submit {
  cursor: default;
}

.holo__fields:disabled .field {
  opacity: .7;
}

/* states: idle · checking · denied · granted (only the current message shows) */
.holo__status {
  min-height: 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .14em;
  text-align: center;
  color: var(--primary);
}

.holo[data-state="denied"] .holo__status {
  color: #FF8FA3;
}

.holo[data-state="denied"] .holo__fields {
  animation: holo-reject 280ms var(--ease);
}

.holo[data-state="granted"] .holo__status {
  color: #4CE6A5;
}

@keyframes holo-reject {
  25% {
    translate: -5px 0;
  }

  50% {
    translate: 4px 0;
  }

  75% {
    translate: -2px 0;
  }
}

/* divider with a centre diamond, then the sign-up line */
.holo__signup {
  font-size: 15px;
  text-align: center;
  color: var(--text-dim);
}

.holo__signup::before {
  content: "";
  display: block;
  width: 86%;
  height: 7px;
  margin: 0 auto 10px;
  background:
    linear-gradient(var(--primary), var(--primary)) center / 7px 7px no-repeat,
    linear-gradient(90deg, transparent, rgba(98, 230, 255, .5) 30%, transparent 46%, transparent 54%, rgba(98, 230, 255, .5) 70%, transparent) center / 100% 1px no-repeat;
}

.holo__signup a {
  padding: 10px 4px;
  font-weight: 600;
  color: #E08BFF;
  text-underline-offset: 4px;
  outline: 2px solid transparent;
}

.holo__signup a:hover {
  color: #fff;
}

.holo__signup a:focus-visible {
  outline-color: var(--primary);
}

/* ---------- 4. FLIGHT DECK ---------- */
.deck {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--deck-h);
  pointer-events: none;
}

/* floor: dark plating with a perspective grid and a lit front edge */
.deck__floor {
  position: absolute;
  inset: 34% 0 0;
  overflow: hidden;
  border-top: 2px solid rgba(98, 230, 255, .55);
  background: linear-gradient(180deg, #0c1548, #050817 85%);
  box-shadow: 0 -6px 30px rgba(60, 120, 255, .35);
}

.deck__floor::before {
  content: "";
  position: absolute;
  inset: 0 -40% -120%;
  background:
    repeating-linear-gradient(90deg, rgba(98, 230, 255, .22) 0 1px, transparent 1px 70px),
    repeating-linear-gradient(0deg, rgba(98, 230, 255, .22) 0 1px, transparent 1px 46px);
  transform: perspective(260px) rotateX(58deg);
  transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%);
  mask-image: linear-gradient(180deg, #000, transparent 70%);
}

/* sponsors standing on the deck, one block in each bottom corner */
.deck__sponsors {
  position: absolute;
  left: var(--edge-pad);
  bottom: clamp(14px, 4.5vh, 40px);
  z-index: 1;
}

.deck__label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(10px, 1.8vh, 16px);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  white-space: nowrap;
  color: var(--text-2);
}

.deck__label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(98, 230, 255, .6), transparent);
}

.deck__sponsors ul {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.deck__sponsors img {
  display: block;
  width: auto;
  height: auto;
  max-width: 150px;
  max-height: clamp(28px, 5vh, 40px);
  opacity: .92;
}

/* right block: the same thing mirrored */
.deck__sponsors--right {
  left: auto;
  right: max(clamp(12px, 2.4vw, 32px), env(safe-area-inset-right));
}

.deck__sponsors--right .deck__label {
  flex-direction: row-reverse;
}

.deck__sponsors--right .deck__label::after {
  background: linear-gradient(270deg, rgba(98, 230, 255, .6), transparent);
}

.deck__sponsors--right ul {
  flex-direction: row-reverse;
}

/* projector pad: bright core, concentric emitter rings, a rim with thickness */
.deck__pad {
  position: absolute;
  left: 50%;
  top: 6%;
  width: min(640px, 80%);
  height: 60%;
  translate: -50% 0;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, #fff 0 4%, #9FF3FF 11%, rgba(98, 230, 255, .6) 24%, transparent 42%),
    repeating-radial-gradient(closest-side, transparent 0 9%, rgba(98, 230, 255, .6) 9% 10.5%, transparent 10.5% 18%),
    radial-gradient(closest-side, #17329a, #0a1245 62%, #070b24);
  box-shadow:
    0 0 0 2px rgba(98, 230, 255, .75),
    0 0 44px rgba(60, 140, 255, .65),
    0 9px 0 2px #0a1238,
    0 11px 0 3px rgba(192, 88, 255, .6);
}

/* emitter pulse: one ring breathing outwards */
.deck__pad::after {
  content: "";
  position: absolute;
  inset: 12%;
  border: 2px solid rgba(138, 240, 255, .7);
  border-radius: 50%;
  animation: pad-pulse 2.6s ease-out infinite;
}

@keyframes pad-pulse {
  from {
    transform: scale(.25);
    opacity: 1;
  }

  to {
    transform: scale(1.15);
    opacity: 0;
  }
}

/* light cone from the pad up through the hologram, fading out at the top */
.deck__beam {
  position: absolute;
  left: 50%;
  bottom: 62%;
  width: min(600px, 76%);
  height: 52vh;
  translate: -50% 0;
  clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);
  background:
    repeating-linear-gradient(90deg, transparent 0 11px, rgba(170, 240, 255, .16) 11px 12px, transparent 12px 27px),
    linear-gradient(0deg, rgba(98, 230, 255, .5), rgba(98, 230, 255, .1) 40%, transparent 92%);
  animation: beam-flicker 4s steps(1) infinite;
}

@keyframes beam-flicker {

  0%,
  100% {
    opacity: 1;
  }

  33% {
    opacity: .78;
  }

  35% {
    opacity: 1;
  }

  82% {
    opacity: .86;
  }

  84% {
    opacity: 1;
  }
}

/* ---------- 5. LIFT-OFF ---------- */
/* login.js adds .is-lifting once access is granted: the projector cuts out, the deck
   falls away below, and the space engine streaks past from a point above the screen
   (script.js warp). 1260ms to the flare peak, then the main menu loads behind it. */
.is-lifting .holo {
  animation: holo-off 420ms var(--ease) forwards;
}

.is-lifting .deck__beam {
  animation: beam-off 260ms linear forwards;
}

.is-lifting .deck {
  animation: deck-drop 1050ms cubic-bezier(.55, 0, .9, .45) 160ms forwards;
}

.is-lifting .brand {
  animation: brand-drop 900ms cubic-bezier(.55, 0, .9, .45) 240ms forwards;
}

/* the picture collapses to a bright line, like a projector losing power */
@keyframes holo-off {
  35% {
    transform: scaleY(1.03);
    filter: brightness(1.9);
    opacity: 1;
  }

  100% {
    transform: scale(1.12, .02);
    filter: brightness(2.4);
    opacity: 0;
  }
}

@keyframes beam-off {
  to {
    opacity: 0;
  }
}

@keyframes deck-drop {
  to {
    transform: translateY(140%);
  }
}

@keyframes brand-drop {
  to {
    transform: translateY(70vh);
    opacity: 0;
  }
}

/* ---------- 6. RESPONSIVE ---------- */
/* the pad takes the deck's width from here down: no room beside it for the sponsor blocks */
@media (max-width: 1279px) {
  .deck__sponsors {
    display: none;
  }
}

/* short screens: keep the form clear of the deck, let the page scroll if it must */
@media (max-height: 620px) {
  .login__stage {
    --deck-h: 110px;
    gap: 14px;
  }

  .holo {
    gap: 10px;
    padding-top: 36px;
  }

  .holo__fields {
    gap: 10px;
  }
}