/* ============================================================
   AmberNord — animations.css
   Rule: saturs ir VIENMĒR redzams. Animācija ir bonuss.
   IntersectionObserver pievieno .visible klasi — ne otrādi.
   ============================================================ */

/* ─── KEYFRAMES ─── */
@keyframes glowPulse{
  0%,100%{opacity:.6;transform:scale(1)}
  50%    {opacity:1; transform:scale(1.08)}
}
@keyframes bottleFloat{
  0%,100%{transform:translateY(0)}
  50%    {transform:translateY(-18px)}
}
@keyframes scrollFade{
  0%  {opacity:0;transform:scaleY(.3);transform-origin:top}
  40% {opacity:1;transform:scaleY(1) ;transform-origin:top}
  100%{opacity:0;transform:scaleY(1) ;transform-origin:bottom}
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(32px)}
  to  {opacity:1;transform:translateY(0)}
}
@keyframes fadeLeft{
  from{opacity:0;transform:translateX(-40px)}
  to  {opacity:1;transform:translateX(0)}
}
@keyframes fadeRight{
  from{opacity:0;transform:translateX(40px)}
  to  {opacity:1;transform:translateX(0)}
}

/* ─── HERO — animējas uzreiz, nav jāgaida JS ─── */
/* Elements start visible — animation layered on top */
.anim-fade-up{
  animation:fadeUp .8s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
  animation-delay:var(--d, 0s);
}
.anim-slide-right{
  animation:fadeRight 1s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
  animation-delay:var(--d, 0s);
}

/* ─── SCROLL REVEALS — sāk kā visible, JS pievieno animāciju ─── */
/*
   Svarīgi: sākumā elements IR redzams (nav opacity:0).
   JS pievieno klasi .will-reveal pirms IntersectionObserver
   uztver to, un .visible — kad elements parādās skatā.
   Tādā veidā, ja JS neielādējas — saturs paliek redzams.
*/
.reveal-up.will-reveal{
  opacity:0;
  transform:translateY(36px);
  transition:opacity .7s var(--ease-out, cubic-bezier(.16,1,.3,1)) var(--delay,0s),
             transform .7s var(--ease-out, cubic-bezier(.16,1,.3,1)) var(--delay,0s);
}
.reveal-up.will-reveal.visible{
  opacity:1;
  transform:translateY(0);
}

.reveal-left.will-reveal{
  opacity:0;
  transform:translateX(-44px);
  transition:opacity .8s var(--ease-out, cubic-bezier(.16,1,.3,1)),
             transform .8s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.reveal-left.will-reveal.visible{
  opacity:1;
  transform:translateX(0);
}

.reveal-right.will-reveal{
  opacity:0;
  transform:translateX(44px);
  transition:opacity .8s var(--ease-out, cubic-bezier(.16,1,.3,1)),
             transform .8s var(--ease-out, cubic-bezier(.16,1,.3,1));
}
.reveal-right.will-reveal.visible{
  opacity:1;
  transform:translateX(0);
}

/* ─── Product cards — parallax slide ─── */
/* Cards get --card-offset set by JS for parallax slide-in */
.card.will-reveal{
  opacity:0;
  transform:translateY(48px);
  transition:opacity .65s var(--ease-out, cubic-bezier(.16,1,.3,1)) var(--delay,0s),
             transform .65s var(--ease-out, cubic-bezier(.16,1,.3,1)) var(--delay,0s);
}
.card.will-reveal.visible{
  opacity:1;
  transform:translateY(0);
}

/* ─── Stat count-up flash ─── */
@keyframes numFlash{
  0%  {color:var(--amber)}
  50% {color:#fff}
  100%{color:var(--amber)}
}
.stat-num.counting{
  animation:numFlash .15s ease-in-out;
}

/* ─── Nav scrolled transition ─── */
.nav{transition:background .3s ease, box-shadow .3s ease}

/* ─── Scroll parallax on hero glow — CSS only ─── */
@supports (animation-timeline: scroll()) {
  .g1{
    animation:glowScroll linear both;
    animation-timeline:scroll();
    animation-range:0 50vh;
  }
  @keyframes glowScroll{
    from{transform:translateY(0) scale(1)}
    to  {transform:translateY(-60px) scale(.9)}
  }
}

/* ─── Card hover glow ─── */
.card::after{
  content:'';
  position:absolute;inset:0;
  border-radius:var(--r-lg, 24px);
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),
    rgba(245,161,30,.07) 0%,
    transparent 60%);
  opacity:0;
  transition:opacity .3s;
  pointer-events:none;
}
.card:hover::after{opacity:1}

/* ─── Bottle pill entrance ─── */
.bottle-pill{
  animation:fadeUp .6s var(--ease-out, cubic-bezier(.16,1,.3,1)) both;
}
.bottle-pill.p1{animation-delay:.5s}
.bottle-pill.p2{animation-delay:.65s}
.bottle-pill.p3{animation-delay:.8s}

/* ─── Mobile nav hamburger color ─── */
.nav.scrolled .hamburger span{background:var(--text)}

/* ─── Prefers reduced motion ─── */
@media(prefers-reduced-motion:reduce){
  .anim-fade-up,
  .anim-slide-right,
  .bottle-img,
  .bottle-pill{animation:none!important}
  .reveal-up.will-reveal,
  .reveal-left.will-reveal,
  .reveal-right.will-reveal,
  .card.will-reveal{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
}