/* WearSlabs preview: home page */

/* ---------- hero ---------- */
.hero { height: 340vh; margin-top: -92px; }
@media (min-width: 900px) { .hero { height: 400vh; } }
/* before home.js runs: frame 0 of the story (title + intro, hoodie waiting off to the right, no slab yet),
   never a frozen end frame. Only when JS is on (hero-boot.js adds .ws-js), so a page without JS still shows the hoodie. */
.ws-js .hero--wait .h-slab { opacity: 0; }
.ws-js .hero--wait .stage__inner { transform: translateX(50vw) rotateY(-40deg) rotate(6deg) scale(.9); }
@media (min-width: 700px) { .ws-js .hero--wait .stage__inner { transform: translateX(62vw) rotateY(-40deg) rotate(6deg) scale(.9); } }
/* safety net when the animation never starts: the finished scene, background and all, in one screen */
.hero--static { height: 100vh; height: 100svh; }
.hero--static .hero__world { clip-path: circle(150% at 50% 42%); }
.hero--static .hero__world img { transform: none; }
.hero--static .h-print { clip-path: circle(150% at 49% 39.9%); }
.hero--static :is(.ht, .hs, .hero__intro, .h-pull, .h-gap, .h-vinyl, .h-plain, .hero__hint) { opacity: 0; }
.hero--static .hero__cta { opacity: 1; transform: none; pointer-events: auto; }
.hero__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; place-items: center; background: radial-gradient(ellipse at 50% 38%, #17171f 0%, var(--ink) 62%); }
.hero__world { position: absolute; inset: 0; --cx: 50%; --cy: 42%; clip-path: circle(0% at var(--cx) var(--cy)); }
.hero__world img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.25); }
.hero__world::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(7,7,10,.35), rgba(7,7,10,0) 30%, rgba(7,7,10,.1) 60%, rgba(7,7,10,.9)); }
.hero__dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.hero__title { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; pointer-events: none; font-size: clamp(60px, min(23vw, 22svh), 260px); line-height: .8; text-align: center; z-index: 1; }
.ht { display: block; color: var(--bone); will-change: transform, opacity; }
.ht--2 { color: transparent; -webkit-text-stroke: 2px rgba(243,241,234,.7); }

.hero__stage { position: relative; z-index: 2; width: min(92vw, 64svh); aspect-ratio: 1223 / 1286; perspective: 1400px; margin-top: -4svh; }
.stage__inner { position: absolute; inset: 0; will-change: transform; }
.h-plain, .h-print { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 40px 60px rgba(0,0,0,.6)); }
.h-print { --cx: 49%; --cy: 39.9%; clip-path: circle(0% at var(--cx) var(--cy)); }
/* pocket window in hoodie coordinates (1223 x 1286 source) */
.h-slot { position: absolute; left: 42.6%; top: 29.7%; width: 12.76%; height: 20.37%; }
/* side zipper of the pocket (track centre x 699, y 384-640 in the 1223 x 1286 source) */
.h-gap { position: absolute; left: 56.85%; top: 29.9%; width: .6%; height: 0; border-radius: 2px; background: linear-gradient(90deg, #9a97a6 0, #2b2a31 22%, #020203 40%, #020203 60%, #2b2a31 78%, #9a97a6 100%); box-shadow: 0 0 8px rgba(0,0,0,.9); }
.h-pull { position: absolute; left: 55.93%; top: 29.86%; width: 2.62%; height: 6.22%; filter: brightness(2.6) contrast(1.15) drop-shadow(0 1px 2px rgba(0,0,0,.8)); }
.h-vinyl { position: absolute; left: 42.6%; top: 29.7%; width: 12.76%; height: 20.37%; pointer-events: none; border-radius: 3px; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.14) 44%, transparent 58%); }
.h-slab { position: absolute; inset: 0; will-change: transform; border-radius: 6px; box-shadow: 0 18px 40px rgba(0,0,0,.55); }
.h-flash { position: absolute; inset: -40%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.95), rgba(160,190,255,.45) 35%, transparent 65%); opacity: 0; transform: scale(.2); pointer-events: none; }

.hero__steps { position: absolute; left: 0; right: 0; top: calc(60px + 3svh); display: flex; justify-content: center; z-index: 3; }
.hs { position: absolute; opacity: 0; display: inline-flex; gap: 10px; align-items: center; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: rgba(7,7,10,.5); backdrop-filter: blur(8px); white-space: nowrap; }
.hs i { font-style: normal; color: var(--label-red); }

