/* ==========================================================================
   KAVITA TRADERS — motion & conversion layer
   Loaded after style.css. Everything here degrades to "no animation, still
   perfectly usable" when prefers-reduced-motion is set.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. PAGE INTRO — a brief gold curtain with the brand mark
   -------------------------------------------------------------------------- */
.intro{
  position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  background:var(--ink);
  transition:opacity .7s var(--ease-out),visibility .7s;
}
.intro .im{
  width:64px;height:64px;display:grid;place-items:center;border-radius:50%;
  border:1px solid rgba(200,178,108,.45);
  font-family:"Playfair Display",serif;font-size:1.7rem;color:var(--gold-lt);
  opacity:0;transform:scale(.9);
  animation:introMark 1.15s var(--ease-out) forwards;
}
.intro .il{
  position:absolute;left:50%;bottom:38%;transform:translateX(-50%);
  width:0;height:1px;background:var(--gold-rule);
  animation:introLine 1.15s var(--ease-out) .18s forwards;
}
@keyframes introMark{to{opacity:1;transform:scale(1)}}
@keyframes introLine{to{width:132px}}
.intro.done{opacity:0;visibility:hidden;pointer-events:none}
html.intro-lock,html.intro-lock body{overflow:hidden}

/* --------------------------------------------------------------------------
   2. SPLIT-WORD HEADLINE REVEAL
   -------------------------------------------------------------------------- */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.wi{
  display:inline-block;transform:translateY(110%);opacity:0;
  transition:transform 1.05s var(--ease-out),opacity .8s var(--ease-out);
  will-change:transform;
}
.in .wi{transform:translateY(0);opacity:1}

/* --------------------------------------------------------------------------
   3. DIRECTIONAL / STAGGERED REVEALS
   -------------------------------------------------------------------------- */
.rv{opacity:0;transition:opacity 1s var(--ease-out),transform 1s var(--ease-out);will-change:transform,opacity}
.rv-up   {transform:translateY(34px)}
.rv-left {transform:translateX(-34px)}
.rv-right{transform:translateX(34px)}
.rv-fade {transform:none}
.rv-scale{transform:scale(.96)}
.rv.in{opacity:1;transform:none}

/* children stagger — set by JS as --i */
.stagger > *{opacity:0;transform:translateY(26px);transition:opacity .85s var(--ease-out),transform .85s var(--ease-out);transition-delay:calc(var(--i,0) * 85ms)}
.stagger.in > *{opacity:1;transform:none}

/* --------------------------------------------------------------------------
   4. IMAGE CURTAIN REVEAL — a gold sheet slides off the image
   -------------------------------------------------------------------------- */
.curtain{position:relative;overflow:hidden}
.curtain::after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(115deg,var(--ink) 0%,var(--ink-2) 55%,var(--gold-dp) 140%);
  transform:translateX(0);
  transition:transform 1.25s cubic-bezier(.76,0,.24,1);
}
.curtain.in::after{transform:translateX(101%)}
.curtain img,.curtain video{transform:scale(1.14);transition:transform 1.7s var(--ease-out)}
.curtain.in img,.curtain.in video{transform:scale(1)}

/* --------------------------------------------------------------------------
   5. PARALLAX
   -------------------------------------------------------------------------- */
.px{will-change:transform}

/* --------------------------------------------------------------------------
   6. MAGNETIC BUTTONS + CUSTOM CURSOR (fine pointers only)
   -------------------------------------------------------------------------- */
.mag{will-change:transform}

@media (hover:hover) and (pointer:fine){
  .kcur{
    position:fixed;top:0;left:0;z-index:190;pointer-events:none;
    width:9px;height:9px;border-radius:50%;background:var(--gold);
    transform:translate3d(-50%,-50%,0);
    transition:width .35s var(--ease),height .35s var(--ease),background .35s var(--ease),opacity .3s;
    mix-blend-mode:difference;opacity:0;
  }
  .kcur.on{opacity:1}
  .kcur.lg{width:46px;height:46px;background:rgba(200,178,108,.55)}
  .kcur-ring{
    position:fixed;top:0;left:0;z-index:189;pointer-events:none;
    width:34px;height:34px;border-radius:50%;border:1px solid rgba(200,178,108,.5);
    transform:translate3d(-50%,-50%,0);opacity:0;transition:opacity .35s,width .35s var(--ease),height .35s var(--ease);
  }
  .kcur-ring.on{opacity:1}
  .kcur-ring.lg{width:0;height:0;opacity:0}
}

