/* Global layout */
@font-face{
	font-family:'Glass TTY VT220';
	src:url('../Glass_TTY_VT220.woff2') format('woff2'),
		url('../Glass_TTY_VT220.woff') format('woff'),
		url('../Glass_TTY_VT220.ttf') format('truetype');
	font-weight:400;
	font-style:normal;
	font-display:swap;
}
html, body {
	margin: 0;
	padding: 0;
	height: 100%;
	background: #000;
	color: #fff;
	overflow: hidden; /* keep scene full-screen; no native scroll */
	font-family: 'Glass TTY VT220', Roboto, 'IBM Plex Mono', ui-monospace, monospace;
}

/* Do not apply VT220 to buttons/interactive controls */
button, .sv-btn, .sv-btn *, a.sv-btn, a[role="button"], .btn {
	font-family: Roboto, 'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Arial, sans-serif !important;
}

/* Subtle radial vignette: black center to deeper black edges */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(ellipse at center, rgba(0,0,0,0) 40%, rgba(0,0,0,0.6) 100%);
	z-index: 1;
}

#scene {
	display: block;
	width: 100vw;
	height: 100vh;
}

/* Debug overlay hook (disabled by default) */
.debug-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	color: #0f0;
	font: 12px/1.4 monospace;
	padding: 8px;
	box-sizing: border-box;
	background: rgba(0,0,0,0.35);
	z-index: 2;
	display: none; /* enable if needed */
}

/* Fallback message for missing assets etc */
#fallback {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-family: monospace;
    z-index: 1000;
}

.noscript, .noscript-overlay .noscript {
    position: fixed;
    inset: 0;
    background: #000;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    font-family: monospace;
    z-index: 2000;
}
.noscript-overlay{ position:fixed; inset:0; z-index:1999;}


/* Center stage for the title */
.stage{
  position:fixed; inset:0; display:grid; place-items:center;
  perspective:1000px;
  filter:contrast(1.05) brightness(0.92);
  /* capture touch to drive slides, not page scroll */
  touch-action: none; /* hint to browsers: prevent native panning/zoom */
}

/* Edge iOS fix: also disable touch action on canvas explicitly */
#scene{ touch-action: none; }


/* Title with layered chromatic aberration + glitch from text.html */
.title{
  position:relative;
  font-size: clamp(14px, 3.5vw, 55px);
  line-height:1.02;
  text-align:center;
  max-width:min(90vw, 1100px);
  padding:0 1rem;
  font-family: 'VT323', monospace;
  text-transform:none;
  text-shadow:0 0 .4rem rgba(255,255,255,.08), 0 0 1.2rem rgba(255,255,255,.05);
  transform: translateZ(0);
  will-change: filter, transform;
  animation:faintPulse 6s ease-in-out infinite;
}
.title::before,.title::after{
  content:attr(data-text);
  position:absolute; inset:0; pointer-events:none;
  mix-blend-mode:screen; opacity:.8;
}
.title::before{ color:rgba(0,255,255,.35); transform:translate(-.8px,-.6px); filter:blur(.3px); }
.title::after { color:rgba(255,0,180,.30); transform:translate(.9px,.8px);  filter:blur(.35px); }

/* Occasional scanline shimmer across the title */
.title{ 
  --gl:linear-gradient(transparent 0 48%, rgba(255,255,255,.06) 49%, transparent 50%);
  background:
    repeating-linear-gradient( to bottom, rgba(16,255,16,.055) 0 2px, rgba(0,0,0,.0) 2px 4px),
    var(--gl);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  opacity: 1; /* will be animated via GSAP when needed */
}

/* Spectral whisper link (text-only) */
.cta-ghost{
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  font-family: 'VT323', monospace;
  font-size: clamp(16px, 4.2vw, 42px);
  color: rgba(230,230,230,0.85);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: filter .25s ease, text-shadow .2s ease, transform .15s ease;
  will-change: filter, text-shadow, transform;
  display: none; /* hidden by default; shown in scene 3 */
  opacity: 0;
  /* Mobile touch target */
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cta-ghost::before, .cta-ghost::after{
  content: attr(data-text);
  position: absolute; inset: 0; pointer-events: none;
  mix-blend-mode: screen;
  opacity: .75;
  filter: blur(.25px);
}
@media (max-width: 768px){
  .cta-ghost::before, .cta-ghost::after{ display:none; }
}
.cta-ghost::before{ color: rgba(0,255,255,.5); transform: translate(-1px,-.8px); }
.cta-ghost::after { color: rgba(255,0,180,.45); transform: translate(1px,.9px); }
.cta-ghost:hover{ filter: brightness(1.06) contrast(1.06); text-shadow: 0 0 8px rgba(200,255,220,.14); }
.cta-ghost:active{ transform: translate(-50%, 0) scale(.98); }

/* ghost-gate removed */

/* Hint that it's clickable without a box */
.cta-ghost .cta-thread{
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(120,255,220,.0) 0%, rgba(120,255,220,.6) 40%, rgba(57,255,20,.7) 60%, rgba(120,255,220,.0) 100%);
  transform: translateX(-50%);
  box-shadow: 0 0 6px rgba(57,255,20,.18);
  animation: threadIdle 2.4s ease-in-out infinite;
}

