/* VP Supply Co — motion layer + catalog page styles.
   Everything that moves is switched off under prefers-reduced-motion at the bottom. */
:root{--ease:cubic-bezier(.22,1,.36,1);}

/* ---------- reveal on scroll (only hidden when JS is running) ---------- */
.js .reveal{opacity:0;}
.js .reveal.in{opacity:1;animation:rvUp .95s var(--ease) backwards;animation-delay:var(--d,0ms);}
.js .reveal[data-rv="left"].in{animation-name:rvLeft;}
.js .reveal[data-rv="right"].in{animation-name:rvRight;}
.js .reveal[data-rv="zoom"].in{animation-name:rvZoom;}
.js .reveal[data-rv="wipe"].in{animation:rvWipe 1.35s var(--ease) backwards;animation-delay:var(--d,0ms);}
.js .reveal[data-rv="wipe"].in img{animation:rvImg 1.9s var(--ease) backwards;animation-delay:var(--d,0ms);}
@keyframes rvUp   {from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes rvLeft {from{opacity:0;transform:translateX(-42px)}to{opacity:1;transform:none}}
@keyframes rvRight{from{opacity:0;transform:translateX(42px)}to{opacity:1;transform:none}}
@keyframes rvZoom {from{opacity:0;transform:scale(.92) translateY(14px)}to{opacity:1;transform:none}}
@keyframes rvWipe {from{opacity:1;clip-path:inset(0 100% 0 0 round 12px)}to{opacity:1;clip-path:inset(0 0 0 0 round 12px)}}
@keyframes rvImg  {from{transform:scale(1.2)}to{transform:scale(1)}}

/* ---------- scroll progress + header ---------- */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:120;pointer-events:none;
  transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--accent),#3aa0ad);}
header{transition:box-shadow .35s,background .35s;}
header.scrolled{box-shadow:0 10px 28px -20px rgba(23,38,42,.45);background:rgba(242,244,243,.96);}

/* ---------- hero intro, plays once on load ---------- */
.hero .reveal,.hero-visual.reveal{opacity:1;}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes heroIn{from{opacity:0;clip-path:inset(7% 7% 7% 7% round 16px);transform:scale(1.05)}
  to{opacity:1;clip-path:inset(0 0 0 0 round 16px);transform:none}}
@keyframes kenburns{from{transform:scale(1.14)}to{transform:scale(1.02)}}
.hero .eyebrow,.hero h1,.hero .lead,.hero-cta,.hero-cats{animation:rise 1.05s var(--ease) both;}
.hero .eyebrow{animation-delay:.05s}
.hero h1{animation-delay:.16s}
.hero .lead{animation-delay:.32s}
.hero-cta{animation-delay:.46s}
.hero-cats{animation-delay:.6s}
.hero-visual .main{animation:heroIn 1.5s var(--ease) .1s both;will-change:transform;}
.hero-visual .main img{animation:kenburns 16s ease-out .1s both;}
.hero-cats a{transition:border-color .2s,color .2s,transform .2s,background .2s;}
.hero-cats a:hover{transform:translateY(-2px);background:var(--accent-tint);}

/* ---------- category ticker ---------- */
.ticker{overflow:hidden;background:var(--surface);border-block:1px solid var(--line-soft);padding:15px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);}
.ticker-track{display:flex;width:max-content;animation:tick 46s linear infinite;}
.ticker:hover .ticker-track{animation-play-state:paused;}
.ticker-item{display:inline-flex;align-items:center;gap:40px;padding-right:40px;white-space:nowrap;
  font-family:var(--f-display);font-size:19px;font-weight:600;letter-spacing:-0.015em;color:var(--ink-soft);}
.ticker-item::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);opacity:.45;}
.ticker-item.soon{color:var(--ink-faint);font-weight:500;}
.ticker-item.soon::after{background:var(--amber);}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- richer hover on tiles and photos ---------- */
a.cat{display:flex;flex-direction:column;text-decoration:none;color:inherit;}
a.cat .cat-txt{flex:1;display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px;
  border-top:1px solid var(--line-soft);text-align:left;}
