/* dresd motion landing — zero JS. Load-time keyframes + scroll-driven animations.
   Brand: Apple-native monochrome. Ink #1C1C1E on #F3F3F5, system SF Pro, no webfonts. */
@property --num { syntax: '<integer>'; inherits: false; initial-value: 0; }

:root {
  --ink: #1C1C1E; --ink2: #3A3A3C; --mute: #8E8E93; --line: #E3E3E8;
  --bg: #F3F3F5; --card: #FFFFFF; --dark: #111113;
  --ease: cubic-bezier(.2,.8,.2,1); --spring: cubic-bezier(.34,1.56,.64,1);
  --pad: clamp(20px, 5vw, 72px);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); overflow-x: clip;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; max-width: 100%; height: auto; -webkit-user-drag: none; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 10px; z-index: 99; }
.skip:focus { left: 8px; }
.eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--mute); display: flex; align-items: center; gap: 10px; }
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: #34C759; box-shadow: 0 0 0 0 rgba(52,199,89,.6); animation: ping 2s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 10px rgba(52,199,89,0); } 100% { box-shadow: 0 0 0 0 rgba(52,199,89,0); } }
h2 { font-size: clamp(36px, 5.6vw, 84px); font-weight: 800; letter-spacing: -.035em; line-height: .98; }
.lede { font-size: clamp(17px, 1.5vw, 21px); line-height: 1.5; color: var(--ink2); max-width: 36ch; margin-top: 20px; }

/* ── nav ─────────────────────────────────────────────────────────── */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 50; display: flex; align-items: center; gap: 28px; padding: 16px var(--pad);
  background: rgba(243,243,245,.72); backdrop-filter: saturate(1.6) blur(18px); -webkit-backdrop-filter: saturate(1.6) blur(18px);
  border-bottom: 1px solid rgba(0,0,0,.04); animation: navIn .8s var(--ease) .1s both; }
