/* ==========================================
   SCROLL ANIMATIONS - Ultra Smooth Reveals
   ========================================== */

/* ==========================================
   FRAMER MOTION SPRING REVEALS
   ========================================== */

/* Spring easing curves: bouncy decel like Framer Motion */
:root {
  --fm-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --fm-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
  --fm-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[data-fm] {
  opacity: 0;
  transition: opacity 1.1s var(--fm-spring), transform 1.1s var(--fm-spring);
  will-change: transform, opacity;
}

[data-fm="up"]      { transform: translateY(80px); }
[data-fm="down"]     { transform: translateY(-80px); }
[data-fm="left"]     { transform: translateX(80px); }
[data-fm="right"]    { transform: translateX(-80px); }
[data-fm="scale"]    { transform: scale(0.88); }
[data-fm="scale-up"] { transform: scale(0.88) translateY(60px); }

[data-fm].fm-visible {
  opacity: 1;
  transform: none !important;
}

/* Stagger children with Framer Motion spring */
[data-fm-stagger] > * {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--fm-spring), transform 0.8s var(--fm-spring);
}

[data-fm-stagger].fm-visible > *:nth-child(1)  { transition-delay: 0.00s; opacity: 1; transform: none; }
[data-fm-stagger].fm-visible > *:nth-child(2)  { transition-delay: 0.07s; opacity: 1; transform: none; }
[data-fm-stagger].fm-visible > *:nth-child(3)  { transition-delay: 0.14s; opacity: 1; transform: none; }
[data-fm-stagger].fm-visible > *:nth-child(4)  { transition-delay: 0.21s; opacity: 1; transform: none; }
[data-fm-stagger].fm-visible > *:nth-child(5)  { transition-delay: 0.28s; opacity: 1; transform: none; }
[data-fm-stagger].fm-visible > *:nth-child(6)  { transition-delay: 0.35s; opacity: 1; transform: none; }
[data-fm-stagger].fm-visible > *:nth-child(7)  { transition-delay: 0.42s; opacity: 1; transform: none; }
[data-fm-stagger].fm-visible > *:nth-child(8)  { transition-delay: 0.49s; opacity: 1; transform: none; }
[data-fm-stagger].fm-visible > *:nth-child(9)  { transition-delay: 0.56s; opacity: 1; transform: none; }
[data-fm-stagger].fm-visible > *:nth-child(10) { transition-delay: 0.63s; opacity: 1; transform: none; }
[data-fm-stagger].fm-visible > *:nth-child(11) { transition-delay: 0.70s; opacity: 1; transform: none; }
[data-fm-stagger].fm-visible > *:nth-child(12) { transition-delay: 0.77s; opacity: 1; transform: none; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-fm], [data-fm-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---- Base Scroll Reveal States - Extra Smooth ---- */
[data-scroll-reveal] {
  opacity:0;
  transition:opacity 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
             transform 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
             filter 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change:transform, opacity, filter;
}

[data-scroll-reveal].revealed {
  opacity:1;
  transform:none !important;
  filter:none !important;
}

/* ---- Direction Variants ---- */
[data-scroll-reveal="up"]      { transform:translateY(60px); }
[data-scroll-reveal="down"]    { transform:translateY(-60px); }
[data-scroll-reveal="left"]    { transform:translateX(-60px); }
[data-scroll-reveal="right"]   { transform:translateX(60px); }
[data-scroll-reveal="scale"]   { transform:scale(0.9); }
[data-scroll-reveal="scale-up"]{ transform:scale(0.9) translateY(40px); }

/* ---- Brutalist Skew ---- */
[data-scroll-reveal="skew-up"]    { transform:translateY(40px) skewY(-2deg); }
[data-scroll-reveal="skew-down"]  { transform:translateY(-40px) skewY(2deg); }
[data-scroll-reveal="skew-left"]  { transform:translateX(-40px) skewX(2deg); }
[data-scroll-reveal="skew-right"] { transform:translateX(40px) skewX(-2deg); }

/* ---- Blur Reveal (GPU-friendly, no filter) ---- */
[data-scroll-reveal="blur"]      { opacity:0; transform:translateY(30px) scale(0.97); }
[data-scroll-reveal="blur-scale"]  { opacity:0; transform:scale(0.92); }
[data-scroll-reveal="blur-up"]     { opacity:0; transform:translateY(40px); }

/* ---- Glitch Reveal ---- */
[data-scroll-reveal="glitch"] {
  transform:translateY(30px) skewX(-4deg);
  filter:blur(2px) hue-rotate(30deg);
  clip-path:inset(0 100% 0 0);
}
[data-scroll-reveal="glitch"].revealed {
  clip-path:inset(0 0 0 0);
}

/* ---- Flip Reveal ---- */
[data-scroll-reveal="flip-x"] { transform:perspective(800px) rotateX(30deg) translateY(30px); opacity:0; }
[data-scroll-reveal="flip-y"] { transform:perspective(800px) rotateY(-30deg) translateX(-30px); opacity:0; }

/* ---- Stagger Children ---- */
[data-stagger] > * {
  opacity:0;
  transform:translateY(30px);
  transition:opacity 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
[data-stagger].revealed > *:nth-child(1)  { transition-delay:0.00s; opacity:1; transform:none; }
[data-stagger].revealed > *:nth-child(2)  { transition-delay:0.08s; opacity:1; transform:none; }
[data-stagger].revealed > *:nth-child(3)  { transition-delay:0.16s; opacity:1; transform:none; }
[data-stagger].revealed > *:nth-child(4)  { transition-delay:0.24s; opacity:1; transform:none; }
[data-stagger].revealed > *:nth-child(5)  { transition-delay:0.32s; opacity:1; transform:none; }
[data-stagger].revealed > *:nth-child(6)  { transition-delay:0.40s; opacity:1; transform:none; }
[data-stagger].revealed > *:nth-child(7)  { transition-delay:0.48s; opacity:1; transform:none; }
[data-stagger].revealed > *:nth-child(8)  { transition-delay:0.56s; opacity:1; transform:none; }
[data-stagger].revealed > *:nth-child(9)  { transition-delay:0.64s; opacity:1; transform:none; }
[data-stagger].revealed > *:nth-child(10) { transition-delay:0.72s; opacity:1; transform:none; }
[data-stagger].revealed > *:nth-child(11) { transition-delay:0.80s; opacity:1; transform:none; }
[data-stagger].revealed > *:nth-child(12) { transition-delay:0.88s; opacity:1; transform:none; }

/* ---- Scroll Progress Bar ---- */
.scroll-progress {
  position:fixed; top:0; left:0; height:2px;
  background:linear-gradient(90deg, var(--accent), #d8b4fe);
  box-shadow:0 0 10px var(--accent), 0 0 20px rgba(168,85,247,0.2);
  z-index:9999;
  transform-origin:left;
  transition:transform 0.1s linear;
}

/* ---- Section Divider Line ---- */
.section-line {
  height:1px; background:var(--border-subtle);
  position:relative; overflow:hidden;
}
.section-line::after {
  content:''; position:absolute; left:0; top:0; height:100%; width:0%;
  background:var(--accent);
  box-shadow:0 0 8px var(--accent);
  transition:width 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.section-line.revealed::after { width:100%; }

/* ---- Image Mask Reveal ---- */
.img-reveal {
  position:relative; overflow:hidden;
}
.img-reveal::before {
  content:''; position:absolute; inset:0;
  background:var(--bg-card);
  transform:translateX(0);
  transition:transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  z-index:2;
}
.img-reveal.revealed::before { transform:translateX(100%); }
.img-reveal img {
  transform:scale(1.15);
  transition:transform 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.img-reveal.revealed img { transform:scale(1); }

/* ---- Text Fill on Scroll ---- */
.text-fill-scroll {
  position:relative; display:inline-block;
}
.text-fill-scroll .text-back {
  color:var(--text-faint);
}
.text-fill-scroll .text-front {
  position:absolute; left:0; top:0; white-space:nowrap;
  color:var(--accent);
  clip-path:inset(0 100% 0 0);
  transition:clip-path 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.text-fill-scroll.revealed .text-front {
  clip-path:inset(0 0% 0 0);
}

/* ---- Parallax Layers ---- */
[data-parallax-layer="1"] { will-change:transform; }
[data-parallax-layer="2"] { will-change:transform; }
[data-parallax-layer="3"] { will-change:transform; }

/* ---- Horizontal Scroll Section ---- */
.horizontal-scroll-section {
  position:relative;
  height:300vh;
}
.horizontal-scroll-container {
  position:sticky; top:0;
  height:100vh;
  overflow:hidden;
  display:flex; align-items:center;
}
.horizontal-scroll-track {
  display:flex; gap:20px;
  will-change:transform;
}

/* ---- Sticky Section Title ---- */
.sticky-title {
  position:sticky; top:80px;
  z-index:10;
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg) 70%, transparent 100%);
  padding-bottom:20px;
}

/* ---- Counter Animation ---- */
[data-count] {
  display:inline-block;
}

/* ---- Scroll Velocity Tilt ---- */
[data-velocity-tilt] {
  transition:transform 0.15s ease-out;
  will-change:transform;
}

/* ---- Neon Glow on Scroll Enter ---- */
[data-glow-reveal] {
  transition:box-shadow 1s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 1s, transform 1s;
}
[data-glow-reveal].revealed {
  box-shadow:0 0 40px rgba(168,85,247,0.12), 0 0 80px rgba(168,85,247,0.04);
}

/* ---- Char-by-char reveal ---- */
.char-reveal .char {
  display:inline-block;
  opacity:0;
  transform:translateY(15px);
  transition:opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.char-reveal.revealed .char {
  opacity:1;
  transform:translateY(0);
}

/* ---- Scroll Snap Cards ---- */
.scroll-snap-cards {
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  gap:20px;
  padding:20px;
  scrollbar-width:none;
}
.scroll-snap-cards::-webkit-scrollbar { display:none; }
.scroll-snap-cards > * {
  scroll-snap-align:center;
  flex-shrink:0;
}

/* ---- Marquee speed based on scroll ---- */
.scroll-speed-marquee {
  animation-play-state:paused;
}

/* ---- Noise intensity on scroll ---- */
[data-noise-intensity] {
  position:relative;
}
[data-noise-intensity]::after {
  content:''; position:absolute; inset:-50%;
  background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:0;
  transition:opacity 0.4s;
  pointer-events:none;
  z-index:1;
  animation:noise 0.5s steps(2) infinite;
}
[data-noise-intensity].intense::after {
  opacity:0.04;
}

/* ---- Smooth all transitions globally ---- */
[data-smooth] {
  transition:all 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  [data-scroll-reveal], [data-stagger] > *, .img-reveal, .text-fill-scroll {
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    clip-path:none !important;
  }
  .scroll-progress { display:none; }
}