/* ==========================================================================
   WEFT — Animations
   Keyframes + scroll-reveal utility classes (driven by reveal.js via IO)
   ========================================================================== */

@keyframes fadeUp{
  from{opacity:0;transform:translateY(28px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes heroZoom{
  from{transform:scale(1.12);}
  to{transform:scale(1);}
}
@keyframes mediaKenBurns{
  from{transform:scale(2.4) translate(0,0);}
  to{transform:scale(2.6) translate(-1.5%,-1.5%);}
}
/* Used on the real product photo when a piece has no dedicated video —
   a slow zoom/pan so the card still reads as "alive" while scrolled into
   view, without borrowing unrelated stock footage. */
@keyframes imageKenBurns{
  0%{transform:scale(1) translate(0,0);}
  100%{transform:scale(1.12) translate(-1.6%,-1.2%);}
}
@keyframes floatUp{
  0%{transform:translateY(0) translateX(0);opacity:0;}
  10%{opacity:.7;}
  90%{opacity:.5;}
  100%{transform:translateY(-90vh) translateX(20px);opacity:0;}
}
@keyframes scrollMove{to{top:34px;}}
@keyframes marqueeMove{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@keyframes bump{
  0%{transform:scale(1);}
  40%{transform:scale(1.5);}
  100%{transform:scale(1);}
}
@keyframes heartPulse{
  0%{transform:scale(1);}
  35%{transform:scale(1.35);}
  100%{transform:scale(1);}
}
@keyframes toastIn{
  from{opacity:0;transform:translateY(16px) scale(.96);}
  to{opacity:1;transform:translateY(0) scale(1);}
}
@keyframes toastOut{
  from{opacity:1;transform:translateY(0) scale(1);}
  to{opacity:0;transform:translateY(-10px) scale(.96);}
}
@keyframes loaderMove{
  0%{left:-40%;}
  100%{left:100%;}
}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes ripple{
  from{transform:scale(0);opacity:.45;}
  to{transform:scale(2.6);opacity:0;}
}

/* -------------------- SCROLL REVEAL SYSTEM -------------------- */
/* Base state applied immediately; JS toggles .is-in on intersect.
   data-reveal chooses the entrance style; data-delay staggers via var(--rd). */
[data-reveal]{
  --rd:0s;
  opacity:0;
  transition:opacity .9s var(--ease-out) var(--rd),filter .9s var(--ease-out) var(--rd),transform .9s var(--ease-out) var(--rd);
  will-change:transform,opacity;
}
[data-reveal="up"]{transform:translateY(48px);}
[data-reveal="scale"]{transform:scale(.9);}
[data-reveal="blur"]{filter:blur(14px);transform:translateY(10px);}
[data-reveal="left"]{transform:translateX(-56px);}
[data-reveal="right"]{transform:translateX(56px);}
[data-reveal="fade"]{transform:none;}

[data-reveal].is-in{
  opacity:1;transform:translate(0,0) scale(1);filter:blur(0);
}

@media(prefers-reduced-motion:reduce){
  [data-reveal]{transition:opacity .4s linear;transform:none!important;filter:none!important;}
  .hero-bg img{animation:none;}
  .marquee-track{animation-duration:70s;}
}

/* -------------------- RIPPLE (buttons / icon buttons) -------------------- */
.ripple-wrap{position:relative;overflow:hidden;}
.ripple-el{
  position:absolute;border-radius:50%;
  background:rgba(255,255,255,.55);
  pointer-events:none;
  animation:ripple .7s var(--ease-out) forwards;
}
.btn-primary .ripple-el,.btn-outline .ripple-el{background:rgba(251,248,243,.5);}
.btn-dark .ripple-el,.btn-ghost .ripple-el{background:rgba(251,248,243,.35);}

/* -------------------- 3D TILT (JS sets --rx/--ry/--tz via inline style) -------------------- */
.tilt{
  transform:perspective(1000px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateZ(var(--tz,0));
}

/* -------------------- LOADING SPINNER (newsletter submit etc.) -------------------- */
.spinner{
  width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:currentColor;
  animation:spin .7s linear infinite;
}

/* -------------------- STICKY IMAGE PROGRESS (craft section) -------------------- */
.craft-step{opacity:.35;transition:opacity .5s var(--ease-out);}
.craft-step.active{opacity:1;}

/* -------------------- FLOATING HEART BURST (wishlist add) -------------------- */
.heart-burst{
  position:fixed;z-index:500;pointer-events:none;
  color:var(--gold);
  animation:heartBurst .8s var(--ease-out) forwards;
}
@keyframes heartBurst{
  0%{transform:translateY(0) scale(.6);opacity:1;}
  100%{transform:translateY(-46px) scale(1.3);opacity:0;}
}

/* -------------------- LINK UNDERLINE GROW (footer/nav reused) -------------------- */
.u-grow{position:relative;}
.u-grow::after{
  content:'';position:absolute;left:0;bottom:-2px;width:100%;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease-out);
}
.u-grow:hover::after{transform:scaleX(1);transform-origin:left;}