/* Studio homepage. Loader + hero (Task 8); sections appended in Task 9. */
.loader { display: none; }
.intro .loader { display: block; position: fixed; inset: 0; z-index: 100; color: var(--chalk); animation: loader-hold 2.3s linear forwards; }
.loader__panel { position: absolute; left: 0; right: 0; height: 50.5%; background: var(--carbon); }
.loader__panel--top { top: 0; animation: part-up .85s var(--ease-io) 1.45s forwards; }
.loader__panel--bottom { bottom: 0; animation: part-down .85s var(--ease-io) 1.45s forwards; }
.loader__center { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 20px; animation: fade-out .3s ease 1.3s forwards; }
.loader__stamp { width: 84px; height: 84px; color: var(--cobalt); animation: stamp-in 1.1s var(--spring) both, spin 6s linear 1.1s infinite; }
.loader__count { margin: 0; font: 500 .875rem/1 var(--mono); letter-spacing: .2em; }
@keyframes loader-hold { to { visibility: hidden; } }
@keyframes part-up { to { transform: translateY(-100%); } }
@keyframes part-down { to { transform: translateY(100%); } }
@keyframes fade-out { to { opacity: 0; } }
@keyframes stamp-in { from { opacity: 0; transform: scale(2.4) rotate(-220deg); } }
@keyframes spin { to { transform: rotate(360deg); } }

.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: space-between; gap: clamp(20px, 3vw, 40px); min-height: calc(100svh - var(--header-h)); padding: clamp(12px, 2vw, 24px) var(--gutter) clamp(28px, 4vw, 56px); overflow-x: clip; }
.hero__kicker { margin: 0; }
.hero__title { margin: 0; text-transform: uppercase; line-height: .8; }
.hero__line { position: relative; display: block; width: max-content; font-size: 13vw; font-variation-settings: 'wdth' 100, 'wght' 800; }
/* background-image per [data-shot] is set in index.html's <style>, so its URLs resolve against the page. */
.hero__layer { display: inline-block; white-space: nowrap; color: transparent; background-color: var(--carbon); background-position: 50% 50%; background-size: cover; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; }
.hero__layer + .hero__layer { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 1.2s var(--ease-out); }
.hero__layer.is-on { opacity: 1; }
.hero__row { display: flex; flex-wrap: wrap; gap: 20px 40px; align-items: end; justify-content: space-between; }
.hero__lede { max-width: 38ch; margin: 0; font-size: var(--fs-lg); font-weight: 500; line-height: 1.35; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 10px; }
.potw { position: absolute; right: var(--gutter); top: 42%; display: grid; grid-template-columns: 72px 1fr; grid-template-rows: auto auto 1fr; gap: 2px 12px; width: 240px; padding: 10px; border-radius: 18px; background: rgb(244 244 241 / .86); backdrop-filter: blur(14px); box-shadow: 0 24px 60px -24px rgb(15 15 16 / .45); color: var(--carbon); text-decoration: none; }
.potw img { grid-row: 1 / -1; width: 72px; height: 90px; object-fit: cover; border-radius: 10px; }
.potw__name { font-weight: 800; font-stretch: 85%; text-transform: uppercase; line-height: 1.1; }
@media (max-width: 899px) {
  .hero { min-height: 0; align-content: start; gap: 28px; padding-top: 20px; } /* phones: no empty bands around the type */
  .potw { position: relative; right: auto; top: auto; width: 100%; max-width: 320px; }
}

