/* ════════════════════════════════════════════════════════════
   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; }

/* ── CUSTOM CURSOR (desktop, fine pointer only) ── */
@media (hover:hover) and (pointer:fine){
  body.has-custom-cursor{ cursor:none; }
  body.has-custom-cursor a, body.has-custom-cursor button{ cursor:none; }
  .cursor-dot, .cursor-ring{
    position:fixed; top:0; left:0; border-radius:50%;
    pointer-events:none; z-index:10000;
    transform:translate(-50%,-50%);
    will-change:transform;
  }
  .cursor-dot{
    width:6px; height:6px; background:var(--accent);
    transition:opacity .2s ease, background .2s ease;
  }
  .cursor-ring{
    width:34px; height:34px;
    border:1.5px solid rgba(26,107,60,.55);
    transition:width .3s var(--ease-out-expo), height .3s var(--ease-out-expo),
               border-color .25s ease, background-color .25s ease, opacity .2s ease;
  }
  .cursor-ring.is-hover{ width:70px; height:70px; background:rgba(61,170,104,.08); border-color:var(--primary); }
  .cursor-ring.is-text{ width:90px; height:34px; border-radius:20px; background:var(--primary); border-color:var(--primary); }
  .cursor-ring.is-pressed{ width:26px; height:26px; }
  .cursor-ring__label{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    font-size:.65rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    color:#fff; opacity:0; transition:opacity .2s ease;
  }
  .cursor-ring.is-text .cursor-ring__label{ opacity:1; }
  body.cursor-hidden .cursor-dot, body.cursor-hidden .cursor-ring{ opacity:0; }
}
@media (hover:none), (pointer:coarse){
  .cursor-dot, .cursor-ring{ display:none; }
}

/* ── 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; } }