/* THE INK LABEL — motion (v32). Every rule answers one of three jobs: reveal the brand,
   guide attention, confirm an action. transform / opacity / clip-path only. Checkout never loads this. */

/* ---------- film grain: static, 2%, never on the product gallery or checkout ---------- */
html.tl-grain:not(.tl-bag-open) body::after{content:"";position:fixed;inset:0;z-index:55;pointer-events:none;opacity:.02;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- v39 page transition: no black curtain. Cross-document View Transitions (where supported) crossfade
   260 ms; everywhere else navigation is instant and the dark page ground never flashes white. ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:260ms cubic-bezier(.65,0,.35,1) both tlVtOut}
::view-transition-new(root){animation:260ms cubic-bezier(.2,.8,.2,1) both tlVtIn}
@keyframes tlVtOut{to{opacity:0}}
@keyframes tlVtIn{from{opacity:0}}
@media (prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}}

/* ---------- header: solid after the hero, hides on a fast scroll down, back on the way up ---------- */
.tl-head{transition:background 280ms var(--ease),border-color 280ms var(--ease),transform 220ms var(--ease),-webkit-backdrop-filter 280ms,backdrop-filter 280ms}
.tl-head.is-solid,.tl-head:not(.tl-head--over){background:rgba(7,7,7,.94);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}
.tl-head.is-hid{transform:translateY(-100%)}
.tl-logo{transition:opacity 220ms var(--ease)}
.tl-logo:hover{opacity:.75}
.tl-nav a{position:relative;border-bottom:0!important}
.tl-nav a::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 220ms var(--ease)}
.tl-nav a:hover::after,.tl-nav a[aria-current="page"]::after{transform:scaleX(1)}
/* v32 — sound: a four-bar wave, flat and struck through when silent, breathing when on; "SOUND · ON/OFF" in mono beside it on desktop */
.tl-act--sound{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:44px;padding:0 10px;color:var(--text)!important;font-family:var(--mono);font-size:10px;font-weight:400;letter-spacing:.24em;text-transform:uppercase;transition:opacity 150ms ease,color 150ms ease}
.tl-act--sound:hover{color:#fff!important}   /* M8 — cream like the heart and BAG, white on hover like them */
.tl-snd{position:relative;display:inline-flex;align-items:center;gap:2px;height:14px;width:14px;flex:0 0 auto}
.tl-snd i{display:block;width:2px;background:currentColor;border-radius:1px;transform-origin:50% 50%;transition:transform 260ms var(--ease),opacity 260ms ease}
.tl-snd i:nth-child(1){height:6px}.tl-snd i:nth-child(2){height:11px}.tl-snd i:nth-child(3){height:8px}.tl-snd i:nth-child(4){height:13px}
.tl-act--sound[aria-pressed="false"] .tl-snd i{transform:scaleY(.32);opacity:.6}
.tl-act--sound[aria-pressed="false"] .tl-snd::after{content:"";position:absolute;left:-3px;right:-3px;top:50%;height:1px;background:currentColor;transform:rotate(-32deg);opacity:.75}
.tl-act--sound[aria-pressed="true"] .tl-snd i{animation:tlSnd 1.1s ease-in-out infinite alternate}
.tl-act--sound[aria-pressed="true"] .tl-snd i:nth-child(2){animation-delay:.14s}.tl-act--sound[aria-pressed="true"] .tl-snd i:nth-child(3){animation-delay:.28s}.tl-act--sound[aria-pressed="true"] .tl-snd i:nth-child(4){animation-delay:.42s}
@keyframes tlSnd{from{transform:scaleY(.3)}to{transform:scaleY(1)}}
.tl-snd__t{display:none}
@media (min-width:900px){.tl-snd__t{display:inline}.tl-act--sound[aria-pressed="true"] .tl-snd__t::after{content:" · on"}.tl-act--sound[aria-pressed="false"] .tl-snd__t::after{content:" · off"}}
@media (prefers-reduced-motion:reduce){.tl-act--sound[aria-pressed="true"] .tl-snd i{animation:none}}

/* ---------- drawer: 280ms, backdrop .45 ---------- */
.tl-scrim{background:rgba(5,5,5,.45);transition:opacity 280ms cubic-bezier(.22,1,.36,1),visibility 0s linear 280ms}
.tl-scrim.is-on{transition:opacity 280ms cubic-bezier(.22,1,.36,1)}
.tl-drawer{transition:transform 280ms cubic-bezier(.22,1,.36,1),visibility 0s linear 280ms}
.tl-drawer.is-on{transition:transform 280ms cubic-bezier(.22,1,.36,1)}
.tl-line.is-new{animation:tlNew 400ms ease-out}
@keyframes tlNew{from{background:rgba(241,236,227,.08)}to{background:transparent}}

/* ---------- product card hover (pointer devices) ---------- */
.tl-card__nm{position:relative;display:inline-block;transition:transform 260ms var(--ease),color 260ms var(--ease)}
.tl-card__nm::after{content:"";position:absolute;left:0;bottom:-5px;width:22px;height:1px;background:var(--accent);transform:scaleX(.55);opacity:.7;transform-origin:left;transition:transform 260ms var(--ease),opacity 260ms var(--ease)}   /* v32: the piece's own colour is always there, and stretches on hover */
@media (hover:hover) and (pointer:fine){
  .tl-card__img img{transition:opacity 240ms var(--ease),transform 450ms var(--ease)}
  .tl-card:hover .tl-card__img img{transform:scale(1.018)}
  .tl-card:hover .tl-card__nm{transform:translateX(3px);color:var(--text)}
  .tl-card:hover .tl-card__nm::after{transform:scaleX(1);opacity:1}
  [data-accent="nox"].tl-card:hover .tl-card__nm{transform:translateX(3px)}
}

/* ---------- scroll reveals (only with JS + motion allowed; visible otherwise) ---------- */
@media (prefers-reduced-motion:no-preference){
  html.tl-js [data-m]{transition-timing-function:cubic-bezier(.22,1,.36,1);transition-delay:var(--d,0ms)}
  html.tl-js [data-m="fade"]{opacity:0;transform:translateY(8px);transition-property:opacity,transform;transition-duration:260ms}
  html.tl-js [data-m="up"]{opacity:0;transform:translateY(6px);transition-property:opacity,transform;transition-duration:240ms}
  html.tl-js [data-m="mask"]{clip-path:inset(0 0 100% 0);transform:translateY(12%);transition-property:clip-path,transform;transition-duration:380ms}
  html.tl-js [data-m="card"]{opacity:0;transform:translateY(14px);transition-property:opacity,transform;transition-duration:260ms}
  html.tl-js [data-m="card"] .tl-card__img{clip-path:inset(100% 0 0 0);transition:clip-path 320ms cubic-bezier(.22,1,.36,1) var(--d,0ms)}
  html.tl-js [data-m="clip-l"]{clip-path:inset(0 100% 0 0);transition-property:clip-path;transition-duration:420ms}
  html.tl-js [data-m="clip-r"]{clip-path:inset(0 0 0 100%);transition-property:clip-path;transition-duration:420ms}
  html.tl-js [data-m="rise"]{opacity:0;transform:translateY(14px);transition-property:opacity,transform;transition-duration:280ms}
  html.tl-js [data-m="drop"]{opacity:0;transform:translateY(-8px);transition-property:opacity,transform;transition-duration:280ms}
  html.tl-js [data-m="settle"]{opacity:0;transform:scale(1.015);transition-property:opacity,transform;transition-duration:460ms}
  html.tl-js [data-m="slow"] img{transform:scale(1.04);transition:transform 700ms cubic-bezier(.22,1,.36,1)}
  html.tl-js [data-m="crop"]{clip-path:inset(8% 0 8% 0);transition-property:clip-path;transition-duration:460ms}
  html.tl-js [data-m="line"]{transform:scaleX(0);transform-origin:left;transition-property:transform;transition-duration:300ms}
  html.tl-js [data-m].is-in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
  html.tl-js [data-m="card"].is-in .tl-card__img{clip-path:inset(0 0 0 0)}
  html.tl-js [data-m="slow"].is-in img{transform:none}
}
/* H2 — the product page has no entrance animation: product.php's shell has already shown the photo, name and
   buy box, and replaying a fade from opacity 0 when React mounts blinked the page to black */
.pd-sz{transition:border-color 140ms cubic-bezier(.22,1,.36,1),background 140ms cubic-bezier(.22,1,.36,1),color 140ms cubic-bezier(.22,1,.36,1)!important}   /* v39.4: the chosen size answers in 140 ms */

@media (prefers-reduced-motion:reduce){
  [data-m]{opacity:1!important;transform:none!important;clip-path:none!important}
}

/* adaptive: weak device / slow network — no grain, no parallax */
html.tl-lite body::after{display:none}
html.tl-lite [data-para]{transform:none!important}

/* ======================= v39.4 — motion by page (values: Codex motion spec) ======================= */
:root{--mo-e:cubic-bezier(.22,1,.36,1);--mo-e2:cubic-bezier(.2,.8,.2,1)}
@keyframes moSD{to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}
@keyframes moSafe{to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}
@keyframes moRule{from{transform:scaleX(0)}}
@keyframes moFade{from{opacity:0}}
@keyframes moTap{from{transform:scale(.985)}}
@keyframes moBump{40%{transform:scale(1.25)}}
@keyframes moDot{from{opacity:.2;transform:scale(.4)}}
@keyframes moUnroll{from{opacity:0;clip-path:inset(0 0 100% 0)}}
@keyframes moProg{to{transform:scaleX(1)}}
@keyframes moHeroPar{to{transform:translate3d(0,18px,0)}}
@keyframes moHeroOut{to{opacity:.25;transform:translate3d(0,-14px,0)}}
@keyframes moDepth{from{transform:translate3d(0,-5px,0)}to{transform:translate3d(0,5px,0)}}

/* page-to-page (cross-document view transitions, Chrome only; elsewhere navigation is instant) */
html:active-view-transition-type(pp)::view-transition-old(root),html:active-view-transition-type(pp)::view-transition-new(root){animation-duration:180ms;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
html:active-view-transition-type(ss)::view-transition-old(root),html:active-view-transition-type(ss)::view-transition-new(root){animation-duration:160ms}
html:active-view-transition-type(back)::view-transition-old(root),html:active-view-transition-type(back)::view-transition-new(root){animation-duration:160ms}

/* graphics: the tapped card's accent hairline; title rules; the thanks mark; the 404 line */
.tl-card::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:3;background:var(--c,rgb(201,161,94));transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.tl-card.is-tap::before{transform:none}
[data-pg="policies"] main h1::after{content:"";display:block;width:36px;height:2px;margin-top:14px;background:rgb(201,161,94)}
.mo-mark{display:block;width:36px;height:2px;margin:0 auto 22px;background:rgb(201,161,94)}
.nf__line{display:block;width:64px;height:1px;background:rgb(201,161,94)}
.tl-act__n{display:inline-block}
.mo-prog{display:none}
html:has(.tl-drawer.is-on) body::after{display:none}   /* the grain never sits over an open drawer */

@media (prefers-reduced-motion:no-preference){
  /* Codex timing for the existing reveals: 420 ms (lookbook crop 560 ms) */
  html.tl-js [data-m="fade"],html.tl-js [data-m="up"],html.tl-js [data-m="card"],html.tl-js [data-m="rise"],html.tl-js [data-m="drop"],html.tl-js [data-m="mask"]{transition-duration:420ms}
  html.tl-js [data-m="card"] .tl-card__img{transition-duration:420ms}
  html.tl-js [data-m="crop"]{transition-duration:560ms}
  /* new reveal targets */
  html.tl-js :is(.pd-more h2,.pd-revs__head h2),html.tl-js .mo-seq>*{opacity:0;transform:translateY(14px);transition:opacity 420ms var(--mo-e) var(--d,0ms),transform 420ms var(--mo-e) var(--d,0ms)}
  html.tl-js :is([data-pg="help"] .hp-sec>h2,[data-pg="materials"] .mt h2,[data-pg="policies"] main section>h2,[data-pg="studio"] section[data-screen-label] h2){opacity:0;transform:translateY(10px);transition:opacity 260ms var(--mo-e),transform 260ms var(--mo-e)}
  html.tl-js :is(.pd-more h2,.pd-revs__head h2,[data-pg="help"] .hp-sec>h2,[data-pg="materials"] .mt h2,[data-pg="policies"] main section>h2,[data-pg="studio"] section[data-screen-label] h2).is-in,html.tl-js .mo-seq>.is-in{opacity:1;transform:none}
  html.tl-js .rv__st{clip-path:inset(0 100% 0 0);transition:clip-path 260ms var(--mo-e)}   /* reviews: the stars fill left to right, the cards stay still */
  html.tl-js .rv__st.is-in{clip-path:inset(0 0 0 0)}
  /* if motion.js never runs, nothing stays hidden */
  html.tl-js:not(.tl-mo) :is([data-m="card"],[data-m="clip-l"],[data-m="clip-r"],[data-m="crop"],[data-m="slow"],.mo-seq>*,[data-pg="help"] .hp-sec>h2,[data-pg="materials"] .mt h2,[data-pg="policies"] main section>h2,[data-pg="studio"] section[data-screen-label] h2){animation:moSafe 1ms linear 3s forwards}
  html.tl-js:not(.tl-mo) .rv__st{animation:moSafe 1ms linear 3s forwards}
  /* page titles draw their gold rule (260 ms) */
  html.tl-js :is(.pg-head h1,.col-head h1,[data-pg="policies"] main h1)::after{transform-origin:0 50%;animation:moRule 260ms var(--mo-e) 120ms both}
  /* home/shop -> product: the tapped card's hairline, 180 ms */
  .tl-card.is-tap::before{transition:transform 180ms var(--mo-e)}
  /* product: Add to bag settles from .985 in 180 ms when it takes the piece; the bag count bumps */
  .pd-add[data-added="true"],.pd-bar .tl-btn[data-added="true"]{animation:moTap 180ms var(--mo-e2)}
  .tl-act--bag.is-bump .tl-act__n{animation:moBump 280ms var(--mo-e)}
  /* accordions open in 220 ms (clip-path, never height) */
  details[open]>:not(summary){animation:moUnroll 220ms var(--mo-e) both}
  /* thanks: the mark draws (340 ms), then the words */
  .mo-mark{transform-origin:0 50%;animation:moRule 340ms var(--mo-e) both}
  .mo-thanks>:not(.mo-mark){animation:moFade 420ms var(--mo-e) 240ms both}
  /* track: once the order is found, its status dots fill one after another (180 ms, 70 ms apart) */
  [data-pg="track"] ol[aria-label="Order progress"] li>span:nth-child(2){animation:moDot 180ms var(--mo-e) both}
  [data-pg="track"] ol[aria-label="Order progress"] li:nth-child(2)>span:nth-child(2){animation-delay:70ms}
  [data-pg="track"] ol[aria-label="Order progress"] li:nth-child(3)>span:nth-child(2){animation-delay:140ms}
  [data-pg="track"] ol[aria-label="Order progress"] li:nth-child(4)>span:nth-child(2){animation-delay:210ms}
  [data-pg="track"] ol[aria-label="Order progress"] li:nth-child(n+5)>span:nth-child(2){animation-delay:280ms}
  /* 404: one line extends, 380 ms */
  .nf__line{transform-origin:0 50%;animation:moRule 380ms var(--mo-e) 120ms both}
}

/* sections follow the scroll itself where the browser has scroll timelines (Codex: entry 12% -> cover 32%) */
@supports (animation-timeline: view()) and (animation-range: entry 12% cover 32%){
  @media (prefers-reduced-motion:no-preference){
    html.tl-js :is([data-m="fade"],[data-m="up"],[data-m="rise"],[data-m="drop"],[data-m="mask"],[data-m="settle"],[data-m="line"],.pd-more h2,.pd-revs__head h2):not(.mo-end){transition:none;animation:moSD linear both;animation-timeline:view();animation-range:entry 12% cover 32%}
  }
}
/* ...elsewhere the observer reveals them, the section rules draw after them, and a CSS fail-safe covers a missing motion.js */
@supports not ((animation-timeline: view()) and (animation-range: entry 12% cover 32%)){
  @media (prefers-reduced-motion:no-preference){
    html.tl-js :is(.tl-sec-head h2[data-m],.pd-more h2,.pd-revs__head h2)::after{transform-origin:0 50%;transition:transform 420ms var(--mo-e) 160ms}
    html.tl-js :is(.tl-sec-head h2[data-m],.pd-more h2,.pd-revs__head h2):not(.is-in)::after{transform:scaleX(0)}
    html.tl-js:not(.tl-mo) :is([data-m="fade"],[data-m="up"],[data-m="rise"],[data-m="drop"],[data-m="mask"],[data-m="settle"],[data-m="line"],.pd-more h2,.pd-revs__head h2){animation:moSafe 1ms linear 3s forwards}
  }
}
/* continuous scroll-linked motion: CSS scroll timelines only, compositor-only, absent where unsupported */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion:no-preference){
    [data-pg="home"] .mo-prog,[data-pg="lookbook"] .mo-prog{display:block;position:fixed;left:0;right:0;top:0;height:2px;z-index:61;pointer-events:none;background:rgb(201,161,94);transform:scaleX(0);transform-origin:0 50%;animation:moProg linear both;animation-timeline:scroll(root)}
    /* owner exception: a light hero parallax on the home page, phones included (Codex values) */
    [data-pg="home"] .hero__media{animation:moHeroPar linear both;animation-timeline:scroll(root);animation-range:0px 75vh}
    [data-pg="home"] .hero__in{animation:moHeroOut linear both;animation-timeline:scroll(root);animation-range:0px 75vh}
  }
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference) and (hover:hover) and (pointer:fine){
    [data-lookbook] .lb-c{animation:moDepth linear both;animation-timeline:view();animation-range:cover 0% cover 100%}   /* desktop-only 10 px depth drift */
  }
}
/* weak phone / slow network: keep the reveals, drop the continuous motion */
html.tl-lite .mo-prog{display:none!important}
html.tl-lite[data-pg="home"] .hero__media,html.tl-lite[data-pg="home"] .hero__in,html.tl-lite [data-lookbook] .lb-c{animation:none!important}