/* H7V OFFICIAL — gate.css
   Owns ALL #gate / .gate-inner / .gate-mark / .gate-kick / .gate-title / .gate-field /
   #gate-input / #gate-go / .gate-msg / #gate-fx / #pow / .pow-burst / .pow-word visuals
   + every keyframe (shake, powslam, flash, burst, gate fade-out).
   Comic-book lock screen: thick outlines, halftone, flag-colour accents, big display title. */

/* ============ LOCK SCREEN ============ */
#gate{
  position:fixed; inset:0; z-index:200;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(14px,3.4vw,26px);
  padding:24px;
  text-align:center;
  overflow:hidden;
  color:var(--ink,#f6f7ff);
  background:
    radial-gradient(120% 80% at 50% 6%,  rgba(0,229,255,.12), transparent 56%),
    radial-gradient(120% 90% at 50% 104%, rgba(255,224,0,.09), transparent 56%),
    radial-gradient(circle, rgba(255,255,255,.05) 1px, transparent 1.6px) 0 0/12px 12px,
    var(--bg,#0a0a12);
  will-change:opacity, transform;
  transform-origin:50% 46%;
}
/* faint comic starburst behind the panel */
#gate::before{
  content:""; position:absolute; left:50%; top:46%;
  width:170vmax; height:170vmax; transform:translate(-50%,-50%);
  z-index:0; pointer-events:none; opacity:.05;
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    var(--cyan,#00e5ff) 0deg 6deg, transparent 6deg 12deg);
}

/* injected comic plug-spark explosion clip (primary backdrop) */
#gate-bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; pointer-events:none;
  filter:brightness(.7) saturate(1.2) contrast(1.06);
  transition:filter .5s ease;
}
/* dark scrim above the video so the form stays legible (lighter — let the clip read) */
#gate::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(120% 95% at 50% 50%, transparent 0%, rgba(10,10,18,.34) 66%, rgba(10,10,18,.62) 100%),
    linear-gradient(180deg, rgba(10,10,18,.34), rgba(10,10,18,.12) 42%, rgba(10,10,18,.44));
}
/* when the clip is live, tone the static starburst down */
#gate.has-bg::before{ opacity:.025; }

#gate-fx{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:1; pointer-events:none; opacity:.92;
}

/* ============ CRT / ARCADE OVERLAY (injected) ============ */
.gate-scan{
  position:absolute; inset:0; z-index:2; pointer-events:none; overflow:hidden;
  opacity:.55;
  background:
    repeating-linear-gradient(to bottom,
      rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px,
      rgba(0,0,0,.34) 3px, rgba(0,0,0,0) 4px);
  animation:gateflick 3.4s steps(2,end) infinite;
}
/* slow bright "roll" bar sweeping down the tube */
.gate-scan::after{
  content:""; position:absolute; left:0; right:0; top:-26%;
  height:22%;
  background:linear-gradient(to bottom, rgba(0,229,255,0), rgba(0,229,255,.10) 45%, rgba(255,255,255,.05) 55%, rgba(0,229,255,0));
  animation:gateroll 7.5s linear infinite;
  will-change:transform;
}
@keyframes gateflick{ 0%,100%{ opacity:.55; } 50%{ opacity:.42; } }
@keyframes gateroll{ 0%{ transform:translateY(0); } 100%{ transform:translateY(620%); } }