.js[data-motion="on"] .hero__line { animation: line-up 1.1s var(--ease-out) both; animation-delay: calc(.15s + var(--n) * 120ms); }
.js[data-motion="on"] .hero__layer { animation: pan 16s ease-in-out infinite alternate; }
.js[data-motion="on"] .hero__kicker, .js[data-motion="on"] .hero__row { animation: fade-up 1s var(--ease-out) .55s both; }
.js[data-motion="on"] .potw { animation: pop-in .9s var(--spring) .8s both, float 5s ease-in-out 1.8s infinite alternate; }
html.intro:not(.intro-reveal) .hero *, html.intro:not(.intro-reveal) .hero *::before { animation-play-state: paused !important; }
@keyframes line-up { from { opacity: 0; transform: translateY(35%); } }
@keyframes pan { from { background-position: 25% 40%; } to { background-position: 75% 60%; } }
@keyframes fade-up { from { opacity: 0; transform: translateY(24px); } }
@keyframes pop-in { from { opacity: 0; transform: scale(.7) rotate(-6deg); } }
@keyframes float { to { transform: translateY(-10px) rotate(1.5deg); } }

/* ---- ticker ---- */
.ticker { overflow: hidden; padding: 16px 0; background: var(--cobalt); color: #fff; }
.ticker__track { display: flex; align-items: center; gap: 28px; width: max-content; font: 800 clamp(1.4rem, 1rem + 2vw, 2.6rem)/1 var(--sans); font-stretch: 125%; text-transform: uppercase; white-space: nowrap; will-change: transform; }
.ticker__track svg { width: .6em; height: .6em; flex: none; }

/* ---- bento categories ---- */
.bento__grid { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, clamp(240px, 30vw, 440px)); grid-template-areas: "women men acc bags" "women shoes gifts gifts"; }
.tile--women { grid-area: women; } .tile--men { grid-area: men; } .tile--acc { grid-area: acc; }
.tile--bags { grid-area: bags; } .tile--shoes { grid-area: shoes; } .tile--gifts { grid-area: gifts; }
.tile { position: relative; overflow: hidden; isolation: isolate; border-radius: 18px; color: #fff; text-decoration: none; transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease-out); }
.tile img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.tile:hover img { transform: scale(1.06); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(15 15 16 / .55), transparent 55%); }
.tile__glow { position: absolute; inset: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / .3), transparent 45%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.tile:hover .tile__glow { opacity: 1; }
.tile__label { position: absolute; left: 18px; right: 18px; bottom: 16px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 8px 12px; }
/* Sized for the narrow quarter-width tiles: "ACCESSORIES" must fit at 1440px. */
.tile__name { font: 800 clamp(1.3rem, .7rem + 1.5vw, 2.4rem)/.9 var(--sans); font-stretch: 110%; text-transform: uppercase; }
.tile__count { flex: none; padding: 6px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .7); }
@media (max-width: 899px) {
  .bento__grid { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 56vw; grid-template-areas: "women women" "men acc" "bags shoes" "gifts gifts"; }
  .tile__label { left: 14px; right: 14px; bottom: 12px; flex-wrap: wrap; }
  .tile__name { font-size: clamp(1.1rem, .6rem + 2.6vw, 1.6rem); font-stretch: 100%; }
  .trail__title { font-size: clamp(2.6rem, 12vw, 4rem); }
  .trail__title em { font-stretch: 125%; }
}

