/* ============================================
   Animations & Transitions
   ============================================ */

/* --- Scroll Reveal Base States --- */

[data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
  transition: opacity var(--duration-slow) var(--ease-out-expo),
              transform var(--duration-slow) var(--ease-out-expo);
}

[data-reveal="fade-up"] {
  transform: translateY(40px);
}

[data-reveal="fade-in"] {
  transform: none;
}

[data-reveal="slide-left"] {
  transform: translateX(60px);
}

[data-reveal="slide-right"] {
  transform: translateX(-60px);
}

[data-reveal="scale-in"] {
  transform: scale(0.92);
}

/* Revealed state */
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* --- SVG Brush Stroke Drawing --- */

.brush-stroke path.brush-path,
.brush-stroke .brush-path {
  stroke-dasharray: var(--path-length, 1000);
  stroke-dashoffset: var(--path-length, 1000);
  transition: stroke-dashoffset var(--duration-brush) var(--ease-out-expo);
}

.brush-stroke.is-visible path.brush-path,
.brush-stroke.is-visible .brush-path {
  stroke-dashoffset: 0;
}

/* Secondary strokes animate slightly delayed */
.brush-stroke.is-visible path:nth-child(2) {
  transition-delay: 0.3s;
}

.brush-stroke.is-visible path:nth-child(3) {
  transition-delay: 0.5s;
}

/* --- Lotus Petal Animation --- */
/* Top-down lotus with 12 outer petals, 12 inner petals, center */

.lotus-animated .lotus-petal {
  opacity: 0;
  transform-origin: center center;
  transform: scale(0.4);
  transition: opacity 0.7s var(--ease-out-expo),
              transform 0.9s var(--ease-out-expo);
}

.lotus-animated.is-visible .lotus-petal {
  opacity: var(--petal-opacity, 0.7);
  transform: scale(1);
}

/* Lily pads (1-2) — appear first on water surface */
.lotus-animated.is-visible .lotus-petal:nth-child(1)  { transition-delay: 0.0s;  --petal-opacity: 0.10; }
.lotus-animated.is-visible .lotus-petal:nth-child(2)  { transition-delay: 0.15s; --petal-opacity: 0.08; }

/* Outer petals (3-6) — blossom open wide from center */
.lotus-animated.is-visible .lotus-petal:nth-child(3)  { transition-delay: 0.4s;  --petal-opacity: 0.3; }
.lotus-animated.is-visible .lotus-petal:nth-child(4)  { transition-delay: 0.55s; --petal-opacity: 0.3; }
.lotus-animated.is-visible .lotus-petal:nth-child(5)  { transition-delay: 0.7s;  --petal-opacity: 0.25; }
.lotus-animated.is-visible .lotus-petal:nth-child(6)  { transition-delay: 0.85s; --petal-opacity: 0.25; }

/* Inner petals (7-9) — rise up through center, darker */
.lotus-animated.is-visible .lotus-petal:nth-child(7)  { transition-delay: 1.1s;  --petal-opacity: 0.45; }
.lotus-animated.is-visible .lotus-petal:nth-child(8)  { transition-delay: 1.25s; --petal-opacity: 0.45; }
.lotus-animated.is-visible .lotus-petal:nth-child(9)  { transition-delay: 1.4s;  --petal-opacity: 0.55; }

/* Seed pod center (10) */
.lotus-animated.is-visible .lotus-petal:nth-child(10) { transition-delay: 1.6s;  --petal-opacity: 0.2; }

/* Water ripples (11-12) */
.lotus-animated.is-visible .lotus-petal:nth-child(11) { transition-delay: 1.8s;  --petal-opacity: 0.12; }
.lotus-animated.is-visible .lotus-petal:nth-child(12) { transition-delay: 1.9s;  --petal-opacity: 0.08; }

/* Center detail elements (stamens, lines) — fade in after petals */
.lotus-animated circle:not(.lotus-petal),
.lotus-animated line {
  opacity: 0;
  transition: opacity 0.8s var(--ease-in-out-soft);
}

.lotus-animated.is-visible circle:not(.lotus-petal),
.lotus-animated.is-visible line {
  transition-delay: 1.5s;
}

/* --- Hero Content Stagger --- */

.hero__content > * {
  opacity: 0;
  transform: translateY(30px);
  animation: hero-stagger 0.9s var(--ease-out-expo) forwards;
}

.hero__content > *:nth-child(1) { animation-delay: 0.3s; }
.hero__content > *:nth-child(2) { animation-delay: 0.5s; }
.hero__content > *:nth-child(3) { animation-delay: 0.7s; }
.hero__content > *:nth-child(4) { animation-delay: 0.9s; }
.hero__content > *:nth-child(5) { animation-delay: 1.1s; }

@keyframes hero-stagger {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Atmospheric Background Shift --- */

@keyframes ink-wash-shift {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.hero__bg {
  background:
    radial-gradient(ellipse at 20% 40%, rgba(194, 58, 43, 0.02), transparent 50%),
    radial-gradient(ellipse at 80% 60%, rgba(184, 134, 11, 0.015), transparent 50%),
    radial-gradient(ellipse at 50% 30%, rgba(45, 106, 79, 0.01), transparent 40%);
  background-size: 200% 200%;
  animation: ink-wash-shift 30s ease-in-out infinite;
}

/* --- Page Load Fade --- */

@keyframes page-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

body {
  animation: page-enter 0.5s var(--ease-in-out-soft);
}

/* --- Card Stagger (applied via JS data-reveal-delay) --- */

[data-reveal-delay] {
  transition-delay: calc(var(--reveal-delay, 0) * 1ms);
}

/* --- Scroll Indicator Bounce --- */

@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* --- Nav transition --- */

.nav__link {
  position: relative;
}

/* --- Reduced Motion --- */

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .brush-stroke path.brush-path {
    stroke-dashoffset: 0;
    transition: none;
  }

  .lotus-animated .lotus-petal {
    opacity: var(--petal-opacity, 0.9);
    transform: none;
    transition: none;
  }

  .hero__content > * {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .hero__bg {
    animation: none;
  }

  body {
    animation: none;
  }
}