/* Motion layer. Everything here is gated behind html.motion, which motion.js only adds when animations are allowed. */
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}

/* hero extras */
.hero-visual{position:relative;margin-left:auto;width:100%;max-width:520px}
.hero-visual .hero-img{margin:0;max-width:none}
.giant{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font-size:clamp(120px,27vw,430px);font-weight:900;font-style:italic;letter-spacing:-.07em;line-height:.8;white-space:nowrap;user-select:none;pointer-events:none;z-index:0}
.giant span{display:inline-block;color:transparent;-webkit-text-stroke:2px #f4ede026;will-change:transform}
.hero-in{position:relative;z-index:1}
.hero-shirt{position:absolute;left:-90px;bottom:90px;width:clamp(120px,12vw,170px);aspect-ratio:2/3;border-radius:16px;overflow:hidden;box-shadow:0 36px 70px #000a;z-index:3;will-change:transform}
.hero-shirt img{width:100%;height:100%;object-fit:cover}
.spin-badge{position:absolute;right:-26px;top:34px;width:112px;height:112px;z-index:4;color:#f4ede0}
.spin-badge svg{width:100%;height:100%;animation:spin 14s linear infinite}
.spin-badge b{position:absolute;inset:0;display:grid;place-items:center;font-size:26px;color:var(--amber)}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:1100px){.hero-shirt{display:none}}
@media(max-width:860px){.hero-visual{max-width:440px;margin:0 auto}.spin-badge{right:8px;top:8px;width:84px;height:84px}}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.w>span{display:inline-block}

/* marquee */
.mq{overflow:hidden;background:var(--amber);color:var(--ink);padding:16px 0;border-block:1px solid #0003}
.mq-t{display:flex;width:max-content;font-size:clamp(26px,3.6vw,48px);font-weight:800;font-style:italic;letter-spacing:-.03em;white-space:nowrap;will-change:transform}
.mq-t span{padding-right:.6em}.mq-t span::after{content:"✦";margin-left:.6em;font-style:normal}

/* scroll story */
.story{height:400vh;background:var(--navy);color:var(--cream)}
.story-in{position:sticky;top:72px;height:calc(100svh - 72px);display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:var(--pad);padding:30px var(--pad);max-width:var(--max);margin-inline:auto}
.frame{position:relative;height:min(74svh,700px);aspect-ratio:4/5;margin-inline:auto;border-radius:24px;overflow:hidden;box-shadow:0 50px 100px #0007}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .8s;will-change:transform}
.frame img.on{opacity:1}
.frame .hud{position:absolute;left:14px;top:14px;color:#fff;mix-blend-mode:difference}
.steps{position:relative;height:340px}
.step{position:absolute;inset:0;opacity:0;filter:blur(14px);transform:translateY(30px);transition:opacity .7s,filter .7s,transform .9s cubic-bezier(.2,.9,.2,1.08);pointer-events:none}
.step.on{opacity:1;filter:none;transform:none}
.step .mono{color:#ffffffaa}
.step h3{margin:18px 0;font-size:clamp(34px,4.6vw,66px);letter-spacing:-.045em;line-height:.96;font-weight:800}
.step p{max-width:40ch;color:#f4ede0b3;line-height:1.55}
.prog{display:flex;gap:8px;margin-top:30px}
.prog i{height:3px;flex:1;background:#f4ede033;border-radius:9px;overflow:hidden}
.prog i b{display:block;height:100%;background:var(--amber);transform-origin:0 50%;transform:scaleX(0)}
@media(max-width:820px){.story-in{grid-template-columns:1fr;align-content:center;gap:20px}.frame{height:44svh}.steps{height:290px}}

/* lookbook */
.look{height:420vh;background:var(--ink);color:var(--cream)}
.look-in{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:34px}
.look-h{padding-inline:var(--pad);font-size:clamp(40px,7vw,104px);letter-spacing:-.05em;line-height:.92}
.look-h em{font-style:normal;color:transparent;-webkit-text-stroke:2px #fff}
.track{display:flex;gap:22px;padding-inline:var(--pad);width:max-content;will-change:transform}
.lk{position:relative;flex:none;width:clamp(240px,26vw,400px);aspect-ratio:3/4;border-radius:22px;overflow:hidden;background-repeat:no-repeat;background-color:#222}
.lk:nth-child(even){margin-top:50px}.lk:nth-child(odd){margin-bottom:50px}
.lk span{position:absolute;left:16px;bottom:16px;padding:8px 14px;border-radius:99px;background:#0b1020aa;backdrop-filter:blur(8px);color:#fff}
.lk.logo{display:grid;place-items:center;background:#000}
.lk.logo img{width:70%;height:auto;aspect-ratio:1000/689}
@media(max-width:700px){.lk:nth-child(even){margin-top:30px}.lk:nth-child(odd){margin-bottom:30px}}

/* footer wordmark */
.wordmark{font-size:clamp(90px,24vw,360px);font-weight:900;font-style:italic;letter-spacing:-.08em;line-height:.8;margin:30px -1vw 10px;white-space:nowrap;color:transparent;-webkit-text-stroke:2px #ffffff2e;user-select:none;overflow:hidden}

/* liquid indicator */
.liq{position:absolute;left:0;top:0;width:0;height:0;border-radius:99px;pointer-events:none;opacity:0}
.nav,.chips{position:relative}
.nav a,.chip{position:relative;z-index:1}
html.motion .nav .liq{background:#ffffff24}
html.motion .nav a:hover,html.motion .nav a.on{background:none}
html.motion .chips .liq{background:var(--ink);z-index:0}
html.motion .chip.on{background:transparent;border-color:transparent;color:#fff}

/* reveal on scroll */
html.motion [data-r]{opacity:0;transform:translateY(46px);filter:blur(10px);transition:opacity .9s cubic-bezier(.2,.9,.2,1.08),transform 1.1s cubic-bezier(.2,.9,.2,1.08),filter .9s cubic-bezier(.2,.9,.2,1.08);transition-delay:var(--d,0s)}
html.motion [data-r].in{opacity:1;transform:none;filter:none}
html.motion .card[data-r].in{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,opacity .4s}

/* preloader */
.pre{position:fixed;inset:0;z-index:900;display:grid;place-items:center;pointer-events:all}
.pre i{position:absolute;left:0;right:0;background:var(--navy);height:50.2%}
.pre i:first-child{top:0}.pre i:last-child{bottom:0}
.pre-in{position:relative;text-align:center;display:grid;gap:22px;justify-items:center}
.pre-in img{width:min(300px,62vw);height:auto}
.pre-n{font:700 14px var(--mono);letter-spacing:.2em;color:#fff}
.pre-bar{width:min(260px,50vw);height:2px;background:#ffffff22}
.pre-bar b{display:block;height:100%;width:100%;background:var(--amber);transform-origin:0 50%;transform:scaleX(0)}

/* custom cursor (mouse only) */
.cur,.cur-ring{position:fixed;left:0;top:0;z-index:999;pointer-events:none;mix-blend-mode:difference;transition:opacity .2s}
.cur{width:8px;height:8px;margin:-4px;border-radius:50%;background:#fff}
.cur-ring{width:44px;height:44px;margin:-22px;border-radius:50%;border:1px solid #fff;display:grid;place-items:center;font:500 10px var(--mono);color:#fff;letter-spacing:.1em}
.cur.off,.cur-ring.off{opacity:0}
@media(pointer:fine){html.cur-on,html.cur-on body,html.cur-on a,html.cur-on button,html.cur-on label,html.cur-on select,html.cur-on summary{cursor:none}
  html.cur-on dialog,html.cur-on dialog *{cursor:auto}html.cur-on dialog button,html.cur-on dialog a{cursor:pointer}
  html.cur-on input,html.cur-on textarea{cursor:text}}
@media(pointer:coarse){.cur,.cur-ring{display:none}}
body.lock{overflow:hidden}
html.motion .hero-img>img{position:absolute;inset:-6%;width:112%;max-width:none;height:112%}
/* reduced motion: show story + lookbook as plain content */
html.reduce .story,html.reduce .look{height:auto}
html.reduce .story-in{position:static;height:auto;padding-block:60px}
html.reduce .steps{height:auto}html.reduce .step{position:static;opacity:1;filter:none;transform:none;margin-bottom:28px}html.reduce .prog{display:none}
html.reduce .look-in{position:static;height:auto;padding-block:60px}html.reduce .track{width:auto;overflow-x:auto;padding-bottom:20px}
html.reduce .giant{display:none}