/* ═══════════════════════════════════════════════════════════════
   KENVERA — Animation Styles
   Reveals, Parallax, Water Effects, Micro-interactions
   ═══════════════════════════════════════════════════════════════ */

/* ── Reveal Animations (PRESERVED + upgraded) ── */
.rv {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.rv.on,
.rv.vis {
  opacity: 1;
  transform: none;
}

.rl {
  opacity: 0;
  transform: translateX(-45px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.rl.on,
.rl.vis {
  opacity: 1;
  transform: none;
}

.rr {
  opacity: 0;
  transform: translateX(45px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.rr.on,
.rr.vis {
  opacity: 1;
  transform: none;
}

/* Scale In */
.rs {
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.rs.on,
.rs.vis {
  opacity: 1;
  transform: scale(1);
}

/* Rotate In */
.rrot {
  opacity: 0;
  transform: rotate(-5deg) translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.rrot.on {
  opacity: 1;
  transform: rotate(0) translateY(0);
}

/* Stagger Delays (PRESERVED + expanded) */
.d1 { transition-delay: 0.1s; }
.d2 { transition-delay: 0.2s; }
.d3 { transition-delay: 0.3s; }
.d4 { transition-delay: 0.4s; }
.d5 { transition-delay: 0.5s; }
.d6 { transition-delay: 0.6s; }
.d7 { transition-delay: 0.7s; }
.d8 { transition-delay: 0.8s; }

/* ── Respect Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {
  .rv, .rl, .rr, .rs, .rrot {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .d1, .d2, .d3, .d4, .d5, .d6, .d7, .d8 {
    transition-delay: 0s;
  }

  .hero__particles span,
  .hero-ptcl span,
  .hero__bottle,
  .hero-bottle,
  .hring1, .hring2,
  .hglow,
  .tst-track,
  .ld-logo,
  .ld-drop,
  .wa-float,
  .fcta-ico {
    animation: none !important;
  }
}

/* ── Parallax Layer ── */
.parallax-layer {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ── Water Ripple Effect ── */
.water-ripple {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
  animation: waterRipple 2s ease-out forwards;
  pointer-events: none;
}

@keyframes waterRipple {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    width: 400px;
    height: 400px;
    margin-left: -200px;
    margin-top: -200px;
    opacity: 0;
  }
}

/* ── Gradient Mesh Animation ── */
.gradient-mesh {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.06) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.04) 0%, transparent 50%);
  animation: meshFloat 20s ease-in-out infinite;
  pointer-events: none;
}

@keyframes meshFloat {
  0%, 100% {
    background-position: 0% 0%, 100% 100%, 50% 50%;
  }
  33% {
    background-position: 30% 30%, 70% 60%, 20% 80%;
  }
  66% {
    background-position: 60% 10%, 40% 90%, 80% 20%;
  }
}

/* ── SVG Wave Animation ── */
.wave-animated {
  animation: waveMove 8s ease-in-out infinite;
}

@keyframes waveMove {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-20px); }
}

/* ── Floating Elements ── */
.float-gentle {
  animation: floatGentle 6s ease-in-out infinite;
}

@keyframes floatGentle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}

.float-slow {
  animation: floatSlow 8s ease-in-out infinite;
}

@keyframes floatSlow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-8px) rotate(1deg); }
  75% { transform: translateY(8px) rotate(-1deg); }
}

/* ── Pulse Glow ── */
.pulse-glow {
  animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(245, 130, 32, 0.4);
  }
  50% {
    box-shadow: 0 0 0 15px rgba(245, 130, 32, 0);
  }
}

/* ── Shimmer Effect ── */
.shimmer {
  position: relative;
  overflow: hidden;
}

.shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  );
  animation: shimmerSlide 3s ease-in-out infinite;
}

@keyframes shimmerSlide {
  0% { left: -100%; }
  100% { left: 200%; }
}

/* ── Text Gradient Animation ── */
.text-gradient-animated {
  background: linear-gradient(
    90deg,
    var(--orange-dark),
    var(--orange),
    var(--orange-light),
    var(--orange)
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textGradient 4s linear infinite;
}

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

/* ── Loading Spinner ── */
.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(245, 130, 32, 0.2);
  border-top-color: var(--orange);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Image Reveal on Scroll ── */
.img-reveal {
  position: relative;
  overflow: hidden;
}

.img-reveal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--orange);
  z-index: 1;
  transform-origin: right;
  transition: transform 0.8s var(--ease-default);
}

.img-reveal.on::before {
  transform: scaleX(0);
}

/* ── Counter Number Animation Helper ── */
.counter-number {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ── Hover Lift ── */
.hover-lift {
  transition: transform 0.3s var(--ease-default), box-shadow 0.3s var(--ease-default);
}

.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
}

/* ── Hover Scale ── */
.hover-scale {
  transition: transform 0.3s var(--ease-default);
}

.hover-scale:hover {
  transform: scale(1.05);
}

/* ── Content Visibility for Performance ── */
.lazy-section {
  content-visibility: auto;
  contain-intrinsic-size: auto 500px;
}

/* ── Smooth Section Transitions ── */
.section-transition {
  position: relative;
}

.section-transition::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(245, 130, 32, 0.1), transparent);
}