* { margin: 0; padding: 0; box-sizing: border-box; }

  :root {
    --glow-color: #e85112; /* ← CHANGE COLOR HERE */
  }

  body {
    background: #0a0a0a;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Courier New', monospace;
    overflow: hidden;
    position: relative;
  }

  /* CRT scanlines overlay */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(0, 0, 0, 0.25) 2px,
      rgba(0, 0, 0, 0.25) 4px
    );
    pointer-events: none;
    z-index: 10;
  }

  /* CRT vignette + screen curve */
  body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center,
      transparent 60%,
      rgba(0,0,0,0.55) 100%
    );
    pointer-events: none;
    z-index: 11;
  }

  /* Subtle noise / phosphor flicker */
  .noise {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9;
    opacity: 0.04;
    animation: noiseAnim 0.1s steps(1) infinite;
  }

  @keyframes noiseAnim {
    0%   { background-position: 0 0; }
    10%  { background-position: -5% -10%; }
    20%  { background-position: -15% 5%; }
    30%  { background-position: 7% -25%; }
    40%  { background-position: -5% 25%; }
    50%  { background-position: -15% 10%; }
    60%  { background-position: 15% 0%; }
    70%  { background-position: 0% 15%; }
    80%  { background-position: 3% 35%; }
    90%  { background-position: -10% 10%; }
    100% { background-position: 0 0; }
  }

  /* Horizontal roll glitch line */
  .glitch-line {
    position: fixed;
    left: 0; right: 0;
    height: 3px;
    background: rgba(255,255,255,0.06);
    pointer-events: none;
    z-index: 12;
    top: 0;
    animation: rollLine 6s linear infinite;
  }

  @keyframes rollLine {
    from { transform: translateY(-4px); }
    to   { transform: translateY(100vh); }
  }

  .container {
    position: relative;
    z-index: 5;
    text-align: center;
    padding: 2rem;
  }

  /* ---- CUSTOMIZE YOUR TEXT HERE ---- */
  .main-text {
    --text: "SIGNAL FOUND";          /* ← change text here */
    content: var(--text);
    font-size: clamp(2.5rem, 10vw, 9rem);
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--glow-color);
    animation: glowPulse 0.1s steps(1) infinite;
    user-select: none;
    line-height: 1.1;
  }

  .sub-text {
    font-size: clamp(0.7rem, 2.5vw, 1.2rem);
	font-weight: 600;
    letter-spacing: 0.35em;
    color: color-mix(in srgb, var(--glow-color) 45%, transparent);
    margin-top: 1.2rem;
    text-transform: uppercase;
    animation: subGlow 3s ease-in-out infinite alternate;
  }

  /* Random glow states – JS picks one each frame */
  @keyframes glowPulse {
    0%   { text-shadow: 0 0 10px var(--glow-color), 0 0 30px var(--glow-color), 0 0 60px var(--glow-color); }
    5%   { text-shadow: 0 0 4px var(--glow-color), 0 0 10px color-mix(in srgb, var(--glow-color) 40%, transparent); }
    10%  { text-shadow: 0 0 20px var(--glow-color), 0 0 80px color-mix(in srgb, var(--glow-color) 90%, transparent), 0 0 120px color-mix(in srgb, var(--glow-color) 40%, transparent); }
    15%  { text-shadow: 0 0 6px color-mix(in srgb, var(--glow-color) 70%, transparent); }
    20%  { text-shadow: 0 0 15px var(--glow-color), 0 0 50px color-mix(in srgb, var(--glow-color) 70%, transparent); }
    25%  { text-shadow: 0 0 8px color-mix(in srgb, var(--glow-color) 50%, transparent), 0 0 25px color-mix(in srgb, var(--glow-color) 30%, transparent); }
    30%  { text-shadow: 0 0 25px var(--glow-color), 0 0 70px color-mix(in srgb, var(--glow-color) 80%, transparent), 0 0 100px color-mix(in srgb, var(--glow-color) 30%, transparent); }
    35%  { text-shadow: 0 0 3px color-mix(in srgb, var(--glow-color) 60%, transparent); }
    40%  { text-shadow: 0 0 12px var(--glow-color), 0 0 40px color-mix(in srgb, var(--glow-color) 60%, transparent); }
    45%  { text-shadow: 0 0 18px var(--glow-color), 0 0 55px color-mix(in srgb, var(--glow-color) 75%, transparent); }
    50%  { text-shadow: 0 0 5px color-mix(in srgb, var(--glow-color) 50%, transparent); }
    55%  { text-shadow: 0 0 30px var(--glow-color), 0 0 90px color-mix(in srgb, var(--glow-color) 90%, transparent); }
    60%  { text-shadow: 0 0 7px color-mix(in srgb, var(--glow-color) 55%, transparent); }
    65%  { text-shadow: 0 0 22px var(--glow-color), 0 0 65px color-mix(in srgb, var(--glow-color) 70%, transparent); }
    70%  { text-shadow: 0 0 14px var(--glow-color), 0 0 45px color-mix(in srgb, var(--glow-color) 65%, transparent); }
    75%  { text-shadow: 0 0 2px color-mix(in srgb, var(--glow-color) 40%, transparent); }
    80%  { text-shadow: 0 0 28px var(--glow-color), 0 0 85px color-mix(in srgb, var(--glow-color) 85%, transparent); }
    85%  { text-shadow: 0 0 9px color-mix(in srgb, var(--glow-color) 60%, transparent); }
    90%  { text-shadow: 0 0 16px var(--glow-color), 0 0 50px color-mix(in srgb, var(--glow-color) 70%, transparent); }
    95%  { text-shadow: 0 0 35px var(--glow-color), 0 0 100px color-mix(in srgb, var(--glow-color) 90%, transparent), 0 0 140px color-mix(in srgb, var(--glow-color) 40%, transparent); }
    100% { text-shadow: 0 0 10px var(--glow-color), 0 0 30px var(--glow-color), 0 0 60px var(--glow-color); }
  }

  @keyframes subGlow {
    from { text-shadow: 0 0 4px color-mix(in srgb, var(--glow-color) 30%, transparent); opacity: 0.4; }
    to   { text-shadow: 0 0 12px color-mix(in srgb, var(--glow-color) 70%, transparent); opacity: 0.7; }
  }

  /* Occasional full-screen flicker */
  .flicker {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.03);
    pointer-events: none;
    z-index: 13;
    animation: screenFlicker 7s steps(1) infinite;
  }

  @keyframes screenFlicker {
    0%, 94%, 96%, 98%, 100% { opacity: 0; }
    95%, 97%, 99%            { opacity: 1; }
  }

  /* V-sync loss */
  @keyframes vSyncLoss {
    0%   { transform: translateY(0)    skewX(0deg);   opacity: 1; }
    10%  { transform: translateY(12px) skewX(-1.5deg); opacity: 0.85; }
    20%  { transform: translateY(-8px) skewX(1deg);   opacity: 0.9; }
    30%  { transform: translateY(20px) skewX(-0.8deg); opacity: 0.8; }
    40%  { transform: translateY(-5px) skewX(0.5deg); opacity: 0.95; }
    50%  { transform: translateY(15px) skewX(-1.2deg); opacity: 0.85; }
    60%  { transform: translateY(-10px) skewX(0.7deg); opacity: 0.9; }
    70%  { transform: translateY(8px)  skewX(-0.4deg); opacity: 0.95; }
    85%  { transform: translateY(-3px) skewX(0.2deg); opacity: 1; }
    100% { transform: translateY(0)    skewX(0deg);   opacity: 1; }
  }