a.cat .cat-txt b{display:block;line-height:1.25;}
a.cat .cat-txt span{display:block;margin-top:auto;}
.cat img{transition:transform .8s var(--ease);}
.cat:hover img{transform:scale(1.07);}
.cat-arrow{transition:transform .3s var(--ease),background .2s;}
.cat:hover .cat-arrow{transform:translateX(3px);background:#fff;}
.cat-soon .cat-ico{transition:transform .35s var(--ease);}
.cat-soon:hover .cat-ico{transform:rotate(-8deg) scale(1.08);}
.co-photos figure{position:relative;}
.co-photos img[data-par]{will-change:transform;}
.card-img img{transition:transform .7s var(--ease);}
.card:hover .card-img img{transform:scale(1.05);}
.card-img{overflow:hidden;}
.steps .step,.pt-steps > div{transition:transform .35s var(--ease);}
.pt-steps > div:hover{transform:translateX(5px);}
.pt-steps > div{border-left-color:var(--accent-tint);}
.pt-steps > div.in{border-left-color:var(--accent);transition:border-color 1s .3s,transform .35s var(--ease);}

/* ---------- section head accent that draws itself ---------- */
.eyebrow{position:relative;}
.js .reveal .eyebrow::before,.js .eyebrow.reveal::before{content:"";display:inline-block;width:0;height:2px;
  background:currentColor;vertical-align:middle;margin-right:0;transition:width .9s .25s var(--ease),margin-right .9s .25s var(--ease);}
.js .reveal.in .eyebrow::before,.js .eyebrow.reveal.in::before{width:28px;margin-right:12px;}

/* ---------- catalog page ---------- */
.page-head{padding:54px 0 34px;position:relative;overflow:hidden;}
.page-head::before{content:"";position:absolute;width:640px;height:640px;top:-320px;right:-200px;border-radius:50%;
  background:radial-gradient(circle,var(--accent-tint),transparent 66%);pointer-events:none;}
.crumbs{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);
  display:flex;gap:10px;align-items:center;position:relative;}
.crumbs a{color:var(--accent);text-decoration:none;}
.crumbs a:hover{text-decoration:underline;}
.page-head h1{font-size:clamp(34px,4.4vw,52px);margin-top:14px;letter-spacing:-0.035em;position:relative;}
.page-head p{color:var(--ink-soft);max-width:60ch;margin:14px 0 0;position:relative;}
.page-meta{font-family:var(--f-mono);font-size:12px;color:var(--ink-faint);margin-top:18px;position:relative;}
.cat-note{position:relative;margin:14px 0 0;max-width:60ch;padding-left:14px;border-left:3px solid var(--amber);
  font-family:var(--f-display);font-size:17px;font-weight:500;letter-spacing:-0.015em;color:var(--ink);}
.grid .card{animation:cardIn .7s var(--ease) both;animation-delay:calc(var(--i,0) * 45ms);}
@keyframes cardIn{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
.selbar{position:fixed;left:50%;bottom:22px;z-index:80;transform:translate(-50%,140%);opacity:0;
  display:flex;align-items:center;gap:16px;background:var(--ink);color:#fff;border-radius:14px;
  padding:12px 12px 12px 22px;box-shadow:var(--shadow-lg);transition:transform .5s var(--ease),opacity .4s;
  max-width:calc(100vw - 32px);}
.selbar.on{transform:translate(-50%,0);opacity:1;}
.selbar b{font-family:var(--f-display);font-weight:600;font-size:15px;white-space:nowrap;}
.selbar .btn{padding:10px 16px;white-space:nowrap;}
.toast{bottom:92px;}

[hidden]{display:none !important;}
.chip-n{font-family:var(--f-mono);font-size:11px;opacity:.6;margin-left:3px;}
.cat-cta{margin-top:44px;display:flex;}

/* ---------- footer links ---------- */
.foot a{color:inherit;text-decoration:none;}
.foot a:hover{color:var(--accent);}
.foot-links{display:flex;gap:20px;flex-wrap:wrap;}

/* ---------- reduced motion: nothing moves ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important;}
  .js .reveal{opacity:1 !important;}
  .ticker-track{transform:none;}
  .ticker{overflow-x:auto;}
  .progress{display:none;}
}
@media (max-width:520px){.selbar{gap:12px;padding-left:16px;}.ticker-item{font-size:17px;gap:28px;padding-right:28px;}}