/* --------------------------------------------------------------------------
   7. HERO VIDEO
   -------------------------------------------------------------------------- */
.hero-media .frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-media .frame{background:var(--ink-2)}

/* the hero video is shot vertical, so the frame goes portrait to match it */
.hero-media .frame{aspect-ratio:4/5}

/* video sitting in a normal content block — must reserve its own height */
.fimg video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:var(--ink-2)}
.fimg-tall video{aspect-ratio:3/4}
.fimg video img{width:100%;height:100%;object-fit:cover}
/* if the video can't play we swap in the poster as a plain image */
.fimg .vfallback{display:block;width:100%}
.vid-wrap{position:relative;overflow:hidden;border-radius:var(--r)}
.vid-wrap video{width:100%;height:100%;object-fit:cover;display:block}

/* full-bleed video band */
.vband{position:relative;overflow:hidden;isolation:isolate;background:var(--ink)}
.vband video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  opacity:.34;filter:saturate(.85) contrast(.92);
}
.vband::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to right,rgba(20,20,16,.92) 0%,rgba(20,20,16,.72) 46%,rgba(20,20,16,.55) 100%),
    radial-gradient(80% 70% at 88% 20%,rgba(200,178,108,.20),transparent 62%);
}
.vband .inner{position:relative;z-index:2}

/* the shade wall carries the book footage behind it, but the book's own
   lettering fights the headline — hold it well back */
.shadewall.vband video{opacity:.16;filter:saturate(.7) blur(1px)}
.shadewall.vband::after{
  background:
    linear-gradient(to bottom,rgba(30,30,24,.90),rgba(30,30,24,.80) 45%,rgba(30,30,24,.90)),
    radial-gradient(70% 60% at 82% 8%,rgba(200,178,108,.16),transparent 62%);
}

/* --------------------------------------------------------------------------
   8. GRAIN — the thing that quietly makes flat colour look expensive
   -------------------------------------------------------------------------- */
.grain::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.30;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   9. COUNTERS
   -------------------------------------------------------------------------- */
.hero-stats b{font-variant-numeric:tabular-nums}

/* --------------------------------------------------------------------------
   10. GOLD SHEEN sweep across the signature word
   -------------------------------------------------------------------------- */
