/* ════════════════════════════════════════
   ANIMATIONS  –  Keyframes & Reveal
   ════════════════════════════════════════ */

/* Scroll-reveal: element slams in with horizontal glitch tears */
@keyframes glitch-reveal {
    0%   { opacity: 0; transform: translateX(-6px) skewX(-1deg); clip-path: inset(40% 0 40% 0); filter: brightness(2); }
    8%   { opacity: 1; transform: translateX(5px) skewX(2deg);   clip-path: inset(0% 0 70% 0);  filter: brightness(1.5) hue-rotate(90deg); }
    16%  { transform: translateX(-3px) skewX(0deg); clip-path: inset(60% 0 0% 0);  filter: brightness(1.2); }
    24%  { transform: translateX(4px);  clip-path: inset(20% 0 50% 0); filter: brightness(1); }
    32%  { transform: translateX(-2px); clip-path: inset(80% 0 10% 0); }
    40%  { transform: translateX(2px);  clip-path: inset(10% 0 80% 0); }
    55%  { transform: translateX(-1px); clip-path: inset(0 0 0 0); }
    70%  { transform: translateX(0);    clip-path: inset(0 0 0 0); filter: brightness(1); }
    100% { transform: translateX(0) skewX(0); clip-path: inset(0 0 0 0); opacity: 1; filter: none; }
}

/* Persistent glitch on headline – pink layer */
@keyframes g1 {
    0%, 89%, 100% { clip-path: inset(0 0 100% 0); transform: translateX(0); }
    90%  { clip-path: inset(15% 0 60% 0); transform: translateX(-5px); }
    92%  { clip-path: inset(55% 0 20% 0); transform: translateX(4px); }
    94%  { clip-path: inset(75% 0 5% 0);  transform: translateX(-3px); }
    96%  { clip-path: inset(30% 0 45% 0); transform: translateX(5px); }
    98%  { clip-path: inset(5% 0 80% 0);  transform: translateX(-2px); }
}

/* Persistent glitch on headline – cyan layer */
@keyframes g2 {
    0%, 91%, 100% { clip-path: inset(0 0 100% 0); transform: translateX(0); }
    92%  { clip-path: inset(40% 0 35% 0); transform: translateX(4px); }
    94%  { clip-path: inset(10% 0 70% 0); transform: translateX(-5px); }
    96%  { clip-path: inset(65% 0 15% 0); transform: translateX(3px); }
    98%  { clip-path: inset(25% 0 55% 0); transform: translateX(-4px); }
}

/* Hero entrance */
@keyframes hero-in {
    0%   { opacity: 0; transform: translateX(-8px); filter: brightness(3) saturate(0); }
    10%  { opacity: 1; transform: translateX(5px);  filter: brightness(1.5) hue-rotate(60deg); }
    20%  { transform: translateX(-3px); filter: brightness(1.2); }
    35%  { transform: translateX(2px); }
    50%  { transform: translateX(0); filter: brightness(1); }
    100% { transform: translateX(0); filter: none; opacity: 1; }
}

/* Ticker scroll */
@keyframes ticker-anim {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* Reveal state */
.reveal { opacity: 0; }

.reveal.glitching {
    animation: glitch-reveal 0.65s cubic-bezier(.22, 1, .36, 1) forwards;
}