@keyframes navIn { from { transform: translateY(-100%); opacity: 0; } }
.nav .logo img { width: 92px; height: auto; }
.nav nav { display: flex; gap: 26px; margin-left: auto; }
.nav nav a { text-decoration: none; font-size: 15px; font-weight: 500; color: var(--ink2); }
.nav nav a:hover { color: var(--ink); }
.nav-cta { text-decoration: none; background: var(--ink); color: #fff; font-size: 14px; font-weight: 600; padding: 10px 18px; border-radius: 999px; transition: transform .2s var(--spring); }
.nav-cta:hover { transform: scale(1.05); }

/* ── App Store CTA ───────────────────────────────────────────────── */
.cta { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; background: var(--ink); color: #fff; padding: 14px 26px 14px 22px; border-radius: 18px;
  box-shadow: 0 18px 40px rgba(28,28,30,.25); transition: transform .25s var(--spring), box-shadow .25s; }
.cta:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 26px 50px rgba(28,28,30,.32); }
.cta svg { width: 26px; height: 30px; }
.cta span { display: flex; flex-direction: column; font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1.05; }
.cta small { font-size: 11px; font-weight: 500; letter-spacing: .02em; opacity: .8; }
.cta.light { background: #fff; color: var(--ink); box-shadow: 0 20px 60px rgba(255,255,255,.15); }

/* ── hero ────────────────────────────────────────────────────────── */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; padding: 120px var(--pad) 80px; overflow: clip; isolation: isolate; }
.hero::before { content: ''; position: absolute; inset: -20%; z-index: -2;
  background: radial-gradient(40% 35% at 50% 45%, #fff 0%, rgba(255,255,255,0) 70%), radial-gradient(30% 30% at 85% 15%, rgba(255,214,150,.35), transparent 70%), radial-gradient(30% 30% at 10% 85%, rgba(160,190,255,.25), transparent 70%); }
.flies { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.fly { position: absolute; left: var(--x); top: var(--y); width: var(--w); translate: -50% -50%;
  animation: drop 1.2s var(--spring) calc(.25s + var(--i) * .09s) both, par linear both;
  animation-timeline: auto, scroll(root); animation-range: normal, 0 100vh; }
.fly img { width: 100%; filter: drop-shadow(0 30px 40px rgba(28,28,30,.18)); animation: bob calc(5s + var(--i) * .7s) ease-in-out calc(var(--i) * -.8s) infinite; }
@keyframes drop { from { opacity: 0; transform: translateY(-60vh) rotate(calc(var(--r) * 4)) scale(.6); } to { opacity: 1; transform: rotate(var(--r)); } }
@keyframes bob { 50% { transform: translateY(-16px) rotate(3deg); } }
@keyframes par { to { translate: -50% calc(-50% - (40px + var(--i) * 22px)); opacity: .3; } }
.hero-in { text-align: center; max-width: 1100px; animation: heroOut linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
@keyframes heroOut { to { transform: translateY(-80px) scale(.92); opacity: 0; filter: blur(6px); } }
.hero .eyebrow { justify-content: center; animation: fadeUp .8s var(--ease) .2s both; }
h1 { font-size: clamp(50px, 9.2vw, 150px); font-weight: 900; letter-spacing: -.055em; line-height: .86; margin: 22px 0 26px; }
h1 .l { display: block; }
h1 .l2 { color: var(--mute); }
.w { display: inline-block; vertical-align: top; }
.w > span { display: inline-block; animation: wordUp 1s var(--ease) calc(.35s + var(--i) * .1s) both; }
@keyframes wordUp { from { transform: translateY(55%) rotate(5deg); clip-path: inset(0 0 100% 0); opacity: 0; } to { clip-path: inset(-25% -10% -25% -10%); } }
.sub { font-size: clamp(18px, 1.8vw, 24px); line-height: 1.45; color: var(--ink2); max-width: 34ch; margin: 0 auto; animation: fadeUp .9s var(--ease) .9s both; }
.hero-cta { margin-top: 34px; display: flex; flex-direction: column; align-items: center; gap: 18px; animation: fadeUp .9s var(--ease) 1.05s both; }
.meta { list-style: none; padding: 0; margin: 0; display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; font-size: 13px; color: var(--mute); font-weight: 500; }
.meta li::before { content: '✓'; margin-right: 6px; color: var(--ink); font-weight: 800; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } }
.scrollhint { position: absolute; bottom: 26px; left: 50%; width: 26px; height: 42px; margin-left: -13px; border: 2px solid var(--ink); border-radius: 14px; opacity: .35; }
.scrollhint span { position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--ink); animation: wheel 1.8s ease-in-out infinite; }
@keyframes wheel { 60% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/* ── marquee ─────────────────────────────────────────────────────── */
.marquee { padding: 30px 0; display: grid; gap: 18px; overflow: clip; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.mq-track { display: flex; gap: 18px; width: max-content; animation: mq 70s linear infinite; }
.marquee .mq-track:nth-child(2) { animation-direction: reverse; animation-duration: 80s; }
.mq-i { width: 150px; height: 150px; background: var(--card); border-radius: 30px; display: grid; place-items: center; padding: 20px; box-shadow: 0 10px 30px rgba(28,28,30,.05); }
.mq-i img { max-height: 110px; width: auto; object-fit: contain; }
@keyframes mq { to { transform: translateX(-50%); } }

/* ── pile → wardrobe ─────────────────────────────────────────────── */
.pile { position: relative; height: 280vh; view-timeline-name: --pile; }
.pile-sticky { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 1.35fr); align-items: center; gap: clamp(24px, 4vw, 80px); padding: 90px var(--pad) 40px; }
.pile-head h2 { max-width: 12ch; }
.pile-stage { position: relative; }
.pile-grid { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: min(100%, 78svh); gap: clamp(8px, 1vw, 16px); }
.pile-grid li { position: relative; aspect-ratio: 1; border-radius: clamp(14px, 2vw, 26px); background: var(--card); box-shadow: 0 10px 30px rgba(28,28,30,.06);
  display: grid; place-items: center; padding: 14%; z-index: var(--z); min-width: 0; min-height: 0;
  animation: tidy linear both; animation-timeline: --pile; animation-range: contain 0% contain 55%; }
.pile-grid li img { width: 100%; height: 100%; min-height: 0; object-fit: contain; filter: drop-shadow(0 12px 16px rgba(28,28,30,.18)); }
.pile-grid li span { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mute);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 8px; animation: labelIn linear both; animation-timeline: --pile; animation-range: contain 45% contain 60%; }
@keyframes tidy {
  from { transform: translate(var(--dx), var(--dy)) rotate(var(--rr)) scale(var(--ss)); background: transparent; box-shadow: none; }
  70% { background: transparent; box-shadow: none; }
  to { transform: none; }
}
@keyframes labelIn { from { opacity: 0; } }
.pile-caption { position: absolute; bottom: 28px; left: 0; right: 0; text-align: center; font-size: 15px; color: var(--mute);
  animation: capOut linear both; animation-timeline: --pile; animation-range: contain 20% contain 45%; }
@keyframes capOut { to { opacity: 0; transform: translateY(10px); } }

/* ── facts ───────────────────────────────────────────────────────── */
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 40px var(--pad) 120px; }
.fact { background: var(--card); border-radius: 36px; padding: 40px 36px 44px; box-shadow: 0 20px 50px rgba(28,28,30,.06); position: relative; overflow: hidden; }
.fact .num { font-size: clamp(80px, 10vw, 150px); font-weight: 900; letter-spacing: -.06em; line-height: .9;
  animation: count linear both; animation-timeline: view(); animation-range: entry 30% cover 45%; }
.fact .num { counter-reset: c var(--num); }
.fact .num::before { content: counter(c); }
.fact em { font-style: normal; font-size: clamp(28px, 3vw, 44px); font-weight: 800; color: var(--mute); margin-left: 6px; }
.fact p { margin-top: 18px; font-size: 17px; line-height: 1.5; color: var(--ink2); }
.fact::after { content: ''; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: var(--bg);
  animation: blob linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
@keyframes blob { from { transform: scale(0); } }

/* ── how it works: horizontal, scroll-driven ─────────────────────── */
.how { position: relative; height: 380vh; view-timeline-name: --how; background: var(--dark); color: #fff; }
.how-sticky { position: sticky; top: 0; height: 100svh; overflow: clip; display: flex; flex-direction: column; padding-top: 96px; }
.how-head { padding: 0 var(--pad); display: flex; align-items: flex-end; gap: 40px; flex-wrap: wrap; }
.how-head h2 { font-size: clamp(30px, 4vw, 60px); max-width: 18ch; }
.how-head .eyebrow { width: 100%; color: #8E8E93; }
.how-bar { flex: 1; min-width: 160px; height: 3px; background: rgba(255,255,255,.12); border-radius: 2px; margin-bottom: 14px; overflow: hidden; }
.how-bar i { display: block; height: 100%; background: #fff; transform-origin: 0 50%; animation: bar linear both; animation-timeline: --how; animation-range: contain 0% contain 100%; }
@keyframes bar { from { transform: scaleX(0); } }
.rail { flex: 1; display: flex; width: 300vw; animation: rail linear both; animation-timeline: --how; animation-range: contain 5% contain 95%; }
@keyframes rail { to { transform: translateX(-200vw); } }
.panel { width: 100vw; flex: none; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: clamp(24px, 5vw, 90px); padding: 20px var(--pad) 40px; }
.panel-txt .n { display: block; font-size: 15px; font-weight: 800; letter-spacing: .2em; color: #8E8E93; margin-bottom: 18px; }
.panel-txt h3 { font-size: clamp(34px, 4.6vw, 72px); font-weight: 800; letter-spacing: -.035em; line-height: .98; }
.panel-txt p { margin-top: 20px; font-size: clamp(16px, 1.4vw, 20px); line-height: 1.5; color: #AEAEB2; max-width: 34ch; }
.panel-art { position: relative; height: min(60svh, 560px); }
/* 01 snap */
.photo { position: absolute; left: 50%; top: 50%; width: min(78%, 400px); aspect-ratio: 4/5; translate: -50% -50%; border-radius: 30px; overflow: hidden; display: grid; place-items: center; }
.photo-bg { position: absolute; inset: 0; background: radial-gradient(70% 60% at 40% 35%, #d9cdb9, #8f7d68 70%, #5d4e3f), repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 2px, transparent 2px 9px); animation: bgGone 5s var(--ease) infinite; }
.snap-piece { position: relative; width: 62%; filter: saturate(.75) brightness(.92); animation: lift 5s var(--ease) infinite; }
.shutter { position: absolute; inset: 0; background: #fff; opacity: 0; animation: shutter 5s infinite; }
.chips { position: absolute; left: 50%; bottom: 2%; translate: -50% 0; display: flex; gap: 10px; list-style: none; margin: 0; padding: 0; }
.chips li { background: #fff; color: var(--ink); font-size: 14px; font-weight: 700; padding: 10px 16px; border-radius: 999px; animation: chip 5s var(--spring) infinite; }
.chips li:nth-child(2) { animation-delay: .12s; } .chips li:nth-child(3) { animation-delay: .24s; }
@keyframes shutter { 0%, 28% { opacity: 0; } 30% { opacity: .95; } 40%, 100% { opacity: 0; } }
@keyframes bgGone { 0%, 32% { opacity: 1; } 45%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes lift { 0%, 32% { transform: none; filter: saturate(.75) brightness(.92); } 48%, 90% { transform: scale(1.18) translateY(-6%); filter: drop-shadow(0 30px 40px rgba(0,0,0,.45)); } 100% { transform: none; } }
@keyframes chip { 0%, 52% { opacity: 0; transform: translateY(14px) scale(.8); } 58%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* 02 compose */
.canvas { background: #F3F3F5; border-radius: 34px; overflow: hidden; }
.cp { position: absolute; animation: cpIn 6s var(--spring) infinite; }
.cp img { width: 100%; filter: drop-shadow(0 16px 20px rgba(0,0,0,.18)); }
.c1 { left: 36%; top: 18%; width: 28%; animation-delay: 0s; } .c2 { left: 40%; top: 46%; width: 12%; animation-delay: .25s; }
.c3 { left: 58%; top: 78%; width: 24%; animation-delay: .5s; } .c4 { left: 64%; top: 6%; width: 18%; animation-delay: .75s; } .c5 { left: 10%; top: 16%; width: 26%; animation-delay: 1s; }
@keyframes cpIn { 0% { opacity: 0; transform: translate(60%, -40%) rotate(25deg) scale(.6); } 12%, 82% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(20px) scale(.9); } }
.saved { position: absolute; left: 50%; bottom: 6%; translate: -50% 0; background: var(--ink); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .06em; padding: 12px 20px; border-radius: 999px; animation: saved 6s var(--spring) infinite; }
@keyframes saved { 0%, 34% { opacity: 0; transform: scale(.6); } 40%, 82% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; } }
/* 03 plan */
.week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; align-items: end; }
.day { background: #fff; color: var(--ink); border-radius: 24px; height: 88%; padding: 14px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; overflow: hidden;
  animation: dayUp 6s var(--spring) calc(var(--i) * .12s) infinite; }
.day .d { font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--mute); }
.day .ic svg { width: 28px; height: 28px; }
.day b { font-size: 26px; font-weight: 900; letter-spacing: -.04em; }
.day img { margin-top: auto; max-height: 55%; width: auto; object-fit: contain; }
@keyframes dayUp { 0% { opacity: 0; transform: translateY(40%); } 12%, 85% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: translateY(-10%); } }

/* ── one tee, three looks ────────────────────────────────────────── */
.looks { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; padding: 140px var(--pad); }
.looks h2 span { color: var(--mute); }
.looks-stage { position: relative; height: 720px; max-width: 520px; width: 100%; justify-self: center; background: var(--card); border-radius: 44px; box-shadow: 0 30px 80px rgba(28,28,30,.08); overflow: hidden; }
.lk { position: absolute; left: 50%; translate: -50% 0; }
.lk img { width: 100%; filter: drop-shadow(0 18px 22px rgba(28,28,30,.16)); }
.lk.t { top: 14%; width: 46%; z-index: 2; } .lk.o { top: 12%; width: 54%; z-index: 3; } .lk.h { top: 3%; left: 72%; width: 24%; z-index: 4; }
.lk.a { top: 47%; width: 34%; z-index: 4; } .lk.b { top: 46%; width: 18%; z-index: 1; } .lk.s { top: 84%; width: 34%; z-index: 3; }
.lkA, .lkB, .lkC { opacity: 0; animation: cyc 9s var(--spring) infinite both; }
.lkB { animation-delay: 3s; } .lkC { animation-delay: 6s; }
.lk.lkA.h { animation-name: cycDrop; }
@keyframes cyc { 0% { opacity: 0; transform: translateX(40%) rotate(14deg) scale(.8); } 5%, 30% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; transform: translateX(-40%) rotate(-10deg); } }
@keyframes cycDrop { 0% { opacity: 0; transform: translateY(-120%); } 5%, 30% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; } }
.look-names { position: absolute; left: 24px; top: 22px; z-index: 6; height: 30px; overflow: hidden; }
.look-names span { display: block; font-size: 14px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; height: 30px; line-height: 30px; opacity: 0; position: absolute; left: 0; animation: nm 9s var(--ease) infinite both; white-space: nowrap; }
.look-names span:nth-child(2) { animation-delay: 3s; } .look-names span:nth-child(3) { animation-delay: 6s; }
@keyframes nm { 0% { opacity: 0; transform: translateY(100%); } 4%, 30% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; transform: translateY(-100%); } }

/* ── weather ─────────────────────────────────────────────────────── */
.weather { padding: 40px var(--pad) 140px; }
.wx-txt { max-width: 760px; margin-bottom: 50px; }
.wx-stage { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.wx { position: relative; background: var(--bg-c, var(--bg)); background: var(--bg); border-radius: 40px; height: 520px; padding: 28px; overflow: hidden; display: flex; flex-direction: column;
  animation: wxIn linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
.wx:nth-child(2) { animation-range: entry 8% cover 40%; } .wx:nth-child(3) { animation-range: entry 16% cover 45%; }
@keyframes wxIn { from { transform: translateY(160px) rotate(4deg); opacity: 0; } }
.wx-top { display: flex; align-items: center; gap: 12px; position: relative; z-index: 2; }
.wx-top .ic svg { width: 44px; height: 44px; }
.wx-top b { font-size: 54px; font-weight: 900; letter-spacing: -.05em; }
.wx-top span:last-child { margin-left: auto; font-size: 13px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; opacity: .6; }
.wx img { margin: auto auto 0; max-height: 72%; width: auto; object-fit: contain; filter: drop-shadow(0 26px 30px rgba(28,28,30,.22)); position: relative; z-index: 1; animation: bob 6s ease-in-out infinite; }
.wx-sun .ic svg { animation: spin 14s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.wx-rain::after { content: ''; position: absolute; inset: -40px; z-index: 3; pointer-events: none; opacity: .55;
  background: repeating-linear-gradient(105deg, transparent 0 22px, rgba(255,255,255,.9) 22px 24px, transparent 24px 60px); background-size: 120px 120px; animation: rain .5s linear infinite; }
@keyframes rain { to { background-position: -30px 120px; } }
.wx-cold::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background-image: radial-gradient(#fff 2.5px, transparent 3px), radial-gradient(#fff 1.8px, transparent 2.2px); background-size: 90px 90px, 60px 60px; background-position: 0 0, 30px 20px; animation: snow 8s linear infinite; }
@keyframes snow { to { background-position: 40px 360px, 50px 260px; } }
.rainfx { display: none; }

/* ── manifesto ───────────────────────────────────────────────────── */
.manifesto { padding: 120px var(--pad); }
.fill { font-size: clamp(40px, 7.4vw, 120px); font-weight: 900; letter-spacing: -.045em; line-height: .98; max-width: 16ch;
  background: linear-gradient(90deg, var(--ink) 50%, #CFCFD4 50%); background-size: 200% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: fill linear both; animation-timeline: view(); animation-range: entry 40% cover 60%; }
.fill em { font-style: italic; font-weight: 300; }
@keyframes fill { to { background-position: 0 0; } }

/* ── faq ─────────────────────────────────────────────────────────── */
.faq { padding: 40px var(--pad) 140px; max-width: 1000px; margin: 0 auto; }
.faq h2 { margin-bottom: 30px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 20px; padding: 26px 0; font-size: clamp(18px, 1.8vw, 24px); font-weight: 700; letter-spacing: -.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { margin-left: auto; width: 34px; height: 34px; border-radius: 50%; background: var(--card); position: relative; flex: none; transition: transform .35s var(--spring), background .2s; }
.faq summary i::before, .faq summary i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: var(--ink); border-radius: 1px; }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i { transform: rotate(135deg); background: var(--ink); }
.faq details[open] summary i::before, .faq details[open] summary i::after { background: #fff; }
.faq details p { padding: 0 60px 28px 0; font-size: 17px; line-height: 1.6; color: var(--ink2); animation: fadeUp .4s var(--ease); }

/* ── closing ─────────────────────────────────────────────────────── */
.closing { position: relative; background: var(--dark); color: #fff; min-height: 100svh; display: grid; place-items: center; align-content: center; gap: 40px; text-align: center; padding: 120px var(--pad); overflow: clip; }
.closing .big { font-size: clamp(56px, 11vw, 190px); font-weight: 900; letter-spacing: -.055em; line-height: .88; max-width: 10ch; position: relative; z-index: 2;
  animation: bigIn linear both; animation-timeline: view(); animation-range: entry 20% cover 50%; }
@keyframes bigIn { from { transform: scale(.7); opacity: 0; letter-spacing: .05em; } }
.closing .cta { position: relative; z-index: 2; }
.closing-flies { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.cf { position: absolute; left: 0; top: 0; width: 150px; margin: -75px 0 0 -75px; animation: orbit 30s linear infinite; animation-delay: calc(var(--i) * -5s); opacity: .9; }
.cf img { width: 100%; filter: drop-shadow(0 20px 30px rgba(0,0,0,.5)); }
@keyframes orbit { from { transform: rotate(0deg) translateX(min(42vw, 560px)) rotate(0deg); } to { transform: rotate(360deg) translateX(min(42vw, 560px)) rotate(-360deg); } }

/* ── footer ──────────────────────────────────────────────────────── */
.foot { background: var(--dark); color: #8E8E93; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; padding: 30px var(--pad) 44px; border-top: 1px solid rgba(255,255,255,.08); }
.foot .flogo { width: 80px; filter: invert(1); opacity: .8; }
.foot nav { display: flex; gap: 22px; flex-wrap: wrap; }
.foot a { text-decoration: none; font-size: 14px; } .foot a:hover { color: #fff; }
.foot small { margin-left: auto; font-size: 13px; }

/* ── generic reveal ──────────────────────────────────────────────── */
.reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 10% cover 35%; }
.fact.reveal { animation-range: entry calc(5% + var(--i) * 6%) cover calc(30% + var(--i) * 6%); }
@keyframes reveal { from { opacity: 0; transform: translateY(60px); } }

/* ── responsive ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .nav nav { display: none; }
  .pile-grid { max-width: 100%; }
  .nav-cta { margin-left: auto; }
  .fly { width: calc(var(--w) * .42); }
  .fly:nth-child(n+6) { display: none; }
  .fly:nth-child(1) { left: 4%; top: 12%; } .fly:nth-child(2) { left: 92%; top: 12%; } .fly:nth-child(3) { left: 8%; top: 88%; } .fly:nth-child(4) { left: 92%; top: 90%; } .fly:nth-child(5) { left: 55%; top: 95%; }
  h1 { font-size: 15vw; }
  .pile { height: 240vh; }
  .pile-sticky { grid-template-columns: 1fr; align-content: center; gap: 26px; padding-top: 80px; }
  .pile-head .lede { display: none; }
  .pile-grid { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  .pile-grid li span { display: none; }
  .facts, .wx-stage { grid-template-columns: 1fr; }
  .how { height: 420vh; }
  .panel { grid-template-columns: 1fr; align-content: center; gap: 20px; }
  .panel-art { height: 38svh; }
  .panel-txt p { display: none; }
  .looks { grid-template-columns: 1fr; padding: 100px var(--pad); }
  .looks-stage { height: 560px; }
  .wx { height: 420px; }
  .cf { width: 90px; margin: -45px 0 0 -45px; }
}

/* Browsers without scroll-driven animations: show the finished state. */
@supports not (animation-timeline: view()) {
  .pile { height: auto; } .pile-sticky { position: static; height: auto; padding-top: 60px; }
  .pile-grid li, .pile-grid li span, .pile-caption, .reveal, .fact::after, .wx, .fill, .closing .big, .hero-in { animation: none; }
  .fill { background-position: 0 0; }
  .fact .num { animation: none; }
  .fly { animation: drop 1.2s var(--spring) calc(.25s + var(--i) * .09s) both; }
  .how { height: auto; } .how-sticky { position: static; height: auto; padding-bottom: 60px; }
  .rail { width: auto; flex-direction: column; animation: none; } .panel { width: auto; } .how-bar { display: none; }
  .pile-caption { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .lkA { opacity: 1; } .lkB, .lkC { display: none; } .look-names span:first-child { opacity: 1; }
  .pile { height: auto; } .pile-sticky { position: static; height: auto; }
  .how { height: auto; } .how-sticky { position: static; height: auto; } .rail { width: auto; flex-direction: column; } .panel { width: auto; }
  .fill { background-position: 0 0; } .chips li, .saved, .cp, .day { opacity: 1; }
}

@keyframes count17 { from { --num: 0; } to { --num: 17; } }
@keyframes count20 { from { --num: 0; } to { --num: 20; } }
@keyframes count2 { from { --num: 0; } to { --num: 2; } }