/* Fuji login — centered soft-neo + cyber reactive portal */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --ink:#0a0e14;
  --surface:#0a0e14;
  --panel:#171e2a;
  --panel-hi:#1c2433;
  --panel-in:#121822;
  --cream:#eaf2ff;
  --ice:#d4e6ff;
  --cyan:#67e8f9;
  --blue:#3b82f6;
  --err:#f87171;
  --ok:#4ade80;
  --ease:cubic-bezier(.16,1,.3,1);
  --neo-dark:rgba(0,0,0,.7);
  --neo-light:rgba(180,210,255,.14);
  --neo-out:
    16px 16px 32px var(--neo-dark),
    -10px -10px 24px var(--neo-light);
  --neo-out-md:
    10px 10px 20px var(--neo-dark),
    -7px -7px 16px var(--neo-light);
  --neo-out-sm:
    5px 5px 12px var(--neo-dark),
    -4px -4px 10px var(--neo-light);
  --neo-in:
    inset 9px 9px 18px rgba(0,0,0,.72),
    inset -5px -5px 14px rgba(160,200,255,.1);
  --neo-in-sm:
    inset 4px 4px 10px rgba(0,0,0,.65),
    inset -3px -3px 8px rgba(160,200,255,.08);
  --key-progress:0;
  --ptr-x:0;
  --ptr-y:0;
}

html,body{height:100%}
.auth-page{
  font-family:var(--fb);
  background:var(--ink);
  color:var(--ice);
  min-height:100vh;
  overflow:hidden;
  position:relative;
  -webkit-font-smoothing:antialiased;
  transition:background .6s var(--ease);
}
.auth-page.is-armed{
  background:
    radial-gradient(ellipse 55% 45% at calc(50% + var(--ptr-x) * 3%) calc(28% + var(--ptr-y) * 2%),rgba(37,99,235,.22),transparent 62%),
    var(--ink);
}
.visually-hidden{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.auth-canvas{
  position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.45;
}

/* Cyber grid + scanlines */
.auth-cyber{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background-image:
    linear-gradient(rgba(56,189,248,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(56,189,248,.035) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 20%,transparent 75%);
  opacity:.55;
  animation:gridDrift 28s linear infinite;
}
.auth-scanlines{
  position:fixed;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,.12) 2px,
    rgba(0,0,0,.12) 4px
  );
  opacity:.25;mix-blend-mode:overlay;
}

/* ── Scene ── */
.auth-scene{
  position:fixed;inset:0;z-index:3;overflow:hidden;
  background:
    radial-gradient(ellipse 50% 38% at calc(50% + var(--ptr-x) * 4%) calc(34% + var(--ptr-y) * 3%),rgba(34,211,238,.1),transparent 55%),
    radial-gradient(ellipse 42% 36% at 50% 30%,rgba(37,99,235,.18),transparent 60%),
    transparent;
  transition:background .4s ease;
}
.auth-scene.is-exit{animation:sceneOut .6s cubic-bezier(.7,0,.3,1) forwards}

.auth-index{
  position:absolute;left:50%;top:clamp(12px,2.8vh,36px);
  transform:translateX(-50%);
  font-family:var(--fh);font-size:clamp(2.4rem,7vw,4.8rem);font-weight:800;
  line-height:1;letter-spacing:-.06em;
  color:transparent;-webkit-text-stroke:1px rgba(103,232,249,.12);
  opacity:0;user-select:none;text-align:center;z-index:6;
}
.auth-scene.is-ready .auth-index{animation:fadeUp .9s var(--ease) .1s forwards}

.auth-meta{
  position:absolute;left:50%;top:clamp(58px,8vh,96px);
  transform:translateX(-50%);
  display:flex;flex-direction:row;gap:16px;align-items:center;justify-content:center;
  font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(103,232,249,.28);
  opacity:0;white-space:nowrap;z-index:6;
}
.auth-scene.is-ready .auth-meta{animation:fadeUp .9s var(--ease) .22s forwards}