.sheen{
  background:linear-gradient(100deg,var(--gold-dp) 12%,var(--gold-lt) 34%,#F6EED6 46%,var(--gold-lt) 58%,var(--gold-dp) 82%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sheen 7s ease-in-out infinite;
}
@keyframes sheen{0%,100%{background-position:130% 0}50%{background-position:-30% 0}}

/* --------------------------------------------------------------------------
   11. CARD POLISH
   -------------------------------------------------------------------------- */
.card .media{transition:transform .7s var(--ease-out),box-shadow .7s var(--ease-out)}
.card:hover .media{transform:translateY(-6px);box-shadow:var(--sh-md)}
.card .pname{background-image:linear-gradient(var(--gold),var(--gold));background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .5s var(--ease-out)}
.card:hover .pname{background-size:100% 1px}

.cat{transition:box-shadow .7s var(--ease-out)}
.cat:hover{box-shadow:var(--sh-md)}

/* --------------------------------------------------------------------------
   12. WHATSAPP CONVERSION LAYER
   -------------------------------------------------------------------------- */

/* 12a — floating button that expands into a label on desktop */
.wa-float{overflow:hidden;width:58px;transition:width .5s var(--ease-out),transform .45s var(--ease),box-shadow .45s var(--ease);white-space:nowrap;justify-content:flex-start;padding-left:15px;display:flex;align-items:center;gap:.7rem}
.wa-float .wl{
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:#fff;
  opacity:0;transition:opacity .3s var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .wa-float:hover{width:210px;border-radius:32px}
  .wa-float:hover .wl{opacity:1;transition-delay:.12s}
}

/* 12b — sticky mobile action bar: the single biggest conversion lever */
.mbar{
  position:fixed;left:0;right:0;bottom:0;z-index:88;display:none;
  gap:0;background:rgba(248,247,242,.96);backdrop-filter:blur(16px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom,0);
  transform:translateY(102%);transition:transform .55s var(--ease-out);
  box-shadow:0 -8px 30px rgba(35,35,28,.10);
}
.mbar.up{transform:translateY(0)}
.mbar a,.mbar button{
  flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:1.05rem .6rem;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  color:var(--ink);position:relative;
}
.mbar .m-wa{background:var(--wa-dp);color:#fff}
.mbar .m-enq .mb-badge{
  min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--ink);color:var(--gold-lt);
  font-size:.58rem;display:grid;place-items:center;
}
@media (max-width:860px){
  .mbar{display:flex}
  .wa-float{display:none}
  body{padding-bottom:56px}
  .toast-wrap{bottom:76px}
}

/* 12c — scroll-triggered enquiry nudge */
.nudge{
  position:fixed;right:22px;bottom:96px;z-index:86;width:min(90vw,326px);
  background:var(--porcelain);border:1px solid var(--line);border-left:2px solid var(--gold);
  border-radius:var(--r);box-shadow:var(--sh-lg);padding:1.3rem 1.4rem 1.4rem;
  opacity:0;transform:translateY(18px) scale(.97);visibility:hidden;
  transition:opacity .55s var(--ease-out),transform .55s var(--ease-out),visibility .55s;
}
.nudge.show{opacity:1;transform:none;visibility:visible}
.nudge .nx{position:absolute;top:8px;right:10px;width:28px;height:28px;display:grid;place-items:center;color:var(--taupe);font-size:1.1rem;line-height:1}
.nudge .nx:hover{color:var(--ink)}
.nudge .ne{font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-dp);display:block;margin-bottom:.6rem}
.nudge h4{font-family:"Playfair Display",serif;font-size:1.35rem;font-weight:400;color:var(--ink);margin:0 0 .5rem;line-height:1.2}
.nudge p{font-size:.83rem;color:var(--taupe);margin:0 0 1.1rem;line-height:1.6}
@media (max-width:860px){.nudge{right:12px;left:12px;bottom:74px;width:auto}}

/* 12d — "ask rate on whatsapp" link inside product cards */
.card .askwa{
  display:inline-flex;align-items:center;gap:.45em;margin-top:.7rem;
  font-size:.6rem;letter-spacing:.17em;text-transform:uppercase;color:var(--wa-dp);
  opacity:.85;transition:opacity .3s,gap .3s var(--ease);
}
.card .askwa:hover{opacity:1;gap:.7em}
.card .askwa svg{flex-shrink:0}

