@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700;800&display=swap');

*{box-sizing:border-box}

html,body{
  margin:0;
  padding:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#05070d;
}

/* Blurred fill layer — same video, scaled to cover, blurred so the
   uncropped foreground video has no hard black bars around it */
.intro-video-bg{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:blur(38px) brightness(.85) saturate(1.4);
  transform:scale(1.15); /* hide blur edge softening */
  z-index:0;
}

/* Sharp, uncropped video — shows the full frame, no zoom/crop */
.intro-video-fg{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  z-index:1;
}

.intro-scrim{
  position:fixed;
  inset:0;
  z-index:1;
  background:linear-gradient(to bottom, rgba(5,7,13,.15) 0%, transparent 20%, transparent 75%, rgba(5,7,13,.55) 100%);
  pointer-events:none;
}

/* Ambient color wash — keeps the letterboxed top/bottom from
   reading as empty dead space */
.intro-glow{
  position:fixed;
  inset:0;
  z-index:0;
  background:
    radial-gradient(ellipse 700px 500px at 50% 0%, rgba(45,226,255,.16), transparent 60%),
    radial-gradient(ellipse 700px 500px at 50% 100%, rgba(123,92,255,.16), transparent 60%);
  pointer-events:none;
  animation:glowBreathe 6s ease-in-out infinite;
}
@keyframes glowBreathe{
  0%,100%{opacity:.7;}
  50%{opacity:1;}
}

.intro-brand{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:2;
  text-align:center;
  padding-top:max(28px, env(safe-area-inset-top));
  pointer-events:none;
}
.intro-brand-mark{
  font-family:'Orbitron', sans-serif;
  font-weight:800;
  font-size:19px;
  letter-spacing:.28em;
  color:#eaf6ff;
  text-shadow:0 0 18px rgba(45,226,255,.6), 0 0 36px rgba(123,92,255,.3);
}
.intro-brand-tag{
  margin-top:8px;
  font-family:'Orbitron', sans-serif;
  font-weight:500;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#9fe8ff;
  opacity:.8;
}
body.leaving .intro-brand{
  transition:opacity .4s ease;
  opacity:0;
}

/* HUD frame — corner brackets + a traveling scan line, so the
   letterboxed edges read as an intentional viewfinder, not empty space */
.hud-frame{
  position:fixed;
  inset:22px;
  z-index:2;
  pointer-events:none;
}

.hud-corner{
  position:absolute;
  width:34px;
  height:34px;
  border:2px solid rgba(45,226,255,.65);
  filter:drop-shadow(0 0 6px rgba(45,226,255,.6));
  animation:hudPulse 3.2s ease-in-out infinite;
}
.hud-corner-tl{top:0; left:0; border-right:none; border-bottom:none; border-radius:6px 0 0 0;}
.hud-corner-tr{top:0; right:0; border-left:none; border-bottom:none; border-radius:0 6px 0 0;}
.hud-corner-bl{bottom:0; left:0; border-right:none; border-top:none; border-radius:0 0 0 6px;}
.hud-corner-br{bottom:0; right:0; border-left:none; border-top:none; border-radius:0 0 6px 0;}
.hud-corner-tr,.hud-corner-br{border-color:rgba(255,46,196,.55); filter:drop-shadow(0 0 6px rgba(255,46,196,.5));}

@keyframes hudPulse{
  0%,100%{opacity:.55;}
  50%{opacity:1;}
}

.hud-scan{
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(to right, transparent, rgba(45,226,255,.9), rgba(255,46,196,.7), transparent);
  box-shadow:0 0 14px rgba(45,226,255,.7);
  animation:hudScanMove 5s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes hudScanMove{
  0%{top:0%; opacity:0;}
  8%{opacity:1;}
  46%{opacity:1;}
  50%{top:100%; opacity:0;}
  50.01%{top:0%;}
  100%{top:0%; opacity:0;}
}

body.leaving .hud-frame{
  transition:opacity .35s ease;
  opacity:0;
}

.explore-btn{
  position:fixed;
  left:50%;
  bottom:9%;
  transform:translateX(-50%);
  z-index:2;
  font-family:'Orbitron', sans-serif;
  font-weight:700;
  font-size:15px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#eaf6ff;
  background:linear-gradient(135deg, rgba(45,226,255,.9), rgba(123,92,255,.9));
  border:1px solid rgba(255,255,255,.25);
  border-radius:999px;
  padding:16px 42px;
  cursor:pointer;
  box-shadow:0 0 30px rgba(45,226,255,.55);
  animation:explorePulse 2.4s ease-in-out infinite;
  transition:transform .3s cubic-bezier(.22,1,.36,1), filter .3s ease, opacity .5s ease;
}

.explore-btn:active{
  transform:translateX(-50%) scale(.95);
}

@keyframes explorePulse{
  0%,100%{box-shadow:0 0 24px rgba(45,226,255,.45);}
  50%{box-shadow:0 0 42px rgba(45,226,255,.75), 0 0 20px rgba(255,46,196,.35);}
}

body.leaving .explore-btn{
  opacity:0;
  pointer-events:none;
}
body.leaving .intro-video-fg,
body.leaving .intro-video-bg{
  transition:opacity .5s ease;
  opacity:0;
}
body.leaving{
  background:#05070d;
}

@media (prefers-reduced-motion: reduce){
  .explore-btn{animation:none;}
}