/* Brand + logo live in .auth-hero (stage stack) */
.auth-typo-stack{
  position:relative;left:auto;top:auto;
  transform:none;
  pointer-events:none;user-select:none;z-index:2;text-align:center;
  margin-bottom:-12px;
}
.auth-typo-line{
  font-family:var(--fh);font-weight:800;line-height:.88;
  letter-spacing:-.03em;display:block;opacity:0;
}
.auth-typo-line--ghost{
  font-size:clamp(5.2rem,18vw,13rem);
  color:rgba(103,232,249,.22);
  -webkit-text-stroke:1.5px rgba(103,232,249,.42);
  text-shadow:
    0 0 12px rgba(34,211,238,.45),
    0 0 36px rgba(34,211,238,.35),
    0 0 72px rgba(59,130,246,.22),
    0 2px 0 rgba(0,0,0,.35);
  animation:brandFlicker 3.6s ease-in-out infinite;
}
.auth-typo-line--a,
.auth-typo-line--b{display:none}
.auth-stage.is-ready .auth-typo-line--ghost{
  animation:
    fadeIn 1s var(--ease) .05s forwards,
    brandFlicker 3.6s ease-in-out 1.1s infinite;
}
.auth-scene.is-hot ~ .auth-stage .auth-typo-line--ghost,
.auth-page.is-armed .auth-typo-line--ghost{
  color:rgba(103,232,249,calc(.22 + var(--key-progress) * .14));
  -webkit-text-stroke:1.5px rgba(103,232,249,calc(.42 + var(--key-progress) * .12));
  text-shadow:
    0 0 calc(12px + var(--key-progress) * 10px) rgba(34,211,238,.55),
    0 0 calc(36px + var(--key-progress) * 18px) rgba(34,211,238,.4),
    0 0 calc(72px + var(--key-progress) * 24px) rgba(59,130,246,.28),
    0 2px 0 rgba(0,0,0,.35);
}

.auth-rings{
  position:absolute;left:50%;top:42%;
  width:min(58vw,380px);aspect-ratio:1;
  transform:translate(-50%,-50%);
  opacity:0;z-index:4;
}
.auth-scene.is-ready .auth-rings{animation:ringsIn 1.1s var(--ease) .12s forwards}
.auth-ring{transform-origin:300px 300px;animation:ringRotate 70s linear infinite}
.auth-ring--b{animation-duration:95s;animation-direction:reverse}
.auth-ring--c{animation:ringPulse 7s ease-in-out infinite}

.auth-monolith{
  position:relative;left:auto;top:auto;
  width:min(42vw,200px);
  display:block;margin:0 auto;
  transform:translate(calc(var(--ptr-x) * 6px),calc(var(--ptr-y) * 4px)) scale(.96);
  opacity:0;z-index:1;
  filter:
    drop-shadow(0 0 28px rgba(34,211,238,.5))
    drop-shadow(0 0 48px rgba(103,232,249,.28))
    drop-shadow(8px 18px 28px rgba(0,0,0,.5))
    drop-shadow(-4px -6px 14px rgba(165,243,252,.12));
  transition:filter .45s var(--ease);
}
.auth-stage.is-ready .auth-monolith{
  animation:monoIn 1.15s var(--ease) .14s forwards,monoFloat 9s ease-in-out 1.3s infinite;
}
.auth-scene.is-hot ~ .auth-stage .auth-monolith,
.auth-page.is-armed .auth-monolith{
  filter:
    drop-shadow(0 0 calc(28px + var(--key-progress) * 24px) rgba(34,211,238,.55))
    drop-shadow(0 0 calc(48px + var(--key-progress) * 28px) rgba(103,232,249,.4))
    drop-shadow(10px 20px 32px rgba(0,0,0,.5));
}
.auth-mono--r{transform:translate(-3px,0);mix-blend-mode:screen;opacity:.5}
.auth-mono--b{transform:translate(3px,0);mix-blend-mode:screen;opacity:.5}
.auth-mono__shadow{transform:translate(0,18px) scale(1.03);filter:blur(18px)}
.auth-mono__sheen{opacity:.85;animation:sheenPulse 3.8s ease-in-out infinite}