/* the trade price slot, upgraded in place into the WhatsApp link */
.card .askwa-inline{
  display:inline-flex;align-items:center;gap:.45em;margin-top:auto;padding-top:.35rem;
  font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--wa-dp);
  transition:gap .3s var(--ease),color .3s;
}
.card .askwa-inline:hover{gap:.7em;color:#0E5544}
.card .askwa-inline svg{flex-shrink:0}

/* --------------------------------------------------------------------------
   14. THE SHADE WALL
   -------------------------------------------------------------------------- */
.shadewall .shead{align-items:flex-end}
.sw-readout{display:flex;align-items:center;gap:1rem;flex-shrink:0}
.sw-chip{
  width:62px;height:62px;border-radius:50%;flex-shrink:0;
  background:#EFBAA3;border:1px solid rgba(255,255,255,.22);
  box-shadow:0 8px 26px rgba(0,0,0,.34);
  transition:background .45s var(--ease),transform .45s var(--ease);
}
.sw-readout.pop .sw-chip{transform:scale(1.09)}
.sw-meta{display:flex;flex-direction:column;gap:.28rem}
.sw-meta b{font-family:"Playfair Display",serif;font-size:1.5rem;font-weight:400;color:#FAF9F3;line-height:1}
.sw-meta small{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-lt)}

.sw-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));
  gap:clamp(8px,1vw,14px);margin-top:.6rem;
}
.sw{
  position:relative;aspect-ratio:1/1.32;border-radius:60px 60px 8px 8px;
  border:0;padding:0;cursor:pointer;overflow:hidden;
  box-shadow:inset 0 -18px 26px rgba(0,0,0,.14),0 5px 16px rgba(0,0,0,.24);
  opacity:0;transform:translateY(18px) scale(.94);
  transition:opacity .6s var(--ease-out),transform .6s var(--ease-out),box-shadow .4s var(--ease);
  transition-delay:calc(var(--i,0) * 26ms);
}
.sw::after{
  content:"";position:absolute;left:16%;top:8%;width:26%;height:44%;
  border-radius:50%;background:linear-gradient(180deg,rgba(255,255,255,.5),transparent);
  pointer-events:none;
}
.sw-grid.in .sw{opacity:1;transform:none}
.sw:hover,.sw:focus-visible{transform:translateY(-7px) scale(1.05);box-shadow:inset 0 -18px 26px rgba(0,0,0,.14),0 16px 34px rgba(0,0,0,.4);outline:none;z-index:2}
.sw i{
  position:absolute;left:0;right:0;bottom:5px;text-align:center;font-style:normal;
  font-size:.56rem;letter-spacing:.12em;color:rgba(255,255,255,.9);
  text-shadow:0 1px 3px rgba(0,0,0,.6);opacity:0;transition:opacity .3s;
}
.sw:hover i,.sw:focus-visible i{opacity:1}
.sw.dark i{color:rgba(255,255,255,.95)}
.sw.light i{color:rgba(20,20,16,.75);text-shadow:0 1px 2px rgba(255,255,255,.5)}
.sw-note{margin-top:2rem;font-size:.76rem;color:rgba(232,230,218,.55);letter-spacing:.04em}
.sw-note b{color:var(--gold-lt);font-weight:500}

@media (max-width:620px){
  .shadewall .shead{align-items:flex-start}
  .sw-grid{grid-template-columns:repeat(auto-fill,minmax(56px,1fr))}
  .sw-chip{width:50px;height:50px}
}

/* --------------------------------------------------------------------------
   15. SCROLL-DRIVEN HORIZONTAL PRODUCT GALLERY
   -------------------------------------------------------------------------- */
.scroller{position:relative;background:var(--porcelain)}
.sc-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.sc-head{
  display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  margin-bottom:clamp(1.5rem,3vw,2.6rem);width:100%;
}
.sc-head .st{max-width:60ch}
.sc-head h2{margin-top:.9rem}
.sc-right{display:flex;flex-direction:column;align-items:flex-end;gap:1.1rem}
.sc-progress{width:min(230px,34vw);height:1px;background:var(--line);position:relative;overflow:hidden}
.sc-progress i{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:var(--gold-grad);display:block}
.sc-track{
  display:flex;gap:clamp(16px,2vw,28px);
  padding-inline:var(--gutter);
  will-change:transform;
}
.sc-track .card{width:clamp(230px,23vw,300px);flex-shrink:0}
.sc-track .card .media{aspect-ratio:4/5}
/* the scroller needs real page height to scrub against — set by JS */
.sc-fallback{display:none}

@media (max-width:900px),(prefers-reduced-motion:reduce){
  .scroller{display:none}
  .sc-fallback{display:block}
}

/* --------------------------------------------------------------------------
   17. CATEGORY TILE HOVER VIDEO
   -------------------------------------------------------------------------- */
.cat .catv{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
  opacity:0;transition:opacity .65s var(--ease);
}
.cat:hover .catv,.cat:focus-visible .catv{opacity:1}
.cat .veil{z-index:2}
.cat .cnum,.cat .cap{z-index:3}
/* a tiny "plays on hover" hint so the video is discoverable */
.cat:has(.catv) .cnum::after{content:" ▸";color:var(--gold-lt);opacity:.8}
@media (hover:none){.cat .catv{display:none}}

