/* ============================================================
   NATURA TOP — Animations & Keyframes
   ============================================================ */

/* ── KEYFRAMES ───────────────────────────────────────────── */

@keyframes loaderProgress {
  0%   { width: 0%; }
  20%  { width: 25%; }
  50%  { width: 55%; }
  80%  { width: 80%; }
  100% { width: 100%; }
}

@keyframes loaderLeaf {
  0%   { transform: rotate(0deg) scale(1); opacity: .6; }
  50%  { transform: rotate(180deg) scale(1.1); opacity: 1; }
  100% { transform: rotate(360deg) scale(1); opacity: .6; }
}

@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: .4; }
  50%       { transform: translateX(-50%) translateY(8px); opacity: .8; }
}

@keyframes floatParticle {
  0%   { transform: translateY(0) translateX(0) rotate(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: .6; }
  100% { transform: translateY(-100vh) translateX(var(--drift, 40px)) rotate(360deg); opacity: 0; }
}

@keyframes floatSlow {
  0%   { transform: translateY(0) rotate(0); }
  50%  { transform: translateY(-24px) rotate(8deg); }
  100% { transform: translateY(0) rotate(0); }
}

@keyframes floatMed {
  0%   { transform: translateY(0) rotate(0); }
  33%  { transform: translateY(-16px) rotate(-6deg); }
  66%  { transform: translateY(-8px) rotate(4deg); }
  100% { transform: translateY(0) rotate(0); }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,168,76,.4); }
  50%       { box-shadow: 0 0 0 16px rgba(201,168,76,0); }
}

@keyframes ripple {
  0%   { transform: scale(0); opacity: .6; }
  100% { transform: scale(4); opacity: 0; }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

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

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(.88); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slideReveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

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

@keyframes leafSway {
  0%, 100% { transform: rotate(-4deg) scale(1); }
  50%       { transform: rotate(4deg) scale(1.02); }
}

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(20px, -30px) scale(1.05); }
  66%       { transform: translate(-15px, 20px) scale(.97); }
}

@keyframes goldShine {
  0%   { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

@keyframes dotPulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.5); }
}

@keyframes rotateIn {
  from { opacity: 0; transform: rotate(-12deg) scale(.9); }
  to   { opacity: 1; transform: rotate(0) scale(1); }
}

/* ── SCROLL REVEAL BASE STATES ───────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .65s cubic-bezier(.4,0,.2,1), transform .65s cubic-bezier(.34,1.1,.64,1);
}
.reveal.revealed { opacity: 1; transform: translateY(0); }

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity .65s cubic-bezier(.4,0,.2,1), transform .65s cubic-bezier(.34,1.1,.64,1);
}
.reveal-left.revealed { opacity: 1; transform: translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity .65s cubic-bezier(.4,0,.2,1), transform .65s cubic-bezier(.34,1.1,.64,1);
}
.reveal-right.revealed { opacity: 1; transform: translateX(0); }

.reveal-scale {
  opacity: 0;
  transform: scale(.9);
  transition: opacity .55s cubic-bezier(.4,0,.2,1), transform .55s cubic-bezier(.34,1.56,.64,1);
}
.reveal-scale.revealed { opacity: 1; transform: scale(1); }

/* Stagger delays */
.delay-1 { transition-delay: .1s !important; }
.delay-2 { transition-delay: .2s !important; }
.delay-3 { transition-delay: .3s !important; }
.delay-4 { transition-delay: .4s !important; }
.delay-5 { transition-delay: .5s !important; }
.delay-6 { transition-delay: .6s !important; }

/* ── HERO ENTRANCE ANIMATIONS ────────────────────────────── */
.hero-eyebrow { animation: fadeInDown .7s .3s both; }
.hero-heading  { animation: fadeInUp .8s .45s both; }
.hero-body     { animation: fadeInUp .7s .6s both; }
.hero-actions  { animation: fadeInUp .7s .75s both; }

