/* ══════════════════════════════════════════
   SCROLL REVEAL — GSAP hooks only
   JS controls visibility and transforms
══════════════════════════════════════════ */
.kalmar-reveal,
.kalmar-reveal--left,
.kalmar-reveal--right,
.kalmar-reveal--scale,
.kalmar-reveal--stagger > * {
    will-change: opacity, transform;
}

/* ══════════════════════════════════════════
   STILL ANIMATION — SVG alambique
══════════════════════════════════════════ */

/* Steam wisps */
.kalmar-still__steam {
    animation: kalmar-steam 3s ease-in-out infinite;
    transform-origin: bottom center;
}

.kalmar-still__steam--2 {
    animation-delay: 1s;
    animation-duration: 4s;
}

.kalmar-still__steam--3 {
    animation-delay: 2s;
    animation-duration: 3.5s;
}

/* Flame */
.kalmar-still__flame {
    animation: kalmar-flicker 1.5s ease-in-out infinite;
    transform-origin: bottom center;
}

/* Drip drop */
.kalmar-still__drip {
    animation: kalmar-drip 2s ease-in infinite;
}

.kalmar-still__drip--2 {
    animation-delay: 1.3s;
}

/* Gauge needle */
.kalmar-still__gauge-needle {
    animation: kalmar-gauge 6s ease-in-out infinite;
    transform-origin: center bottom;
}

/* Indicators */
.kalmar-still__indicator {
    animation: kalmar-pulse 3s ease-in-out infinite;
}

.kalmar-still__indicator--2 { animation-delay: 1s; }
.kalmar-still__indicator--3 { animation-delay: 2s; }

/* Decorative outer ring */
.kalmar-still__ring-outer {
    animation: kalmar-rotate-slow 40s linear infinite;
    transform-origin: center;
}

/* Particle botanicals */
.kalmar-particle {
    animation: kalmar-float 4s ease-in-out infinite;
}

.kalmar-particle--1 { animation-duration: 4.0s; animation-delay: 0.0s; }
.kalmar-particle--2 { animation-duration: 5.5s; animation-delay: 0.8s; }
.kalmar-particle--3 { animation-duration: 3.8s; animation-delay: 1.6s; }
.kalmar-particle--4 { animation-duration: 6.0s; animation-delay: 2.4s; }
.kalmar-particle--5 { animation-duration: 4.5s; animation-delay: 0.5s; }
.kalmar-particle--6 { animation-duration: 5.0s; animation-delay: 1.2s; }

/* ══════════════════════════════════════════
   MARQUEE
══════════════════════════════════════════ */
.kalmar-marquee__track {
    display: flex;
    width: max-content;
    animation: kalmar-marquee 28s linear infinite;
}

.kalmar-marquee__track:hover {
    animation-play-state: paused;
}

/* ══════════════════════════════════════════
   MICRO-INTERACTIONS
══════════════════════════════════════════ */

/* Product card hover — lift */
.kalmar-product-card {
    transition: background var(--transition-base), transform var(--transition-slow);
}

.kalmar-product-card:hover {
    transform: translateY(-4px);
}

/* Bottle hover — float up */
.kalmar-bottle {
    transition: transform var(--transition-slow) cubic-bezier(0.16, 1, 0.3, 1);
}

.kalmar-product-card:hover .kalmar-bottle {
    transform: translateY(-10px);
}

/* Fason option hover */
.kalmar-fason-option {
    transition: border-color var(--transition-base),
                background var(--transition-base),
                transform var(--transition-fast);
}

.kalmar-fason-option:hover {
    transform: translateX(4px);
}

/* Value card hover */
.kalmar-value-item {
    transition: border-color var(--transition-base),
                background var(--transition-base),
                transform var(--transition-slow);
}

.kalmar-value-item:hover {
    transform: translateY(-3px);
}

/* Nav link underline slide */
.kalmar-nav__link {
    position: relative;
}

.kalmar-nav__link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    right: 50%;
    height: 3px;
    background: var(--color-terra);
    transition: left var(--transition-base), right var(--transition-base);
}

.kalmar-nav__link:hover::after,
.kalmar-nav__link--active::after {
    left: 0;
    right: 0;
}

/* Button cart ripple */
.kalmar-btn--cart {
    position: relative;
    overflow: hidden;
}

.kalmar-btn--cart::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.15);
    transform: scale(0);
    border-radius: 50%;
    transition: transform 0.4s ease;
}

.kalmar-btn--cart:active::before {
    transform: scale(3);
    opacity: 0;
}

/* ══════════════════════════════════════════
   LOADING STATE
══════════════════════════════════════════ */
.kalmar-loading {
    pointer-events: none;
    opacity: 0.6;
}

.kalmar-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: kalmar-rotate-slow 0.8s linear infinite;
}



/* ─── migrado de kalmar-responsive.css: ANIMATIONS ─── */
/* ══ ANIMATIONS ══ */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(22px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes pulse-ring {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }

  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}