/* --------------------------------------------------------------------------
   18. REEL STRIP
   -------------------------------------------------------------------------- */
.reel-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,2vw,26px)}
@media (max-width:1100px){.reel-strip{grid-template-columns:repeat(3,1fr)}.reel-strip .reel:nth-child(4){display:none}}
.reel{margin:0;position:relative;border-radius:var(--r);overflow:hidden;background:var(--ink-2)}
.reel video{display:block;width:100%;aspect-ratio:9/16;object-fit:cover;background:var(--ink-2)}
.reel::after{content:"";position:absolute;inset:0;pointer-events:none;border:1px solid rgba(226,211,160,.20);z-index:2}
.reel figcaption{
  position:absolute;left:0;right:0;bottom:0;z-index:3;padding:2.4rem 1.1rem 1.05rem;
  font-size:.62rem;letter-spacing:.17em;text-transform:uppercase;color:rgba(255,255,255,.9);
  background:linear-gradient(to top,rgba(20,20,16,.86),transparent);
}
.reel .vfallback{width:100%;aspect-ratio:9/16;object-fit:cover}
@media (max-width:720px){
  .reel-strip{grid-template-columns:1fr 1fr;gap:10px}
  .reel:last-child{display:none}
  .reel figcaption{font-size:.55rem;padding:1.8rem .7rem .8rem}
}

/* --------------------------------------------------------------------------
   16. SCROLL PROGRESS BAR
   -------------------------------------------------------------------------- */
.kprog{position:fixed;top:0;left:0;right:0;height:2px;z-index:100;background:transparent;pointer-events:none}
.kprog i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);background:var(--gold-grad)}

/* --------------------------------------------------------------------------
   19. QA FIXES
   -------------------------------------------------------------------------- */

/* Tile index numbers. A text-shadow alone measured 1.78:1 against pale photos —
   nowhere near the 4.5:1 needed at this size. Give the number its own scrim so
   contrast is guaranteed regardless of what is behind it. */
.cat .cnum{
  background:rgba(22,22,17,.8);   /* .62 measured only 3.56:1 over a pale photo */
  padding:.42em .62em;border-radius:2px;
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  color:var(--gold-lt);line-height:1;
}
.cat .cap h3,.cat .cap span{text-shadow:0 1px 8px rgba(0,0,0,.6)}

/* contact cards overran a 390px viewport by 78px — `overflow-x:clip` was hiding
   it, so the Instagram handle (the page's main CTA) was cut mid-word */
.ccards,.ccard,.ccard > div{min-width:0}
.ccard .big,.ccard p,.ccard a{overflow-wrap:anywhere}
@media (max-width:520px){
  .ccard{gap:.9rem;padding:1.25rem}
  .ccard .big{font-size:1.12rem}
}

/* cards stretched to the tallest in the row, opening up to 200px of dead space
   under short ones. Let each card be its own height instead. */
.pgrid,.prail,.sc-track{align-items:start}

/* the filter row scrolls but gave no hint that it did */
.filters{
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 46px),transparent);
  mask-image:linear-gradient(to right,#000 calc(100% - 46px),transparent);
}

/* shade numbers are the whole point of the section — always show them */
.sw i{opacity:.85}
.sw:hover i,.sw:focus-visible i{opacity:1}

/* --- tap targets & minimum legible type (mobile) --- */
.card .askwa,.card .askwa-inline{padding-block:.5rem;margin-top:.35rem}
.tlink{padding-block:.55em .5em}
.footer li a{padding-block:.3rem}
.crumbs a{padding-block:.35rem}

