/* ═══════════════════════════════════════════════════════════
   SHARED ANIMATION SYSTEM
   Pure CSS animations — Hardware-accelerated (transform + opacity)
   ═══════════════════════════════════════════════════════════ */

/* ── BASE: Elements hidden before animation ── */
[data-anim] {
  opacity: 0;
  will-change: transform, opacity;
}

[data-anim].is-visible {
  animation-fill-mode: forwards;
}

/* ── FADE UP ── */
[data-anim="fade-up"] {
  transform: translateY(40px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-anim="fade-up"].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── FADE IN ── */
[data-anim="fade-in"] {
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-anim="fade-in"].is-visible {
  opacity: 1;
}

/* ── CLIP REVEAL (text mask from bottom) ── */
[data-anim="clip-reveal"] {
  clip-path: inset(100% 0 0 0);
  opacity: 1; /* clip does the hiding */
  transition: clip-path 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-anim="clip-reveal"].is-visible {
  clip-path: inset(0 0 0 0);
}

/* ── SCALE POP ── */
[data-anim="scale-pop"] {
  transform: scale(0.85);
  transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
[data-anim="scale-pop"].is-visible {
  opacity: 1;
  transform: scale(1);
}

/* ── SLIDE LEFT ── */
[data-anim="slide-left"] {
  transform: translateX(60px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-anim="slide-left"].is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ── SLIDE RIGHT ── */
[data-anim="slide-right"] {
  transform: translateX(-60px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-anim="slide-right"].is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ── DRAW LINE (border expand) ── */
[data-anim="draw-line"] {
  transform-origin: left;
  transform: scaleX(0);
  opacity: 1;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-anim="draw-line"].is-visible {
  transform: scaleX(1);
}

/* ── STAGGER CONTAINER ── */
/* Children with [data-anim-child] get staggered delays */
[data-anim-stagger] [data-anim-child] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-anim-stagger].is-visible [data-anim-child] {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays — up to 12 children */
[data-anim-stagger].is-visible [data-anim-child]:nth-child(1)  { transition-delay: 0ms; }
[data-anim-stagger].is-visible [data-anim-child]:nth-child(2)  { transition-delay: 80ms; }
[data-anim-stagger].is-visible [data-anim-child]:nth-child(3)  { transition-delay: 160ms; }
[data-anim-stagger].is-visible [data-anim-child]:nth-child(4)  { transition-delay: 240ms; }
[data-anim-stagger].is-visible [data-anim-child]:nth-child(5)  { transition-delay: 320ms; }
[data-anim-stagger].is-visible [data-anim-child]:nth-child(6)  { transition-delay: 400ms; }
[data-anim-stagger].is-visible [data-anim-child]:nth-child(7)  { transition-delay: 480ms; }
[data-anim-stagger].is-visible [data-anim-child]:nth-child(8)  { transition-delay: 560ms; }
[data-anim-stagger].is-visible [data-anim-child]:nth-child(9)  { transition-delay: 640ms; }
[data-anim-stagger].is-visible [data-anim-child]:nth-child(10) { transition-delay: 720ms; }
[data-anim-stagger].is-visible [data-anim-child]:nth-child(11) { transition-delay: 800ms; }
[data-anim-stagger].is-visible [data-anim-child]:nth-child(12) { transition-delay: 880ms; }

/* ── 3D CARD TILT (hover only — no scroll trigger) ── */
.js-tilt {
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
  transform-style: preserve-3d;
}
.js-tilt:hover {
  /* JS sets --rx and --ry */
  transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}

/* ── PARALLAX FLOAT (continuous) ── */
@keyframes parallaxFloat {
  0%   { transform: translateY(0) rotate(0deg); }
  50%  { transform: translateY(-15px) rotate(3deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
.anim-float {
  animation: parallaxFloat 6s ease-in-out infinite;
}
.anim-float-slow {
  animation: parallaxFloat 10s ease-in-out infinite;
  animation-delay: -3s;
}

/* ── FADE LEFT ── */
[data-anim="fade-left"] {
  transform: translateX(-40px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-anim="fade-left"].is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ── BLUR IN ── */
[data-anim="blur-in"] {
  filter: blur(10px);
  transition: opacity 0.8s ease, filter 0.8s ease;
}
[data-anim="blur-in"].is-visible {
  opacity: 1;
  filter: blur(0);
}

/* ── PAGE EXIT ── */
body.page-exit {
  opacity: 0 !important;
  transition: opacity 400ms cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* ── CUSTOM DELAY SUPPORT via data-anim-delay ── */
@media (prefers-reduced-motion: reduce) {
  [data-anim],
  [data-anim-stagger] [data-anim-child],
  .js-tilt,
  .anim-float,
  .anim-float-slow {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}