/* ARO Index shared glitch system. Added 2026-09-23.
   Applies to: hero H1 (.hero h1, .rp-h1), big numbers (.stat-value, .rp-stat-num),
   primary CTA buttons (.btn-pink, .btn-pink-sm, .cta-btn), and the existing
   page-transition modal (glitch-text-loop keyframe, unchanged here).
   Zero glitch on body text, tables, nav links, and the methodology page --
   none of those load this file or match these selectors. */

:root{
  --glitch-pink:#ED4EA6;
  --glitch-teal:#71C9CB;
}

/* ---------- Hero H1: 600ms channel-split on load, then idle 150ms single flicker ---------- */
.hero h1, .rp-h1{
  position:relative;
  display:inline-block;
}
.hero h1::before, .hero h1::after,
.rp-h1::before, .rp-h1::after{
  content:attr(data-glitch-text);
  position:absolute;
  top:0; left:0;
  width:100%;
  opacity:0;
  pointer-events:none;
}
.hero h1::before, .rp-h1::before{ color:var(--glitch-pink); }
.hero h1::after, .rp-h1::after{ color:var(--glitch-teal); }

.hero h1[data-glitch-ready]::before, .rp-h1[data-glitch-ready]::before{
  animation:glitch-hero-in-pink 600ms 1 both;
}
.hero h1[data-glitch-ready]::after, .rp-h1[data-glitch-ready]::after{
  animation:glitch-hero-in-teal 600ms 1 both;
}
@keyframes glitch-hero-in-pink{
  0%{opacity:0;transform:translateX(0);clip-path:inset(0 0 0 0);}
  10%{opacity:.9;transform:translateX(-6px);clip-path:inset(10% 0 60% 0);}
  25%{opacity:.9;transform:translateX(6px);clip-path:inset(55% 0 10% 0);}
  40%{opacity:.85;transform:translateX(-4px);clip-path:inset(30% 0 40% 0);}
  60%{opacity:.6;transform:translateX(3px);clip-path:inset(70% 0 5% 0);}
  100%{opacity:0;transform:translateX(0);clip-path:inset(100% 0 0 0);}
}
@keyframes glitch-hero-in-teal{
  0%{opacity:0;transform:translateX(0);clip-path:inset(0 0 0 0);}
  10%{opacity:.9;transform:translateX(6px);clip-path:inset(55% 0 10% 0);}
  25%{opacity:.9;transform:translateX(-6px);clip-path:inset(10% 0 60% 0);}
  40%{opacity:.85;transform:translateX(4px);clip-path:inset(40% 0 30% 0);}
  60%{opacity:.6;transform:translateX(-3px);clip-path:inset(5% 0 70% 0);}
  100%{opacity:0;transform:translateX(0);clip-path:inset(0 0 100% 0);}
}

/* idle flicker: JS toggles .glitch-flicker for one 150ms pass every 8-12s, never a loop */
.hero h1.glitch-flicker::before, .rp-h1.glitch-flicker::before{
  animation:glitch-flicker-pink 150ms 1 both;
}
.hero h1.glitch-flicker::after, .rp-h1.glitch-flicker::after{
  animation:glitch-flicker-teal 150ms 1 both;
}
@keyframes glitch-flicker-pink{
  0%{opacity:0;transform:translateX(0);clip-path:inset(0 0 0 0);}
  40%{opacity:.85;transform:translateX(-6px);clip-path:inset(20% 0 45% 0);}
  100%{opacity:0;transform:translateX(0);clip-path:inset(100% 0 0 0);}
}
@keyframes glitch-flicker-teal{
  0%{opacity:0;transform:translateX(0);clip-path:inset(0 0 0 0);}
  40%{opacity:.85;transform:translateX(6px);clip-path:inset(45% 0 20% 0);}
  100%{opacity:0;transform:translateX(0);clip-path:inset(0 0 100% 0);}
}

/* ---------- Big numbers: one-time scroll-triggered channel split at +/-4px ---------- */
.stat-value, .rp-stat-num{
  position:relative;
  display:inline-block;
}
.stat-value::before, .stat-value::after,
.rp-stat-num::before, .rp-stat-num::after{
  content:attr(data-glitch-text);
  position:absolute; top:0; left:0; width:100%;
  opacity:0;
  pointer-events:none;
}
.stat-value::before, .rp-stat-num::before{ color:var(--glitch-pink); }
.stat-value::after, .rp-stat-num::after{ color:var(--glitch-teal); }

