/* ════════════════════════════════════════════════════════════
   MOTION SYSTEM — site-wide creative interaction layer
   Loaded after style.css on every page via base.html.
   Pure addition: nothing here overrides existing layout rules,
   it only adds new classes + upgrades .reveal.
   ════════════════════════════════════════════════════════════ */

:root{
  --ease-out-expo: cubic-bezier(.16,1,.3,1);
  --ease-smooth:   cubic-bezier(.65,0,.35,1);
  --ease-spring:   cubic-bezier(.34,1.56,.64,1);
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ── SCROLL PROGRESS BAR ── */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,var(--accent),var(--gold-lt));
  z-index:9999; pointer-events:none;
}

/* ── PAGE TRANSITION CURTAIN ── */
.page-transition{
  position:fixed; inset:0; z-index:9998; pointer-events:none;
  background:var(--primary);
  transform:translateY(100%);
  display:flex; align-items:center; justify-content:center;
}
.page-transition.is-leaving{
  transform:translateY(0%);
  transition:transform .5s var(--ease-smooth);
}
.page-transition.is-entering{
  transform:translateY(-100%);
  transition:transform .6s var(--ease-smooth) .05s;
}
.page-transition__mark{
  opacity:0; color:#fff; font-family:var(--font-display); font-size:1.1rem;
  letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  transition:opacity .3s ease .15s;
}
.page-transition.is-leaving .page-transition__mark{ opacity:.85; }

/* ── MAGNETIC BUTTONS ── */
.magnetic{ transition:transform .25s var(--ease-out-expo); }
.magnetic span, .magnetic svg{ transition:transform .25s var(--ease-out-expo); }

/* ── REVEAL UPGRADES (keeps existing .reveal / .visible contract) ── */
.reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .7s var(--ease-out-expo), transform .7s var(--ease-out-expo);
}
.reveal.visible{ opacity:1; transform:none; }

/* staggered children: add data-stagger to a parent, JS sets --d per child */
[data-stagger] > *{
  opacity:0; transform:translateY(22px);
  transition:opacity .6s var(--ease-out-expo), transform .6s var(--ease-out-expo);
  transition-delay:var(--d,0ms);
}
[data-stagger].visible > *{ opacity:1; transform:none; }

/* split-line text reveal (hero headlines) */
.split-line{ overflow:hidden; display:block; }
.split-line .split-word{
  display:inline-block; transform:translateY(115%);
  transition:transform .9s var(--ease-out-expo);
  transition-delay:var(--d,0ms);
}
.split-line.visible .split-word{ transform:translateY(0); }

/* mask-wipe reveal for image/category blocks */
.reveal-mask{ position:relative; overflow:hidden; }
.reveal-mask::after{
  content:''; position:absolute; inset:0; background:var(--primary);
  transform-origin:left; transition:transform .9s var(--ease-smooth);
}
.reveal-mask.visible::after{ transform:scaleX(0); transform-origin:right; }

/* ── PARALLAX ── */
[data-parallax]{ will-change:transform; }

/* ── MARQUEE STRIP ── */
.marquee{
  overflow:hidden; white-space:nowrap;
  background:linear-gradient(135deg,var(--primary),#0F4A2A);
  padding:.8rem 0;
}
.marquee__track{
  display:inline-flex; gap:3rem;
  animation:marquee-scroll 26s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
.marquee__track span{
  display:inline-flex; align-items:center; gap:.9rem;
  color:rgba(255,255,255,.92); font-weight:700; font-size:.78rem;
  letter-spacing:.1em; text-transform:uppercase;
}
.marquee__track span::after{ content:'✦'; color:var(--gold-lt); opacity:.65; font-size:.7rem; }
@keyframes marquee-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ── PRODUCT CARD MOTION (image zoom on hover, additive to existing rules) ── */
.product-img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease-out-expo); }
.product-card:hover .product-img{ transform:scale(1.1) rotate(-1deg); }
.product-card{ transition:transform .45s var(--ease-out-expo), box-shadow .45s var(--ease-out-expo); }

