/* ============================================
   FUTURE DIGITAL — Animation System
   Apple-style scroll-driven animations
   ============================================ */

/* ── Base Reveal State ── */
[data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out);
}

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

/* ── Reveal Variants ── */

/* Fade up (default) */
[data-reveal="fade-up"] {
  transform: translateY(60px);
}

/* Fade in (no movement) */
[data-reveal="fade"] {
  transform: none;
}

/* Scale up */
[data-reveal="scale"] {
  transform: scale(0.92);
}

/* Slide from left */
[data-reveal="slide-left"] {
  transform: translateX(-80px);
}

/* Slide from right */
[data-reveal="slide-right"] {
  transform: translateX(80px);
}

/* Zoom in with slight blur */
[data-reveal="zoom"] {
  transform: scale(0.85);
  filter: blur(8px);
  transition:
    opacity var(--duration-slow) var(--ease-out),
    transform var(--duration-slow) var(--ease-out),
    filter var(--duration-slow) var(--ease-out);
}

[data-reveal="zoom"].is-visible {
  filter: blur(0);
}

/* ── Stagger Delays ── */
[data-reveal-delay="1"] { transition-delay: 100ms; }
[data-reveal-delay="2"] { transition-delay: 200ms; }
[data-reveal-delay="3"] { transition-delay: 300ms; }
[data-reveal-delay="4"] { transition-delay: 400ms; }
[data-reveal-delay="5"] { transition-delay: 500ms; }
[data-reveal-delay="6"] { transition-delay: 600ms; }
[data-reveal-delay="7"] { transition-delay: 700ms; }
[data-reveal-delay="8"] { transition-delay: 800ms; }

/* ── Hero Entrance Animations ── */
@keyframes heroFadeIn {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes heroSubtitleFade {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero__title {
  animation: heroFadeIn 1.2s var(--ease-out) forwards;
  opacity: 0;
}

.hero__subtitle {
  animation: heroSubtitleFade 1s var(--ease-out) 0.4s forwards;
  opacity: 0;
}

.hero__tagline {
  animation: heroSubtitleFade 1s var(--ease-out) 0.7s forwards;
  opacity: 0;
}

/* ── Scroll Indicator ── */
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(12px); opacity: 1; }
}

.scroll-indicator {
  animation: scrollBounce 2s ease-in-out infinite;
}

/* ── Clip-path Circle Reveal (2SHTEC) ── */
.clip-reveal {
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 1.2s var(--ease-out);
}

.clip-reveal.is-visible {
  clip-path: circle(100% at 50% 50%);
}

/* ── Card Stack (Berger) ── */
@keyframes cardFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ── Glow Pulse ── */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(45, 140, 240, 0.1); }
  50% { box-shadow: 0 0 40px rgba(45, 140, 240, 0.3); }
}

/* ── Gradient Shift ── */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Line Draw ── */
@keyframes lineDraw {
  0% { width: 0; }
  100% { width: 60px; }
}

.line-accent {
  height: 2px;
  width: 0;
  border-radius: var(--radius-full);
}

.line-accent.is-visible {
  animation: lineDraw 0.8s var(--ease-out) forwards;
}

/* ── Counter Number ── */
.counter-number {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* ── Horizontal Scroll (Coltex) ── */
.horizontal-scroll-wrapper {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.horizontal-scroll-track {
  display: flex;
  gap: var(--space-8);
  transition: transform 0.1s linear;
  will-change: transform;
}

/* ═══════════════════════════════════
   APPLE-STYLE SCROLL ZOOM + 3D ROTATE
   Each image rotates in from a different perspective
   ═══════════════════════════════════ */
[data-apple-zoom] {
  --zoom-progress: 0;
  will-change: transform, opacity, filter, border-radius;
  perspective: 1200px;
  opacity: calc(0.3 + 0.7 * var(--zoom-progress));
  filter: blur(calc(6px * (1 - var(--zoom-progress))));
  border-radius: calc(28px * (1 - var(--zoom-progress)) + 12px);
  overflow: hidden;
  transition: none;
  transform-origin: center center;
  transform-style: preserve-3d;
}

/* Default: flip from bottom */
[data-apple-zoom] {
  transform: scale(calc(0.75 + 0.25 * var(--zoom-progress)))
             rotateX(calc(45deg * (1 - var(--zoom-progress))));
}

/* Flip from left side */
[data-apple-zoom="flip-left"] {
  transform: scale(calc(0.75 + 0.25 * var(--zoom-progress)))
             rotateY(calc(-60deg * (1 - var(--zoom-progress))));
  transform-origin: left center;
}

/* Flip from right side */
[data-apple-zoom="flip-right"] {
  transform: scale(calc(0.75 + 0.25 * var(--zoom-progress)))
             rotateY(calc(60deg * (1 - var(--zoom-progress))));
  transform-origin: right center;
}

/* Flip from top */
[data-apple-zoom="flip-top"] {
  transform: scale(calc(0.75 + 0.25 * var(--zoom-progress)))
             rotateX(calc(-45deg * (1 - var(--zoom-progress))));
  transform-origin: center top;
}

/* Diagonal flip — cross-section perspective */
[data-apple-zoom="flip-diagonal"] {
  transform: scale(calc(0.7 + 0.3 * var(--zoom-progress)))
             rotateX(calc(25deg * (1 - var(--zoom-progress))))
             rotateY(calc(-35deg * (1 - var(--zoom-progress))))
             rotateZ(calc(8deg * (1 - var(--zoom-progress))));
  transform-origin: center center;
}

/* Shadow that grows with the zoom */
[data-apple-zoom]::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  box-shadow: 0 calc(20px * var(--zoom-progress)) calc(60px * var(--zoom-progress)) rgba(0, 0, 0, calc(0.2 * var(--zoom-progress)));
  pointer-events: none;
  z-index: -1;
}

/* ── Responsive: reduce motion ── */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    filter: none !important;
  }

  .hero__title,
  .hero__subtitle,
  .hero__tagline {
    animation: none !important;
    opacity: 1 !important;
  }

  .scroll-indicator {
    animation: none;
  }

  .clip-reveal {
    clip-path: none;
    transition: none;
  }

  [data-apple-zoom] {
    --zoom-progress: 1;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}