.auth-grain{
  position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;pointer-events:none;z-index:7;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.auth-vignette{
  position:absolute;inset:0;pointer-events:none;z-index:7;
  background:
    radial-gradient(ellipse 80% 60% at 50% 45%,transparent 30%,rgba(10,14,20,.4) 78%,rgba(10,14,20,.88) 100%);
}

/* ── Stage: logo + vault centered as one column ── */
.auth-stage{
  position:relative;z-index:20;
  min-height:100vh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(48px,8vh,80px) clamp(16px,4vw,32px) clamp(56px,8vh,88px);
  gap:clamp(18px,3.5vh,32px);
}
.auth-hero{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;
  position:relative;z-index:2;
  opacity:0;transform:translateY(16px);
}
.auth-stage.is-ready .auth-hero{animation:heroIn .9s var(--ease) .08s forwards}

.vault{
  width:min(100%,420px);
  position:relative;
  margin:0 auto;
  padding:30px 26px 24px;
  border-radius:30px;
  background:
    linear-gradient(165deg,var(--panel-hi) 0%,var(--panel) 55%,#141b27 100%);
  box-shadow:
    var(--neo-out),
    inset 1px 1px 0 rgba(180,210,255,.1),
    inset 0 0 0 1px rgba(100,150,210,.08);
  opacity:0;
  transform:
    translate3d(0,28px,0)
    rotateX(calc(var(--ptr-y) * -2.5deg))
    rotateY(calc(var(--ptr-x) * 3deg));
  transform-style:preserve-3d;
  transition:
    box-shadow .45s var(--ease),
    transform .2s ease-out;
  will-change:transform,box-shadow;
}
.auth-stage.is-ready .vault{animation:vaultIn 1s var(--ease) .32s forwards}
.auth-stage.is-ready .vault.is-live{
  animation:none;
  opacity:1;
  transform:
    translate3d(0,0,0)
    rotateX(calc(var(--ptr-y) * -2.5deg))
    rotateY(calc(var(--ptr-x) * 3deg));
}
.vault.is-exit{animation:vaultOut .55s cubic-bezier(.7,0,.3,1) forwards}
.vault.is-focused,
.vault.is-active{
  box-shadow:
    20px 20px 40px rgba(0,0,0,.85),
    -14px -14px 32px rgba(170,210,255,.16),
    0 0 48px rgba(34,211,238,calc(.06 + var(--key-progress) * .14));
}
.vault.is-typing{animation:vaultPulse .35s var(--ease)}
.vault.is-loading{
  box-shadow:
    var(--neo-in),
    0 0 40px rgba(34,211,238,.2);
}
.vault.is-success{
  box-shadow:
    var(--neo-out),
    0 0 56px rgba(74,222,128,.28);
}

.vault__frame{position:absolute;inset:10px;pointer-events:none;border-radius:22px}
.vault__corner{
  position:absolute;width:24px;height:24px;
  border-color:rgba(103,232,249,.35);border-style:solid;opacity:.45;
  transition:opacity .35s ease,border-color .35s ease,transform .45s var(--ease),filter .35s ease;
  filter:drop-shadow(0 0 4px rgba(34,211,238,.2));
}
.vault__corner--tl{top:0;left:0;border-width:1.5px 0 0 1.5px}
.vault__corner--tr{top:0;right:0;border-width:1.5px 1.5px 0 0}
.vault__corner--bl{bottom:0;left:0;border-width:0 0 1.5px 1.5px}
.vault__corner--br{bottom:0;right:0;border-width:0 1.5px 1.5px 0}
.vault.is-focused .vault__corner,
.vault.is-active .vault__corner{
  opacity:1;border-color:rgba(165,243,252,.8);
  filter:drop-shadow(0 0 8px rgba(34,211,238,.45));
}
.vault.is-focused .vault__corner--tl{transform:translate(5px,5px)}
.vault.is-focused .vault__corner--tr{transform:translate(-5px,5px)}
.vault.is-focused .vault__corner--bl{transform:translate(5px,-5px)}
.vault.is-focused .vault__corner--br{transform:translate(-5px,-5px)}

.vault__ticks{display:none}

.vault__segments{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  margin:0 2px 18px;padding:16px 14px;
  position:relative;
  border-radius:22px;
  background:var(--panel-in);
  box-shadow:var(--neo-in-sm);
  transition:box-shadow .4s var(--ease);
}
.vault.is-focused .vault__segments,
.vault.is-active .vault__segments{
  box-shadow:
    inset 6px 6px 14px rgba(0,0,0,.7),
    inset -4px -4px 10px rgba(34,211,238,.1);
}
.vault__segments::before{
  content:'';position:absolute;left:18px;right:18px;top:50%;
  height:5px;border-radius:99px;transform:translateY(-50%);
  background:var(--panel-in);
  box-shadow:var(--neo-in-sm);
  z-index:0;
}
.vault__segments span{
  display:flex;align-items:center;justify-content:center;
  height:46px;position:relative;z-index:1;
}
.vault__segments span i{
  display:block;width:30px;height:30px;border-radius:50%;
  background:linear-gradient(155deg,var(--panel-hi),var(--panel-in));
  box-shadow:
    6px 7px 14px rgba(0,0,0,.55),
    -4px -5px 12px rgba(180,210,255,.14),
    inset 1px 1px 2px rgba(255,255,255,.1);
  transition:
    transform .4s var(--ease),
    box-shadow .4s var(--ease),
    background .4s var(--ease),
    filter .35s ease;
  transform:scale(calc(.86 + var(--fill,0) * .2));
}
.vault__segments span.is-on i{
  background:
    radial-gradient(circle at 30% 26%,rgba(255,255,255,.7),transparent 38%),
    radial-gradient(circle at 50% 58%,#a5f3fc,#22d3ee 40%,#2563eb 70%,#1e3a8a);
  box-shadow:
    0 0 calc(14px + var(--fill,0) * 22px) rgba(34,211,238,calc(.35 + var(--fill,0) * .4)),
    0 0 calc(6px + var(--fill,0) * 12px) rgba(103,232,249,.55),
    5px 6px 12px rgba(0,0,0,.45),
    inset 2px 2px 4px rgba(255,255,255,.45);
}
.vault__segments span.is-full i{
  transform:scale(1.2);
  animation:orbPulse 2s ease-in-out infinite;
}
.vault__segments span.is-ping i{animation:orbPing .45s var(--ease)}

.vault__input{
  position:relative;overflow:hidden;
  border-radius:18px;
  background:var(--panel-in);
  border:none;
  box-shadow:var(--neo-in);
  transition:box-shadow .4s var(--ease),transform .25s var(--ease);
}
.vault.is-focused .vault__input,
.vault.is-active .vault__input{
  box-shadow:
    inset 10px 10px 20px rgba(0,0,0,.75),
    inset -6px -6px 16px rgba(34,211,238,.12),
    0 0 0 1px rgba(34,211,238,.16);
}
.vault.is-typing .vault__input{transform:scale(1.012)}
.vault.is-success .vault__input{
  box-shadow:var(--neo-in),0 0 32px rgba(74,222,128,.22);
}

.vault__shine{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(165,243,252,.07) 50%,transparent 62%);
  transform:translateX(-120%);
}
.vault.is-focused .vault__shine{animation:shineSweep 2.4s ease-in-out infinite}

.vault__scan{
  position:absolute;left:0;right:0;top:0;height:2px;z-index:2;
  background:linear-gradient(90deg,transparent,#67e8f9,#e0f2fe,transparent);
  opacity:0;pointer-events:none;
  box-shadow:0 0 18px rgba(34,211,238,.7);
}
.vault.is-loading .vault__scan{opacity:1;animation:scanLine 1.2s ease-in-out infinite}

.vault__field{
  width:100%;min-height:56px;
  background:transparent;border:none;outline:none;
  color:var(--cream);
  padding:0 56px 0 20px;
  font-family:ui-monospace,'Cascadia Code','Consolas',monospace;
  font-size:clamp(14px,3.6vw,16px);
  font-weight:500;letter-spacing:.28em;
  text-transform:uppercase;
  position:relative;z-index:1;
  text-align:center;
  caret-color:#67e8f9;
  transition:color .25s ease,text-shadow .25s ease,letter-spacing .35s var(--ease);
}
.vault.is-focused .vault__field{letter-spacing:.32em;text-shadow:0 0 18px rgba(34,211,238,.2)}
.vault__field::placeholder{color:rgba(148,163,184,.28);letter-spacing:.35em}
.vault__field:disabled{opacity:.45;cursor:wait}
.vault__field:disabled ~ .vault__eye{opacity:0;pointer-events:none}
.vault__field.error{color:#fecaca;text-shadow:0 0 16px rgba(248,113,113,.35)}
.vault__field.success{color:#bbf7d0;text-shadow:0 0 20px rgba(74,222,128,.4)}
.vault__field.is-shake{animation:shake .35s ease}

.vault__eye{
  position:absolute;right:8px;top:50%;transform:translateY(-50%);z-index:2;
  width:40px;height:40px;border:none;cursor:pointer;
  color:rgba(148,163,184,.7);
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:linear-gradient(155deg,var(--panel-hi),var(--panel));
  box-shadow:var(--neo-out-sm);
  transition:color .2s ease,box-shadow .25s var(--ease),transform .15s ease;
}
.vault__eye:hover{
  color:#a5f3fc;
  box-shadow:var(--neo-out-md),0 0 16px rgba(34,211,238,.2);
}
.vault__eye:active{
  box-shadow:var(--neo-in-sm);
  transform:translateY(-50%) scale(.94);
}
.vault__eye:focus-visible{outline:2px solid rgba(34,211,238,.7);outline-offset:2px}
.vault__eye svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.vault__eye .ico-eye-off{display:none}
.vault__eye.is-visible .ico-eye{display:none}
.vault__eye.is-visible .ico-eye-off{display:block}

.vault__loader{
  position:absolute;right:14px;top:50%;width:22px;height:22px;margin-top:-11px;z-index:2;
  border:2px solid rgba(255,255,255,.1);
  border-top-color:#67e8f9;border-right-color:#60a5fa;
  border-radius:50%;animation:spin .6s linear infinite;
  box-shadow:0 0 16px rgba(34,211,238,.4);
  pointer-events:none;
}
.vault__field:not(:disabled) ~ .vault__loader{display:none}

.auth-err{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--err);text-align:center;
  margin-bottom:12px;line-height:1.5;
  display:none;
  text-shadow:0 0 12px rgba(248,113,113,.35);
}
.auth-err.show{display:block;animation:errIn .3s ease,glitchText .4s steps(2) 1}

.vault.is-shake{animation:shake .35s ease,vaultGlitch .4s steps(2)}

.vault__meta{
  margin-top:18px;padding:0 4px;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  text-align:center;
}
.vault__trust{
  font-size:11px;line-height:1.45;letter-spacing:.03em;
  color:rgba(186,200,220,.5);
  font-family:ui-monospace,'Cascadia Code',monospace;
  transition:color .3s ease;
}
.vault.is-focused .vault__trust{color:rgba(186,230,253,.65)}
.vault__domain{
  color:rgba(103,232,249,.75);
  font-size:10px;letter-spacing:.05em;
}
.vault__hint{
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(148,163,184,.42);
}
.vault__hint kbd{
  display:inline-block;min-width:3.4em;padding:6px 12px;margin-right:4px;
  font-family:ui-monospace,'Cascadia Code',monospace;font-size:9px;
  font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(226,243,255,.9);
  background:linear-gradient(155deg,var(--panel-hi),var(--panel));
  border:none;border-radius:10px;
  box-shadow:var(--neo-out-sm);
  transition:box-shadow .2s ease,transform .15s ease,color .2s ease;
}
.vault__hint.is-press kbd,
.vault__hint kbd:active{
  box-shadow:var(--neo-in-sm);
  transform:translateY(1px);
  color:#a5f3fc;
}
.vault.is-ready-submit .vault__hint kbd{
  color:#a5f3fc;
  box-shadow:var(--neo-out-sm),0 0 14px rgba(34,211,238,.25);
  animation:kbdReady 1.6s ease-in-out infinite;
}

.auth-footer{
  position:absolute;left:0;right:0;bottom:clamp(16px,3vh,28px);
  margin-top:0;
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(148,163,184,.42);
}
.auth-footer a{
  color:rgba(103,232,249,.4);text-decoration:none;
  transition:color .2s ease,text-shadow .2s ease;
}
.auth-footer a:hover{color:rgba(165,243,252,.85);text-shadow:0 0 12px rgba(34,211,238,.4)}
.auth-footer span::after{content:'·';margin-left:10px;opacity:.5}

/* ── Keyframes ── */
@keyframes fadeUp{to{opacity:1;transform:translate(-50%,0)}}
@keyframes fadeIn{to{opacity:1}}
@keyframes brandFlicker{
  0%,100%{
    opacity:1;
    filter:brightness(1) saturate(1);
    text-shadow:
      0 0 12px rgba(34,211,238,.45),
      0 0 36px rgba(34,211,238,.35),
      0 0 72px rgba(59,130,246,.22),
      0 2px 0 rgba(0,0,0,.35);
  }
  8%{opacity:.92;filter:brightness(1.08)}
  12%{opacity:1;filter:brightness(.95)}
  18%{
    opacity:1;
    filter:brightness(1.18) saturate(1.15);
    text-shadow:
      0 0 18px rgba(34,211,238,.65),
      0 0 44px rgba(34,211,238,.45),
      0 0 80px rgba(59,130,246,.3),
      0 2px 0 rgba(0,0,0,.35);
  }
  42%{opacity:.97;filter:brightness(1.02)}
  55%{
    opacity:1;
    filter:brightness(1.12) saturate(1.1);
    text-shadow:
      0 0 16px rgba(103,232,249,.55),
      0 0 40px rgba(34,211,238,.4),
      0 0 76px rgba(59,130,246,.26),
      0 2px 0 rgba(0,0,0,.35);
  }
  70%{opacity:.94;filter:brightness(.98)}
  78%{opacity:1;filter:brightness(1.2) saturate(1.2)}
  86%{opacity:.96;filter:brightness(1.05)}
}
@keyframes gridDrift{to{background-position:48px 48px}}
@keyframes ringsIn{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes ringRotate{to{transform:rotate(360deg)}}
@keyframes ringPulse{0%,100%{opacity:.4}50%{opacity:.9}}
@keyframes monoIn{
  to{
    opacity:1;
    transform:translate(calc(var(--ptr-x) * 6px),calc(var(--ptr-y) * 4px)) scale(1);
  }
}
@keyframes monoFloat{
  0%,100%{transform:translate(calc(var(--ptr-x) * 6px),calc(var(--ptr-y) * 4px)) scale(1)}
  50%{transform:translate(calc(var(--ptr-x) * 6px),calc(var(--ptr-y) * 4px - 6px)) scale(1.02)}
}
@keyframes sheenPulse{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes heroIn{to{opacity:1;transform:translateY(0)}}
@keyframes vaultIn{to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes vaultOut{to{opacity:0;transform:translateY(12px) scale(.97);filter:blur(10px)}}
@keyframes vaultPulse{
  0%{transform:translate3d(0,0,0) scale(1)}
  40%{transform:translate3d(0,0,0) scale(1.01)}
  100%{transform:translate3d(0,0,0) scale(1)}
}
@keyframes vaultGlitch{
  0%,100%{filter:none}
  30%{filter:hue-rotate(20deg) saturate(1.4)}
  60%{filter:hue-rotate(-15deg)}
}
@keyframes sceneOut{to{opacity:0;transform:scale(1.04);filter:blur(12px)}}
@keyframes shineSweep{0%{transform:translateX(-120%)}50%,100%{transform:translateX(120%)}}
@keyframes scanLine{0%{top:0;opacity:0}10%{opacity:1}90%{opacity:1}100%{top:100%;opacity:0}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes errIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
@keyframes glitchText{
  0%,100%{transform:translate(0)}
  25%{transform:translate(-2px,1px)}
  50%{transform:translate(2px,-1px)}
  75%{transform:translate(-1px,0)}
}
@keyframes orbPulse{
  0%,100%{box-shadow:0 0 28px rgba(34,211,238,.7),0 0 12px rgba(165,243,252,.7),5px 6px 12px rgba(0,0,0,.4),inset 2px 2px 5px rgba(255,255,255,.5)}
  50%{box-shadow:0 0 40px rgba(34,211,238,.9),0 0 18px rgba(165,243,252,.9),5px 6px 12px rgba(0,0,0,.4),inset 2px 2px 5px rgba(255,255,255,.6)}
}
@keyframes orbPing{
  0%{transform:scale(.9);filter:brightness(1)}
  40%{transform:scale(1.28);filter:brightness(1.35)}
  100%{transform:scale(1.12);filter:brightness(1.1)}
}
@keyframes kbdReady{
  0%,100%{box-shadow:var(--neo-out-sm),0 0 10px rgba(34,211,238,.2)}
  50%{box-shadow:var(--neo-out-sm),0 0 18px rgba(34,211,238,.4)}
}

@media(max-width:900px){
  .auth-stage{
    justify-content:center;
    padding:clamp(40px,6vh,64px) 16px clamp(52px,8vh,72px);
    gap:clamp(14px,3vh,24px);
  }
  .auth-rings{top:40%;width:min(70vw,320px);opacity:.45}
  .auth-monolith{width:min(46vw,170px)}
  .auth-index{font-size:clamp(2.2rem,12vw,3.6rem)}
  .auth-meta{display:none}
  .auth-typo-line--ghost{font-size:clamp(4.2rem,17vw,9rem)}
  .vault{border-radius:26px;padding:22px 16px 16px;transform:none!important}
}

@media(prefers-reduced-motion:reduce){
  .auth-canvas,.auth-cyber,.auth-scanlines{display:none}
  .auth-index,.auth-meta,.auth-typo-line,.auth-rings,.auth-monolith,.auth-hero,
  .vault,.vault__scan,.vault__shine,.vault__loader,.auth-scene.is-ready .auth-rings,
  .vault__segments span.is-full i,.vault__hint kbd{
    animation:none!important;
  }
  .auth-index,.auth-meta{opacity:1;transform:translateX(-50%)}
  .auth-typo-line,.auth-rings,.auth-monolith,.auth-hero,.vault{opacity:1}
  .auth-monolith{transform:none}
  .auth-rings{transform:translate(-50%,-50%)}
  .auth-hero,.vault{transform:none}
  .vault.is-exit,.auth-scene.is-exit{animation:none!important}
  .vault__field.is-shake,.vault.is-shake,.vault.is-typing{animation:none!important}
}