/* =========================================================
   CRT Intro — Clean Consolidated Build
   - Bright, visible logo + halo
   - Scanlines + rolling band + static flash
   - Glitch bars + subtle jitter
   - Afterglow bursts (JS can toggle .afterglow)
   - Power OFF collapse (white line) on #crt-intro.hide
   - No duplicates / conflicts
   ========================================================= */

/* ===== Page lock while intro is active ===== */
body.intro-lock { overflow: hidden; }
body.intro-lock > *:not(#crt-intro){ visibility: hidden !important; }

/* ===== Root (customize feel here) ===== */
#crt-intro{
  --logo-nudge-y: 0%;
  --band-sweep: 4.6s;   /* slower rolling band */
  --scan-opacity: .32;  /* stronger scanlines */
  --grain-opacity: .14; /* stronger noise */

  position: fixed; inset: 0; z-index: 2147483647;
  display: grid; place-items: center;
  background: #000 radial-gradient(120% 90% at 50% 50%, #0a0a0a 0%, #000 60%);
  overflow: hidden;
  transform: translateZ(0);
  opacity: 1; visibility: visible;

  /* tiny entrance settle to avoid pop-in */
  animation: vertRoll .65s ease-out .05s 1;
}

/* ===== Power-on white line (boot) ===== */
#crt-intro::before{
  content:""; position:absolute; left:0; right:0; top:50%;
  height:2px; transform: translateY(-50%) scaleY(0.02);
  background: linear-gradient(90deg, transparent, #fff, transparent);
  box-shadow: 0 0 22px rgba(255,255,255,.9), 0 0 70px rgba(255,80,80,.45);
  opacity:0; pointer-events:none; z-index:3;
  animation: crtPowerOnLong 2.6s cubic-bezier(.2,.8,.2,1) .05s both;
}
@keyframes crtPowerOnLong{
  0%{opacity:0; transform:translateY(-50%) scaleY(0.02)}
  25%{opacity:1}
  55%{opacity:1; transform:translateY(-50%) scaleY(1)}
  70%{opacity:1; background:#fff; box-shadow:0 0 140px #fff}
  100%{opacity:0}
}

/* ===== Scanlines + rolling band + initial static flash ===== */
#crt-intro::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1;
  opacity: var(--scan-opacity);
  background-image:
    /* base scanlines */
    repeating-linear-gradient(to bottom, rgba(255,255,255,.12) 0 1px, transparent 2px 5px),
    /* rolling brightness band */
    linear-gradient(to bottom, transparent 0%, rgba(255,255,255,.06) 50%, transparent 100%),
    /* vignette */
    radial-gradient(140% 100% at 50% 50%, transparent 45%, rgba(0,0,0,.55) 100%);
  background-size: 100% 100%, 100% 220%, 100% 100%;
  background-position: 0 0, 0 -110%, 0 0;
  background-blend-mode: screen;
  animation: crtLineDrift 8s linear infinite,
             crtBand var(--band-sweep) linear infinite,
             staticFlash .35s ease .2s 1;
}
@keyframes crtLineDrift{ to { background-position: 0 6px, 0 -110%, 0 0; } }
@keyframes crtBand{ 0%{background-position:0 0,0 -110%,0 0} 100%{background-position:0 0,0 110%,0 0} }
@keyframes staticFlash{ 0%{ background-color: rgba(255,255,255,.95); opacity:1 } 100%{ background-color: transparent } }

/* ===== Logo (bright + halo + light jitter) ===== */
#crt-intro .logo{
  max-width: min(60vw, 480px); width: 100%; height: auto; opacity: 0;
  transform: translateY(var(--logo-nudge-y));
  filter:
    drop-shadow(0 0 32px rgba(255,40,40,.45))
    drop-shadow(0 0 14px rgba(255,40,40,.32))
    contrast(1.18) brightness(1.18) saturate(1.12);
  animation:
    logoFlickerStrong .6s steps(2,end) .3s 1,
    logoPop          .9s cubic-bezier(.2,.8,.2,1) .65s both,
    logoJitter       2.8s steps(2,end) infinite;
  z-index: 4;
}
@keyframes logoPop{
  0%{ opacity:0; transform: translateY(var(--logo-nudge-y)) scale(.92) }
  60%{ opacity:1; transform: translateY(var(--logo-nudge-y)) scale(1.02) }
  100%{ opacity:1; transform: translateY(var(--logo-nudge-y)) scale(1) }
}
@keyframes logoFlickerStrong{ 0%,100%{opacity:.35} 30%{opacity:1} 60%{opacity:.55} }
@keyframes logoJitter {
  10%, 12% { transform: translateX(-2px) skewX(-4deg); }
  20%, 22% { transform: translateX(2px)  skewX( 4deg); }
  50%      { transform: none; }
}

