/* ARISA R08 — language switch + material-led motion. Loaded last; R07 files stay intact.
   Rule of thumb: every element's *base* style is its final state, animations only describe the way in,
   so reduced-motion / motion-off (animation:none) always shows complete content. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- Language switch ---------- */
.lang-switch{display:inline-flex;align-items:center;gap:2px;padding:2px;border:1px solid var(--line);border-radius:999px;background:#fcfaf6b3;flex:none}
.lang-switch button{min-width:36px;height:30px;padding:0 9px;border-radius:999px;font:500 11px/1 Prompt,sans-serif;letter-spacing:.08em;color:var(--muted);transition:background-color .25s ease,color .25s ease}
.lang-switch button[aria-pressed=true]{background:var(--wine);color:var(--paper)}
.lang-switch button:not([aria-pressed=true]):hover{color:var(--wine)}
.lang-switch button:focus-visible{outline-offset:2px}
dialog .lang-switch{margin-top:16px}
dialog .lang-switch button{min-width:44px;height:36px}
@media(max-width:1099px) and (min-width:701px){.nav{gap:18px}.navlinks{gap:16px}.navtools{gap:6px}}
@media(max-width:700px){
 .header .nav{gap:0}
 .menu-toggle{margin-right:2px}
 .nav>.lang-switch{gap:0}
 .nav>.lang-switch button{min-width:26px;height:32px;padding:0 4px;font-size:10px;letter-spacing:.04em}
}
@media(max-width:360px){.header .wordmark{font-size:26px}}

/* ---------- Woven wordmark: warp set → weft shuttles with over/under → solid serif ---------- */
.woven-wordmark .lf-cloth{opacity:0;animation:lf-cloth-out .5s 1.8s ease both}
.lf-warp,.lf-weft{fill:none;stroke-linecap:butt;stroke-dasharray:1;stroke-dashoffset:0}
.lf-warp{stroke:#3d302a;stroke-width:1.55;animation:lf-draw .5s var(--d,0ms) cubic-bezier(.33,0,.2,1) both}
.lf-weft{stroke:var(--wine);stroke-width:2.1;animation:lf-draw 1.4s .4s linear both}
.lf-knot{fill:none;stroke:#3d302a;stroke-width:1.55}
/* Each row's over-crossings appear exactly as the shuttle passes (same duration/order as the weft). */
.lf-reveal{transform-box:fill-box;animation:lf-reveal calc(1.4s / var(--rows)) calc(.4s + var(--row) * 1.4s / var(--rows)) linear both}
@keyframes lf-reveal{from{transform:scaleX(0)}}
.woven-wordmark .logo-finish{fill:var(--ink);opacity:1;animation:lf-finish .55s 1.6s ease both}
@keyframes lf-draw{from{stroke-dashoffset:1}}
@keyframes lf-cloth-out{from{opacity:1}}
@keyframes lf-finish{from{opacity:0}}
.logo-settled .woven-wordmark *{animation:none!important}
.footer .wordmark{position:relative}

/* ---------- Hero: one scene, depth-consistent dolly (front layer travels more), no spring ---------- */
.hero-stage .hero-backdrop{animation:r8-settle 2.6s cubic-bezier(.16,1,.3,1) both}
.hero-stage .hero-woman{animation:r8-woman 1.6s .05s cubic-bezier(.16,1,.3,1) both}
.hero-stage .hero-man{animation:r8-man 1.8s .2s cubic-bezier(.16,1,.3,1) both}
@keyframes r8-settle{from{transform:scale(1.045)}}
@keyframes r8-woman{from{opacity:0;transform:translate3d(-7%,0,0)}40%{opacity:1}to{opacity:1;transform:none}}
@keyframes r8-man{from{opacity:0;transform:translate3d(4.5%,0,0)}45%{opacity:1}to{opacity:1;transform:none}}
.hero-copy .eyebrow{animation:title-rise .6s .2s cubic-bezier(.16,1,.3,1) both}
.hero-title-lead{animation:title-rise .8s .32s cubic-bezier(.16,1,.3,1) both}
.hero-title-line{animation:title-rise .8s .46s cubic-bezier(.16,1,.3,1) both}
.hero-title-emphasis:after{animation:title-thread .75s 1s cubic-bezier(.65,0,.35,1) both}
.hero-copy .hero-title+p{animation:title-rise .7s .6s cubic-bezier(.16,1,.3,1) both}
.hero-copy .button{animation:title-rise .7s .72s cubic-bezier(.16,1,.3,1) both}
@media(max-width:700px){
 @keyframes r8-woman{from{opacity:0;transform:translate3d(-4%,0,0)}40%{opacity:1}to{opacity:1;transform:none}}
 @keyframes r8-man{from{opacity:0;transform:translate3d(3%,0,0)}45%{opacity:1}to{opacity:1;transform:none}}
}
/* Language swaps and in-page re-renders never replay entrances. */
#app.is-swapping .hero-stage *,#app.is-swapping .hero-copy,#app.is-swapping .hero-copy *,#app.is-swapping .hero-title-emphasis:after{animation:none!important}
#app.is-swapping .action-copy>span{transition:none}

/* ---------- Shared thread drawing ---------- */
.m-thread{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;animation:m-draw 1.5s var(--d,0ms) cubic-bezier(.3,.1,.2,1) both;animation-play-state:paused}
.m-reveal{transform-box:fill-box;transform-origin:left center;animation:lf-reveal 1.5s var(--d,0ms) cubic-bezier(.3,.1,.2,1) both;animation-play-state:paused}
.is-woven .m-thread,.is-woven .m-reveal{animation-play-state:running}
@keyframes m-draw{from{stroke-dashoffset:1}}

/* Story: yarns slip out of the photo's lower edge into the margin, then rest as quiet texture. */
.editorial>.motion-media .motion-story{position:absolute;left:100%;top:76%;width:92px;height:106px;overflow:visible;pointer-events:none;z-index:1;opacity:.6}
.is-woven .motion-story{animation:m-rest .9s 1.7s ease both}
@keyframes m-rest{from{opacity:.95}}
#story .code-weave{display:none}

/* Woven collection: a two-ply hyacinth cord beside the eyebrow (handles of the bags). */
.motion-cord{display:inline-block;width:84px;height:9px;margin-left:14px;vertical-align:middle;overflow:visible;pointer-events:none}
.motion-cord .ply-a{stroke:#9d7445;stroke-width:1.9}
.motion-cord .ply-b{stroke:#cfac7b;stroke-width:1.9}
.motion-cord .m-thread,.motion-cord .m-reveal{animation-duration:1.2s}

/* Texture edit: fine twill selvedge, stitch by stitch (garment fabric, thinner and denser). */
.motion-selvedge{display:inline-block;width:100px;height:7px;margin-left:14px;vertical-align:middle;overflow:visible;pointer-events:none}
.motion-selvedge .sel-base{stroke:#c9b49a;stroke-width:.6}
.motion-selvedge .sel-ribs{stroke:var(--wine);stroke-width:.75;opacity:.75}
.motion-selvedge .m-reveal{animation-duration:1.6s;animation-timing-function:linear}
#details>.code-weave,#woven .section-heading>.code-weave,.footer-brand>.code-weave{display:none}

/* Footer: the loom closes with one weft pass, then stays still. */
.footer{position:relative}
.motion-loom{position:absolute;left:0;top:16px;width:100%;height:18px;pointer-events:none;opacity:.5}
.motion-loom .loom-warp{stroke:#7d6a58;stroke-width:1}
.motion-loom .m-reveal{animation-duration:1.8s;animation-timing-function:cubic-bezier(.45,0,.55,1)}
.motion-loom .loom-weft{stroke:#dcc5a4;stroke-width:1.2;animation-duration:1.8s;animation-timing-function:cubic-bezier(.45,0,.55,1)}

/* Category frames: a hairline traces the inside edge on hover/focus — never across the photo. */
.edge-thread{position:absolute;inset:14px;z-index:2;pointer-events:none;color:#fcfaf6c7}
.category:first-child .edge-thread{color:#741b2870}
.edge-thread:before,.edge-thread:after{content:'';position:absolute;inset:0;transition:background-size .75s cubic-bezier(.65,0,.35,1)}
.edge-thread:before{background:linear-gradient(currentColor,currentColor) left top/0 1px no-repeat,linear-gradient(currentColor,currentColor) right top/1px 0 no-repeat}
.edge-thread:after{background:linear-gradient(currentColor,currentColor) right bottom/0 1px no-repeat,linear-gradient(currentColor,currentColor) left bottom/1px 0 no-repeat;transition-delay:.1s}
.category:focus-visible .edge-thread:before,.category:focus-visible .edge-thread:after{background-size:100% 1px,1px 100%}
@media(hover:hover) and (pointer:fine){.category:hover .edge-thread:before,.category:hover .edge-thread:after{background-size:100% 1px,1px 100%}}

/* ---------- Quieter section entrances, short state feedback ---------- */
.scroll-reveal{transform:translateY(14px)}
details[open]>p{animation:r8-faq .32s ease both}
@keyframes r8-faq{from{opacity:0;transform:translateY(-4px)}}
.thread-rail button{transition:background-color .3s ease,color .3s ease,box-shadow .3s ease}
.mobile-dock a,.mobile-dock button{transition:color .2s ease,background-color .2s ease}

/* ---------- Mobile density ---------- */
@media(max-width:700px){
 .editorial>.motion-media .motion-story{display:none}
 .motion-cord{width:58px;height:7px;margin-left:10px}
 .motion-selvedge{width:64px;height:6px;margin-left:10px}
 .motion-loom{top:12px;height:14px}
}

/* ---------- Reduced motion / motion-off: final states, nothing hidden ---------- */
@media(prefers-reduced-motion:reduce){
 .woven-wordmark *,.m-thread,.m-reveal,.motion-story,.hero-stage *,.hero-copy *,details[open]>p{animation:none!important}
 .edge-thread:before,.edge-thread:after{transition:none}
}
.motion-off .woven-wordmark *,.motion-off .m-thread,.motion-off .m-reveal,.motion-off .motion-story{animation:none!important}