/* ==================================================
   SFIVE BEVERAGES — ANIMATIONS STYLESHEET
   ================================================== */

/* ---------- Generic scroll reveal (JS toggles .is-visible via IntersectionObserver / GSAP sets inline styles for hero) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.9s var(--ease-premium), transform 0.9s var(--ease-premium);
}

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

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-premium), transform 0.7s var(--ease-premium);
}

.reveal-stagger.is-visible > * { opacity: 1; transform: translateY(0); }

.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.1s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.2s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.3s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.4s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.5s; }

/* ---------- Fade in scale (used for product media, images) ---------- */
.fade-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 1s var(--ease-premium), transform 1s var(--ease-premium);
}

.fade-scale.is-visible { opacity: 1; transform: scale(1); }

/* ---------- Gold line draw ---------- */
.line-draw {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  transition: stroke-dashoffset 1.4s var(--ease-premium);
}

.line-draw.is-drawn { stroke-dashoffset: 0; }

/* ---------- Magnetic button wrapper ---------- */
.magnetic { position: relative; }

/* ---------- Page transition entrance ---------- */
body {
  animation: pageEnter 0.6s var(--ease-premium) both;
}

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

/* ---------- Floating bubble motion (fallback / ambient, GSAP overrides transform) ---------- */
@keyframes floatUp {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-620px) translateX(20px); opacity: 0; }
}

.bubble { animation: floatUp linear infinite; }

/* ---------- Loader spin already defined in style.css ---------- */

/* ---------- Cursor glow (desktop only, optional ambient) ---------- */
.cursor-glow {
  position: fixed;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(215,171,71,0.08), transparent 70%);
  pointer-events: none;
  z-index: 2;
  transform: translate(-50%, -50%);
  display: none;
}

@media (min-width: 993px) {
  .cursor-glow.is-active { display: block; }
}

/* ---------- Reduced motion overrides for custom keyframes ---------- */
@media (prefers-reduced-motion: reduce) {
  .bubble { animation: none; opacity: 0.15; }
  body { animation: none; }
  .reveal, .reveal-stagger > *, .fade-scale { opacity: 1; transform: none; }
}