/* ===== Flare ===== */
#crt-intro .flare{
  position:absolute; inset:0; pointer-events:none; opacity:0; z-index:2;
  background: radial-gradient(circle at 50% 52%, rgba(255,90,90,.34) 0%, rgba(255,90,90,.18) 18%, transparent 65%);
  mix-blend-mode: screen;
  animation: flarePulseBoost 1.6s ease .5s both;
}
@keyframes flarePulseBoost{
  0%{opacity:0; transform:scale(.7)}
  40%{opacity:.9; transform:scale(1.2); filter:blur(3px)}
  100%{opacity:0; transform:scale(1.6); filter:blur(6px)}
}

/* ===== Grain ===== */
#crt-intro .grain{
  position:absolute; inset:-10%; pointer-events:none; z-index:0;
  background-image: url('assets/grain-texture.png'); /* ensure this path exists */
  background-size: 300px 300px;
  opacity: var(--grain-opacity);
  animation: grainShift 1s steps(3,end) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)}
  25%{transform:translate(-3%, 2%)}
  50%{transform:translate( 2%,-3%)}
  75%{transform:translate(-1%, 1%)}
  100%{transform:translate(0,0)}
}

/* ===== Glitch bars (horizontal) ===== */
#crt-intro .glitch-bars{
  position:absolute; inset:0; pointer-events:none; z-index:2;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.18) 0 1px,
      rgba(0,0,0,0)         1px 6px
    );
  mix-blend-mode: screen;
  opacity:.18;
  animation: barsGlitch 1.4s steps(3,end) infinite;
}
@keyframes barsGlitch {
  0%, 100% { transform: translateY(0); }
  45%      { transform: translateY(-4px); }
  55%      { transform: translateY(2px); }
}

/* ===== Afterglow pulse (toggle .afterglow on .logo via JS to trigger) ===== */
#crt-intro .logo.afterglow{ animation: acAfterglow .8s ease-out both; }
@keyframes acAfterglow{
  0%{
    filter:
      drop-shadow(0 0 46px rgba(255,40,40,.65))
      drop-shadow(0 0 26px rgba(255,40,40,.45))
      contrast(1.2) brightness(1.2) saturate(1.1);
  }
  100%{
    filter:
      drop-shadow(0 0 32px rgba(255,40,40,.45))
      drop-shadow(0 0 14px rgba(255,40,40,.32))
      contrast(1.18) brightness(1.18) saturate(1.12);
  }
}

/* ===== POWER OFF (when #crt-intro gets .hide) ===== */
#crt-intro.hide{ pointer-events:none; }

/* brighter, longer white line */
#crt-intro.hide::before{
  opacity:1;
  background: linear-gradient(90deg, transparent, #fff, transparent);
  box-shadow:0 0 120px #fff, 0 0 220px rgba(255,0,0,.55);
  animation: acFlashLine 600ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes acFlashLine{
  0%   { opacity:0; transform:translateY(-50%) scaleY(0.02); }
  40%  { opacity:1; }
  80%  { opacity:1; transform:translateY(-50%) scaleY(1.2); }
  100% { opacity:0; transform:translateY(-50%) scaleY(0.02); }
}

/* collapse the logo (tube off) */
#crt-intro.hide .logo{ animation: acCollapse 600ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes acCollapse{
  0%   { transform: scale(1);                opacity:1; }
  50%  { transform: scaleY(.05) scaleX(1.2); opacity:1; filter:brightness(2); }
  100% { transform: scaleY(0)   scaleX(1.3); opacity:0; }
}

/* final removal (JS adds .hidden-done after collapse) */
#crt-intro.hidden-done{ display:none !important; }

/* ===== Entrance settle ===== */
@keyframes vertRoll{ 0%{transform:translateY(-60px)} 40%{transform:translateY(15px)} 100%{transform:translateY(0)} }

/* ===== Hi-DPI refinement ===== */
@media (min-resolution: 2dppx){
  #crt-intro::after{
    opacity:.26;
    background-image:
      repeating-linear-gradient(to bottom, rgba(255,255,255,.11) 0 1px, transparent 2px 4px),
      linear-gradient(to bottom, transparent, rgba(255,255,255,.055) 50%, transparent),
      radial-gradient(140% 100% at 50% 50%, transparent 45%, rgba(0,0,0,.55) 100%);
  }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
  #crt-intro::before, #crt-intro::after{ animation: none !important; opacity:.2 }
  #crt-intro .logo, #crt-intro .flare, #crt-intro .grain, #crt-intro .glitch-bars{ animation: none !important; opacity: 1 }
}