/* tl-retro.css — The Legend 80s synthwave polish layer.
   Palette from hero photo: magenta #ff2d7b, pink #ff6ec7, cyan #00e5ff, gold #ffd700.
   Keep minimal — enhances existing .tl-* styles without overriding. */

/* ── Chromatic aberration + neon glow on hero title ──────────────── */
.tl-hero h1 {
  text-shadow:
    0 0 24px rgba(255,45,123,0.55),
    0 0 48px rgba(255,110,199,0.35),
    2px 0 0 rgba(0,229,255,0.42),
    -2px 0 0 rgba(255,45,123,0.55),
    0 2px 28px rgba(255,45,123,0.25);
  animation: tlChroma 5.5s ease-in-out infinite;
}
@keyframes tlChroma {
  0%, 100% { text-shadow:
      0 0 24px rgba(255,45,123,0.55),
      0 0 48px rgba(255,110,199,0.35),
      2px 0 0 rgba(0,229,255,0.42),
      -2px 0 0 rgba(255,45,123,0.55),
      0 2px 28px rgba(255,45,123,0.25); }
  50%      { text-shadow:
      0 0 28px rgba(255,45,123,0.70),
      0 0 56px rgba(255,110,199,0.50),
      3px 0 0 rgba(0,229,255,0.55),
      -3px 0 0 rgba(255,45,123,0.65),
      0 2px 34px rgba(255,45,123,0.35); }
}
@media (prefers-reduced-motion:reduce){ .tl-hero h1 { animation: none; } }

/* ── Occasional glitch flicker on hero badge ───────────────────── */
.tl-hero-badge {
  animation: tlFlicker 7s steps(1) infinite;
}
@keyframes tlFlicker {
  0%, 94%, 100% { opacity: 1; transform: translateX(0); }
  95%           { opacity: 0.35; transform: translateX(2px); }
  96%           { opacity: 1;   transform: translateX(-1px); }
  97%           { opacity: 0.6; transform: translateX(1px); }
  98%           { opacity: 1;   transform: translateX(0); }
}
@media (prefers-reduced-motion:reduce){ .tl-hero-badge { animation: none; } }

/* ── VHS tracking line drifting across hero ────────────────────── */
.tl-hero::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 38px;
  top: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255,110,199,0.06) 45%,
    rgba(0,229,255,0.10) 50%,
    rgba(255,45,123,0.06) 55%,
    transparent 100%);
  mix-blend-mode: screen;
  animation: tlVHS 9s linear infinite;
  z-index: 3;
  opacity: 0.8;
}
@keyframes tlVHS { from { top: -40px; } to { top: 100%; } }
@media (prefers-reduced-motion:reduce){ .tl-hero::before { animation: none; opacity: 0; } }
/* Disable the blend-mode VHS line on mobile — compositor-expensive during scroll */
@media (hover: none) {
  .tl-hero::before { display: none; }
  .tl-hero h1 { animation: none; text-shadow:
      0 0 18px rgba(255,45,123,0.55),
      0 0 32px rgba(255,110,199,0.28); }
  .tl-hero-badge { animation: none; }
}

/* ── Scroll progress (80s gradient) ────────────────────────────── */
.tl-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 3px; z-index: 10002; pointer-events: none;
}
.tl-progress::before {
  content: ""; display: block; height: 100%; width: var(--tl-p,0%);
  background: linear-gradient(90deg,#ff6b35 0%, #ff2d7b 40%, #ff6ec7 70%, #00e5ff 100%);
  box-shadow: 0 0 14px rgba(255,45,123,0.65), 0 0 28px rgba(255,110,199,0.35);
  transition: width 0.12s linear;
}

/* ── 3D tilt on cards (decades, events, slides) ────────────────── */
.tl-retro-tilt {
  transform-style: preserve-3d;
  transition: transform 0.25s cubic-bezier(0.2,1,0.3,1), box-shadow 0.25s;
  will-change: transform;
}
.tl-retro-tilt.on {
  transform: perspective(820px) rotateX(var(--trx,0deg)) rotateY(var(--try,0deg)) translateZ(4px);
  box-shadow:
    0 18px 52px rgba(0,0,0,0.55),
    0 0 30px rgba(255,45,123,0.22),
    0 0 0 1px rgba(0,229,255,0.25);
}

/* ── Cursor aura (magenta/cyan) desktop only ───────────────────── */
.tl-aura {
  position: fixed;
  left: 0; top: 0;
  width: 360px; height: 360px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
  background: radial-gradient(circle,
    rgba(255,45,123,0.28) 0%,
    rgba(0,229,255,0.14) 35%,
    rgba(147,51,255,0.08) 60%,
    transparent 78%);
  transform: translate(-50%,-50%);
  opacity: 0;
  transition: opacity 0.3s;
}
.tl-aura.on { opacity: 1; }
@media (hover: none){ .tl-aura { display: none; } }