/* ── LOADER LEAF ANIMATION ───────────────────────────────── */
.loader-leaf-icon {
  animation: loaderLeaf 2s ease-in-out infinite;
  transform-origin: center;
}

/* ── FLOATING BACKGROUND ORBS ────────────────────────────── */
.bg-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}
.bg-orb-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(26,71,42,.4) 0%, transparent 70%);
  top: -20%; right: -10%;
  animation: orbFloat 12s ease-in-out infinite;
}
.bg-orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(201,168,76,.1) 0%, transparent 70%);
  bottom: -10%; left: 5%;
  animation: orbFloat 15s ease-in-out infinite reverse;
}
.bg-orb-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(45,106,79,.3) 0%, transparent 70%);
  top: 30%; left: 20%;
  animation: orbFloat 10s ease-in-out infinite 3s;
}

/* ── ANIMATED LEAF DECORATIONS ───────────────────────────── */
.leaf-decor {
  position: absolute;
  pointer-events: none;
  opacity: .12;
}
.leaf-decor-1 {
  top: 12%; right: 8%;
  animation: leafSway 6s ease-in-out infinite;
}
.leaf-decor-2 {
  bottom: 15%; left: 5%;
  animation: leafSway 8s ease-in-out infinite 2s;
}
.leaf-decor-3 {
  top: 40%; right: 3%;
  animation: floatSlow 10s ease-in-out infinite;
}

/* ── NAV LINK HOVER LINE ─────────────────────────────────── */
.nav-link:hover { animation: none; }

/* ── BUTTON RIPPLE ───────────────────────────────────────── */
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  width: 8px; height: 8px;
  background: rgba(255,255,255,.4);
  transform: scale(0);
  animation: ripple .6s linear;
  pointer-events: none;
}

/* ── PRODUCT CARD HOVER SHINE ────────────────────────────── */
.product-card::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.08), transparent);
  transition: left .5s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.product-card:hover::before { left: 150%; }

/* ── GOLD LINE ANIMATION ─────────────────────────────────── */
.gold-line.animated {
  background-size: 200% auto;
  background-image: linear-gradient(90deg, var(--c-accent-dark), var(--c-accent-bright), var(--c-accent-dark));
  animation: goldShine 3s linear infinite;
}

/* ── TYPING CURSOR ───────────────────────────────────────── */
.cursor-blink::after {
  content: '|';
  animation: dotPulse .8s ease-in-out infinite;
  color: var(--c-accent);
  margin-left: 2px;
}

/* ── STATISTIC COUNTER ANIMATION ─────────────────────────── */
.stat-number.counting { animation: countUp .5s ease both; }

/* ── PAGE TRANSITION ─────────────────────────────────────── */
.page-transition-overlay {
  position: fixed;
  inset: 0;
  background: var(--c-bg-dark);
  z-index: calc(var(--z-loader) - 1);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .4s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.page-transition-overlay.entering { transform: scaleY(1); transform-origin: bottom; }
.page-transition-overlay.leaving  { transform: scaleY(0); transform-origin: top; }

/* ── SECTION ORNAMENT ────────────────────────────────────── */
.section-ornament {
  display: block;
  margin: 0 auto 1.5rem;
  opacity: .6;
}

/* ── FLOATING ICONS (hero particles) ────────────────────── */
.float-icon {
  position: absolute;
  font-size: 2rem;
  opacity: 0;
  animation: floatParticle var(--dur) var(--delay) ease-in-out infinite;
  pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.3));
}

/* ── ACCORDION ───────────────────────────────────────────── */
.accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s cubic-bezier(.4,0,.2,1), padding .3s ease;
}
.accordion-body.open { max-height: 600px; }

/* ── SKELETON LOADER ─────────────────────────────────────── */
.skeleton {
  background: linear-gradient(90deg, var(--c-bg-warm) 25%, rgba(255,255,255,.6) 50%, var(--c-bg-warm) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--r-sm);
}

