/* PRETTY XOXO / premium
   Art direction: lacquer, chrome, skin and static.
   One fixed environment layer changes world per chapter; every chapter owns one motion grammar. */

/* ---------- Fonts (self-hosted, latin + latin-ext) ---------- */
@font-face { font-family: 'Anybody'; src: url(../fonts/anybody-latin-standard-normal.woff2) format('woff2'); font-weight: 100 900; font-stretch: 50% 150%; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Anybody'; src: url(../fonts/anybody-latin-ext-standard-normal.woff2) format('woff2'); font-weight: 100 900; font-stretch: 50% 150%; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Bodoni Moda'; src: url(../fonts/bodoni-moda-latin-standard-italic.woff2) format('woff2'); font-weight: 400 900; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bodoni Moda'; src: url(../fonts/bodoni-moda-latin-ext-standard-italic.woff2) format('woff2'); font-weight: 400 900; font-style: italic; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Hanken Grotesk'; src: url(../fonts/hanken-grotesk-latin-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Hanken Grotesk'; src: url(../fonts/hanken-grotesk-latin-ext-wght-normal.woff2) format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Mono'; src: url(../fonts/dm-mono-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Mono'; src: url(../fonts/dm-mono-latin-ext-400-normal.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Mono'; src: url(../fonts/dm-mono-latin-500-normal.woff2) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'DM Mono'; src: url(../fonts/dm-mono-latin-ext-500-normal.woff2) format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Tokens ---------- */
:root {
  --lacquer: #13070b;
  --lacquer-2: #26090f;
  --pearl: #d5d0d2;
  --rose: #d99da1;
  --oxblood: #1b0509;
  --lilac: #e7e3ec;
  --ink: #120b16;
  --skin: #ece2df;

  --kiss: #ff4fd8;
  --cherry: #a3112f;
  --chrome-hi: #f6f0f3;
  --lacquer-ink: #1c0a11;

  --font-display: 'Anybody', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --font-serif: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --font-body: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --gutter: clamp(16px, 3.4vw, 52px);
  --lane: 60px; /* bottom band kept free for the ELYX demo badge (bottom-right) */
  --header-h: 76px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);

  --world-bg: var(--lacquer);
  --world-fg: var(--chrome-hi);
  --world-line: rgba(246, 240, 243, .22);
}

body[data-header='dark'] { --hdr-fg: #f6f0f3; --hdr-bg: rgba(19, 7, 11, .7); }
body[data-header='light'] { --hdr-fg: #1c0a11; --hdr-bg: rgba(236, 226, 223, .72); }
body[data-world='lacquer'] { --world-accent: #ffb3c8; --world-bg: var(--lacquer); --world-fg: #f6f0f3; --world-line: rgba(246, 240, 243, .22); }
body[data-world='pearl']   { --world-accent: #7c0f2b; --world-bg: var(--pearl);   --world-fg: #1b0d13; --world-line: rgba(27, 13, 19, .2); }
body[data-world='rose']    { --world-accent: #7c0f2b; --world-bg: var(--rose);    --world-fg: #2a0b14; --world-line: rgba(42, 11, 20, .24); }
body[data-world='oxblood'] { --world-accent: #ff9db0; --world-bg: var(--oxblood); --world-fg: #f4e6e8; --world-line: rgba(244, 230, 232, .2); }
body[data-world='lilac']   { --world-accent: #6a4f8f; --world-bg: var(--lilac);   --world-fg: #2a2333; --world-line: rgba(42, 35, 51, .18); }
body[data-world='ink']     { --world-accent: #ffc6e8; --world-bg: var(--ink);     --world-fg: #efe9f2; --world-line: rgba(239, 233, 242, .2); }
body[data-world='skin']    { --world-accent: #a3112f; --world-bg: var(--skin);    --world-fg: #1c0a11; --world-line: rgba(28, 10, 17, .2); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--lacquer); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0;
  background: transparent;
  color: var(--world-fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}
img, video, canvas, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
em { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; }
.mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; line-height: 1.5; font-weight: 400; }
::selection { background: var(--kiss); color: var(--lacquer); }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--kiss); outline-offset: 4px; border-radius: 4px; }

.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: 1000;
  padding: 12px 18px; border-radius: 999px;
  background: var(--kiss); color: var(--lacquer);
  font: 500 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase;
  transform: translateY(-160%); transition: transform .4s var(--ease);
}
.skip-link:focus-visible { transform: none; outline-color: var(--chrome-hi); }

/* ---------- Environment layer (fixed, drifting, world-tinted) ---------- */
.env { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.env__tone { position: absolute; inset: 0; background: var(--world-bg); transition: background-color .8s var(--ease-io); }
.env__sheen {
  position: absolute; width: 110vmax; height: 110vmax; border-radius: 50%;
  opacity: .16; will-change: transform;
}
.env__sheen--a { left: -40vmax; top: -50vmax; background: radial-gradient(closest-side, rgba(255, 255, 255, .9), rgba(255, 255, 255, .25) 45%, transparent 100%); animation: envDriftA 72s ease-in-out infinite alternate; }
.env__sheen--b { right: -46vmax; bottom: -54vmax; background: radial-gradient(closest-side, rgba(255, 160, 185, .9), rgba(255, 160, 185, .2) 50%, transparent 100%); animation: envDriftB 88s ease-in-out infinite alternate; }
@keyframes envDriftA { to { transform: translate3d(38vmax, 30vmax, 0) scale(1.15); } }
@keyframes envDriftB { to { transform: translate3d(-34vmax, -24vmax, 0) scale(.9); } }

.grain {
  position: fixed; inset: -60px; z-index: 900; pointer-events: none; opacity: .07; will-change: transform;
  background-size: 128px 128px;
  animation: grain 1.1s steps(5) infinite;
}
@keyframes grain {
  0% { transform: translate3d(0, 0, 0); } 20% { transform: translate3d(-22px, 14px, 0); } 40% { transform: translate3d(18px, -26px, 0); }
  60% { transform: translate3d(-30px, -8px, 0); } 80% { transform: translate3d(26px, 22px, 0); } 100% { transform: translate3d(0, 0, 0); }
}

/* ---------- Loader ---------- */
.loader { display: none; }
.js .loader {
  position: fixed; inset: 0; z-index: 950; display: grid; place-items: center;
  background: var(--lacquer); color: var(--chrome-hi);
  animation: loaderFailsafe .6s 4.2s forwards;
}
@keyframes loaderFailsafe { to { opacity: 0; visibility: hidden; } }
.loader__mark { display: grid; justify-items: center; line-height: .8; }
.loader__word { display: block; overflow: hidden; padding: .04em .02em; }
.loader__word > span {
  display: block; font: 900 clamp(64px, 13vw, 210px)/.82 var(--font-display); font-stretch: 130%; letter-spacing: -.03em;
  background: linear-gradient(180deg, #fbf7f9 0%, #e7dfe4 34%, #9d8f98 49%, #3f333b 52%, #cfc5cc 58%, #f7f2f5 78%, #b2a6ae 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.loader__word--kiss > span { font-stretch: 60%; font-weight: 300; letter-spacing: .04em; }
.loader__foot { position: absolute; left: var(--gutter); right: var(--gutter); bottom: 28px; display: flex; justify-content: space-between; color: rgba(246, 240, 243, .66); }
.loader__line { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--kiss); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- Cursor ---------- */
.cursor { display: none; }
@media (pointer: fine) {
  .has-cursor .cursor { display: block; position: fixed; left: 0; top: 0; z-index: 960; pointer-events: none; color: var(--world-fg); }
  .has-cursor, .has-cursor a, .has-cursor button, .has-cursor summary { cursor: none; }
}
.cursor__ring, .cursor__dot, .cursor__label { position: absolute; left: 0; top: 0; will-change: transform; }
.cursor__ring {
  width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%;
  border: 1px solid currentColor; opacity: .7;
  transition: width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), opacity .3s, border-color .3s, background-color .3s;
}
.cursor__tick { position: absolute; left: 50%; top: 50%; width: 26px; height: 1px; margin-top: -.5px; background: currentColor; transform-origin: 0 50%; transform: rotate(var(--aim, -60deg)) translateX(14px); opacity: 0; transition: opacity .3s; }
.cursor__dot { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%; background: currentColor; }
.cursor__label { margin: 26px 0 0 26px; white-space: nowrap; font-size: 10px; opacity: 0; transition: opacity .3s; }
.cursor.is-label .cursor__label { opacity: .9; }
.cursor.is-hover .cursor__ring { width: 64px; height: 64px; margin: -32px 0 0 -32px; opacity: .9; }
.cursor.is-nozzle .cursor__ring { width: 46px; height: 46px; margin: -23px 0 0 -23px; border-style: dashed; opacity: .85; }
.cursor.is-nozzle .cursor__tick { opacity: .85; }
.cursor.is-press .cursor__ring { width: 24px; height: 24px; margin: -12px 0 0 -12px; background: rgba(255, 79, 216, .25); border-color: var(--kiss); }

/* ---------- Header / rail ---------- */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 800; height: var(--header-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
  padding: 0 var(--gutter); color: var(--hdr-fg, #f6f0f3);
  transition: color .5s var(--ease-io), transform .6s var(--ease);
}
.site-header::before {
  content: ''; position: absolute; inset: 0 0 -20px; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom, var(--hdr-bg, rgba(19, 7, 11, .7)), transparent);
  opacity: 0; transition: opacity .6s, background .5s;
}
.is-scrolled .site-header::before { opacity: 1; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header::before { -webkit-backdrop-filter: blur(14px) saturate(1.1); backdrop-filter: blur(14px) saturate(1.1);
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
}
.software .site-header::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
.brand { justify-self: start; font: 700 19px/1 var(--font-display); font-stretch: 122%; letter-spacing: -.02em; text-transform: lowercase; display: inline-flex; align-items: flex-start; padding: 12px 0; }
.brand b { font-weight: 300; font-stretch: 70%; margin-left: .12em; letter-spacing: .02em; }
.brand sup { color: var(--kiss); font-size: 12px; margin-left: 3px; transform: translateY(-3px); display: inline-block; }
.site-header__chapter { display: flex; align-items: center; gap: 12px; opacity: .8; }
.site-header__chapter i { width: 34px; height: 1px; background: currentColor; opacity: .5; }
.site-nav { justify-self: end; display: flex; gap: 28px; margin-right: 140px; }
.site-nav a { position: relative; font: 500 13px/1 var(--font-body); letter-spacing: .01em; padding: 14px 0; }
.site-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 100% 50%; transition: transform .5s var(--ease); }
.site-nav a:hover::after { transform: scaleX(1); transform-origin: 0 50%; }
.btn-pill {
  position: absolute; right: var(--gutter); top: 50%; margin-top: -22px;
  height: 44px; padding: 0 22px; border-radius: 999px; display: inline-flex; align-items: center;
  font: 500 12px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase;
  border: 1px solid currentColor; color: var(--hdr-fg, #f6f0f3);
  transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s;
}
.btn-pill:hover { background: var(--kiss); border-color: var(--kiss); color: var(--lacquer); }

.rail { position: fixed; right: 12px; top: 50%; z-index: 790; transform: translateY(-50%); color: var(--world-fg); transition: color .8s var(--ease-io), opacity .5s; }
.rail ol { display: grid; gap: 4px; }
.rail a { position: relative; display: flex; align-items: center; justify-content: flex-end; width: 34px; height: 22px; }
.rail i { width: 8px; height: 1px; background: currentColor; opacity: .4; transition: width .5s var(--ease), opacity .4s; }
.rail span { position: absolute; right: 30px; top: 50%; margin-top: -5px; pointer-events: none; font: 400 10px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; opacity: 0; transform: translateX(6px); transition: opacity .4s, transform .5s var(--ease); white-space: nowrap; }
.rail a:hover span, .rail a:focus-visible span { opacity: .9; transform: none; }
.rail a[aria-current='step'] i { width: 18px; opacity: 1; }
.rail a:hover i { width: 14px; opacity: .8; }
.rail__bar { position: absolute; right: -5px; top: 0; bottom: 0; width: 1px; background: var(--world-line); }
.rail__bar b { position: absolute; inset: 0; background: var(--kiss); transform-origin: 50% 0; transform: scaleY(0); }
.progress { display: none; }
#main:focus { outline: none; }

/* ---------- Shared bits ---------- */
.eyebrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.eyebrow i { width: 26px; height: 1px; background: currentColor; opacity: .45; }
.line-mask { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.note__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.note__pct { font: 200 clamp(44px, 6vw, 96px)/.8 var(--font-display); font-stretch: 60%; letter-spacing: -.02em; display: flex; align-items: flex-start; }
.note__pct sup { font: 400 12px/1 var(--font-mono); letter-spacing: .1em; margin: 6px 0 0 6px; }
.note__from { opacity: .72; margin-bottom: 18px; }
.note__headline { font: 600 clamp(28px, 3vw, 46px)/1.02 var(--font-display); font-stretch: 92%; letter-spacing: -.025em; }
.note__headline em { font-weight: 400; font-size: 1.08em; letter-spacing: -.02em; }
.note__body { margin-top: 18px; font-size: 16px; line-height: 1.55; max-width: 34ch; opacity: .86; }
.traits { display: flex; gap: 0; margin-top: 26px; border-top: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 26%, transparent); }
.traits li { flex: 1; padding: 12px 10px 0 0; display: flex; gap: 10px; align-items: baseline; }
.traits i { font-style: normal; opacity: .5; }
.hint-touch { display: none; }
@media (hover: none), (pointer: coarse) { .hint-fine { display: none; } .hint-touch { display: inline; } }
.plate { position: relative; }
.plate__frame { position: relative; overflow: hidden; background: rgba(0, 0, 0, .06); }
.plate__frame img { width: 100%; height: 100%; object-fit: cover; }
.plate figcaption { display: flex; justify-content: space-between; gap: 16px; margin-top: 12px; opacity: .72; }

/* =========================================================
   00 / HERO: THE SPRAY
   ========================================================= */
.hero {
  position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden;
  background: var(--lacquer); color: var(--chrome-hi); isolation: isolate; touch-action: pan-y;
}
.hero__fluid { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero__still {
  position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity .8s;
  background:
    radial-gradient(42% 36% at 28% 64%, rgba(196, 22, 58, .55), transparent 70%),
    radial-gradient(30% 28% at 62% 44%, rgba(242, 128, 150, .42), transparent 72%),
    radial-gradient(26% 30% at 78% 70%, rgba(214, 206, 222, .28), transparent 70%),
    radial-gradient(60% 50% at 50% 110%, rgba(120, 10, 34, .55), transparent 70%),
    var(--lacquer);
  filter: saturate(1.05);
}
.no-fluid .hero__still { opacity: 1; }
.no-fluid .hero__fluid { opacity: 0; }
.hero__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(19, 7, 11, .55), transparent 22%, transparent 74%, rgba(19, 7, 11, .62)),
    radial-gradient(120% 90% at 50% 50%, transparent 55%, rgba(8, 2, 4, .55));
}
.hero__inner { position: relative; z-index: 2; height: 100%; pointer-events: none; }
.hero__inner a, .hero__inner button { pointer-events: auto; }
.hero__kicker { position: absolute; left: var(--gutter); top: calc(var(--header-h) + 14px); display: flex; gap: 22px; color: rgba(246, 240, 243, .7); }
.hero__kicker span + span::before { content: '/'; margin-right: 22px; opacity: .5; }

.hero__title { position: absolute; inset: 0; font-weight: 900; }
.hero__word {
  position: absolute; display: block; white-space: nowrap;
  font-family: var(--font-display); font-weight: 900; line-height: .78; letter-spacing: -.022em;
  font-size: clamp(92px, 17vw, 340px);
}
.hero__word--pretty { left: calc(var(--gutter) - .04em); top: calc(var(--header-h) + 7vh); font-stretch: 128%; }
.hero__word--xoxo { right: calc(var(--gutter) - .02em); bottom: 15vh; font-stretch: 150%; font-weight: 200; letter-spacing: -.01em; }
.hero__word .ch, .hero__word.no-split {
  display: inline-block;
  background-image: linear-gradient(180deg, #fffafc 0%, #efe7ec 26%, #b9adb5 44%, #4e3f48 50%, #2a1d24 52%, #b9aab3 60%, #f4eef2 76%, #fffafc 88%, #c9bcc4 100%);
  background-size: 100% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent;
}
.hero__word--xoxo .ch, .hero__word--xoxo.no-split {
  background-image: linear-gradient(180deg, rgba(255, 250, 252, .92) 0%, rgba(239, 231, 236, .9) 30%, rgba(255, 140, 190, .9) 48%, rgba(120, 18, 52, .95) 52%, rgba(244, 238, 242, .92) 70%, rgba(255, 250, 252, .9) 100%);
}
.hero__word .ch-wrap { display: inline-block; overflow: hidden; padding: .02em 0 .04em; margin: -.02em 0 -.04em; vertical-align: top; }

.hero__copy { text-shadow: 0 2px 28px rgba(19, 7, 11, .6), 0 1px 3px rgba(19, 7, 11, .35); position: absolute; left: var(--gutter); top: calc(var(--header-h) + 7vh + clamp(92px, 17vw, 340px) * .78 + 5.5vh); max-width: 42ch; }
.hero__tagline { font: 600 clamp(26px, 2.7vw, 44px)/1.02 var(--font-display); font-stretch: 96%; letter-spacing: -.03em; color: var(--chrome-hi); }
.hero__tagline .line { display: block; }
.hero__tagline em { display: block; font-size: 1.18em; font-weight: 400; color: #ffd6ea; margin-top: .06em; }
.hero__lede { margin-top: 18px; font-size: 15px; color: rgba(246, 240, 243, .76); }

.hero__foot { position: absolute; left: var(--gutter); right: var(--gutter); bottom: var(--lane); display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 24px; }
.spray-btn { justify-self: start; display: inline-flex; align-items: center; gap: 16px; padding: 6px 22px 6px 6px; border-radius: 999px; min-height: 60px; color: var(--chrome-hi); background: rgba(246, 240, 243, .06); border: 1px solid rgba(246, 240, 243, .22); transition: background-color .5s var(--ease), border-color .5s; }
.spray-btn:hover { background: rgba(255, 79, 216, .14); border-color: rgba(255, 79, 216, .6); }
.spray-btn__nozzle {
  position: relative; width: 48px; height: 48px; border-radius: 50%; flex: none;
  background: conic-gradient(from 210deg, #fbf6f9, #8d7f88, #f2ecf0, #4c3e47, #e8e1e6, #9a8c95, #fbf6f9);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 6px 18px rgba(0, 0, 0, .4);
}
.spray-btn__nozzle i { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #3a2a33, #0d0508 70%); box-shadow: 0 0 0 3px rgba(255, 255, 255, .35); transition: transform .35s var(--ease); }
.spray-btn.is-pumping .spray-btn__nozzle i { transform: scale(.7); }
.spray-btn__text { display: grid; gap: 4px; text-align: left; }
.spray-btn__text b { font: 600 15px/1 var(--font-body); letter-spacing: .005em; }
.spray-btn__text small { font-size: 10px; opacity: .66; }
.hero__notes { display: flex; gap: 26px; color: rgba(246, 240, 243, .72); }
.hero__notes li { display: flex; gap: 8px; align-items: baseline; }
.hero__notes b { font-weight: 500; color: var(--chrome-hi); }
.hero__scroll { justify-self: end; display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: rgba(246, 240, 243, .8); }
.hero__scroll i { position: relative; width: 1px; height: 44px; background: rgba(246, 240, 243, .25); overflow: hidden; }
.hero__scroll i::after { content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 40%; background: var(--chrome-hi); transform: translateY(-100%); animation: scrollCue 2.2s var(--ease-io) infinite; }
@keyframes scrollCue { to { transform: translateY(250%); } }
.hero__count { position: absolute; right: var(--gutter); top: calc(var(--header-h) + 14px); color: rgba(246, 240, 243, .66); }
.hero__count span { color: var(--chrome-hi); }

/* =========================================================
   01 / THE BOTTLE: scrubbed film
   ========================================================= */
.bottle { position: relative; color: var(--world-fg); transition: color .8s var(--ease-io); }
.bottle__pin { position: relative; height: 100vh; height: 100svh; min-height: 600px; overflow: hidden; }
.bottle__window {
  --cx: 37.5%; --ct: 17%; --cb: 15%; --rad: 220px;
  position: absolute; inset: 0; z-index: 0; background: #cdc8ca;
  clip-path: inset(var(--ct) var(--cx) var(--cb) var(--cx) round var(--rad));
}
.bottle__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zoom, 1.32)); transform-origin: 50% 50%; background: #cdc8ca; }
.bottle__alt { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--zoom, 1.32)); opacity: 0; pointer-events: none; }
.bottle__glass { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .28) 44%, transparent 52%), radial-gradient(90% 70% at 50% 50%, transparent 60%, rgba(60, 40, 50, .18)); opacity: var(--glass, 1); }
.bottle__ui { position: absolute; inset: 0; z-index: 2; padding: calc(var(--header-h) + 14px) var(--gutter) 30px; pointer-events: none; }
.bottle__ui .eyebrow { position: absolute; left: var(--gutter); top: calc(var(--header-h) + 14px); }
.bottle__title {
  position: absolute; left: calc(var(--gutter) - .03em); top: 50%; transform: translateY(-50%);
  font: 700 clamp(80px, 13.5vw, 250px)/.8 var(--font-display); font-stretch: 52%; letter-spacing: .018em; text-transform: uppercase;
}
.bt-line { display: block; }
.bottle__deg {
  position: absolute; right: calc(var(--gutter) + 40px); top: 50%; transform: translateY(-50%);
  font: 200 clamp(80px, 13.5vw, 250px)/.8 var(--font-display); font-stretch: 52%; letter-spacing: -.03em; font-variant-numeric: tabular-nums;
  display: flex; align-items: flex-start;
}
.bottle__deg sup { font-size: .32em; font-weight: 300; margin-top: .06em; }
.bottle__materials { position: absolute; right: calc(var(--gutter) + 40px); top: calc(50% + clamp(80px, 13.5vw, 250px) * .42 + 18px); display: flex; gap: 18px; }
.bottle__materials li { display: flex; align-items: baseline; gap: 6px; font: 600 15px/1 var(--font-body); }
.bottle__materials i { font-style: normal; font-size: 10px; opacity: .55; }
.bottle__line { position: absolute; left: var(--gutter); bottom: calc(var(--lane) - 4px); font: 600 clamp(22px, 2.3vw, 36px)/1.05 var(--font-display); font-stretch: 92%; letter-spacing: -.025em; max-width: 22ch; }
.bottle__line em { font-weight: 400; font-size: 1.1em; }
.bottle__turn { position: absolute; right: calc(var(--gutter) + 40px); bottom: var(--lane); opacity: .7; }
.bottle__bridge { position: absolute; left: 50%; bottom: 7vh; transform: translateX(-50%); width: min(880px, calc(100% - 2 * var(--gutter))); text-align: center; opacity: 0; isolation: isolate; }
.bottle__bridge::before { content: ''; position: absolute; z-index: -1; left: -14%; right: -14%; top: -38%; bottom: -30%; border-radius: 50%; background: radial-gradient(closest-side, rgba(226, 221, 223, .92), rgba(226, 221, 223, .7) 55%, rgba(226, 221, 223, 0)); filter: blur(6px); }
.bottle__bridge p { margin-bottom: 18px; opacity: .74; }
.bottle__bridge ol { display: grid; gap: 4px; font: 600 clamp(30px, 3.6vw, 58px)/1 var(--font-display); font-stretch: 90%; letter-spacing: -.03em; }
.bottle__bridge span { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -.02em; }

/* =========================================================
   02 / PINK PEPPER: sparks + kinetic type
   ========================================================= */
.note { position: relative; }
.pepper { position: relative; color: var(--world-fg); transition: color .8s var(--ease-io); padding: calc(var(--header-h) + 40px) var(--gutter) 120px; overflow: clip; isolation: isolate; }
.pepper__grid {
  position: relative; z-index: 2; max-width: 1560px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 0;
}
.pepper .note__head { grid-column: 1 / -1; grid-row: 1; margin-bottom: 4vh; }
.pepper__title {
  grid-column: 1 / -1; grid-row: 2; position: relative; z-index: 3; text-transform: uppercase; pointer-events: none;
  font-family: var(--font-display); font-weight: 900; line-height: .8; letter-spacing: -.04em;
  font-size: clamp(84px, 16vw, 300px);
}
.pepper__word { display: block; white-space: nowrap; }
.pepper__word--pink { font-stretch: 150%; font-weight: 900; }
.pepper__word--pepper { font-stretch: 68%; font-weight: 300; letter-spacing: -.02em; margin-top: .03em; padding-left: 8vw; color: var(--world-accent); transition: color .8s var(--ease-io); }
.pepper__word .ch { display: inline-block; will-change: transform; }
.pepper__word--pepper .ch { font-variation-settings: 'wdth' var(--wd, 68); }
.plate--pepper { grid-column: 9 / 13; grid-row: 2 / 4; align-self: start; margin-top: 6vh; z-index: 1; }
.plate--pepper .plate__frame { aspect-ratio: 2 / 3; border-radius: 2px; }
.pepper__copy { grid-column: 1 / 7; grid-row: 3; margin-top: 8vh; position: relative; z-index: 4; }
.pepper .note__hint { margin-top: 26px; display: flex; align-items: center; gap: 10px; opacity: .8; }
.pepper .note__hint::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #7c0f2b; box-shadow: 0 0 0 4px rgba(124, 15, 43, .18); animation: pulseDot 1.8s var(--ease-io) infinite; }
@keyframes pulseDot { 50% { box-shadow: 0 0 0 9px rgba(124, 15, 43, 0); } }

/* =========================================================
   03 / WET CHERRY: lacquer ripple sim + drip reveal (pinned)
   ========================================================= */
.cherry { color: #f4e6e8; }
.cherry__pin { position: relative; height: 100vh; height: 100svh; min-height: 620px; overflow: hidden; isolation: isolate; background: var(--oxblood); }
.cherry__lacquer { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; touch-action: pan-y; }
.cherry__still {
  position: absolute; inset: 0; z-index: 0; opacity: 0;
  background:
    linear-gradient(172deg, transparent 38%, rgba(255, 210, 220, .16) 41%, transparent 45%),
    linear-gradient(8deg, transparent 58%, rgba(255, 120, 150, .12) 61%, transparent 66%),
    radial-gradient(70% 60% at 60% 40%, #4d0814, #1b0509 70%);
}
.no-lacquer .cherry__still { opacity: 1; }
.cherry__layout { position: absolute; inset: 0; z-index: 2; padding: calc(var(--header-h) + 14px) var(--gutter) 30px; pointer-events: none; }
.cherry .note__head { position: absolute; left: var(--gutter); right: calc(var(--gutter) + 40px); top: calc(var(--header-h) + 14px); }
.cherry__title {
  position: absolute; left: calc(var(--gutter) - .03em); top: 21vh; z-index: 3;
  font: 900 clamp(84px, 13.6vw, 260px)/.78 var(--font-display); letter-spacing: -.04em; text-transform: uppercase;
}
.ct-line { display: block; }
.ct-line:first-child { font-stretch: 58%; font-weight: 300; letter-spacing: -.01em; }
.ct-line:last-child {
  font-stretch: 112%;
  background-image: linear-gradient(180deg, #ffe7ec 0%, #ff9db0 30%, #d1203f 47%, #4a0310 50%, #8a0c25 56%, #ff7f98 74%, #ffe0e7 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  padding-bottom: .04em;
}
.plate--cherry { position: absolute; right: calc(var(--gutter) + 48px); top: 50%; transform: translateY(-52%); width: clamp(220px, min(22vw, 36vh), 380px); z-index: 1; }
.plate--cherry .plate__frame { aspect-ratio: 2 / 3; clip-path: url(#drip-clip); border-radius: 2px; }
.plate__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.cherry__copy { position: absolute; left: var(--gutter); bottom: calc(var(--lane) - 4px); width: min(440px, 40vw); }
.cherry .note__from { color: #ff9db0; opacity: .9; }
.pressure { position: absolute; right: calc(var(--gutter) + 40px); bottom: var(--lane); width: min(320px, 28vw); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }
.pressure__bar { position: relative; height: 2px; background: rgba(244, 230, 232, .2); overflow: hidden; }
.pressure__bar b { position: absolute; inset: 0; background: linear-gradient(90deg, #ff7f98, var(--kiss)); transform-origin: 0 50%; transform: scaleX(0); }
.pressure strong { font-weight: 500; min-width: 3ch; text-align: right; }
.cherry__hint { position: absolute; right: calc(var(--gutter) + 40px); bottom: calc(var(--lane) + 36px); opacity: .66; text-align: right; }
.cherry__break { position: absolute; right: calc(var(--gutter) + 40px); top: 50%; font: 300 clamp(40px, 5vw, 84px)/.9 var(--font-display); font-stretch: 60%; letter-spacing: -.02em; text-transform: uppercase; opacity: 0; transform: translateY(20px); }
.cherry__break em { text-transform: none; color: #ff9db0; }

/* =========================================================
   04 / STATIC MUSK: the quiet chapter
   ========================================================= */
.musk { position: relative; color: var(--world-fg); transition: color .8s var(--ease-io); padding: calc(var(--header-h) + 50px) var(--gutter) 12vh; overflow: clip; isolation: isolate; }
.musk__inner { position: relative; z-index: 1; max-width: 1380px; margin: 0 auto; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; }
.musk .note__head { grid-column: 1 / -1; }
.musk .note__pct { font-weight: 100; }
.musk__from { grid-column: 1 / -1; text-align: center; margin-top: 10vh; opacity: .64; }
.musk__title {
  grid-column: 1 / -1; text-align: center; margin-top: 3vh;
  font: 100 clamp(60px, 10.4vw, 190px)/.9 var(--font-display); font-stretch: 150%; letter-spacing: -.02em; text-transform: uppercase;
  color: inherit;
}
.plate--musk { grid-column: 3 / 7; margin-top: 9vh; }
.plate--musk .plate__frame { aspect-ratio: 2 / 3; border-radius: 999px 999px 4px 4px; background: #ddd8e2; }
.plate__img { position: relative; z-index: 1; }
.plate__ghost { position: absolute; inset: 0; z-index: 2; mix-blend-mode: screen; opacity: 0; pointer-events: none; will-change: transform; }
.plate__ghost--a { filter: hue-rotate(-40deg) saturate(1.6); }
.plate__ghost--b { filter: hue-rotate(60deg) saturate(1.4); }
.musk__copy { grid-column: 8 / 12; align-self: center; padding-left: 12px; margin-top: 9vh; }
.musk .note__headline { font-weight: 300; font-stretch: 110%; }
.musk__whisper { grid-column: 1 / -1; text-align: center; margin-top: 15vh; font: italic 400 clamp(30px, 3.4vw, 56px)/1.1 var(--font-serif); letter-spacing: -.01em; opacity: .62; }

/* =========================================================
   05 / THE TRACE: SVG dial draw
   ========================================================= */
.trace { position: relative; color: var(--world-fg); transition: color .8s var(--ease-io); padding: calc(var(--header-h) + 60px) var(--gutter) 90px; overflow: hidden; }
.trace__inner { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 5vw; align-items: center; min-height: 82vh; }
.trace__title { margin-top: 26px; font: 800 clamp(56px, 7.4vw, 136px)/.86 var(--font-display); font-stretch: 78%; letter-spacing: -.035em; text-transform: uppercase; }
.tr-line { display: block; }
.trace__title em { text-transform: none; font-weight: 400; font-size: 1.04em; letter-spacing: -.03em; color: var(--world-accent); transition: color .8s var(--ease-io); }
.trace__lede { margin-top: 26px; font-size: 18px; opacity: .84; }
.trace__fine { margin-top: 22px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .72; }
.trace__legend { margin-top: 40px; border-top: 1px solid rgba(239, 233, 242, .18); }
.trace__legend li { display: grid; grid-template-columns: 34px 1fr auto; column-gap: 12px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid rgba(239, 233, 242, .18); }
.trace__legend li > span { font: 600 20px/1.1 var(--font-display); font-stretch: 94%; letter-spacing: -.02em; }
.trace__legend b { font-size: 14px; font-weight: 500; letter-spacing: .06em; }
.trace__legend small { grid-column: 2 / 4; margin-top: 4px; font-size: 14px; opacity: .66; }
.trace__legend i { font-style: normal; opacity: .5; }
.trace__legend li::before { content: ''; grid-row: 1; grid-column: 1; width: 9px; height: 9px; border-radius: 50%; align-self: center; background: var(--dot); }
.trace__legend li > i { display: none; }
.trace__legend li[data-note='pepper'] { --dot: #ff8fa3; }
.trace__legend li[data-note='cherry'] { --dot: #d6153e; }
.trace__legend li[data-note='musk'] { --dot: #c9c2ff; }
.dial { position: relative; width: 100%; max-width: 720px; aspect-ratio: 1; justify-self: center; }
.dial__svg { width: 100%; height: 100%; overflow: visible; }
.dial__track { fill: none; stroke: rgba(239, 233, 242, .12); stroke-width: 1; }
.dial__inner { fill: none; stroke: rgba(239, 233, 242, .1); stroke-width: 1; stroke-dasharray: 2 6; }
.dial__arc { fill: none; stroke-width: 10; stroke-linecap: butt; transform: rotate(-90deg); transform-origin: 300px 300px; }
.dial__arc--pepper { stroke: #ff8fa3; }
.dial__arc--cherry { stroke: #d6153e; }
.dial__arc--musk { stroke: #c9c2ff; }
.dial__ticks line { stroke: rgba(239, 233, 242, .32); stroke-width: 1; }
.dial__ticks line.is-major { stroke: rgba(239, 233, 242, .7); }
.dial__label { fill: rgba(239, 233, 242, .8); font-size: 13px; letter-spacing: .18em; }
.dial__object { position: absolute; left: 50%; top: 50%; width: 46%; height: auto; transform: translate(-50%, -50%); filter: drop-shadow(0 26px 40px rgba(0, 0, 0, .28)); pointer-events: none; }
.dial__core { position: absolute; left: 50%; bottom: 24%; transform: translateX(-50%); display: flex; gap: 10px; align-items: baseline; color: rgba(239, 233, 242, .8); }
.dial__core b { font-weight: 500; color: #fff; }
.trace__foot { max-width: 1440px; margin: 7vh auto 0; display: flex; justify-content: space-between; opacity: .6; }

/* =========================================================
   06 / DISCOVER: arrival
   ========================================================= */
.arrival { position: relative; color: var(--world-fg); transition: color .8s var(--ease-io); padding: calc(var(--header-h) + 20px) var(--gutter) 110px; overflow: hidden; }
.arrival__mega {
  position: relative; text-align: center; line-height: .74; pointer-events: none; margin: 0 calc(var(--gutter) * -1);
  font: 900 clamp(100px, 26vw, 520px)/.74 var(--font-display); font-stretch: 150%; letter-spacing: -.05em;
}
.arrival__mega span {
  display: inline-block; padding: 0 .02em .02em;
  background: url(../../public/assets/bloom-portal-bg-v1.png) 50% 50% / cover no-repeat, #c91a4a;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  will-change: transform;
}
.arrival__grid { position: relative; max-width: 1380px; margin: -6vw auto 0; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 5vw; align-items: end; }
.arrival__object { position: relative; }
.arrival__frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 999px 999px 6px 6px; background: #d9d2d3; box-shadow: 0 40px 80px -40px rgba(60, 10, 25, .45); }
.arrival__frame img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform: scale(1.6); transform-origin: 50% 50%; }
.arrival__object figcaption { display: flex; justify-content: space-between; margin-top: 14px; opacity: .7; }
.arrival__card { padding-bottom: 30px; }
.arrival__title { margin-top: 22px; font: 800 clamp(40px, 4.4vw, 76px)/.92 var(--font-display); font-stretch: 112%; letter-spacing: -.035em; }
.arrival__title em { display: block; margin-top: .16em; font-size: .62em; font-weight: 400; letter-spacing: -.02em; }
.arrival__lede { margin-top: 22px; font-size: 17px; max-width: 38ch; opacity: .86; }
.spec { margin-top: 30px; border-top: 1px solid var(--world-line); }
.spec div { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--world-line); align-items: baseline; }
.spec dt { opacity: .6; }
.spec dd { font-size: 16px; font-weight: 500; }
.spec__price dd { font: 700 34px/1 var(--font-display); font-stretch: 110%; letter-spacing: -.03em; }
.spec__price small { margin-left: 12px; font-size: 10px; letter-spacing: .14em; opacity: .55; vertical-align: middle; }
.arrival__actions { margin-top: 34px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.btn-cta {
  position: relative; display: inline-flex; align-items: center; gap: 18px; min-height: 72px; padding: 0 12px 0 36px; border-radius: 999px;
  background: var(--kiss); color: var(--lacquer); overflow: hidden; isolation: isolate;
  font: 800 20px/1 var(--font-display); font-stretch: 120%; letter-spacing: -.01em; text-transform: uppercase;
  box-shadow: 0 20px 40px -18px rgba(255, 79, 216, .7);
}
.btn-cta::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--lacquer); border-radius: inherit; transform: translateY(101%); transition: transform .6s var(--ease); }
.btn-cta:hover::before { transform: none; }
.btn-cta:hover { color: var(--kiss); }
.btn-cta__text { position: relative; }
.btn-cta__icon { position: relative; width: 50px; height: 50px; border-radius: 50%; background: var(--lacquer); display: grid; place-items: center; transition: background-color .5s var(--ease); }
.btn-cta:hover .btn-cta__icon { background: var(--kiss); }
.btn-cta__icon i { width: 14px; height: 14px; border-top: 2px solid var(--kiss); border-right: 2px solid var(--kiss); transform: rotate(45deg) translate(-2px, 2px); transition: border-color .5s; }
.btn-cta:hover .btn-cta__icon i { border-color: var(--lacquer); }
.arrival__note { opacity: .66; line-height: 1.7; }

.faq { position: relative; max-width: 1380px; margin: 110px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 5vw; border-top: 1px solid var(--world-line); }
.faq details { border-bottom: 1px solid var(--world-line); }
.faq summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 64px; padding: 14px 0; font: 600 20px/1.2 var(--font-display); font-stretch: 96%; letter-spacing: -.02em; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary i { position: relative; width: 16px; height: 16px; flex: none; }
.faq summary i::before, .faq summary i::after { content: ''; position: absolute; left: 0; top: 7px; width: 16px; height: 1.5px; background: currentColor; transition: transform .5s var(--ease); }
.faq summary i::after { transform: rotate(90deg); }
.faq details[open] summary i::after { transform: rotate(0); }
.faq details p { padding: 0 0 22px; max-width: 52ch; opacity: .8; }

/* ---------- Footer ---------- */
.site-footer { position: relative; background: var(--lacquer); color: var(--chrome-hi); padding: 90px var(--gutter) 28px; overflow: hidden; }
.footer__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.footer__replay { display: grid; gap: 12px; }
.footer__replay span { opacity: .66; }
.footer__replay b { font: 700 clamp(30px, 4vw, 62px)/.95 var(--font-display); font-stretch: 110%; letter-spacing: -.03em; transition: color .5s var(--ease); }
.footer__replay:hover b { color: var(--kiss); }
.footer__sign { text-align: right; font-size: 15px; opacity: .8; }
.footer__sign em { font-size: 26px; }
.footer__mark span { display: inline-block; }
.footer__mark {
  margin: 60px 0 30px; text-align: center; white-space: nowrap;
  font: 900 clamp(40px, 9.6vw, 220px)/.8 var(--font-display); font-stretch: 150%; letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1px rgba(246, 240, 243, .35);
}
.footer__bottom { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: center; color: rgba(246, 240, 243, .66); padding-top: 22px; border-top: 1px solid rgba(246, 240, 243, .16); }
.footer__credit { margin-top: 16px; color: rgba(246, 240, 243, .66); }
.motion-toggle { min-height: 44px; padding: 0 18px; border: 1px solid rgba(246, 240, 243, .3); border-radius: 999px; font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--chrome-hi); transition: background-color .4s, color .4s; }
.motion-toggle:hover { background: var(--chrome-hi); color: var(--lacquer); }

/* ---------- Dossier dialog ---------- */
.dossier {
  position: fixed; inset: 0 0 0 auto; margin: 0; width: min(560px, 100vw); max-width: 100vw; height: 100%; max-height: 100%;
  padding: 0; border: 0; background: var(--lacquer); color: var(--chrome-hi); overflow-y: auto; overscroll-behavior: contain;
}
.dossier::backdrop { background: rgba(10, 3, 6, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.dossier[open] { animation: dossierIn .7s var(--ease) both; }
.dossier[open]::backdrop { animation: fadeIn .5s both; }
@keyframes dossierIn { from { transform: translateX(100%); } }
@keyframes fadeIn { from { opacity: 0; } }
.dossier__inner { padding: 28px clamp(20px, 3vw, 40px) 34px; min-height: 100%; display: flex; flex-direction: column; }
.dossier__top { display: flex; justify-content: space-between; align-items: center; color: rgba(246, 240, 243, .7); }
.dossier__close { position: relative; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(246, 240, 243, .3); transition: background-color .4s, transform .6s var(--ease); }
.dossier__close:hover { background: var(--kiss); border-color: var(--kiss); transform: rotate(90deg); }
.dossier__close i::before, .dossier__close i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; margin: -.75px 0 0 -8px; background: currentColor; transform: rotate(45deg); }
.dossier__close i::after { transform: rotate(-45deg); }
.dossier__caption { margin-top: 44px; color: #ffc6e8; }
.dossier__title { margin-top: 14px; font: 800 clamp(36px, 4.4vw, 56px)/.94 var(--font-display); font-stretch: 104%; letter-spacing: -.035em; }
.dossier__title em { font-weight: 400; }
.dossier__lede { margin-top: 16px; opacity: .78; }
.dossier__notes { margin-top: 30px; border-top: 1px solid rgba(246, 240, 243, .16); }
.dossier__notes a { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto auto; column-gap: 18px; padding: 16px 0; border-bottom: 1px solid rgba(246, 240, 243, .16); align-items: center; transition: background-color .4s; }
.dossier__notes a:hover strong { color: var(--kiss); }
.dossier__notes img { grid-row: 1 / 4; width: 64px; height: 84px; object-fit: cover; border-radius: 999px 999px 3px 3px; }
.dossier__notes span { opacity: .6; font-size: 10px; }
.dossier__notes strong { font: 700 24px/1.05 var(--font-display); font-stretch: 100%; letter-spacing: -.02em; transition: color .4s; }
.dossier__notes small { opacity: .7; font-size: 14px; }
.dossier__trace { margin-top: 30px; padding: 22px; border-radius: 18px; background: rgba(246, 240, 243, .05); border: 1px solid rgba(246, 240, 243, .12); }
.dossier__trace p:first-child { opacity: .6; }
.dossier__trace-line { margin-top: 10px; font-size: 18px; line-height: 1.4; }
.dossier__trace-line b { font: 800 30px/1 var(--font-display); color: var(--kiss); }
.dossier__bottom { margin-top: auto; padding-top: 30px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: rgba(246, 240, 243, .6); }

/* ---------- Pre-animation states (JS only, motion only; a head timer lifts them if scripts fail) ---------- */
.js.motion:not(.intro-done) .hero__kicker, .js.motion:not(.intro-done) .hero__copy, .js.motion:not(.intro-done) .hero__foot, .js.motion:not(.intro-done) .hero__count { opacity: 0; }

/* ---------- Sticky viewport layers for section-long canvases ---------- */
.sticky-layer { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.sticky-layer--top { z-index: 3; }
.sticky-layer canvas { position: sticky; top: 0; width: 100%; height: 100vh; display: block; }

/* ---------- Reduced motion composition ---------- */
.reduced .bottle__bridge, .reduced .bottle__turn, .reduced .cherry__hint { display: none; }
.reduced .pepper .note__hint { display: none; }

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1100px) {
  .rail { display: none; }
  .progress { display: block; position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 820; pointer-events: none; }
  .progress b { position: absolute; inset: 0; background: var(--kiss); transform-origin: 0 50%; transform: scaleX(0); }
  .site-nav { display: none; }
  .site-header { grid-template-columns: 1fr auto; }
  .site-header__chapter { justify-self: end; margin-right: 130px; }
}

@media (max-width: 860px) {
  :root { --header-h: 64px; }
  .rail { display: none; }
  .progress { display: block; position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 820; pointer-events: none; }
  .progress b { position: absolute; inset: 0; background: var(--kiss); transform-origin: 0 50%; transform: scaleX(0); }
  .site-header__chapter { display: none; }
  .btn-pill { height: 44px; padding: 0 18px; }
  .mono { font-size: 10px; }

  /* hero */
  .hero { min-height: 640px; }
  .hero__kicker { gap: 12px; flex-wrap: wrap; max-width: 80vw; }
  .hero__kicker span:first-child { display: none; }
  .hero__kicker span + span::before { margin-right: 12px; }
  .hero__kicker span:nth-child(2)::before { display: none; }
  .hero__word { font-size: clamp(80px, 25vw, 200px); }
  .hero__word--pretty { top: calc(var(--header-h) + 10svh); font-stretch: 92%; }
  .hero__word--xoxo { bottom: auto; top: calc(var(--header-h) + 10svh + clamp(80px, 25vw, 200px) * .8 + 1.5svh); font-stretch: 140%; }
  .hero__copy { top: auto; bottom: calc(var(--lane) + 146px); max-width: none; right: var(--gutter); }
  .hero__tagline { font-size: clamp(26px, 7.4vw, 36px); }
  .hero__lede { margin-top: 10px; font-size: 14px; }
  .hero__foot { grid-template-columns: 1fr auto; bottom: var(--lane); row-gap: 16px; }
  .hero__notes { grid-column: 1 / -1; grid-row: 1; justify-content: space-between; gap: 10px; font-size: 9.5px; letter-spacing: .1em; }
  .spray-btn { grid-row: 2; }
  .hero__scroll { grid-row: 2; }
  .hero__count { top: calc(var(--header-h) + 14px); }

  /* bottle */
  .bottle__window { --cx: 20%; --ct: 33%; --cb: 17%; --rad: 160px; }
  .bottle__film { object-fit: cover; }
  .bottle__title { top: calc(var(--header-h) + 44px); transform: none; font-size: clamp(64px, 20vw, 140px); }
  .bottle__deg { top: calc(var(--header-h) + 44px + clamp(64px, 20vw, 140px) * .8); bottom: auto; right: var(--gutter); transform: none; font-size: clamp(64px, 20vw, 140px); }
  .bottle__materials { top: auto; right: auto; left: var(--gutter); bottom: 104px; flex-direction: row; gap: 16px; }
  .bottle__materials li { font-size: 13px; }
  .bottle__line { bottom: 30px; font-size: 22px; max-width: 18ch; }
  .bottle__turn { display: none; }
  .bottle__bridge { bottom: 12svh; }
  .bottle__bridge ol { font-size: 29px; }

  /* pepper */
  .pepper { padding: calc(var(--header-h) + 30px) var(--gutter) 90px; }
  .pepper__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 14px; }
  .pepper__title { font-size: clamp(64px, 20vw, 160px); }
  .pepper__word--pink { font-stretch: 130%; }
  .pepper__word--pepper { padding-left: 0; font-stretch: 72%; }
  .plate--pepper { grid-column: 2 / 7; grid-row: 3; margin-top: 6vh; }
  .pepper__copy { grid-column: 1 / -1; grid-row: 4; margin-top: 40px; }

  /* cherry */
  .cherry__title { top: calc(var(--header-h) + 64px); font-size: clamp(64px, 19vw, 150px); }
  .ct-line:last-child { font-stretch: 96%; }
  .plate--cherry { right: var(--gutter); top: auto; bottom: 30svh; width: 40vw; transform: none; }
  .cherry__copy { width: auto; right: var(--gutter); bottom: calc(var(--lane) + 62px); }
  .cherry__copy .note__body, .cherry__copy .traits { display: none; }
  .cherry__copy .note__headline { font-size: 30px; }
  .pressure { left: var(--gutter); right: var(--gutter); width: auto; bottom: var(--lane); }
  .cherry__hint { right: auto; left: var(--gutter); bottom: calc(var(--lane) + 30px); text-align: left; }
  .cherry__break { right: auto; left: var(--gutter); top: 46%; }
  .cherry .note__head { right: var(--gutter); }

  /* musk */
  .musk { padding-bottom: 8vh; }
  .musk__inner { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 14px; }
  .musk__from { margin-top: 8vh; }
  .musk__title { font-size: clamp(44px, 14vw, 110px); font-stretch: 120%; line-height: .95; }
  .plate--musk { grid-column: 2 / 6; margin-top: 6vh; }
  .musk__copy { grid-column: 1 / -1; margin-top: 44px; padding-left: 0; }
  .musk__whisper { margin-top: 9vh; font-size: 28px; }

  /* trace */
  .trace { padding: calc(var(--header-h) + 10px) var(--gutter) 70px; }
  .trace__inner { grid-template-columns: 1fr; gap: 50px; min-height: 0; }
  .trace__title { font-size: clamp(50px, 15vw, 110px); }
  .dial { max-width: 460px; }
  .trace__foot { flex-direction: column; gap: 6px; }

  /* arrival */
  .arrival__mega { margin-top: 10px; }
  .arrival__grid { grid-template-columns: 1fr; margin-top: -4vw; gap: 40px; }
  .arrival__object { width: 78%; justify-self: center; }
  .spec div { grid-template-columns: 110px 1fr; }
  .faq { grid-template-columns: 1fr; margin-top: 80px; }


  .footer__sign { text-align: left; }
  .site-footer { padding-bottom: calc(var(--lane) + 8px); }
}

@media (max-width: 420px) {
  .hero__notes li { flex-direction: column; gap: 2px; }
  .btn-cta { min-height: 64px; padding-left: 28px; font-size: 18px; }
  .spec div { grid-template-columns: 100px 1fr; }
}

@media (max-height: 760px) and (min-width: 861px) {
  .hero__word { font-size: clamp(92px, 15vw, 300px); }
  .hero__copy { top: calc(var(--header-h) + 5vh + clamp(92px, 15vw, 300px) * .78 + 4vh); }
  .hero__word--pretty { top: calc(var(--header-h) + 5vh); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .grain { animation: none; }
  .env__sheen { animation: none; }
}
.reduced .loader { display: none !important; }

/* Software-rendered clients (no GPU): keep the compositor calm */
.software .grain, .software .env__sheen { animation: none; }
.software .env__tone, .software .site-header, .software .rail, .software .btn-pill { transition: none; }