/* category card image-style zoom to match */
.cat-card-placeholder{ transition:transform .7s var(--ease-out-expo); }
.cat-card-img{ transition:transform .7s var(--ease-out-expo); }
.cat-card:hover .cat-card-placeholder{ transform:scale(1.12); }
.cat-card:hover .cat-card-img{ transform:scale(1.12); }

/* ── ANIMATED COUNTER ── */
[data-count-to]{ font-variant-numeric:tabular-nums; }

/* ── NAV SHRINK ON SCROLL ── */
.nav{ transition:padding .3s var(--ease-smooth), box-shadow .3s ease; }
.nav.is-condensed{ padding-top:.55rem; padding-bottom:.55rem; }

/* ── FADE-IN ENTRANCE FOR WHOLE PAGE ── */
body{ animation:page-fade-in .5s var(--ease-out-expo) both; }
@keyframes page-fade-in{ from{ opacity:0; } to{ opacity:1; } }

/* ── PRODUCT CARD "VIEW" BADGE (desktop-only, replaces removed custom cursor) ── */
@media (hover:hover) and (pointer:fine){
  .product-view-badge{
    position:absolute; left:50%; bottom:.85rem;
    transform:translate(-50%,10px);
    background:var(--accent); color:#fff;
    font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
    padding:.42rem 1.05rem; border-radius:99px;
    opacity:0; pointer-events:none; white-space:nowrap;
    box-shadow:0 6px 16px rgba(26,107,60,.25);
    transition:opacity .2s var(--ease-out-expo), transform .2s var(--ease-out-expo);
  }
  .product-card:hover .product-view-badge{ opacity:1; transform:translate(-50%,0); }
}
@media (hover:none), (pointer:coarse){
  .product-view-badge{ display:none; }
}

/* ── ADD TO CART: FLYING ITEM ── */
.fly-to-cart{
  position:fixed; z-index:10001; pointer-events:none;
  border-radius:8px; object-fit:cover;
  box-shadow:0 8px 22px rgba(0,0,0,.28);
  transition:transform .55s var(--ease-out-expo), opacity .55s ease;
}
.fly-to-cart-dot{ background:var(--accent); border-radius:50%; box-shadow:none; }
@keyframes cart-pulse{ 0%{ transform:scale(1); } 40%{ transform:scale(1.24); } 100%{ transform:scale(1); } }
.nav-icon-btn.cart-pulse{ animation:cart-pulse .42s var(--ease-spring); }

/* ── CHECKOUT: FIELD-LEVEL VALIDATION STATES ── */
.checkout-field{ position:relative; }
.checkout-field input.is-field-valid,
.checkout-field textarea.is-field-valid{
  border-color:var(--accent) !important;
  box-shadow:0 0 0 3px rgba(61,170,104,.1);
}
.checkout-field input.is-field-invalid,
.checkout-field textarea.is-field-invalid{
  border-color:var(--red) !important;
  box-shadow:0 0 0 3px rgba(229,62,62,.1);
}
.checkout-field__check{
  position:absolute; right:.75rem; top:2.55rem;
  width:16px; height:16px; opacity:0; transform:scale(.6);
  transition:opacity .18s var(--ease-out-expo), transform .18s var(--ease-out-expo);
  color:var(--accent); pointer-events:none;
}
.checkout-field input.is-field-valid ~ .checkout-field__check{ opacity:1; transform:scale(1); }

/* ── ORDER CONFIRMATION: CHECKMARK DRAW-IN ── */
.confirmation-check-circle{
  stroke-dasharray:164; stroke-dashoffset:164;
  animation:confirmation-circle .5s var(--ease-out-expo) forwards;
}
.confirmation-check-mark{
  stroke-dasharray:38; stroke-dashoffset:38;
  animation:confirmation-check .3s var(--ease-out-expo) .45s forwards;
}
@keyframes confirmation-circle{ to{ stroke-dashoffset:0; } }
@keyframes confirmation-check{ to{ stroke-dashoffset:0; } }