/* =============================================
   SUTRA AI — SCROLL ANIMATIONS CSS v2.0
   Companion to scroll-engine.js
   More dramatic 3D perspective entries
   ============================================= */

/* ═══════════════════════════════════════════════
   SCROLL REVEAL BASE — Dramatic 3D entry
   ═══════════════════════════════════════════════ */
[data-scroll] {
  opacity: 0;
  transform:
    perspective(800px)
    translateY(60px)
    rotateX(12deg)
    scale(0.97);
  transform-origin: 50% 100%;
  transition:
    opacity  0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-scroll].scroll-visible {
  opacity: 1;
  transform:
    perspective(800px)
    translateY(0)
    rotateX(0deg)
    scale(1);
}

/* ── DIRECTIONAL VARIANTS ── */
[data-scroll="fade-up"] {
  transform: perspective(800px) translateY(50px) rotateX(8deg) scale(0.98);
}

[data-scroll="fade-down"] {
  transform: perspective(800px) translateY(-40px) rotateX(-6deg) scale(0.98);
}

[data-scroll="fade-left"] {
  transform: perspective(800px) translateX(-40px) rotateY(8deg) scale(0.98);
}

[data-scroll="fade-right"] {
  transform: perspective(800px) translateX(40px) rotateY(-8deg) scale(0.98);
}

[data-scroll="zoom-in"] {
  transform: perspective(800px) scale(0.90) rotateX(4deg);
}

[data-scroll="zoom-out"] {
  transform: scale(1.08);
}

[data-scroll="flip"] {
  transform: perspective(800px) rotateX(25deg);
}

[data-scroll="flip-y"] {
  transform: perspective(800px) rotateY(20deg);
}

/* Visible state for all variants */
[data-scroll="fade-up"].scroll-visible,
[data-scroll="fade-down"].scroll-visible,
[data-scroll="fade-left"].scroll-visible,
[data-scroll="fade-right"].scroll-visible,
[data-scroll="zoom-in"].scroll-visible,
[data-scroll="zoom-out"].scroll-visible,
[data-scroll="flip"].scroll-visible,
[data-scroll="flip-y"].scroll-visible {
  transform: perspective(800px) translateY(0) translateX(0) rotateX(0) rotateY(0) scale(1);
  opacity: 1;
}

/* ── CARDS get more pronounced entry ── */
.feature-card[data-scroll],
.pricing-card[data-scroll],
.step-card[data-scroll],
.plan-card[data-scroll],
.download-card[data-scroll],
.desi-showcase__card[data-scroll] {
  transform:
    perspective(600px)
    translateY(50px)
    rotateX(15deg)
    scale(0.95);
}
.feature-card[data-scroll].scroll-visible,
.pricing-card[data-scroll].scroll-visible,
.step-card[data-scroll].scroll-visible,
.plan-card[data-scroll].scroll-visible,
.download-card[data-scroll].scroll-visible,
.desi-showcase__card[data-scroll].scroll-visible {
  transform:
    perspective(600px)
    translateY(0)
    rotateX(0deg)
    scale(1);
}

/* ── DELAY MODIFIERS ── */
[data-scroll-delay="100"] { transition-delay: 100ms; }
[data-scroll-delay="200"] { transition-delay: 200ms; }
[data-scroll-delay="300"] { transition-delay: 300ms; }
[data-scroll-delay="400"] { transition-delay: 400ms; }
[data-scroll-delay="500"] { transition-delay: 500ms; }
[data-scroll-delay="600"] { transition-delay: 600ms; }
[data-scroll-delay="800"] { transition-delay: 800ms; }

/* ── DURATION MODIFIERS ── */
[data-scroll-duration="fast"] {
  transition-duration: var(--duration-base);
}

[data-scroll-duration="slow"] {
  transition-duration: var(--duration-crawl);
}


/* ═══════════════════════════════════════════════
   STAGGER CHILDREN — 3D cascade
   ═══════════════════════════════════════════════ */
[data-stagger] > * {
  opacity: 0;
  transform:
    perspective(600px)
    translateY(40px)
    rotateX(12deg)
    scale(0.96);
  transition:
    opacity  0.65s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-stagger] > *.stagger-visible {
  opacity: 1;
  transform: perspective(600px) translateY(0) rotateX(0) scale(1);
}


/* ═══════════════════════════════════════════════
   TILT TRANSITION BASE
   ═══════════════════════════════════════════════ */
[data-tilt] {
  transition: transform 300ms var(--ease-out-expo);
  transform-style: preserve-3d;
  will-change: transform;
}


/* ═══════════════════════════════════════════════
   SCROLL PROGRESS INDICATOR
   ═══════════════════════════════════════════════ */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 9999;
  pointer-events: none;
}

.scroll-progress__bar {
  height: 100%;
  background: var(--gradient-saffron);
  transform-origin: left;
  transform: scaleX(var(--scroll-y, 0));
  transition: transform 100ms linear;
}


/* ═══════════════════════════════════════════════
   PARALLAX Z-DEPTH LABELS (for styling)
   ═══════════════════════════════════════════════ */
[data-parallax] {
  will-change: transform;
}


/* ═══════════════════════════════════════════════
   REDUCED MOTION OVERRIDE
   ═══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  [data-scroll],
  [data-stagger] > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  [data-tilt] {
    transform: none !important;
  }

  [data-parallax] {
    transform: none !important;
  }

  .scroll-progress__bar {
    transition: none;
  }
}