@keyframes threadIdle{
  0%{ width: 0%; opacity: .0 }
  35%{ width: 30%; opacity: .7 }
  55%{ width: 55%; opacity: .85 }
  100%{ width: 0%; opacity: 0 }
}

.cta-ghost:hover .cta-thread{ animation: threadHover .5s ease forwards; }
@keyframes threadHover{
  0%{ width: 0%; opacity:.0 }
  100%{ width: 65%; opacity:.95 }
}

/* Glitch pulse without moving the button */
.cta-ghost.glitch{ text-shadow: 0 0 10px rgba(160,255,230,.18); }
.cta-ghost.glitch::before{ animation: ctaGlitchC 0.18s steps(2) 2; }
.cta-ghost.glitch::after { animation: ctaGlitchM 0.18s steps(2) 2; }

@keyframes ctaGlitchC{
  0%{ transform: translate(-1px,-.8px); filter: blur(.25px) saturate(1); }
  25%{ transform: translate(-3px,-.2px); filter: blur(.3px) saturate(1.1); }
  50%{ transform: translate(-.6px,-1.6px); filter: blur(.35px) saturate(1.1); }
  75%{ transform: translate(-2.2px,.6px); filter: blur(.25px) saturate(1); }
  100%{ transform: translate(-1px,-.8px); filter: blur(.25px) saturate(1); }
}
@keyframes ctaGlitchM{
  0%{ transform: translate(1px,.9px); filter: blur(.25px) saturate(1); }
  25%{ transform: translate(2.6px,1.8px); filter: blur(.34px) saturate(1.1); }
  50%{ transform: translate(.4px,2.2px); filter: blur(.3px) saturate(1); }
  75%{ transform: translate(2px,.3px); filter: blur(.35px) saturate(1.1); }
  100%{ transform: translate(1px,.9px); filter: blur(.25px) saturate(1); }
}

@media (prefers-reduced-motion: reduce){
  .cta-ghost{ transition: none }
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .stage{ place-items:center; }
  .title{ font-size: clamp(18px, 6vw, 34px); padding: 0 0.25rem; max-width: 90vw; }
  .cta-ghost{ font-size: clamp(16px, 5vw, 28px); min-height: 48px; padding: 8px 16px; }
  
  /* Reduce parallax on mobile for better performance */
  .title::before{ transform: translate(-.4px,-.3px); }
  .title::after { transform: translate(.45px,.4px); }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .cta-ghost:hover{ filter: none; }
  .cta-ghost:active{ filter: brightness(1.06) contrast(1.06); }
}

/* Keyframes from text.html */
@keyframes faintPulse{ 0%,100%{filter:brightness(.95) contrast(1)} 50%{filter:brightness(1.06) contrast(1.05)} }
@keyframes quake{ 0%,100%{ transform:translate3d(0,0,0) } 20%{ transform:translate3d(-1px,1px,0) rotate(.05deg) } 40%{ transform:translate3d(2px,-1px,0) rotate(-.06deg) } 60%{ transform:translate3d(-1px,1px,0) } 80%{ transform:translate3d(1px,0,0) } }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .title{ animation:none }
}

/* --- VHS OS --- */
#vhs-os { position: fixed; inset: 0; display: grid; place-items: center; z-index: 6; background: rgba(0,0,0,.65); }
#vhs-os[hidden]{ display:none }
.vhs-wrap { width: 80vw; height: 80vh; position: relative; }
@media (max-width: 768px){ .vhs-wrap{ width: 96vw; height: 80vh; } }
.vhs-bezel { position: absolute; inset: 0; background: #0a0a0a; border-radius: 18px; overflow: hidden;
    box-shadow: 0 16px 60px rgba(0,0,0,.8), inset 0 0 50px rgba(0,0,0,.85), inset 0 0 120px rgba(0,0,0,.6);
    border: 1px solid rgba(255,255,255,.035);
}
#vhs-video { position: absolute; left:4%; right:4%; top:6%; bottom:20%; width:auto; height:auto; max-width:92%; max-height:74%; object-fit: cover;
    filter: contrast(1.05) brightness(.94) saturate(.9);
}
.vhs-curvature { position:absolute; left:4%; right:4%; top:6%; bottom:20%; pointer-events:none;
    background: radial-gradient(160% 120% at 50% 40%, rgba(255,255,255,.035), rgba(255,255,255,0) 55%),
                radial-gradient(190% 130% at 50% 40%, rgba(255,255,255,.03), rgba(255,255,255,0) 55%);
    mix-blend-mode: screen; opacity:.8;
}
/* Fix noise texture path and stacking */
.vhs-noise { position:absolute; left:4%; right:4%; top:6%; bottom:20%; pointer-events:none;
    background-image: url('../assets/textures/noise_grain.png'); background-size: 300px 300px; opacity:.12; mix-blend-mode: screen; animation:vhsGrain 7s linear infinite; z-index:2 }
