/* ================================
 *        FULLSCREEN INTRO
 * ================================ */

/* Fullscreen intro overlay */
.intro-overlay {
  position: fixed;
  inset: 0;
  background: #050608;
  z-index: 99999;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* Subtle CRT noise + vignette on the intro layer */
.intro-overlay::before,
.intro-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.intro-overlay::before {
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,0.03) 0 1px,
    rgba(0,0,0,0) 2px 3px
  );
  mix-blend-mode: screen;
  opacity: .6;
  animation: introNoise .7s steps(2) infinite;
}

.intro-overlay::after {
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,.45) 100%);
}

/* Body is locked while intro is up */
body.is-intro .page { visibility: hidden; }
body.is-intro .crt-overlay { visibility: hidden; }

/* ================================
 *        CORE + TYPOGRAPHY
 * ================================ */

/* Container for the glitchy text + status */
.intro-core {
  position: relative;
  text-align: center;
  font-family: "Orbitron", system-ui, sans-serif;
  color: #bff7ff;
  padding: 24px 28px;
  filter: drop-shadow(0 0 18px rgba(0,229,255,.15));
}

/* Big glitchy heading */
.intro-title {
  font-size: clamp(22px, 6vw, 42px);
  letter-spacing: 2px;
  margin: 0 0 10px 0;
  position: relative;
}

.intro-title::before,
.intro-title::after {
  content: attr(data-text);
  position: absolute;
  left: 0; top: 0; width: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

.intro-title::before { color: #FF2E9E; transform: translate(2px, -1px); animation: gIntro1 2.1s infinite; }
.intro-title::after  { color: #8CFF2E; transform: translate(-2px, 1px); animation: gIntro2 2.9s infinite; }

/* Status line */
.intro-status {
  font-family: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(12px, 2.8vw, 14px);
  color: #91e9ff;
  opacity: .9;
}

/* ================================
 *        INTRO ANIMATIONS
 * ================================ */

/* Flash + degauss wobble for intro */
.intro-overlay.flash { animation: introFlash .22s ease-out both; }
.intro-overlay.degauss .intro-core {
  animation: introDegauss .9s ease-out both;
  transform-origin: center;
}

/* Vertical roll bar */
.intro-overlay.roll::before {
  background-image:
    linear-gradient(to bottom, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 12%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.03) 0 1px, rgba(0,0,0,0) 2px 3px);
  background-size: 100% 18%, auto;
  background-repeat: no-repeat, repeat;
  background-position: 0 -20%;
  animation: introRoll .9s ease-out forwards, introNoise .7s steps(2) infinite;
  mix-blend-mode: screen;
}

/* Keyframes */
@keyframes introNoise { 50% { transform: translateY(1px); } }

@keyframes gIntro1 {
  0%   { clip-path: polygon(0 0,100% 0,100% 0,0 0); }
  50%  { clip-path: polygon(0 0,100% 0,100% 55%,0 55%); }
  100% { clip-path: polygon(0 100%,100% 100%,100% 100%,0 100%); }
}

@keyframes gIntro2 {
  0%   { clip-path: polygon(0 45%,100% 45%,100% 100%,0 100%); }
  50%  { clip-path: polygon(0 0,100% 0,100% 45%,0 45%); }
  100% { clip-path: polygon(0 45%,100% 45%,100% 100%,0 100%); }
}

@keyframes introFlash {
  0%   { filter: brightness(2.2) contrast(1.3); }
  100% { filter: none; }
}

@keyframes introDegauss {
  0%   { transform: scale(1.12) skewX(0.3deg); filter: blur(1px) contrast(1.15); }
  40%  { transform: scale(0.98) skewX(-0.4deg); filter: blur(0.7px); }
  70%  { transform: scale(1.04) skewX(0.2deg);  filter: blur(0.4px); }
  100% { transform: scale(1)    skewX(0deg);    filter: none; }
}

@keyframes introRoll { to { background-position: 0 120%, 0 0; } }

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .intro-overlay.flash,
  .intro-overlay.degauss .intro-core,
  .intro-overlay.roll::before { animation: none !important; }
}

/* ================================
 *        EXTRA TEXT EFFECTS
 * ================================ */

/* Reverse ghost (mirrored overlay) */
.intro-title.reverse::after {
  content: attr(data-text);
  display: block;
  transform: scaleX(-1);
  opacity: 0.35;
  animation: reverseFlicker 0.15s steps(2) 3;
}

@keyframes reverseFlicker {
  0%, 100% { opacity: 0; }
  50%      { opacity: 0.35; }
}

/* Micro jitter */
.intro-title.jitter { animation: jitterText 0.12s steps(2) 6; }

@keyframes jitterText {
  0%   { transform: translate(0,0); }
  50%  { transform: translate(-2px,1px); }
  100% { transform: translate(2px,-1px); }
}

/* ================================
 *        CRT POWER-OFF SEQUENCE
 * ================================ */

.intro-overlay.poweroff { animation: phosphorBloom 120ms ease-out both; }

.intro-overlay.poweroff .intro-core {
  /* collapse to a bright horizontal line */
  animation: crtCollapse 380ms 80ms cubic-bezier(.3,.9,.2,1) forwards;
  transform-origin: center;
  filter: brightness(1.3) contrast(1.2);
}

/* bright radial flash (phosphor bloom) */
@keyframes phosphorBloom {
  0%   { filter: brightness(2.8) contrast(1.4) saturate(1.1); }
  100% { filter: brightness(1)   contrast(1)   saturate(1);   }
}

/* snap to a line, then fade out */
@keyframes crtCollapse {
  0%   { transform: scaleY(1) scaleX(1);   opacity: 1; }
  70%  { transform: scaleY(0.04) scaleX(1.02); opacity: 1; }
  100% { transform: scaleY(0.02) scaleX(1.06); opacity: 0; }
}

/* optional: faint afterimage scanline */
.intro-overlay.poweroff::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 52%) no-repeat;
  background-size: 100% 2px;
  background-position: 0 50%;
  opacity: 0;
  animation: afterglow 420ms 60ms ease-out forwards;
  pointer-events: none;
  mix-blend-mode: screen;
}

@keyframes afterglow {
  0%   { opacity: .85; filter: blur(0.2px); }
  70%  { opacity: .25; filter: blur(0.5px); }
  100% { opacity: 0;   filter: blur(1px); }
}