/* ── FILTER ANIMATION ────────────────────────────────────── */
.product-section {
  transition: opacity .35s ease, transform .35s ease;
}
.product-section.hidden-section {
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  position: absolute;
}

/* ── INPUT FOCUS ANIMATION ───────────────────────────────── */
.form-group {
  position: relative;
}
.form-input:focus + .form-focus-line,
.form-textarea:focus + .form-focus-line {
  transform: scaleX(1);
}

/* ── SCROLL PROGRESS BAR ─────────────────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--c-accent), var(--c-accent-light));
  z-index: calc(var(--z-nav) + 1);
  transition: width .1s linear;
  box-shadow: 0 0 8px rgba(201,168,76,.5);
}

/* ── HOVER TILT EFFECT (applied via JS) ──────────────────── */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform .15s ease;
}

/* ── WAVE SVG ANIMATION ──────────────────────────────────── */
.wave-path { animation: leafSway 8s ease-in-out infinite; transform-origin: center; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-scale {
    opacity: 1;
    transform: none;
  }
}

/* ══════════════════════════════════════════════════════════
   GRAPEVINE CARD ANIMATION
   ══════════════════════════════════════════════════════════ */

/* ── Stem draw ───────────────────────────────────────────── */
@keyframes vineStemGrow {
  from { stroke-dashoffset: var(--vine-len); opacity: 0; }
  8%   { opacity: 1; }
  to   { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes vineStemRetract {
  from { stroke-dashoffset: 0; opacity: 1; }
  92%  { opacity: 1; }
  to   { stroke-dashoffset: var(--vine-len); opacity: 0; }
}

/* ── Branch reveal ───────────────────────────────────────── */
@keyframes vineBranchIn {
  from { opacity: 0; stroke-dashoffset: 40; }
  to   { opacity: 1; stroke-dashoffset: 0; }
}
@keyframes vineBranchOut {
  from { opacity: 1; stroke-dashoffset: 0; }
  to   { opacity: 0; stroke-dashoffset: 40; }
}

/* ── Leaf pop ────────────────────────────────────────────── */
@keyframes vineLeafIn {
  0%   { opacity: 0; transform: scale(0) rotate(-25deg); }
  60%  { transform: scale(1.15) rotate(4deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes vineLeafOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0) rotate(20deg); }
}

/* ── Grape cluster pop ───────────────────────────────────── */
@keyframes vineGrapeIn {
  0%   { opacity: 0; transform: scale(0); }
  65%  { transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes vineGrapeOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0); }
}

/* ── State classes (toggled by vine.js) ──────────────────── */

/* GROW state */
.vine-grow .vine-stem {
  animation: vineStemGrow 0.72s cubic-bezier(.4,0,.2,1) forwards;
}
.vine-grow .vine-branch {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: vineBranchIn 0.35s ease forwards;
}
.vine-grow .vine-leaf {
  transform-origin: bottom center;
  animation: vineLeafIn 0.38s cubic-bezier(.34,1.56,.64,1) forwards;
}
.vine-grow .vine-grapes {
  animation: vineGrapeIn 0.4s cubic-bezier(.34,1.56,.64,1) forwards;
}

/* RETRACT state */
.vine-retract .vine-stem {
  animation: vineStemRetract 0.45s cubic-bezier(.4,0,.2,1) forwards;
}
.vine-retract .vine-branch {
  stroke-dasharray: 40;
  animation: vineBranchOut 0.22s ease forwards;
}
.vine-retract .vine-leaf {
  transform-origin: bottom center;
  animation: vineLeafOut 0.22s ease forwards;
}
.vine-retract .vine-grapes {
  animation: vineGrapeOut 0.22s ease forwards;
}

/* Initial / resting state */
.vine-overlay .vine-stem   { opacity: 0; }
.vine-overlay .vine-branch { opacity: 0; }
.vine-overlay .vine-leaf   { opacity: 0; }
.vine-overlay .vine-grapes { opacity: 0; }