.stat-value.glitch-number-in::before, .rp-stat-num.glitch-number-in::before{
  animation:glitch-number-in-pink 500ms 1 both;
}
.stat-value.glitch-number-in::after, .rp-stat-num.glitch-number-in::after{
  animation:glitch-number-in-teal 500ms 1 both;
}
@keyframes glitch-number-in-pink{
  0%{opacity:0;transform:translateX(0);clip-path:inset(0 0 0 0);}
  20%{opacity:.9;transform:translateX(-4px);clip-path:inset(15% 0 55% 0);}
  45%{opacity:.85;transform:translateX(4px);clip-path:inset(50% 0 15% 0);}
  70%{opacity:.5;transform:translateX(-2px);clip-path:inset(65% 0 10% 0);}
  100%{opacity:0;transform:translateX(0);clip-path:inset(100% 0 0 0);}
}
@keyframes glitch-number-in-teal{
  0%{opacity:0;transform:translateX(0);clip-path:inset(0 0 0 0);}
  20%{opacity:.9;transform:translateX(4px);clip-path:inset(50% 0 15% 0);}
  45%{opacity:.85;transform:translateX(-4px);clip-path:inset(15% 0 50% 0);}
  70%{opacity:.5;transform:translateX(2px);clip-path:inset(10% 0 65% 0);}
  100%{opacity:0;transform:translateX(0);clip-path:inset(0 0 100% 0);}
}

/* ---------- Primary CTA buttons: hover/focus-only 200ms slice + 1px teal scanline sweep ---------- */
.btn-pink, .btn-pink-sm, .cta-btn{
  position:relative;
  overflow:hidden;
}
.btn-pink::before, .btn-pink-sm::before, .cta-btn::before{
  content:"";
  position:absolute; inset:0;
  background:inherit;
  opacity:0;
  pointer-events:none;
}
.btn-pink:hover::before, .btn-pink-sm:hover::before, .cta-btn:hover::before,
.btn-pink:focus-visible::before, .btn-pink-sm:focus-visible::before, .cta-btn:focus-visible::before{
  animation:glitch-btn-slice 200ms 1 both;
}
@keyframes glitch-btn-slice{
  0%{opacity:0;clip-path:inset(0 0 0 0);transform:translateX(0);}
  25%{opacity:.5;clip-path:inset(10% 0 70% 0);transform:translateX(-3px);}
  50%{opacity:.5;clip-path:inset(60% 0 10% 0);transform:translateX(3px);}
  75%{opacity:.3;clip-path:inset(30% 0 40% 0);transform:translateX(-1px);}
  100%{opacity:0;clip-path:inset(100% 0 0 0);transform:translateX(0);}
}
.btn-pink::after, .btn-pink-sm::after, .cta-btn::after{
  content:"";
  position:absolute; left:0; right:0; top:-10%;
  height:1px;
  background:var(--glitch-teal);
  opacity:0;
  pointer-events:none;
}
.btn-pink:hover::after, .btn-pink-sm:hover::after, .cta-btn:hover::after,
.btn-pink:focus-visible::after, .btn-pink-sm:focus-visible::after, .cta-btn:focus-visible::after{
  animation:glitch-scanline 200ms 1 both;
}
@keyframes glitch-scanline{
  0%{top:-10%;opacity:0;}
  15%{opacity:.9;}
  100%{top:110%;opacity:0;}
}
.btn-pink:focus-visible, .btn-pink-sm:focus-visible, .cta-btn:focus-visible{
  outline:2px solid var(--glitch-teal);
  outline-offset:2px;
}

/* ---------- prefers-reduced-motion: static color offset only, everything else off ---------- */
@media (prefers-reduced-motion: reduce){
  .hero h1::before, .hero h1::after,
  .rp-h1::before, .rp-h1::after,
  .stat-value::before, .stat-value::after,
  .rp-stat-num::before, .rp-stat-num::after,
  .btn-pink::before, .btn-pink::after,
  .btn-pink-sm::before, .btn-pink-sm::after,
  .cta-btn::before, .cta-btn::after{
    animation:none !important;
  }
  .hero h1[data-glitch-ready]::before, .rp-h1[data-glitch-ready]::before,
  .stat-value.glitch-number-in::before, .rp-stat-num.glitch-number-in::before{
    opacity:.45; transform:translateX(-1px); clip-path:none;
  }
  .hero h1[data-glitch-ready]::after, .rp-h1[data-glitch-ready]::after,
  .stat-value.glitch-number-in::after, .rp-stat-num.glitch-number-in::after{
    opacity:.45; transform:translateX(1px); clip-path:none;
  }
}