@media (max-width:720px){
  .pill{font-size:.62rem}
  .card .blabel{font-size:.62rem}
  .card .save{font-size:.66rem}
  .btn-sm{font-size:.66rem}
  .footer h4{font-size:.7rem}
  .hero-stats small{font-size:.63rem}
  .card .askwa,.card .askwa-inline{font-size:.64rem;padding-block:.62rem}
  .sortsel{padding-block:.7em}

  /* four stats wrapped 3 + 1, orphaning "Pan-India" */
  .hero-stats{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem 1.6rem}

  /* seven 3:4 tiles made the category section ~4000px of scrolling */
  .cat,.cat.tall{aspect-ratio:4/3}
  .cat.wide{aspect-ratio:16/9}
}

/* --------------------------------------------------------------------------
   20. NATIVE SCROLL-DRIVEN ANIMATION  (progressive enhancement)
   Chrome/Edge 115+, Firefox 132+, Safari 18+. These run on the compositor,
   so they stay glued to the scroll with zero main-thread work. Browsers
   without support simply skip the whole block and keep the JS reveals.
   Nothing essential lives in here — it is all polish on top.
   -------------------------------------------------------------------------- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){

    /* hero drifts up gently as you leave it */
    .hero-media{
      animation:heroDrift linear both;
      animation-timeline:view();
      animation-range:exit-crossing 0% exit 100%;
    }
    @keyframes heroDrift{to{transform:translateY(-46px)}}

    /* the page heading softens and lifts as it scrolls away */
    .page-head h1,.hero h1{
      animation:headOut linear both;
      animation-timeline:view();
      animation-range:exit 10% exit 100%;
    }
    @keyframes headOut{to{opacity:.25;transform:translateY(-26px)}}

    /* instagram tiles breathe */
    .iggrid a img{
      animation:tileBreathe linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
    @keyframes tileBreathe{from{transform:scale(1.14)}to{transform:scale(1)}}

    /* reels drift at different rates — cheap, convincing depth */
    .reel-strip .reel:nth-child(odd) video{animation:reelA linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    .reel-strip .reel:nth-child(even) video{animation:reelB linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes reelA{from{transform:translateY(3.5%) scale(1.09)}to{transform:translateY(-3.5%) scale(1.09)}}
    @keyframes reelB{from{transform:translateY(-3.5%) scale(1.09)}to{transform:translateY(3.5%) scale(1.09)}}

    /* the eyebrow rule draws itself in */
    .eyebrow::before{
      animation:ruleDraw linear both;
      animation-timeline:view();
      animation-range:entry 10% entry 90%;
    }
    @keyframes ruleDraw{from{width:0;opacity:0}to{width:26px;opacity:.7}}

    /* section headings rise a touch on approach */
    .shead h2{
      animation:headIn linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 85%;
    }
    @keyframes headIn{from{transform:translateY(22px)}to{transform:translateY(0)}}
  }
}

/* --------------------------------------------------------------------------
   21. HERO SCROLL CUE
   -------------------------------------------------------------------------- */
.scrollcue{
  display:inline-flex;align-items:center;gap:.7rem;margin-top:2.4rem;
  font-size:.58rem;letter-spacing:.26em;text-transform:uppercase;
  color:rgba(237,235,224,.55);
}
.scrollcue i{
  position:relative;display:block;width:1px;height:34px;background:rgba(226,211,160,.28);overflow:hidden;
}
.scrollcue i::after{
  content:"";position:absolute;left:0;top:0;width:1px;height:12px;background:var(--gold-lt);
  animation:cueRun 2.4s var(--ease-out) infinite;
}
@keyframes cueRun{0%{transform:translateY(-14px)}60%,100%{transform:translateY(34px)}}
@media (max-width:1080px){.scrollcue{display:none}}

/* --------------------------------------------------------------------------
   13. REDUCED MOTION — everything above collapses to static
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .intro{display:none}
  .wi{transform:none!important;opacity:1!important}
  .rv,.stagger > *{opacity:1!important;transform:none!important}
  .curtain::after{display:none}
  .curtain img,.curtain video{transform:none!important}
  .sheen{animation:none}
  .kcur,.kcur-ring{display:none}
  .card:hover .media{transform:none}
  .vband video{display:none}
  .sw{opacity:1!important;transform:none!important}
  .kprog{display:none}
}