/* ═══════════════════════════════════════════════
   Scale Theme V2 — Animations CSS
   @keyframes, data-animate selectors, duration/easing
   modifiers, parallax, reduced-motion.
   ═══════════════════════════════════════════════ */

/* ── BASE ANIMATION STATE ───────────────────── */

/* Only hide elements when animation JS is loaded (body gets .animations-ready class) */
/* Without JS, all elements are visible (progressive enhancement) */
.animations-ready [data-animate] {
  opacity: 0;
  will-change: opacity, transform;
}

[data-animate].animated {
  opacity: 1;
  will-change: auto;
}

/* Inherit = wait for JS to resolve from section */
.animations-ready [data-animate="inherit"] { opacity: 0; }
[data-animate="none"] { opacity: 1; will-change: auto; }

/* ── KEYFRAMES ──────────────────────────────── */

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-down {
  from { opacity: 0; transform: translateY(-30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-left {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes fade-right {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes zoom-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes zoom-out {
  from { opacity: 0; transform: scale(1.1); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes slide-up {
  from { opacity: 0; transform: translateY(100%); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slide-down {
  from { opacity: 0; transform: translateY(-100%); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes wipe-in {
  from { opacity: 0; clip-path: inset(0 100% 0 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0); }
}

@keyframes blur-in {
  from { opacity: 0; filter: blur(10px); }
  to { opacity: 1; filter: blur(0); }
}

/* ── ANIMATION ASSIGNMENTS ──────────────────── */

[data-animate="fade"].animated { animation: fade-in var(--animate-duration, 600ms) var(--animate-easing, ease-out) var(--animate-delay, 0ms) both; }
[data-animate="fade-up"].animated { animation: fade-up var(--animate-duration, 600ms) var(--animate-easing, ease-out) var(--animate-delay, 0ms) both; }
[data-animate="fade-down"].animated { animation: fade-down var(--animate-duration, 600ms) var(--animate-easing, ease-out) var(--animate-delay, 0ms) both; }
[data-animate="fade-left"].animated { animation: fade-left var(--animate-duration, 600ms) var(--animate-easing, ease-out) var(--animate-delay, 0ms) both; }
[data-animate="fade-right"].animated { animation: fade-right var(--animate-duration, 600ms) var(--animate-easing, ease-out) var(--animate-delay, 0ms) both; }
[data-animate="zoom-in"].animated { animation: zoom-in var(--animate-duration, 600ms) var(--animate-easing, ease-out) var(--animate-delay, 0ms) both; }
[data-animate="zoom-out"].animated { animation: zoom-out var(--animate-duration, 600ms) var(--animate-easing, ease-out) var(--animate-delay, 0ms) both; }
[data-animate="slide-up"].animated { animation: slide-up var(--animate-duration, 600ms) var(--animate-easing, ease-out) var(--animate-delay, 0ms) both; }
[data-animate="slide-down"].animated { animation: slide-down var(--animate-duration, 600ms) var(--animate-easing, ease-out) var(--animate-delay, 0ms) both; }
[data-animate="wipe"].animated { animation: wipe-in var(--animate-duration, 800ms) var(--animate-easing, ease-out) var(--animate-delay, 0ms) both; }
[data-animate="blur"].animated { animation: blur-in var(--animate-duration, 600ms) var(--animate-easing, ease-out) var(--animate-delay, 0ms) both; }

/* ── DURATION MODIFIERS ─────────────────────── */

[data-animate-duration="fast"] { --animate-duration: 300ms; }
[data-animate-duration="normal"] { --animate-duration: 600ms; }
[data-animate-duration="slow"] { --animate-duration: 1000ms; }

/* ── EASING MODIFIERS ───────────────────────── */

[data-animate-easing="ease-out"] { --animate-easing: var(--ease-out); }
[data-animate-easing="ease-in-out"] { --animate-easing: var(--ease-in-out); }
[data-animate-easing="bounce"] { --animate-easing: var(--ease-bounce); }
[data-animate-easing="spring"] { --animate-easing: var(--ease-spring); }

/* ── STAGGER ────────────────────────────────── */

/* Stagger is opt-in via data-stagger-children on the parent container.
   JS calculates --animate-delay based on visual position (not DOM order).
   No CSS nth-child rules — JS handles it all for accuracy. */

/* ── TEXT ANIMATIONS ────────────────────────── */

@keyframes text-word-reveal {
  from { opacity: 0; transform: translateY(100%); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes text-char-reveal {
  from { opacity: 0; transform: translateY(40%); filter: blur(4px); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.animations-ready [data-animate="text-words"] .word { overflow: hidden; display: inline-block; }
.animations-ready [data-animate="text-words"] .word-inner {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
}
[data-animate="text-words"].animated .word-inner {
  animation: text-word-reveal 0.5s var(--ease-out, ease-out) calc(var(--word-index, 0) * 60ms) both;
}

.animations-ready [data-animate="text-chars"] .char {
  display: inline-block;
  opacity: 0;
}
[data-animate="text-chars"].animated .char {
  animation: text-char-reveal 0.4s var(--ease-out, ease-out) calc(var(--char-index, 0) * 30ms) both;
}

/* ── PARALLAX ───────────────────────────────── */

[data-parallax] {
  will-change: transform;
}

/* ── VISUAL PREVIEW MODE ────────────────────── */
/* Shopify editor block picker: disable all animations so blocks are visible */

[data-visual-preview-mode][data-animate],
shopify-visual-preview-block-list [data-animate] {
  opacity: 1;
  animation: none;
  will-change: auto;
  transform: none;
}

/* ── REDUCED MOTION ─────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  [data-animate],
  [data-parallax] {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
    filter: none !important;
    will-change: auto !important;
  }

  [data-animate],
  [data-parallax],
  .transition,
  .transition-fast,
  .transition-slow,
  .transition-transform,
  .transition-opacity,
  .transition-colors {
    transition: none !important;
  }
}