/* ════════════════════════════════════════════════════════════
   AI Pirates — Section Signature Effects v2 (DRAMATIC)
   Coupled to .reveal parents or standalone. Big distances,
   long curves, shock & polish. VOLRA-level scroll moments.
   Respects prefers-reduced-motion + save-data.
   ════════════════════════════════════════════════════════════ */

[data-sfx] {
  will-change: transform, opacity, filter, clip-path;
  backface-visibility: hidden;
}

/* ---------- 1. HEADING SLAM (line-split) ---------- */
[data-sfx="heading"] {
  display: inline-block;
  position: relative;
  overflow: visible;
  perspective: 1200px;
}
[data-sfx="heading"] .sfx-line {
  display: block;
  overflow: hidden;
  line-height: 1.05;
}
[data-sfx="heading"] .sfx-line-inner {
  display: inline-block;
  transform: translateY(130%) skewY(10deg) rotateX(-35deg);
  transform-origin: 50% 100%;
  opacity: 0;
  transition: transform 1.2s cubic-bezier(.16, 1, .3, 1),
              opacity .8s ease;
}
[data-sfx="heading"].is-in .sfx-line-inner {
  transform: translateY(0) skewY(0) rotateX(0);
  opacity: 1;
}
[data-sfx="heading"].is-in .sfx-line:nth-child(1) .sfx-line-inner { transition-delay: 0s; }
[data-sfx="heading"].is-in .sfx-line:nth-child(2) .sfx-line-inner { transition-delay: .14s; }
[data-sfx="heading"].is-in .sfx-line:nth-child(3) .sfx-line-inner { transition-delay: .28s; }
[data-sfx="heading"].is-in .sfx-line:nth-child(4) .sfx-line-inner { transition-delay: .42s; }
/* Tri-color underline that draws dramatically */
[data-sfx="heading"]::after {
  content: '';
  position: absolute; left: 0; bottom: -14px;
  width: 0; height: 3px;
  background: linear-gradient(90deg, #00f0ff 0%, #a855f7 50%, #ff2a2a 100%);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.5);
  transition: width 1.4s cubic-bezier(.16, 1, .3, 1) .6s;
}
[data-sfx="heading"][data-sfx-underline="1"].is-in::after { width: 96px; }

/* ---------- 2. EYEBROW RGB GLITCH ---------- */
[data-sfx="eyebrow"] {
  display: inline-block;
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity .5s ease, transform .7s cubic-bezier(.16, 1, .3, 1);
  position: relative;
}
[data-sfx="eyebrow"].is-in {
  opacity: 1;
  transform: translateX(0);
  animation: sfxGlitchRGB .9s steps(3, end) 1;
}
@keyframes sfxGlitchRGB {
  0%   { text-shadow: 0 0 0 transparent; transform: translateX(0); }
  15%  { text-shadow: -4px 0 0 #ff2a2a, 4px 0 0 #00f0ff; transform: translateX(-3px); }
  30%  { text-shadow: 4px 0 0 #ff2a2a, -4px 0 0 #00f0ff, 0 0 8px rgba(168,85,247,0.8); transform: translateX(3px); }
  45%  { text-shadow: -2px 0 0 #ff2a2a, 2px 0 0 #00f0ff; transform: translateX(-2px) skewX(-3deg); }
  60%  { text-shadow: 2px 0 0 #a855f7, -2px 0 0 #00f0ff; transform: translateX(2px) skewX(3deg); }
  80%  { text-shadow: -1px 0 0 #ff2a2a, 1px 0 0 #00f0ff; transform: translateX(-1px); }
  100% { text-shadow: 0 0 0 transparent; transform: translateX(0); }
}

/* ---------- 3. CARD 3D FLIP + NEON SWEEP ---------- */
[data-sfx="card"] {
  opacity: 0;
  transform: perspective(1600px) rotateY(-45deg) rotateX(8deg) translate3d(-60px, 60px, -140px);
  transform-origin: left center;
  transition: opacity 1.1s cubic-bezier(.16, 1, .3, 1),
              transform 1.3s cubic-bezier(.16, 1, .3, 1);
  position: relative;
}
[data-sfx="card"].is-in {
  opacity: 1;
  transform: perspective(1600px) rotateY(0) rotateX(0) translate3d(0, 0, 0);
}
/* Intense neon sweep across card border after reveal */
[data-sfx="card"]::before {
  content: '';
  position: absolute; inset: -2px;
  border-radius: inherit;
  background: linear-gradient(110deg,
    transparent 0%,
    rgba(0, 240, 255, 0) 28%,
    rgba(0, 240, 255, 0.85) 42%,
    rgba(168, 85, 247, 0.75) 50%,
    rgba(255, 42, 42, 0.6) 58%,
    rgba(0, 240, 255, 0) 72%,
    transparent 100%);
  background-size: 300% 100%;
  background-position: -50% 0;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  filter: blur(1px);
  transition: opacity .2s ease;
}
[data-sfx="card"].is-in::before {
  opacity: 1;
  animation: sfxCardSweep 1.8s cubic-bezier(.4, 0, .2, 1) .5s 1 forwards;
}
@keyframes sfxCardSweep {
  0%   { background-position: -50% 0; opacity: 1; }
  70%  { opacity: 0.9; }
  100% { background-position: 180% 0; opacity: 0; }
}
/* Stagger inside a grid */
[data-sfx-stack] > [data-sfx="card"]:nth-child(1)  { transition-delay: 0s; }
[data-sfx-stack] > [data-sfx="card"]:nth-child(2)  { transition-delay: .1s; }
[data-sfx-stack] > [data-sfx="card"]:nth-child(3)  { transition-delay: .2s; }
[data-sfx-stack] > [data-sfx="card"]:nth-child(4)  { transition-delay: .3s; }
[data-sfx-stack] > [data-sfx="card"]:nth-child(5)  { transition-delay: .4s; }
[data-sfx-stack] > [data-sfx="card"]:nth-child(6)  { transition-delay: .5s; }
[data-sfx-stack] > [data-sfx="card"]:nth-child(7)  { transition-delay: .6s; }
[data-sfx-stack] > [data-sfx="card"]:nth-child(8)  { transition-delay: .7s; }
[data-sfx-stack] > [data-sfx="card"]:nth-child(9)  { transition-delay: .8s; }
[data-sfx-stack] > [data-sfx="card"]:nth-child(10) { transition-delay: .9s; }

/* ---------- 4. PARAGRAPH DISSOLVE + MASK SWEEP ---------- */
[data-sfx="paragraph"] {
  opacity: 0;
  filter: blur(18px);
  transform: translateY(28px);
  transition: opacity .9s ease, filter 1.1s ease, transform 1.1s cubic-bezier(.16, 1, .3, 1);
  position: relative;
}
[data-sfx="paragraph"].is-in {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 0%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 0%, #000 100%);
  animation: sfxParaMask 1.6s cubic-bezier(.4, 0, .2, 1) .15s 1 both;
}
@keyframes sfxParaMask {
  0%   { -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 0%, transparent 0%);
         mask-image: linear-gradient(90deg, #000 0%, #000 0%, transparent 0%); }
  100% { -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 100%, transparent 100%);
         mask-image: linear-gradient(90deg, #000 0%, #000 100%, transparent 100%); }
}

/* ---------- 5. MEDIA CLIP-PATH REVEAL ---------- */
[data-sfx="media"] {
  clip-path: inset(0 100% 0 0);
  transform: scale(1.08);
  transition: clip-path 1.4s cubic-bezier(.16, 1, .3, 1),
              transform 1.6s cubic-bezier(.16, 1, .3, 1);
}
[data-sfx="media"].is-in {
  clip-path: inset(0 0 0 0);
  transform: scale(1);
}

/* ---------- 6. COUNTER BURST ---------- */
[data-sfx="counter"] {
  position: relative;
  display: inline-block;
  opacity: 0;
  transform: translateY(20px) scale(0.92);
  transition: opacity .6s ease, transform .8s cubic-bezier(.16, 1, .3, 1);
}
[data-sfx="counter"].is-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
[data-sfx="counter"]::after {
  content: '';
  position: absolute; inset: -30%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,240,255,0.6) 0%, rgba(168,85,247,0.3) 40%, rgba(0,240,255,0) 65%);
  transform: scale(0);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  mix-blend-mode: screen;
}
[data-sfx="counter"].is-in::after {
  animation: sfxCounterBurst 1.6s cubic-bezier(.4, 0, .2, 1) .15s 1 forwards;
}
@keyframes sfxCounterBurst {
  0%   { transform: scale(0);   opacity: 1; }
  55%  { transform: scale(2.2); opacity: 0.5; }
  100% { transform: scale(3.4); opacity: 0; }
}

/* ---------- 7. CTA CHARGE + SHINE ---------- */
[data-sfx="cta"] {
  opacity: 0;
  transform: translateY(24px) scale(0.96);
  transition: opacity .7s ease, transform .9s cubic-bezier(.16, 1, .3, 1);
  position: relative;
  overflow: hidden;
}
[data-sfx="cta"].is-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
[data-sfx="cta"]::after {
  content: '';
  position: absolute; top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg,
    transparent 0%,
    rgba(255,255,255,0.15) 35%,
    rgba(0,240,255,0.4) 50%,
    rgba(255,255,255,0.15) 65%,
    transparent 100%);
  pointer-events: none;
  mix-blend-mode: screen;
  transition: none;
}
[data-sfx="cta"].is-in::after {
  animation: sfxCtaSweep 1.4s cubic-bezier(.4, 0, .2, 1) .5s 1 forwards;
}
@keyframes sfxCtaSweep {
  0%   { left: -60%; }
  100% { left: 140%; }
}

/* ---------- 8. SECTION EDGE TRACE ---------- */
[data-sfx="edge"] {
  position: relative;
}
[data-sfx="edge"]::before,
[data-sfx="edge"]::after {
  content: '';
  position: absolute; left: 0;
  width: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(0,240,255,0.6), rgba(168,85,247,0.4), transparent);
  transition: width 1.6s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}
[data-sfx="edge"]::before { top: 0; }
[data-sfx="edge"]::after  { bottom: 0; transition-delay: .25s; }
[data-sfx="edge"].is-in::before,
[data-sfx="edge"].is-in::after { width: 100%; }

/* ---------- 9. LIST PROGRESSIVE DRAW ---------- */
[data-sfx="list-item"] {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity .6s ease, transform .9s cubic-bezier(.16, 1, .3, 1);
  position: relative;
}
[data-sfx="list-item"].is-in {
  opacity: 1;
  transform: translateX(0);
}

/* ---------- SCROLL PROGRESS BAR (top) ---------- */
.sfx-progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 2px;
  z-index: 1000;
  pointer-events: none;
  background: rgba(0, 240, 255, 0.05);
}
.sfx-progress-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #00f0ff 0%, #a855f7 50%, #ff2a2a 100%);
  box-shadow: 0 0 12px rgba(0, 240, 255, 0.6);
  transition: width .08s linear;
}

/* ---------- SIDE SCROLL RAIL (right) ---------- */
.sfx-rail {
  position: fixed;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.sfx-rail-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  cursor: pointer;
  transition: all .4s cubic-bezier(.16, 1, .3, 1);
  pointer-events: auto;
  border: 1px solid rgba(0, 240, 255, 0.25);
  position: relative;
}
.sfx-rail-dot::after {
  content: attr(data-label);
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(0, 240, 255, 0.6);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}
.sfx-rail-dot:hover {
  background: rgba(0, 240, 255, 0.8);
  transform: scale(1.4);
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.6);
}
.sfx-rail-dot:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}
.sfx-rail-dot.active {
  background: #00f0ff;
  box-shadow: 0 0 14px rgba(0, 240, 255, 0.7);
  transform: scale(1.3);
}
@media (max-width: 768px) {
  .sfx-rail { display: none; }
}

/* ---------- CONTINUOUS PARALLAX (reveal containers) ---------- */
.reveal.is-revealed {
  transform: translate3d(0, calc(var(--sfx-parallax, 0) * 1px), 0);
  transition: transform .1s linear;
}

/* ---------- SCROLL SPOTLIGHT (global bg follow) ---------- */
.sfx-spotlight {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background: radial-gradient(
    circle 700px at 50% var(--sfx-sy, 50vh),
    rgba(0, 240, 255, 0.12) 0%,
    rgba(168, 85, 247, 0.06) 30%,
    rgba(0, 240, 255, 0.02) 50%,
    transparent 65%);
  mix-blend-mode: screen;
  transition: opacity .6s ease;
}

/* ---------- COUPLING TO .reveal (GSAP) ---------- */
/* If inside .reveal parent, hold hidden until parent is ".is-revealed"
   which section-fx.js adds when ScrollTrigger fires */
.reveal:not(.is-revealed) [data-sfx] {
  opacity: 0 !important;
  transition-delay: 0s !important;
  animation: none !important;
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-sfx] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
    animation: none !important;
  }
  [data-sfx="heading"] .sfx-line-inner { transform: none !important; opacity: 1 !important; }
  .sfx-spotlight { display: none; }
}