/* Synergy Apitherapy & Wellness — premium motion layer.
   Loads AFTER main.css. Adds preloader, scroll progress, glass header,
   hero motion, button shine, richer scroll-reveal variants, testimonial
   slider and floating-button motion — without touching brand colors,
   type, layout or content. Everything here is purely additive: base
   states stay fully visible/usable if JS or GSAP fails to load. */

/* ---------------- Preloader ---------------- */
.preloader {
  position: fixed; inset: 0; z-index: 4000;
  display: none; align-items: center; justify-content: center;
  background: var(--color-cream);
  transition: opacity 500ms var(--ease-out-soft), visibility 500ms;
}
html.is-loading .preloader { display: flex; }
.preloader.is-hiding { opacity: 0; pointer-events: none; }
.preloader-mark {
  width: 56px; height: 56px; border-radius: 50%;
  border: 3px solid var(--color-green-100); border-top-color: var(--color-green-primary);
  animation: preloader-spin 800ms linear infinite;
}
@keyframes preloader-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  html.is-loading .preloader { display: none; }
}

/* ---------------- Scroll progress bar ---------------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 2000;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--color-green-primary), var(--color-gold-honey));
  will-change: transform;
}

/* ---------------- Header: glass + shrink on scroll ---------------- */
.site-header {
  transition: background var(--duration-base) var(--ease-out-soft), box-shadow var(--duration-base) var(--ease-out-soft), backdrop-filter var(--duration-base) var(--ease-out-soft);
}
.site-header.is-scrolled {
  background: rgba(252, 252, 250, 0.82);
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
  box-shadow: var(--shadow-md);
}
.site-header.is-scrolled .nav { padding-top: 10px; padding-bottom: 10px; }
.nav { transition: padding var(--duration-base) var(--ease-out-soft); }

/* ---------------- Hero motion ---------------- */
.hero-media { will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .hero-media.is-breathing { animation: hero-breathe 6s ease-in-out infinite; }
}
@keyframes hero-breathe {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(0,-6px,0) scale(1.012); }
}

/* ---------------- Button shine sweep ---------------- */
.btn { isolation: isolate; }
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.45) 40%, transparent 60%);
  transform: translateX(-120%);
  transition: transform 650ms var(--ease-out-soft);
  pointer-events: none;
}
.btn:hover::before { transform: translateX(120%); }
.btn > * { position: relative; z-index: 1; }

/* ---------------- Richer reveal variants ----------------
   Animation itself is driven by GSAP (gsap-init.js) which reads these
   classes to choose motion direction; CSS only guarantees a safe,
   fully-visible fallback (.reveal base rule in main.css) if GSAP/JS
   never runs. No keyframes needed here. */

/* ---------------- Floating buttons ---------------- */
@media (prefers-reduced-motion: no-preference) {
  .whatsapp-btn { animation: whatsapp-pulse 2.6s ease-in-out infinite; }
}
@keyframes whatsapp-pulse {
  0%, 100% { box-shadow: var(--shadow-lg), 0 0 0 0 rgba(37,211,102,0.45); }
  50% { box-shadow: var(--shadow-lg), 0 0 0 10px rgba(37,211,102,0); }
}
.back-to-top { transform: translateY(12px); transition: opacity var(--duration-base) var(--ease-out-soft), transform var(--duration-base) var(--ease-out-soft), background var(--duration-base) var(--ease-out-soft), color var(--duration-base) var(--ease-out-soft); }
.back-to-top.is-visible { transform: translateY(0); }

/* ---------------- CTA pulse ---------------- */
@media (prefers-reduced-motion: no-preference) {
  .cta-pulse .btn-gold { animation: btn-gold-shimmer 5s ease-in-out infinite, btn-pulse 2.4s ease-in-out infinite; }
}
@keyframes btn-pulse {
  0%, 100% { box-shadow: var(--shadow-gold-glow); }
  50% { box-shadow: 0 0 0 10px rgba(231,154,25,0.14), var(--shadow-gold-glow); }
}