#vhs-video { z-index:1 }
.vhs-curvature{ z-index:2 }
.vhs-scan{ z-index:2 }
.vhs-vignette{ z-index:3 }
.vhs-ui{ z-index:4 }
.vhs-scan { position:absolute; left:4%; right:4%; top:6%; bottom:20%; pointer-events:none;
    background: repeating-linear-gradient(to bottom, rgba(16,255,16,.055) 0 2px, rgba(0,0,0,0) 3px 4px);
    mix-blend-mode: overlay; opacity:.6; animation:vhsScan 8s linear infinite;
}
@keyframes vhsScan{ from{ background-position-y:0 } to{ background-position-y:4px } }
.vhs-vignette { position:absolute; inset:0; pointer-events:none; background: radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,0) 50%, rgba(0,0,0,.7) 100%); }
.vhs-ui { position:absolute; left:4%; right:4%; bottom:6%; color:#cfe6cf; font-family:'VT323', monospace; text-shadow:0 0 8px rgba(120,255,220,.15), 1px 1px 0 rgba(0,0,0,.8); }
.vhs-title { opacity:.85; letter-spacing:.04em; margin-bottom:.4rem; }
.vhs-console { display:flex; align-items:center; gap:.4rem; margin-bottom:.5rem; }
.vhs-console .prompt{ color:#7fff7f }
#vhs-input { flex:1; font:20px 'VT323', monospace; color:#cfe6cf; background:rgba(10,10,10,.7); border:1px solid rgba(120,255,220,.2); border-radius:8px; padding:.25rem .5rem; outline:none; }
.vhs-controls{ display:flex; gap:.4rem }
.vhs-btn{ font:18px 'VT323', monospace; color:#dfe; background:rgba(20,20,20,.6); border:1px solid rgba(120,255,220,.35); padding:.25rem .6rem; border-radius:8px; }
.vhs-btn:hover{ filter:brightness(1.06) contrast(1.06) }
.vhs-timecode{ position:absolute; right:6%; top:5.5%; color:#7fff7f; opacity:.75 }
/* --- end VHS OS --- */

/* VHS page background with cryptic messages */
#vhs-bg{ position:fixed; inset:0; background: radial-gradient(1200px 700px at 50% 55%, rgba(0,0,0,.3), rgba(0,0,0,.95)); z-index:1 }
#vhsCryptic{ position:fixed; inset:0; width:100vw; height:100vh; z-index:2; pointer-events:none; mix-blend-mode:screen; opacity:.25 }

/* Enhance bezel realism */
.vhs-bezel{ background: linear-gradient(180deg, #0d0d0d, #080808 58%, #0e0e0e 100%);
	position: relative;
}
.vhs-bezel::before{ content:""; position:absolute; inset:0; pointer-events:none; background:
	radial-gradient(140% 120% at 50% 35%, rgba(255,255,255,.04), rgba(255,255,255,0) 60%),
	linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0)); mix-blend-mode:screen; opacity:.7 }
.vhs-bezel::after{ content:""; position:absolute; left:2%; right:2%; top:3.5%; bottom:18.5%; border-radius:12px; box-shadow: inset 0 0 24px rgba(0,0,0,.65); pointer-events:none }

/* Info panel on the right */
#vhs-info{ position:absolute; right:4%; top:14%; width:28%; height:62%; overflow:auto; padding:.6rem .8rem; font:18px 'VT323', monospace; color:#cfe6cf; border:1px solid rgba(120,255,220,.2); border-radius:10px; background: rgba(10,10,10,.5); backdrop-filter: blur(2px); box-shadow: inset 0 0 12px rgba(0,0,0,.6) }
#vhs-info h3{ margin:.2rem 0 .4rem; color:#7fff7f }
#vhs-info p{ margin:.2rem 0 .6rem; line-height:1.2 }

/* Timecode glow */
.vhs-timecode{ text-shadow: 0 0 12px rgba(128,255,210,.25) }