/* R19E — 90s arcade title atmosphere
   Scope: section titles only. No layout, editorial, media, demo or gameplay changes. */

:root{
  --gate-arcade-red:#ff3b30;
  --gate-arcade-orange:#ff7a00;
  --gate-arcade-yellow:#ffe81f;
  --gate-arcade-lime:#b6ff2f;
  --gate-arcade-green:#53ff74;
  --gate-arcade-cyan:#2fe5ff;
  --gate-arcade-blue:#2f6bff;
  --gate-arcade-violet:#b02fff;
  --gate-arcade-magenta:#ff2fd4;
  --gate-arcade-cream:#fff9e0;
}

.section-title.gate-retro-title{
  --gate-title-neon:var(--gate-arcade-cyan);
  --gate-title-delay:0s;
  position:relative;
  isolation:isolate;
  color:var(--gate-arcade-cream)!important;
  text-shadow:
    0 0 4px var(--gate-arcade-cream),
    0 0 10px var(--gate-title-neon),
    0 0 22px var(--gate-title-neon),
    0 0 36px var(--gate-title-neon);
  animation:gate-neon-breathe 3.15s ease-in-out infinite alternate;
  animation-delay:var(--gate-title-delay);
  animation-play-state:paused;
  will-change:text-shadow,filter;
}

.section-title.gate-retro-title.gate-title-inview{
  animation-play-state:running;
}

@keyframes gate-neon-breathe{
  0%{
    text-shadow:
      0 0 4px var(--gate-arcade-cream),
      0 0 8px var(--gate-title-neon),
      0 0 16px var(--gate-title-neon),
      0 0 26px var(--gate-title-neon);
    filter:saturate(1.02) brightness(.98);
  }
  100%{
    text-shadow:
      0 0 6px var(--gate-arcade-cream),
      0 0 14px var(--gate-title-neon),
      0 0 28px var(--gate-title-neon),
      0 0 46px var(--gate-title-neon),
      0 0 62px var(--gate-title-neon);
    filter:saturate(1.16) brightness(1.05);
  }
}

/* Short, intermittent RGB CRT separation. */
.section-title.gate-retro-title::before,
.section-title.gate-retro-title::after{
  content:attr(data-gate-retro-text);
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  opacity:0;
  overflow:hidden;
  color:inherit;
  font:inherit;
  letter-spacing:inherit;
  line-height:inherit;
  text-transform:inherit;
  text-shadow:none;
  white-space:normal;
}

.section-title.gate-retro-title::before{
  color:var(--gate-arcade-magenta);
  animation:gate-glitch-a 3.45s infinite linear;
  animation-delay:var(--gate-title-delay);
  animation-play-state:paused;
}

.section-title.gate-retro-title::after{
  color:var(--gate-arcade-cyan);
  animation:gate-glitch-b 2.85s infinite linear;
  animation-delay:calc(var(--gate-title-delay) - .72s);
  animation-play-state:paused;
}

.section-title.gate-retro-title.gate-title-inview::before,
.section-title.gate-retro-title.gate-title-inview::after{
  animation-play-state:running;
}

@keyframes gate-glitch-a{
  0%,89%,100%{opacity:0;transform:translate(0,0);clip-path:inset(0 0 0 0)}
  90%{opacity:.64;transform:translate(-3px,-1px);clip-path:inset(10% 0 58% 0)}
  92%{opacity:.42;transform:translate(2px,1px);clip-path:inset(43% 0 23% 0)}
  94%{opacity:.56;transform:translate(-1px,0);clip-path:inset(69% 0 6% 0)}
  96%,98%{opacity:0;transform:translate(0,0);clip-path:inset(0 0 0 0)}
}

@keyframes gate-glitch-b{
  0%,84%,100%{opacity:0;transform:translate(0,0);clip-path:inset(0 0 0 0)}
  85%{opacity:.58;transform:translate(3px,1px);clip-path:inset(56% 0 12% 0)}
  87%{opacity:.40;transform:translate(-2px,-1px);clip-path:inset(13% 0 52% 0)}
  89%{opacity:.52;transform:translate(1px,0);clip-path:inset(73% 0 4% 0)}
  91%,98%{opacity:0;transform:translate(0,0);clip-path:inset(0 0 0 0)}
}

/* Scanner-like underline gives the headings a terminal/arcade rhythm. */
.section-title.gate-retro-title > .gate-title-scan{
  position:absolute;
  left:50%;
  bottom:-9px;
  width:min(360px,76%);
  height:2px;
  transform:translateX(-50%) scaleX(.45);
  transform-origin:center;
  background:linear-gradient(90deg,transparent,var(--gate-title-neon),rgba(255,255,255,.72),var(--gate-title-neon),transparent);
  box-shadow:0 0 8px var(--gate-title-neon),0 0 16px rgba(255,255,255,.18);
  opacity:.55;
  animation:gate-scan-line 3.7s ease-in-out infinite;
  animation-delay:var(--gate-title-delay);
  animation-play-state:paused;
  pointer-events:none;
}

.section-title.gate-retro-title.gate-title-inview > .gate-title-scan{
  animation-play-state:running;
}

@keyframes gate-scan-line{
  0%,100%{transform:translateX(-50%) scaleX(.45);opacity:.50}
  50%{transform:translateX(-50%) scaleX(1);opacity:1}
}

/* Preserve tighter compact headings while allowing the underline room. */
.section-title.compact.gate-retro-title{padding-bottom:.18rem}

@media(max-width:720px){
  .section-title.gate-retro-title{
    text-shadow:
      0 0 4px var(--gate-arcade-cream),
      0 0 9px var(--gate-title-neon),
      0 0 18px var(--gate-title-neon),
      0 0 28px var(--gate-title-neon);
  }
  .section-title.gate-retro-title > .gate-title-scan{width:min(280px,72%)}
}

@media(prefers-reduced-motion:reduce){
  .section-title.gate-retro-title,
  .section-title.gate-retro-title::before,
  .section-title.gate-retro-title::after,
  .section-title.gate-retro-title > .gate-title-scan{
    animation:none!important;
  }
  .section-title.gate-retro-title::before,
  .section-title.gate-retro-title::after{display:none!important}
  .section-title.gate-retro-title > .gate-title-scan{
    transform:translateX(-50%) scaleX(.78)!important;
    opacity:.72!important;
  }
}