/* ==========================================================================
   S.A.O - Premium Animations & Scroll Transitions (2030 Style)
   ========================================================================== */

/* --- Keyframe Animations --- */

@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
  100% { transform: translateY(0px); }
}

@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); }
  40% { transform: translateY(-15px) translateX(-50%); }
  60% { transform: translateY(-7px) translateX(-50%); }
}

/* --- Fallback Scroll Animations (IntersectionObserver triggered) --- */

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

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

@keyframes scaleUp {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Scroll Trigger Active States (Only for fallback environments) */
.no-scroll-timeline .reveal-right,
.no-scroll-timeline .reveal-left,
.no-scroll-timeline .scale-in {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hero Page-Load Animations (Native CSS, no JS dependency) */
.hero-content .reveal-right,
.hero-content .reveal-left,
.hero-content .scale-in {
  opacity: 0;
  animation: heroFadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

.no-scroll-timeline .reveal-right.active {
  animation: slideInFromRight 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.no-scroll-timeline .reveal-left.active {
  animation: slideInFromLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.no-scroll-timeline .scale-in.active {
  animation: scaleUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Scoped child fallback triggers on Firefox/Safari */
.no-scroll-timeline .image-fly-container.active .solo-card {
  animation: scroll-photo-solo-active 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes scroll-photo-solo-active {
  from {
    transform: translateY(60px) scale(0.9) rotate(-2deg);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1) rotate(-1deg);
    opacity: 1;
  }
}

.no-scroll-timeline .image-fly-container.active .deck-3 .card-1 {
  animation: scroll-deck-3-card-1-active 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.no-scroll-timeline .image-fly-container.active .deck-3 .card-2 {
  animation: scroll-deck-3-card-2-active 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.no-scroll-timeline .image-fly-container.active .deck-3 .card-3 {
  animation: scroll-deck-3-card-3-active 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes scroll-deck-3-card-1-active {
  from { transform: translate3d(0, 50px, 0) scale(0.95); opacity: 0; }
  to { transform: translate3d(0, -10px, 0) scale(1.05) rotate(1deg); opacity: 1; }
}
@keyframes scroll-deck-3-card-2-active {
  from { transform: translate3d(0, 30px, 0) scale(0.9) rotate(0); opacity: 0; }
  to { transform: translate3d(-100px, 20px, 0) scale(0.98) rotate(-12deg); opacity: 0.9; }
}
@keyframes scroll-deck-3-card-3-active {
  from { transform: translate3d(0, 30px, 0) scale(0.9) rotate(0); opacity: 0; }
  to { transform: translate3d(100px, -20px, 0) scale(0.98) rotate(12deg); opacity: 0.8; }
}

.no-scroll-timeline .image-fly-container.active .deck-4 .card-1 {
  animation: scroll-deck-4-card-1-active 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.no-scroll-timeline .image-fly-container.active .deck-4 .card-2 {
  animation: scroll-deck-4-card-2-active 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.no-scroll-timeline .image-fly-container.active .deck-4 .card-3 {
  animation: scroll-deck-4-card-3-active 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.no-scroll-timeline .image-fly-container.active .deck-4 .card-4 {
  animation: scroll-deck-4-card-4-active 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes scroll-deck-4-card-1-active {
  from { transform: translate3d(0, 50px, 0) scale(0.95); opacity: 0; }
  to { transform: translate3d(0, -10px, 0) scale(1.05) rotate(1deg); opacity: 1; }
}
@keyframes scroll-deck-4-card-2-active {
  from { transform: translate3d(0, 30px, 0) scale(0.9) rotate(0); opacity: 0; }
  to { transform: translate3d(-110px, 30px, 0) scale(0.98) rotate(-10deg); opacity: 0.92; }
}
@keyframes scroll-deck-4-card-3-active {
  from { transform: translate3d(0, 30px, 0) scale(0.9) rotate(0); opacity: 0; }
  to { transform: translate3d(110px, -30px, 0) scale(0.98) rotate(10deg); opacity: 0.82; }
}
@keyframes scroll-deck-4-card-4-active {
  from { transform: translate3d(0, 30px, 0) scale(0.9) rotate(0); opacity: 0; }
  to { transform: translate3d(-80px, -60px, 0) scale(0.92) rotate(-8deg); opacity: 0.65; }
}

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }
.delay-5 { animation-delay: 0.5s; }

/* --- Native CSS Scroll-Driven Animations (Widely Available Target) --- */

@media (prefers-reduced-motion: no-preference) {
  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    
    /* 3D Flying Animation for Product Images */
    @keyframes scroll-photo-solo {
      0% {
        transform: translateY(100px) scale(0.85) rotate(-3deg);
        opacity: 0.3;
      }
      50% {
        transform: translateY(0) scale(1) rotate(-1deg);
        opacity: 1;
      }
      100% {
        transform: translateY(-100px) scale(0.85) rotate(3deg);
        opacity: 0.3;
      }
    }
    
    /* Parallax Floating Text Overlays (Left) */
    @keyframes scroll-text-fly-left {
      0% {
        transform: translateX(-160px) translateY(60px) scale(0.95);
        opacity: 0;
      }
      35% {
        opacity: 1;
      }
      50% {
        transform: translateX(0) translateY(0) scale(1);
        opacity: 1;
      }
      65% {
        opacity: 1;
      }
      100% {
        transform: translateX(-160px) translateY(-60px) scale(0.95);
        opacity: 0;
      }
    }
    
    /* Parallax Floating Text Overlays (Right) */
    @keyframes scroll-text-fly-right {
      0% {
        transform: translateX(160px) translateY(60px) scale(0.95);
        opacity: 0;
      }
      35% {
        opacity: 1;
      }
      50% {
        transform: translateX(0) translateY(0) scale(1);
        opacity: 1;
      }
      65% {
        opacity: 1;
      }
      100% {
        transform: translateX(160px) translateY(-60px) scale(0.95);
        opacity: 0;
      }
    }

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

    /* --- Decks fanning out scroll keyframes --- */
    
    /* Deck of 3 fanning animation keyframes */
    @keyframes scroll-deck-3-card-1 {
      0% { transform: translate3d(0, 50px, 0) scale(0.9); }
      50% { transform: translate3d(0, -10px, 0) scale(1.05) rotate(1deg); }
      100% { transform: translate3d(0, -60px, 0) scale(0.9); }
    }
    @keyframes scroll-deck-3-card-2 {
      0% { transform: translate3d(0, 30px, 0) scale(0.9) rotate(0); }
      50% { transform: translate3d(-100px, 20px, 0) scale(0.98) rotate(-12deg); }
      100% { transform: translate3d(-150px, -20px, 0) scale(0.88) rotate(-18deg); }
    }
    @keyframes scroll-deck-3-card-3 {
      0% { transform: translate3d(0, 30px, 0) scale(0.9) rotate(0); }
      50% { transform: translate3d(100px, -20px, 0) scale(0.98) rotate(12deg); }
      100% { transform: translate3d(150px, -60px, 0) scale(0.88) rotate(18deg); }
    }
    
    /* Deck of 4 fanning animation keyframes */
    @keyframes scroll-deck-4-card-1 {
      0% { transform: translate3d(0, 50px, 0) scale(0.9); }
      50% { transform: translate3d(0, -10px, 0) scale(1.05) rotate(1deg); }
      100% { transform: translate3d(0, -60px, 0) scale(0.9); }
    }
    @keyframes scroll-deck-4-card-2 {
      0% { transform: translate3d(0, 30px, 0) scale(0.9) rotate(0); }
      50% { transform: translate3d(-110px, 30px, 0) scale(0.98) rotate(-10deg); }
      100% { transform: translate3d(-160px, -10px, 0) scale(0.88) rotate(-15deg); }
    }
    @keyframes scroll-deck-4-card-3 {
      0% { transform: translate3d(0, 30px, 0) scale(0.9) rotate(0); }
      50% { transform: translate3d(110px, -30px, 0) scale(0.98) rotate(10deg); }
      100% { transform: translate3d(160px, -70px, 0) scale(0.88) rotate(15deg); }
    }
    @keyframes scroll-deck-4-card-4 {
      0% { transform: translate3d(0, 30px, 0) scale(0.9) rotate(0); }
      50% { transform: translate3d(-80px, -60px, 0) scale(0.92) rotate(-8deg); }
      100% { transform: translate3d(-120px, -100px, 0) scale(0.82) rotate(-12deg); }
    }

    /* Apply scroll-driven timelines to sections */
    .showcase-section {
      view-timeline: --showcase-timeline block;
    }
    
    /* Solo product card binding */
    .showcase-section .solo-card {
      animation: scroll-photo-solo auto linear forwards;
      animation-timeline: --showcase-timeline;
      animation-range: cover 0% cover 100%;
    }
    
    /* Deck of 3 bindings */
    .showcase-section .deck-3 .card-1 {
      animation: scroll-deck-3-card-1 auto linear forwards;
      animation-timeline: --showcase-timeline;
      animation-range: cover 0% cover 100%;
    }
    .showcase-section .deck-3 .card-2 {
      animation: scroll-deck-3-card-2 auto linear forwards;
      animation-timeline: --showcase-timeline;
      animation-range: cover 0% cover 100%;
    }
    .showcase-section .deck-3 .card-3 {
      animation: scroll-deck-3-card-3 auto linear forwards;
      animation-timeline: --showcase-timeline;
      animation-range: cover 0% cover 100%;
    }
    
    /* Deck of 4 bindings */
    .showcase-section .deck-4 .card-1 {
      animation: scroll-deck-4-card-1 auto linear forwards;
      animation-timeline: --showcase-timeline;
      animation-range: cover 0% cover 100%;
    }
    .showcase-section .deck-4 .card-2 {
      animation: scroll-deck-4-card-2 auto linear forwards;
      animation-timeline: --showcase-timeline;
      animation-range: cover 0% cover 100%;
    }
    .showcase-section .deck-4 .card-3 {
      animation: scroll-deck-4-card-3 auto linear forwards;
      animation-timeline: --showcase-timeline;
      animation-range: cover 0% cover 100%;
    }
    .showcase-section .deck-4 .card-4 {
      animation: scroll-deck-4-card-4 auto linear forwards;
      animation-timeline: --showcase-timeline;
      animation-range: cover 0% cover 100%;
    }
    
    /* Text overlays */
    .showcase-section .text-showcase.reveal-left {
      animation: scroll-text-fly-left auto linear forwards;
      animation-timeline: --showcase-timeline;
      animation-range: cover 0% cover 100%;
    }
    
    .showcase-section .text-showcase.reveal-right {
      animation: scroll-text-fly-right auto linear forwards;
      animation-timeline: --showcase-timeline;
      animation-range: cover 0% cover 100%;
    }
    
    /* Bento Features Animation */
    .features-section {
      view-timeline: --features-timeline block;
    }
    
    .bento-card {
      animation: scroll-scale-in auto linear forwards;
      animation-timeline: --features-timeline;
      animation-range: entry 10% cover 40%;
    }
  }
}

/* --- Background Particles animation --- */
.particle {
  position: absolute;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.25;
  pointer-events: none;
  animation: particleFloat 20s infinite linear;
}

@keyframes particleFloat {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 0.4;
  }
  90% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(-100vh) translateX(50px) scale(0.8);
    opacity: 0;
  }
}

/* Respect Reduced Motion Preferences */
@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;
  }
}