/* ==========================================================================
   SACRED CALM ANIMATIONS — Enhanced with Pulse Rings, Mandala, Float & Shimmer
   ========================================================================== */

/* Reduced motion: instantaneous display */
@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;
  }

  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-pulse-ring {
    display: none;
  }
}

/* Normal motion: relaxed, serene, reverent */
@media (prefers-reduced-motion: no-preference) {

  /* -----------------------------------------------------------------------
     HERO: Fade & Rise Entrance
     ----------------------------------------------------------------------- */
  @keyframes fadeRise {
    from {
      opacity: 0;
      transform: translateY(22px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

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

  /* -----------------------------------------------------------------------
     HERO: Sacred Pulse Rings — emanating outward from logo
     ----------------------------------------------------------------------- */
  @keyframes sacredPulse {
    0% {
      transform: scale(1);
      opacity: 0.75;
    }
    100% {
      transform: scale(2.6);
      opacity: 0;
    }
  }

  /* -----------------------------------------------------------------------
     HERO: Mandala Background — slow meditative rotation
     ----------------------------------------------------------------------- */
  @keyframes mandalaRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
  }

  /* -----------------------------------------------------------------------
     HERO: Gentle Float — for logo circle
     ----------------------------------------------------------------------- */
  @keyframes gentleFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-6px); }
  }

  /* -----------------------------------------------------------------------
     DEVICE: Floating Phone Frame
     ----------------------------------------------------------------------- */
  @keyframes floatDevice {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    33%       { transform: translateY(-8px) rotate(0.4deg); }
    66%       { transform: translateY(-4px) rotate(-0.3deg); }
  }

  @keyframes floatDeviceAlt {
    0%, 100% { transform: translateY(-4px) rotate(-1.5deg); }
    50%       { transform: translateY(-12px) rotate(-1.8deg); }
  }

  /* -----------------------------------------------------------------------
     GOLD: Shimmer sweep left-to-right on gold cards
     ----------------------------------------------------------------------- */
  @keyframes goldSweep {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }

  /* -----------------------------------------------------------------------
     SCROLL CUE: bouncing line
     ----------------------------------------------------------------------- */
  @keyframes scrollBounce {
    0%, 100% { transform: scaleY(1); opacity: 0.5; }
    50%       { transform: scaleY(1.5); opacity: 1; }
  }

  /* -----------------------------------------------------------------------
     ABOUT: Single pulse ring behind avatar
     ----------------------------------------------------------------------- */
  @keyframes aboutPulse {
    0%   { transform: scale(1); opacity: 0.5; }
    100% { transform: scale(1.6); opacity: 0; }
  }

  /* -----------------------------------------------------------------------
     LOTUS GLOW (existing, retained)
     ----------------------------------------------------------------------- */
  @keyframes sacredGlow {
    0%, 100% {
      box-shadow: 0 4px 20px rgba(150, 68, 0, 0.12), 0 0 0 1px rgba(212, 175, 55, 0.35);
    }
    50% {
      box-shadow: 0 8px 30px rgba(212, 175, 55, 0.4), 0 0 0 2px rgba(212, 175, 55, 0.7);
    }
  }

  /* -----------------------------------------------------------------------
     SCROLL REVEAL
     ----------------------------------------------------------------------- */
  .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
  }

  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .delay-1 { transition-delay: 0.12s; }
  .delay-2 { transition-delay: 0.24s; }
  .delay-3 { transition-delay: 0.36s; }
  .delay-4 { transition-delay: 0.48s; }

  /* -----------------------------------------------------------------------
     HERO ENTRANCE ORCHESTRATION
     ----------------------------------------------------------------------- */
  .hero-motif-enter {
    animation: fadeIn 0.9s ease-out both;
  }

  .hero-tagline-card-enter {
    animation: fadeRise 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
  }

  .hero-headline-enter {
    animation: fadeRise 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both;
  }

  .hero-subtext-enter {
    animation: fadeRise 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
  }

  .hero-cta-enter {
    animation: fadeRise 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.52s both;
  }

  /* -----------------------------------------------------------------------
     PULSE RINGS on hero logo
     ----------------------------------------------------------------------- */
  .hero-pulse-ring {
    animation: sacredPulse 2.8s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
  }

  .hero-pulse-ring.ring-1 { animation-delay: 0s; }
  .hero-pulse-ring.ring-2 { animation-delay: 0.93s; }
  .hero-pulse-ring.ring-3 { animation-delay: 1.86s; }

  /* Logo circle gentle float */
  .hero-logo-circle {
    animation: sacredGlow 4s ease-in-out infinite, gentleFloat 5.5s ease-in-out infinite;
  }

  /* -----------------------------------------------------------------------
     MANDALA BACKGROUND ROTATION
     ----------------------------------------------------------------------- */
  .hero-mandala-bg svg {
    animation: mandalaRotate 120s linear infinite;
  }

  /* -----------------------------------------------------------------------
     FLOATING PHONE FRAMES
     ----------------------------------------------------------------------- */
  .phone-frame-floating {
    animation: floatDevice 6s ease-in-out infinite;
  }

  .phone-frame-floating--secondary {
    animation: floatDeviceAlt 7.2s ease-in-out infinite;
    animation-delay: 0.8s;
  }

  /* Feature flow phones */
  .fflow-phone--primary {
    animation: floatDevice 6s ease-in-out infinite;
  }

  .fflow-phone--secondary {
    animation: floatDeviceAlt 7.2s ease-in-out infinite;
    animation-delay: 0.8s;
  }

  /* -----------------------------------------------------------------------
     GOLD SHIMMER SWEEP on gold-shimmer-card elements
     ----------------------------------------------------------------------- */
  .gold-shimmer-card {
    background-image: linear-gradient(
      105deg,
      transparent 40%,
      rgba(212, 175, 55, 0.18) 50%,
      transparent 60%
    );
    background-size: 200% 100%;
    animation: goldSweep 3.5s ease-in-out infinite;
  }

  /* -----------------------------------------------------------------------
     SCROLL CUE LINE
     ----------------------------------------------------------------------- */
  .scroll-cue-line {
    animation: scrollBounce 1.8s ease-in-out infinite;
  }

  /* -----------------------------------------------------------------------
     ABOUT AVATAR PULSE RING
     ----------------------------------------------------------------------- */
  .about-pulse-ring {
    animation: aboutPulse 2.4s ease-out infinite;
  }
}