/* WildHaven 2.0 — Immersive Animations */

/* ===== Keyframes ===== */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes birdFlyV2 {
  0% {
    transform: translate(-120px, 40vh) scale(0.4);
    opacity: 0;
  }
  5% { opacity: 0.6; }
  25% { transform: translate(25vw, 25vh) scale(0.5);
    opacity: 0.5; }
  50% { transform: translate(50vw, 15vh) scale(0.6);
    opacity: 0.4; }
  75% { transform: translate(75vw, 30vh) scale(0.5);
    opacity: 0.3; }
  95% { opacity: 0.1; }
  100% { transform: translate(110vw, 20vh) scale(0.4);
    opacity: 0; }
}
@keyframes wingFlap {
  0%, 100% { transform: scaleY(1) scaleX(1); }
  25% { transform: scaleY(0.7) scaleX(1.1); }
  50% { transform: scaleY(1) scaleX(1); }
  75% { transform: scaleY(0.8) scaleX(1.05); }
}
@keyframes leafFall {
  0% { transform: translate(0, -10vh) rotate(0deg); opacity: 0; }
  10% { opacity: 0.6; }
  90% { opacity: 0.4; }
  100% { transform: translate(30px, 110vh) rotate(360deg); opacity: 0; }
}
@keyframes pollenFloat {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  20% { opacity: 0.5; }
  80% { opacity: 0.3; }
  100% { transform: translate(20px, 100vh) scale(0.5); opacity: 0; }
}
@keyframes snowFall {
  0% { transform: translate(0, -10vh); opacity: 0; }
  10% { opacity: 0.7; }
  90% { opacity: 0.5; }
  100% { transform: translate(15px, 110vh); opacity: 0; }
}
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes counterUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes slideInRight {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes drawLine {
  from { width: 0; }
  to { width: 32px; }
}
@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

/* ===== Reveal Classes ===== */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.active { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal-left.active { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(40px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal-right.active { opacity: 1; transform: translateX(0); }
.reveal-scale { opacity: 0; transform: scale(0.92); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal-scale.active { opacity: 1; transform: scale(1); }
.reveal-fade { opacity: 0; transition: opacity 1s ease; }
.reveal-fade.active { opacity: 1; }

/* Stagger */
.reveal[data-delay="1"], .reveal-left[data-delay="1"], .reveal-right[data-delay="1"], .reveal-scale[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"], .reveal-left[data-delay="2"], .reveal-right[data-delay="2"], .reveal-scale[data-delay="2"] { transition-delay: 0.2s; }
.reveal[data-delay="3"], .reveal-left[data-delay="3"], .reveal-right[data-delay="3"], .reveal-scale[data-delay="3"] { transition-delay: 0.3s; }
.reveal[data-delay="4"], .reveal-left[data-delay="4"], .reveal-right[data-delay="4"], .reveal-scale[data-delay="4"] { transition-delay: 0.4s; }
.reveal[data-delay="5"], .reveal-left[data-delay="5"], .reveal-right[data-delay="5"], .reveal-scale[data-delay="5"] { transition-delay: 0.5s; }
.reveal[data-delay="6"], .reveal-left[data-delay="6"], .reveal-right[data-delay="6"], .reveal-scale[data-delay="6"] { transition-delay: 0.6s; }

/* ===== Hero Animations ===== */
.hero-content > * {
  opacity: 0;
  animation: fadeInUp 0.9s ease 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; }

/* Bird fly — upgraded with wing flap */
.bird-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}
.bird-fly {
  position: absolute;
  width: 50px;
  height: 30px;
}
.bird-fly svg {
  width: 100%;
  height: 100%;
  animation: wingFlap 0.4s ease-in-out infinite;
}
.bird-1 { animation: birdFlyV2 16s linear infinite; animation-delay: 2s; }
.bird-2 { animation: birdFlyV2 20s linear infinite; animation-delay: 6s; }
.bird-3 { animation: birdFlyV2 24s linear infinite; animation-delay: 10s; }

/* ===== Seasonal Particle Effects ===== */
.particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.particle {
  position: absolute;
  width: 8px;
  height: 8px;
}
.particle.spring {
  background: var(--spring);
  border-radius: 50% 0 50% 50%;
  animation: leafFall 12s linear infinite;
}
.particle.summer {
  background: var(--summer);
  border-radius: 50%;
  width: 4px;
  height: 4px;
  animation: pollenFloat 10s linear infinite;
}
.particle.autumn {
  background: var(--autumn);
  border-radius: 50% 0 50% 50%;
  animation: leafFall 14s linear infinite;
}
.particle.winter {
  background: var(--winter);
  border-radius: 50%;
  width: 5px;
  height: 5px;
  animation: snowFall 10s linear infinite;
}

/* ===== Parallax ===== */
.parallax-layer {
  will-change: transform;
  transition: transform 0.1s linear;
}
.parallax-slow { transform: translateY(0); }
.parallax-mid { transform: translateY(0); }
.parallax-fast { transform: translateY(0); }

/* ===== Hover Effects ===== */
.hover-lift {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}
.zoom-img { overflow: hidden; }
.zoom-img img {
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.zoom-img:hover img { transform: scale(1.08); }

/* Button shine */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::before {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transition: left 0.6s ease;
}
.btn-shine:hover::before { left: 120%; }

/* Scroll indicator */
.scroll-indicator {
  animation: floatY 2.5s ease-in-out infinite;
}

/* Cart drawer slide */
.cart-drawer.active { animation: slideInRight 0.4s ease forwards; }
.overlay.active { animation: fadeIn 0.3s ease forwards; }

/* Counter */
.counter { display: inline-block; animation: counterUp 0.6s ease forwards; }

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, var(--forest), var(--sage));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Page transition */
.page-transition { animation: fadeIn 0.5s ease; }

/* Season panel transition */
.season-panel {
  opacity: 0;
  transition: opacity 1.2s ease;
}
.season-panel.active {
  opacity: 1;
}

/* Accordion */
.accordion-item { border-bottom: 1px solid var(--gray-1); overflow: hidden; }
.accordion-header {
  padding: 16px 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 500;
  transition: color var(--t-fast);
}
.accordion-header:hover { color: var(--forest); }
.accordion-icon { transition: transform var(--t); }
.accordion-item.active .accordion-icon { transform: rotate(180deg); }
.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
}
.accordion-item.active .accordion-body { max-height: 500px; padding-bottom: 16px; }

/* Shimmer loading */
.shimmer {
  background: linear-gradient(90deg, var(--bone) 25%, var(--gray-1) 50%, var(--bone) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* 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;
  }
}