/* ============================================
   LOTUS THEME — ANIMATIONS
   GSAP integration classes + CSS animations
   ============================================ */

/* --- GSAP Reveal States --- */
/* Elements start hidden, GSAP animates them in */
.gs-reveal {
  opacity: 0;
  transform: translateY(40px);
  will-change: transform, opacity;
}

.gs-reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  will-change: transform, opacity;
}

.gs-reveal-right {
  opacity: 0;
  transform: translateX(60px);
  will-change: transform, opacity;
}

.gs-reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  will-change: transform, opacity;
}

/* When GSAP hasn't loaded or JS is disabled, show everything */
.no-js .gs-reveal,
.no-js .gs-reveal-left,
.no-js .gs-reveal-right,
.no-js .gs-reveal-scale {
  opacity: 1;
  transform: none;
}

/* CSS-only safety net: if GSAP hasn't animated the element within 4s
   (CDN stall, JS error, slow mobile connection), fade it in via CSS so
   content is never permanently invisible. GSAP's inline styles override
   this once it takes over, so on healthy loads this never fires. */
@keyframes gs-fallback-reveal {
  to { opacity: 1; transform: none; }
}

.gs-reveal,
.gs-reveal-left,
.gs-reveal-right,
.gs-reveal-scale {
  animation: gs-fallback-reveal 0.6s ease both;
  animation-delay: 4s;
}


/* --- Hero Entrance States --- */
/* Elements start hidden, cinematic timeline animates them in on page load */
.hero--entrance {
  opacity: 0;
  will-change: transform, opacity;
}

/* Title lines use clip-path reveal: text rises from behind a ledge */
.hero__title-line {
  display: block;
  overflow: hidden;
  line-height: 1.2;
  padding-bottom: 0.15em;
}

.hero__title-line-inner {
  display: block;
  transform: translateY(110%);
  will-change: transform;
}

/* Accent line starts at zero height for draw-in effect */
.hero .hero__accent-line.hero--entrance {
  transform: scaleY(0);
  transform-origin: center center;
}

/* No-JS fallback */
.no-js .hero--entrance {
  opacity: 1;
  transform: none;
}
.no-js .hero__title-line-inner {
  transform: none;
}

/* --- Clip-path wipe reveal --- */
.gs-wipe {
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}
.no-js .gs-wipe {
  clip-path: none;
}

/* --- Stagger parent --- */
.gs-stagger > * {
  opacity: 0;
  transform: translateY(30px);
  will-change: transform, opacity;
}
.no-js .gs-stagger > * {
  opacity: 1;
  transform: none;
}


/* --- CSS Animations (no JS needed) --- */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* --- Floating animation for hero background elements --- */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-10px) rotate(1deg); }
  66% { transform: translateY(5px) rotate(-1deg); }
}

@keyframes floatSlow {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(10px, -15px); }
  50% { transform: translate(-5px, -25px); }
  75% { transform: translate(-15px, -10px); }
}

/* --- Lotus petal animation --- */
@keyframes petalRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* --- Line draw animation (for process flow) --- */
@keyframes drawLine {
  from { stroke-dashoffset: 1000; }
  to { stroke-dashoffset: 0; }
}

/* --- Gradient shift (for hero backgrounds) --- */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* --- Page transitions --- */
/* GSAP fallback: fade out before navigation */
.site-main.is-leaving {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
  pointer-events: none;
}

/* GSAP fallback: fade in on page load */
.site-main.is-entering {
  opacity: 0;
  transform: translateY(12px);
}

/* View Transitions API (Chrome 111+, Edge 111+) */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: pageOut 0.25s ease-in forwards;
}

::view-transition-new(root) {
  animation: pageIn 0.3s ease-out;
}

@keyframes pageOut {
  to {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@keyframes pageIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}


/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .gs-reveal,
  .gs-reveal-left,
  .gs-reveal-right,
  .gs-reveal-scale,
  .hero--entrance,
  .gs-wipe,
  .gs-stagger > * {
    opacity: 1;
    transform: none;
    clip-path: none;
  }

  .hero__title-line-inner {
    transform: none;
  }

  .site-main.is-leaving,
  .site-main.is-entering {
    opacity: 1 !important;
    transform: none !important;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}