/* ============ PANEL ============ */
.gate-inner{
  position:relative; z-index:3;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(12px,2.6vw,20px);
  width:min(90vw,412px);
  padding:clamp(20px,5vw,34px) clamp(16px,4.2vw,28px);
  background:var(--panel2,#1b1930);
  border:3px solid var(--ol,#05060a);
  border-radius:var(--radius,16px);
  box-shadow:8px 8px 0 var(--ol,#05060a), 0 30px 60px -30px #000;
  transform:rotate(-1deg);
  transform-origin:50% 50%;
  /* hold back ~1.8s so the backdrop clip plays first, then slam the panel in */
  animation:gatecardin .7s cubic-bezier(.2,1.35,.4,1) 1.8s both;
}
@keyframes gatecardin{
  0%{   opacity:0; transform:rotate(-1deg) scale(.6); }
  55%{  opacity:1; transform:rotate(-1deg) scale(1.06); }
  100%{ opacity:1; transform:rotate(-1deg) scale(1); }
}

/* little promo line under the panel */
.gate-foot{
  position:relative; z-index:3; max-width:min(90vw,360px);
  font-family:var(--f-mono,ui-monospace,monospace);
  font-size:clamp(.62rem,2.7vw,.76rem); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; line-height:1.5;
  color:var(--cyan,#00e5ff);
  text-shadow:0 0 12px rgba(0,229,255,.45), 1px 1px 0 var(--ol,#05060a);
  opacity:0;
  animation:gatefootin .6s ease 2.5s both;
}
@keyframes gatefootin{ from{ opacity:0; transform:translateY(6px); } to{ opacity:.92; transform:none; } }

/* ============ ENTRY WARP (warp.js) ============
   Neon hyperspace tunnel ignites BEHIND the centred card, the card dives in,
   then #warp-flash whites out and hands off to the site. */
#warp{
  position:absolute; inset:0; z-index:2;     /* above bg/scrim (z0-1), behind card (z3) */
  pointer-events:none; opacity:1;
}
#warp-flash{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  background:#fff; opacity:0; transition:opacity .6s ease;
}
/* the centred login card flies into the tunnel */
#gate.warping .gate-inner{
  animation:cardwarp 2.2s cubic-bezier(.5,0,.85,.25) both;
  will-change:transform, opacity, filter;
}
@keyframes cardwarp{
  0%{   transform:rotate(-1deg) scale(1);   opacity:1; filter:blur(0); }
  14%{  transform:rotate(0deg) scale(.95);  opacity:1; }      /* charge / pull-back */
  100%{ transform:rotate(0deg) scale(2.6);  opacity:0; filter:blur(7px); }  /* dive at viewer */
}
/* clear the chrome + the redundant comic burst the moment the warp starts */
#gate.warping .gate-foot,
#gate.warping .gate-scan,
#gate.warping .gate-cue{ opacity:0 !important; transition:opacity .25s ease; }
#gate.warping .pow-burst{ display:none; }

.gate-mark{
  display:block; width:clamp(78px,18vw,104px); aspect-ratio:1/1;
  border-radius:50%; overflow:hidden; background:#000;
  border:3px solid var(--ol,#05060a);
  box-shadow:6px 6px 0 var(--ol,#05060a);
  transform:rotate(2deg);
  animation:gatefloat 5s ease-in-out infinite;
}
.gate-mark img{ width:100%; height:100%; object-fit:cover; display:block; }

.gate-kick{
  font-family:var(--f-mono,ui-monospace,monospace);
  font-size:clamp(.56rem,2.5vw,.72rem); font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; line-height:1.2;
  color:var(--ink-on,#0a0a12);
  background:var(--cyan,#00e5ff);
  border:2.5px solid var(--ol,#05060a); border-radius:999px;
  padding:6px 14px;
  box-shadow:4px 4px 0 var(--ol,#05060a);
  transform:rotate(-1.5deg);
}

.gate-title{
  margin:2px 0 4px;
  font-family:var(--f-display,'Bangers',sans-serif);
  font-weight:400; line-height:.84; letter-spacing:1px;
  font-size:clamp(2.6rem,13vw,4.4rem);
  color:var(--yellow,#ffe000);
  -webkit-text-stroke:2.5px var(--ol,#05060a);
  text-shadow:5px 5px 0 var(--ol,#05060a);
  display:flex; flex-direction:column; align-items:center;
}
.gate-title span{
  display:block; font-size:.6em;
  color:var(--cyan,#00e5ff);
  -webkit-text-stroke:2.5px var(--ol,#05060a);
}

/* real client logo as the title screen mark (replaces written title) */
.gate-logo{
  margin:0; width:100%; max-width:330px;
  border-radius:14px; overflow:hidden;
  padding:10px 8px;
  background:
    radial-gradient(120% 100% at 50% 28%, rgba(0,229,255,.12), transparent 60%),
    var(--bg,#0a0a12);
  border:3px solid var(--ol,#05060a);
  box-shadow:6px 6px 0 var(--ol,#05060a), inset 0 0 44px -12px rgba(0,0,0,.85);
  transform:rotate(1deg);
  animation:gatelogo 5.2s ease-in-out infinite;
}
.gate-logo img{
  display:block; width:100%; height:auto;
  filter:drop-shadow(0 3px 9px rgba(0,0,0,.6));
}
@keyframes gatelogo{
  0%,100%{ transform:rotate(1deg) translateY(0); }
  50%{ transform:rotate(1deg) translateY(-6px); }
}

/* ============ FORM ============ */
#gate-form{ width:100%; display:flex; flex-direction:column; gap:12px; }
.gate-field{ display:flex; gap:10px; width:100%; }

#gate-input{
  flex:1 1 auto; min-width:0; height:54px; padding:0 16px;
  font-family:var(--f-mono,ui-monospace,monospace);
  font-size:1.02rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink,#f6f7ff);
  background:var(--bg,#0a0a12);
  border:3px solid var(--ol,#05060a); border-radius:12px;
  box-shadow:inset 3px 3px 0 rgba(0,0,0,.45);
  -webkit-appearance:none; appearance:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
#gate-input::placeholder{ color:var(--ink-mute,#7d83a3); letter-spacing:.16em; opacity:1; }
#gate-input:focus{
  outline:none; border-color:var(--cyan,#00e5ff);
  box-shadow:0 0 0 3px rgba(0,229,255,.35), 0 0 22px -2px rgba(0,229,255,.5), 4px 4px 0 var(--ol,#05060a);
}

#gate-go{
  flex:0 0 auto; height:54px; min-width:48px; padding:0 22px;
  font-family:var(--f-display,'Bangers',sans-serif);
  font-weight:400; font-size:1.34rem; letter-spacing:1px;
  color:var(--ink-on,#0a0a12);
  background:linear-gradient(180deg, var(--yellow,#ffe000), #f5c400);
  border:3px solid var(--ol,#05060a); border-radius:12px;
  box-shadow:5px 5px 0 var(--ol,#05060a);
  cursor:pointer; white-space:nowrap;
  transition:transform .07s ease, box-shadow .07s ease, background .15s ease, filter .15s ease;
}
#gate-go::before{ content:"\25B6\00a0"; font-size:.78em; vertical-align:.04em; }
#gate-go:hover{ background:linear-gradient(180deg, var(--cyan,#00e5ff), var(--cyan-2,#22b8ff)); }
#gate-go:active{ transform:translate(4px,4px) scale(.97); box-shadow:1px 1px 0 var(--ol,#05060a); filter:brightness(1.05); }

.gate-msg{
  min-height:1.1em; margin-top:2px;
  font-family:var(--f-mono,ui-monospace,monospace);
  font-size:.74rem; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:transparent;
}
.gate-msg.is-err{
  color:var(--it-red,#e23636);
  text-shadow:0 0 12px rgba(226,54,54,.6);
  animation:gateerr .42s cubic-bezier(.36,.07,.19,.97) both;
}

/* blinking arcade cue (injected) */
.gate-cue{
  margin-top:2px;
  font-family:var(--f-mono,ui-monospace,monospace);
  font-size:clamp(.6rem,2.6vw,.78rem); font-weight:800;
  letter-spacing:.2em; text-transform:uppercase; line-height:1.2;
  color:var(--yellow,#ffe000);
  text-shadow:0 0 10px rgba(255,224,0,.55), 2px 2px 0 var(--ol,#05060a);
  animation:gateblink 1.15s steps(1,end) infinite;
}
@keyframes gateblink{ 0%,54%{ opacity:1; } 55%,100%{ opacity:.12; } }

/* ============ REJECT (wrong password — GAME OVER) ============ */
.gate-inner.shake{ animation:gateshake .55s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes gateshake{
  0%,100%{ transform:rotate(-1deg) translateX(0); }
  10%{ transform:rotate(-2.2deg) translateX(-7px); }
  20%{ transform:rotate(1.6deg) translateX(8px); }
  30%{ transform:rotate(-2deg) translateX(-12px); }
  45%{ transform:rotate(2deg) translateX(11px); }
  60%{ transform:rotate(-1.6deg) translateX(-8px); }
  75%{ transform:rotate(1.2deg) translateX(5px); }
  88%{ transform:rotate(-.8deg) translateX(-3px); }
}
@keyframes gateerr{ from{ transform:translateY(-4px) scale(.92); opacity:0; } to{ transform:none; opacity:1; } }
/* red flash over the whole title screen */
#gate.reject{ animation:gatereject .42s ease both; }
@keyframes gatereject{
  0%{ box-shadow:inset 0 0 0 0 rgba(226,54,54,0); }
  22%{ box-shadow:inset 0 0 140px 26px rgba(226,54,54,.6); }
  100%{ box-shadow:inset 0 0 0 0 rgba(226,54,54,0); }
}
@keyframes gatefloat{
  0%,100%{ transform:rotate(2deg) translateY(0); }
  50%{ transform:rotate(2deg) translateY(-6px); }
}

/* ============ GATE PEEL / ZOOM-OUT ============ */
#gate.gate-out{ pointer-events:none; animation:gateout .72s cubic-bezier(.5,0,.75,0) both; }
@keyframes gateout{
  0%{ opacity:1; transform:scale(1) rotate(0); filter:blur(0); }
  100%{ opacity:0; transform:scale(1.22) rotate(1.5deg); filter:blur(3px); }
}

/* ============ COMIC POW REVEAL (LEVEL UNLOCKED) ============ */
#pow{
  position:fixed; inset:0; z-index:210; overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(8px,2vw,16px);
  pointer-events:none;
  opacity:0; visibility:hidden;
}
#pow.show{ opacity:1; visibility:visible; }
/* screen shake on the unlock moment */
#pow.show.shake{ animation:powshake .5s cubic-bezier(.36,.07,.19,.97) .38s both; }
@keyframes powshake{
  0%,100%{ transform:translate(0,0); }
  12%{ transform:translate(-9px,6px); }
  25%{ transform:translate(8px,-8px); }
  40%{ transform:translate(-10px,-5px); }
  55%{ transform:translate(9px,6px); }
  70%{ transform:translate(-6px,4px); }
  85%{ transform:translate(4px,-3px); }
}

/* starburst + halftone explosion */
.pow-burst{
  position:absolute; left:50%; top:50%;
  width:max(160vw,160vh); height:max(160vw,160vh);
  border-radius:50%;
  transform:translate(-50%,-50%) scale(0) rotate(-8deg);
  opacity:0;
  background:
    repeating-conic-gradient(from 0deg at 50% 50%, var(--yellow,#ffe000) 0deg 9deg, transparent 9deg 18deg),
    radial-gradient(circle, var(--cyan,#00e5ff) 0%, rgba(0,229,255,.55) 30%, transparent 64%);
}
.pow-burst::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle, rgba(5,6,10,.85) 1.5px, transparent 2px) 0 0/16px 16px;
  mix-blend-mode:multiply; opacity:.5;
}
#pow.show .pow-burst{ animation:powburst 1.6s cubic-bezier(.2,.85,.25,1) both; }
@keyframes powburst{
  0%{ transform:translate(-50%,-50%) scale(0) rotate(-8deg); opacity:0; }
  18%{ opacity:1; }
  55%{ transform:translate(-50%,-50%) scale(1.06) rotate(6deg); opacity:1; }
  100%{ transform:translate(-50%,-50%) scale(1) rotate(11deg); opacity:.92; }
}

/* word slams in with scale + rotate overshoot */
.pow-word{
  position:relative; z-index:2;
  font-family:var(--f-display,'Bangers',sans-serif);
  font-weight:400; line-height:.82; letter-spacing:2px;
  font-size:clamp(2.6rem,15vw,7rem);
  text-align:center; color:#fff;
  -webkit-text-stroke:clamp(2px,1vw,5px) var(--ol,#05060a);
  text-shadow:6px 6px 0 var(--ol,#05060a), 11px 11px 0 var(--cyan-2,#22b8ff);
  transform:scale(0) rotate(-14deg); opacity:0;
}
#pow.show .pow-word{ animation:powslam .92s cubic-bezier(.18,1.5,.4,1) .12s both; }
@keyframes powslam{
  0%{ transform:scale(0) rotate(-14deg); opacity:0; }
  60%{ transform:scale(1.18) rotate(5deg); opacity:1; }
  80%{ transform:scale(.94) rotate(-3deg); }
  100%{ transform:scale(1) rotate(-3deg); opacity:1; }
}

/* arcade "PLAYER 1 READY" tag (injected) */
.pow-tag{
  position:relative; z-index:2; margin-top:clamp(6px,1.5vw,12px);
  font-family:var(--f-mono,ui-monospace,monospace);
  font-weight:800; letter-spacing:.34em; text-transform:uppercase;
  font-size:clamp(.7rem,3.4vw,1.1rem);
  color:var(--cyan,#00e5ff);
  text-shadow:0 0 14px rgba(0,229,255,.7), 3px 3px 0 var(--ol,#05060a);
  transform:scale(0); opacity:0;
}
#pow.show .pow-tag{ animation:powtag .5s cubic-bezier(.2,1.4,.4,1) .55s both; }
@keyframes powtag{
  0%{ transform:scale(0); opacity:0; }
  70%{ transform:scale(1.12); opacity:1; }
  100%{ transform:scale(1); opacity:1; }
}

/* quick bright screen flash */
#pow::after{
  content:""; position:absolute; inset:0; z-index:3;
  background:#fff; opacity:0; pointer-events:none;
}
#pow.show::after{ animation:powflash .56s ease-out .4s both; }
@keyframes powflash{
  0%{ opacity:0; }
  30%{ opacity:1; }
  100%{ opacity:0; }
}

/* clear the title-screen chrome the moment the level unlocks (both paths) */
#gate.unlocking .gate-inner{ opacity:0; transition:opacity .3s ease; pointer-events:none; }
#gate.unlocking .gate-scan{ opacity:0; transition:opacity .3s ease; }
#gate.unlocking .gate-foot{ opacity:0; transition:opacity .3s ease; }

/* ============ POW VIA VIDEO ============
   When the explosion clip is the burst: brighten/raise it above the scrim,
   suppress the CSS burst so the clip reads cleanly. */
#gate.pow-vid #gate-bg{ z-index:2; filter:brightness(1.12) saturate(1.25) contrast(1.08); }
#gate.pow-vid::after{ opacity:0; transition:opacity .4s ease; }
#gate.pow-vid .pow-burst{ display:none; }

/* ============ MOBILE — full experience, thumb-sized (360–414px) ============ */
@media (max-width:480px){
  #gate{ padding:18px; }
  /* smaller, tighter panel so the backdrop clip breathes around it */
  .gate-inner{ width:min(80vw,300px); gap:10px; padding:15px 14px; }
  .gate-logo{ max-width:196px; padding:7px 5px; }
  #gate-form{ gap:10px; }
  .gate-field{ flex-direction:column; }
  #gate-input{ height:50px; font-size:.98rem; }
  #gate-go{ height:50px; width:100%; font-size:1.35rem; }
  .gate-title{ font-size:clamp(2.9rem,16vw,4rem); }
  .pow-word{ font-size:clamp(2.8rem,17vw,4.6rem); }
  /* brighter clip on phones */
  #gate-bg{ filter:brightness(.8) saturate(1.2) contrast(1.05); }
}

/* ============ REDUCED MOTION (accessibility — instant, no FX) ============ */
@media (prefers-reduced-motion: reduce){
  #gate-fx, .gate-scan, .gate-cue{ display:none; }
  .gate-mark, .gate-logo{ animation:none; }
  .gate-inner{ animation:none; opacity:1; }   /* no delayed pop — show panel immediately */
  .gate-foot{ animation:none; opacity:.92; }
  .gate-inner.shake, #gate.reject{ animation:none; }
  #pow, #pow.show, #pow.show.shake,
  #pow.show .pow-burst, #pow.show .pow-word, #pow.show .pow-tag{ animation:none; }
  #pow.show::after{ animation:none; }
  #gate.gate-out{ animation:none; opacity:0; }
  #warp, #warp-flash{ display:none; }
  #gate.warping .gate-inner{ animation:none; opacity:0; }   /* instant, no warp */
}