/* ---- lookbook: image trail (fine pointers) / tap-to-shuffle stack (everything else) ---- */
.trail { position: relative; display: grid; place-items: center; height: 100svh; min-height: 620px; overflow: hidden; background: var(--carbon); color: var(--chalk); cursor: crosshair; }
.trail__field { position: absolute; inset: 0; }
.trail__pic { position: absolute; left: 0; top: 0; width: clamp(150px, 15vw, 250px); border-radius: 10px; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.trail__copy { position: relative; z-index: 10000; padding: 0 var(--gutter); text-align: center; pointer-events: none; }
.trail__copy a, .trail__copy button { pointer-events: auto; }
.trail__title { margin: 16px 0 28px; font: 900 clamp(3rem, 1rem + 9vw, 10rem)/.85 var(--sans); font-stretch: 50%; text-transform: uppercase; }
.trail__title em { font-style: normal; font-stretch: 150%; color: #9AA2FF; }
.trail__hint { display: block; }
.trail__hint--touch, .trail__next { display: none; }
.trail__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.trail.is-stack { grid-template-rows: 1fr auto; place-items: stretch; gap: 24px; height: auto; min-height: 0; padding: 40px var(--gutter); cursor: auto; }
.trail.is-stack .trail__field { position: relative; inset: auto; height: min(70vw, 420px); }
.trail.is-stack .trail__pic { left: 50%; top: 50%; width: min(56vw, 280px); opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) rotate(calc((var(--k) - 2) * 4deg)) translateY(calc(var(--k) * -5px)); z-index: calc(20 - var(--k)); transition: transform .6s var(--ease-out), opacity .4s; }
.trail.is-stack .trail__hint--fine { display: none; }
.trail.is-stack .trail__hint--touch { display: block; }
.trail.is-stack .trail__next { display: inline-flex; }

/* ---- colour-flip feature with callouts ---- */
.feature { position: relative; }
.feature__sticky { display: grid; grid-template-columns: 1fr minmax(260px, 34vw) 1fr; grid-template-rows: auto 1fr auto; align-items: center; gap: 24px; min-height: 100svh; padding: calc(var(--header-h) + 16px) var(--gutter) 40px; }
.feature__head { grid-column: 1 / -1; text-align: center; }
.feature__head .mono { margin: 0 0 12px; }
.feature__product { grid-column: 2; grid-row: 2; margin: 0; transition: transform .2s linear; }
.feature__product img { width: auto; max-height: 60svh; aspect-ratio: 4 / 5; margin: auto; object-fit: cover; border-radius: 20px; box-shadow: 0 40px 80px -40px rgb(0 0 0 / .5); }
.feature__notes { display: contents; }
.callout { max-width: 240px; list-style: none; font: 700 var(--fs-lg)/1.2 var(--sans); font-stretch: 90%; text-transform: uppercase; }
.callout .mono { display: block; margin-bottom: 8px; }
.callout--1 { grid-column: 1; grid-row: 2; align-self: start; justify-self: end; text-align: right; }
.callout--2 { grid-column: 3; grid-row: 2; align-self: start; }
.callout--3 { grid-column: 1; grid-row: 2; align-self: end; justify-self: end; text-align: right; }
.callout--4 { grid-column: 3; grid-row: 2; align-self: end; }
.feature__cta { grid-column: 1 / -1; grid-row: 3; justify-self: center; }
.js[data-motion="on"] .callout { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--ease-out), transform .8s var(--ease-out); }
.js[data-motion="on"] .callout.is-on { opacity: 1; transform: none; }
@media (min-width: 900px) {
  .js[data-motion="on"] .feature { height: 260vh; }
  .feature__sticky { position: sticky; top: 0; }
}
@media (max-width: 899px) {
  .feature__sticky { grid-template-columns: 1fr 1fr; grid-template-rows: auto; min-height: 0; padding-top: 64px; padding-bottom: 64px; }
  .feature__product { grid-column: 1 / -1; grid-row: 2; }
  .feature__product img { max-height: 70svh; }
  .callout, .callout--1, .callout--2, .callout--3, .callout--4 { grid-column: auto; grid-row: auto; align-self: start; justify-self: start; text-align: left; font-size: var(--fs-md); }
  .feature__cta { grid-row: auto; }
}

/* ---- promise numbers ---- */
.promise__list { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.promise__list li { padding: 24px 20px 0 0; border-right: 1px solid var(--line); }
.promise__list li + li { padding-left: 20px; }
.promise__list li:last-child { border-right: 0; }
.promise__num { margin: 0 0 10px; font: 900 clamp(3.6rem, 2rem + 6vw, 8.5rem)/.9 var(--sans); font-stretch: 55%; font-variant-numeric: tabular-nums; }
.promise__list .mono { margin: 0; }
@media (max-width: 899px) {
  .promise__list { grid-template-columns: 1fr 1fr; row-gap: 32px; }
  .promise__list li:nth-child(2n) { border-right: 0; }
  .promise__list li:nth-child(odd) { padding-left: 0; }
}