.hero__cta { position: absolute; left: 0; right: 0; bottom: max(28px, 5svh); z-index: 4; padding: 0 var(--gutter); text-align: center; opacity: 0; transform: translateY(30px); pointer-events: none; }
.hero__cta.on { pointer-events: auto; }
.hero__sub { color: var(--bone); font-size: 15px; margin-bottom: 16px; text-shadow: 0 2px 20px rgba(0,0,0,.8); }
.hero__btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.hero__btns .btn { flex: 1 1 160px; max-width: 240px; }
.hero__btns .btn--ghost { background: rgba(7,7,10,.4); backdrop-filter: blur(8px); }

.hero__intro { position: absolute; left: 0; right: 0; bottom: 78px; z-index: 4; padding: 0 var(--gutter); text-align: center; }
.hero__intro p { color: var(--muted); font-size: 15px; margin-bottom: 14px; text-shadow: 0 2px 16px rgba(0,0,0,.9); }
.hero__intro b { color: var(--bone); }
.btn--sm { height: 44px; padding: 0 20px; font-size: 14px; }
.hero__hint { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--muted); z-index: 3; }
.hero__hint span { width: 1px; height: 22px; background: linear-gradient(var(--bone), transparent); animation: hint 1.6s ease-in-out infinite; transform-origin: top; }
@keyframes hint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

@media (min-width: 900px) {
  .hero__stage { width: min(46vw, 70svh); }
  .hero__sub { font-size: 17px; }
}

/* ---------- rarity marquee ---------- */
.rarity { overflow: hidden; border-block: 1px solid var(--line); padding: 18px 0; background: var(--ink); position: relative; z-index: 2; }
.rarity__track { display: flex; gap: 28px; align-items: center; white-space: nowrap; font-size: clamp(36px, 9vw, 80px); animation: marquee 30s linear infinite; width: max-content; }
.rarity__track i { font-style: normal; font-size: .45em; color: var(--label-red); }

/* ---------- vault ---------- */
.vault { padding: 96px 0 64px; }
.vault__head { display: grid; gap: 8px; }
@media (min-width: 900px) { .vault__head { grid-template-columns: 1.3fr 1fr; align-items: end; } }
.vault__filters { display: flex; gap: 8px; overflow-x: auto; margin: 28px calc(var(--gutter) * -1) 0; padding: 0 var(--gutter) 4px; scrollbar-width: none; }
.vault__filters::-webkit-scrollbar { display: none; }
.chip { flex: none; height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); transition: all .25s; }
.chip.on, .chip:hover { color: var(--ink); background: var(--bone); border-color: var(--bone); }

.vault__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 22px; }
@media (min-width: 700px) { .vault__grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1100px) { .vault__grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }

