/* MVP GUMBO — atmosphere + motion layer.
   Everything here is additive: the site works with this file removed.
   Mobile deliberately gets a lighter build (see the kill-switches at the bottom). */

/* ---------- fixed atmosphere stack ---------- */
.fx{position:fixed;inset:0;pointer-events:none;z-index:0}

.fx-field{
  background:
    radial-gradient(58% 44% at 10% 6%,  rgba(227,178,60,.11), transparent 60%),
    radial-gradient(52% 40% at 90% 16%, rgba(29,63,191,.13),  transparent 62%),
    radial-gradient(54% 46% at 80% 78%, rgba(200,16,46,.09),  transparent 64%),
    radial-gradient(68% 54% at 18% 94%, rgba(227,178,60,.07), transparent 66%);
}

.fx-vig{box-shadow:inset 0 0 220px 70px rgba(0,0,0,.72)}

.fx-grain{
  inset:-50%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.05;mix-blend-mode:overlay;
  animation:grain .5s steps(3) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}      20%{transform:translate(-8%,4%)}
  40%{transform:translate(5%,-8%)}  60%{transform:translate(-4%,10%)}
  80%{transform:translate(9%,2%)}   100%{transform:translate(0,0)}
}

#fxCanvas{position:fixed;inset:0;pointer-events:none;z-index:0}

/* content rides above the atmosphere */
main,.foot{position:relative;z-index:1}

/* ---------- gold as a material, not a colour ---------- */
.nav-mark2,.hero-line em,.foot-mark span,.card-price,.story-stats b,.sizeguide thead th{
  background:linear-gradient(100deg,
    var(--gold-lo), var(--gold-hi) 25%, var(--gold) 50%, var(--gold-hi) 75%, var(--gold-lo));
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sheen 7s linear infinite;
}
@keyframes sheen{to{background-position:200% center}}

/* ---------- word-by-word headline reveal ---------- */
.w{
  display:inline-block;opacity:0;
  transform:translateY(.45em) rotateX(-38deg);filter:blur(5px);
  transition:opacity .6s cubic-bezier(.22,.8,.3,1),
             transform .6s cubic-bezier(.22,.8,.3,1),
             filter .6s ease;
}
.in .w{opacity:1;transform:none;filter:none}

/* ---------- hero entrance ---------- */
.hero-inner .eyebrow,.hero-lockup,.hero-sub,.hero-cta{
  animation:heroIn .9s cubic-bezier(.22,.8,.3,1) both;
}
.hero-inner .eyebrow{animation-delay:.06s}
.hero-lockup{animation-delay:.16s}
.hero-sub{animation-delay:.5s}
.hero-cta{animation-delay:.62s}
@keyframes heroIn{from{opacity:0;transform:translateY(26px);filter:blur(9px)}}

/* ---------- product tiles ---------- */
.card{
  position:relative;transform-style:preserve-3d;
  animation:cardIn .55s cubic-bezier(.22,.8,.3,1) both;
}
@keyframes cardIn{from{opacity:0;transform:translateY(18px)}}

/* gradient-mask hover ring */
.card::after{
  content:"";position:absolute;inset:0;border-radius:16px;padding:1px;
  background:linear-gradient(140deg,
    rgba(227,178,60,.95), transparent 38%, transparent 62%, rgba(29,63,191,.8));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .25s;pointer-events:none;
}
.card:hover::after{opacity:1}

/* the garment lifts a touch inside the tilting tile */
.card .gm-drop{transition:transform .35s cubic-bezier(.22,.8,.3,1)}
.card:hover .gm-drop{transform:translateY(-6px) scale(1.02)}

/* ---------- bag feedback ---------- */
@keyframes badgePop{0%{transform:scale(1)}38%{transform:scale(1.55)}100%{transform:scale(1)}}
.cart-count.pop{animation:badgePop .45s ease-out}

/* ---------- custom cursor ---------- */
.cur,.cur-ring{
  /* must outrank #boot (400) and #gate (350): `cursor:none` is applied page-wide
     the moment fx.js runs, so a lower z-index left desktop visitors with no
     pointer at all through the loader and the entire gate */
  position:fixed;top:0;left:0;pointer-events:none;z-index:500;
  border-radius:50%;mix-blend-mode:difference;
  opacity:0;transition:opacity .25s;
}
/* stay invisible until the pointer actually moves — otherwise the ring sits
   parked in the middle of the hero on every fresh load */
html.cursor-live .cur,html.cursor-live .cur-ring{opacity:1}
.cur{width:7px;height:7px;background:#fff}
.cur-ring{
  width:32px;height:32px;border:1px solid rgba(255,255,255,.55);
  transition:width .22s,height .22s,border-color .22s,opacity .25s;
}
.cur-ring.hot{width:54px;height:54px;border-color:var(--gold)}
html.has-cursor,html.has-cursor *{cursor:none !important}

/* ---------- kill-switches ---------- */

/* feTurbulence murders phone GPUs; the sheen repaint is not worth it either */
@media(max-width:900px){
  .fx-grain{display:none}
  .nav-mark2,.hero-line em,.foot-mark span,.card-price,.story-stats b,.sizeguide thead th{
    animation:none;
  }
  .card .gm-drop{transition:none}
}
@media(hover:none),(pointer:coarse){
  .cur,.cur-ring{display:none}
}
@media(prefers-reduced-motion:reduce){
  .fx-grain{animation:none;display:none}
  .nav-mark2,.hero-line em,.foot-mark span,.card-price,.story-stats b,.sizeguide thead th{animation:none}
  .w{opacity:1;transform:none;filter:none;transition:none}
  .hero-inner .eyebrow,.hero-lockup,.hero-sub,.hero-cta,.card{animation:none}
  .card .gm-drop,.card:hover .gm-drop{transition:none;transform:none}
  .cart-count.pop{animation:none}
}