.case { --a: #8fb4ff; --d: #101018; position: relative; display: block; border-radius: var(--radius); overflow: hidden; background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--a) 26%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--d) 70%, #000), #0b0b10); border: 1px solid var(--line); aspect-ratio: 3 / 4.6; isolation: isolate; transition: transform .4s cubic-bezier(.2,.8,.2,1), border-color .3s; }
.case:hover { border-color: rgba(243,241,234,.3); }
.case__hoodie { position: absolute; inset: 6% 2% 22%; width: 96%; height: 72%; object-fit: contain; opacity: 0; transform: scale(.9) translateY(10px); transition: opacity .5s, transform .6s cubic-bezier(.2,.8,.2,1); z-index: 0; }
.case__slab { position: absolute; left: 50%; top: 9%; width: 52%; aspect-ratio: 520 / 880; translate: -50% 0; transition: opacity .4s, translate .6s cubic-bezier(.2,.8,.2,1), scale .6s; z-index: 1; filter: drop-shadow(0 18px 24px rgba(0,0,0,.55)); }
.case__slab .holo__img { border-radius: 5px; }
@media (hover: hover) {
  .case:hover .case__hoodie { opacity: 1; transform: none; }
  .case:hover .case__slab { opacity: 0; translate: -50% -14px; scale: .9; }
}
/* phones: no hover, so show the hoodie with the slab as a small inset */
@media (hover: none) {
  .case__hoodie { opacity: 1; transform: none; inset: 4% 0 20%; width: 100%; }
  .case__slab { left: auto; right: 8px; top: 8px; width: 24%; translate: none; }
}
.case__meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 12px 14px; z-index: 2; background: linear-gradient(to top, rgba(7,7,10,.92), transparent); }
.case__drop { color: var(--muted); font-size: 10px; }
.case__name { font: 700 14px/1.2 var(--body); margin-top: 3px; }
.case__price { color: var(--muted); font-size: 13px; margin-top: 2px; }
.case__tag { position: absolute; top: 10px; left: 10px; z-index: 3; font-size: 9px; padding: 4px 7px; border-radius: 4px; background: var(--label-red); color: #fff; }
@media (min-width: 700px) { .case__name { font-size: 16px; } .case__meta { padding: 16px; } }
.case.hide { display: none; }

/* ---------- how ---------- */
.how { padding: 80px 0; }
.how__grid { display: grid; gap: 16px; margin-top: 32px; }
@media (min-width: 900px) { .how__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } }
.step { position: relative; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; background: var(--ink-2); overflow: hidden; }
.step__media { aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: radial-gradient(circle at 50% 30%, #1d1d29, #0b0b10); display: grid; place-items: center; }
.step__media img { height: 108%; width: auto; object-fit: contain; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.step__media--pocket img { height: 100%; width: 100%; object-fit: cover; }
.step:hover .step__media img { transform: scale(1.06); }
.step__n { position: absolute; top: 12px; right: 16px; font-size: 64px; }
.step h3 { font: 700 22px/1.2 var(--body); margin-top: 18px; }
.step p { color: var(--muted); margin-top: 6px; }

/* ---------- pricing ---------- */
.pricing { padding: 80px 0; }
.tiers { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 32px calc(var(--gutter) * -1) 0; padding: 14px var(--gutter) 10px; scrollbar-width: none; }
.tiers::-webkit-scrollbar { display: none; }
.tier { flex: 0 0 78%; scroll-snap-align: center; position: relative; border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; background: var(--ink-2); display: flex; flex-direction: column; gap: 10px; }
.tier h3 { font-size: 30px; }
.tier__label { color: var(--muted); }
.tier__price b { font: 800 40px/1 var(--body); }
.tier ul { list-style: none; color: var(--muted); display: grid; gap: 6px; margin-bottom: 10px; flex: 1; align-content: start; }
.btn.is-off { opacity: .5; cursor: default; }
.tier li::before { content: '✦ '; color: var(--label-red); }
.tier--hot { border-color: transparent; background: linear-gradient(var(--ink-2), var(--ink-2)) padding-box, var(--holo) border-box; border: 1.5px solid transparent; }
.tier__badge { position: absolute; top: -12px; left: 22px; background: var(--bone); color: var(--ink); padding: 5px 10px; border-radius: 999px; font-size: 10px; }
@media (min-width: 900px) { .tiers { display: grid; grid-template-columns: repeat(4, 1fr); overflow: visible; margin: 32px 0 0; padding: 14px 0 0; } .tier { flex: auto; } }
.addons-note { color: var(--muted); margin-top: 18px; line-height: 1.8; }

/* ---------- gift ---------- */
.gift { padding: 120px 0; overflow: hidden; }
.gift__bg { position: absolute; inset: 0; z-index: -1; }
.gift__bg img { width: 100%; height: 100%; object-fit: cover; }
.gift__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--ink) 0%, rgba(7,7,10,.35) 30%, rgba(7,7,10,.45) 70%, var(--ink) 100%); }
.gift .lede { color: var(--bone); text-shadow: 0 2px 16px rgba(0,0,0,.7); }
.gift__btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.gift__btns .btn--ghost { background: rgba(7,7,10,.45); backdrop-filter: blur(8px); }
.gift .sec-title { text-shadow: 0 6px 40px rgba(0,0,0,.5); }

/* ---------- faq ---------- */
.faq { padding: 80px 0; }
.faq__list { margin-top: 28px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 36px 20px 0; font: 600 18px/1.3 var(--body); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 50%; translate: 0 -50%; font: 300 28px/1 var(--body); transition: rotate .3s; }
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { color: var(--muted); padding: 0 0 20px; max-width: 640px; }

/* ---------- final ---------- */
.final { padding: 80px 0 100px; text-align: center; }
.final__inner { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.final__logo { width: min(560px, 86vw); height: auto; }

/* squad deal band */
.squad { margin-top: 22px; display: grid; gap: 18px; padding: 22px; border-radius: var(--radius); border: 1px solid transparent; background: linear-gradient(var(--ink-2), var(--ink-2)) padding-box, var(--holo) border-box; }
.squad h3 { font-size: clamp(34px, 8vw, 60px); margin: 10px 0 8px; }
.squad p { color: var(--muted); max-width: 520px; }
.squad p b { color: #7dffb3; }
.squad__math { list-style: none; display: grid; gap: 8px; align-content: center; }
.squad__math li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 10px; background: rgba(255,255,255,.04); }
.squad__math span { color: var(--muted); }
@media (min-width: 900px) { .squad { grid-template-columns: 1.3fr 1fr; align-items: center; padding: 32px; } }