/* Identiscents — index page · Option C (CONFIDENTIAL, local only). Option A's system — light studio, golden-ratio grid,
   Clash Display, one scrubbed master timeline — with the Option C brief: EVERYTHING IN CAPITALS, the living first frame,
   PLAY WITH SOUND, Grasse in depth layers, the technical drawing, the warehouse labels.
   φ = 1.618: type steps by √φ from 16px, spacing by φ (6 · 10 · 16 · 26 · 42 · 68 · 110), screen split at 38.2 / 61.8 %.
   Brand palette: #1A1918 black · #3A3835 dark · #9B9895 mid · #C8C6C2 silver · #E2E0DC border · #F8F8F6 off-white · #B85C38 accent. */
@font-face { font-family: "Clash Display"; src: url("./fonts/ClashDisplay-Variable.woff2") format("woff2"); font-weight: 200 700; font-display: swap; }   /* ITF Free Font License, self-hosted unmodified */
@font-face { font-family: "Caveat"; src: url("./fonts/caveat-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }   /* SIL OFL 1.1 (fonts/LICENSE-Caveat-OFL.txt) */
@font-face { font-family: "Caveat"; src: url("./fonts/caveat-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; background: #EFEEEA; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body { background: #EFEEEA; color: #1A1918; font-family: "Clash Display", system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-transform: inherit; }

.b {
  --t-xs: .7875rem; --t-0: 1rem; --t-1: 1.272rem; --t-2: 1.618rem; --t-3: 2.058rem; --t-4: 2.618rem; --t-5: 3.33rem; --t-6: 4.236rem; --t-7: 5.388rem; --t-8: 6.854rem; --t-10: 11.09rem;
  --s-1: 6px; --s-2: 10px; --s-3: 16px; --s-4: 26px; --s-5: 42px; --s-6: 68px; --s-7: 110px;
  --gut: clamp(20px, 6.18vw, 110px);
  --col: calc(38.197% - var(--gut));
  --w-xl: 200; --w-l: 300; --w-r: 400; --w-m: 500; --w-sb: 600; --w-b: 700;
  --ease: cubic-bezier(.19, 1, .22, 1);
  --bg: #EFEEEA; --edge: #E2E0DC; --text: #1A1918; --dark: #3A3835; --muted: #5E5B57; --mid: #9B9895;
  --hair: rgba(26, 25, 24, .4); --line: rgba(26, 25, 24, .13); --surface: rgba(255, 255, 255, .55);
  --accent: #B85C38;            /* Identiscents terracotta — every UI accent */
  --tint: #C8C6C2; --glow: #B85C38;
  /* the official logo (#4, assets/identiscents-logo-4.svg, 2380 × 540). Sized by its height; never stretched.
     Its viewBox already holds ≥ 1.2 "i"-dot heights of clear space; --logo-in pulls the ink onto the grid line. */
  --logo-h: 46px; --logo-foot: 60px; --logo-in: -.1232;
  --len: 1600vh;
  position: relative; color: var(--text);
  text-transform: uppercase;    /* owner brief: all text in capitals, everywhere */
}
.b__label { font-size: var(--t-xs); line-height: 1.272; font-weight: var(--w-m); letter-spacing: .16em; color: var(--muted); }

/* ---------- runway ---------- */
.b__scroll { position: relative; display: block; height: var(--len); pointer-events: none; }

/* ---------- preloader ---------- */
.b__pre { position: fixed; inset: 0; z-index: 60; background: var(--bg); }
.b__pre.is-off { display: none; }
.b__logo { display: block; width: auto; max-width: none; height: var(--logo-h); aspect-ratio: 2380 / 540; margin-left: calc(var(--logo-h) * var(--logo-in)); user-select: none; -webkit-user-drag: none; }
.b__pre-mark { position: absolute; left: var(--gut); top: calc((var(--s-7) - var(--logo-h)) / 2); line-height: 0; }
.b__pre-count { position: absolute; left: var(--gut); top: 61.803%; transform: translateY(-100%); font-weight: var(--w-xl); font-size: clamp(var(--t-8), 12.36vw, var(--t-10)); line-height: .88; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.b__pre-line { position: absolute; left: var(--gut); right: var(--gut); top: 61.803%; margin-top: var(--s-4); height: 1px; background: var(--line); overflow: hidden; }
.b__pre-line::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); }
.b__pre-label { position: absolute; left: var(--gut); top: 61.803%; margin-top: var(--s-5); font-size: var(--t-xs); font-weight: var(--w-m); letter-spacing: .16em; color: var(--muted); }

/* ---------- stage (back → front: glow · light · canvas · map · overlay · marks · panels · grain) ---------- */
.b__stage { position: fixed; inset: 0; overflow: hidden; background: var(--bg); }
.b__glow { position: absolute; inset: -10%; z-index: 0; pointer-events: none; opacity: var(--glow-o, .3);
  background:
    radial-gradient(36% 44% at 61.8% 46%, color-mix(in srgb, var(--glow) 16%, transparent), transparent 70%),
    radial-gradient(60% 40% at 50% 100%, color-mix(in srgb, var(--tint) 30%, transparent), transparent 70%),
    radial-gradient(30% 30% at 10% 12%, rgba(255, 255, 255, .7), transparent 70%); }
/* the first frame is alive: a soft window light drifts over the paper, the paper's grain breathes */
.b__light { position: absolute; inset: -25%; z-index: 1; pointer-events: none; opacity: .55;
  background: radial-gradient(34% 30% at 34% 36%, rgba(255, 238, 214, .75), rgba(255, 238, 214, 0) 70%), radial-gradient(28% 24% at 70% 66%, rgba(255, 250, 242, .6), rgba(255, 250, 242, 0) 70%); }
.b.is-alive .b__light { animation: b-light 24s ease-in-out infinite alternate; }
@keyframes b-light { 0% { transform: translate3d(-3%, -2%, 0) scale(1); } 50% { transform: translate3d(2%, 1.5%, 0) scale(1.04); } 100% { transform: translate3d(4%, -1%, 0) scale(1.02); } }
.b__gl { position: absolute; inset: 0; z-index: 2; }
.b__gl canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.b__overlay { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.b__lead-path { fill: none; stroke: var(--hair); stroke-width: 1; vector-effect: non-scaling-stroke; }
.b__lead-dot { fill: var(--accent); }
.b__lead-ring { fill: none; stroke: var(--hair); stroke-width: 1; }
.b__grain { position: absolute; inset: 0; z-index: 8; pointer-events: none; opacity: .045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.b.is-alive .b__grain { animation: b-grain 7s ease-in-out infinite alternate; }
@keyframes b-grain { from { opacity: .036; background-position: 0 0; } to { opacity: .062; background-position: 7px 4px; } }

/* ---------- bar: wordmark · progress hairline · chapter index ---------- */
.b__bar { position: fixed; z-index: 30; top: 0; left: 0; right: 0; height: var(--s-7); padding: 0 var(--gut); display: grid; grid-template-columns: 1fr minmax(0, 1.618fr) auto; column-gap: var(--s-5); align-items: center; pointer-events: none; transition: background-color .6s var(--ease); }
.b__brand { justify-self: start; display: block; line-height: 0; pointer-events: auto; text-decoration: none; border-radius: 2px; }
.b__brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; }
.b__progress { position: relative; height: 1px; background: var(--line); overflow: hidden; }
.b__progress-fill { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.b__index { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 14.4em; white-space: nowrap; text-shadow: 0 0 8px rgba(239, 238, 234, .95), 0 0 3px rgba(239, 238, 234, .95); font-size: var(--t-xs); font-weight: var(--w-m); letter-spacing: .16em; }
.b__index-num { font-weight: var(--w-b); font-variant-numeric: tabular-nums; }
.b__index-sep { flex: 1 1 var(--s-4); min-width: var(--s-4); height: 1px; background: var(--hair); }   /* stretches: the name always ends on the right margin */
.b__index-name { color: var(--dark); }

/* ---------- panels ---------- */
.b__panels { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.b__panel { position: absolute; inset: 0; padding: 0 var(--gut); opacity: 0; visibility: hidden; will-change: transform, opacity; }
.b__col { position: absolute; left: var(--gut); top: calc(38.197% - var(--s-5)); width: var(--col); max-width: 34rem; }
.b__step { display: inline-flex; align-items: center; gap: var(--s-2); height: var(--s-3); margin-bottom: var(--s-4); font-size: var(--t-xs); font-weight: var(--w-m); letter-spacing: .16em; color: var(--text); }
.b__step::before { content: ""; width: var(--s-3); height: 2px; background: var(--accent); }
.b__step b { font-weight: var(--w-b); }
/* capitals: a touch less size and tracking than lowercase would take, so every line keeps its measure */
.b__title { font-weight: var(--w-l); font-size: clamp(var(--t-3), 3.6vw, var(--t-5)); line-height: 1.02; letter-spacing: -.012em; text-wrap: balance; }
.b__title strong { font-weight: var(--w-sb); }
.b__title--m { font-size: clamp(1.6rem, 2.62vw, 2.618rem); line-height: 1.06; letter-spacing: -.008em; }
.b__kick { max-width: 34ch; margin-bottom: var(--s-4); font-weight: var(--w-r); font-size: var(--t-0); line-height: 1.5; letter-spacing: .045em; color: var(--muted); text-wrap: pretty; }
.b__text { margin-top: var(--s-4); max-width: 34ch; font-weight: var(--w-r); font-size: var(--t-0); line-height: 1.5; letter-spacing: .045em; color: var(--muted); text-wrap: pretty; }
.b__text strong, .b__kick strong { font-weight: var(--w-m); color: var(--text); }

/* opening: the white page */
.b__panel--idea { opacity: 1; visibility: visible; }
.b__cue { position: absolute; left: 50%; bottom: var(--s-5); transform: translateX(-50%); display: flex; align-items: center; gap: var(--s-3); white-space: nowrap; }
.b__cue-track { position: relative; width: var(--s-6); height: 1px; background: var(--line); overflow: hidden; }
.b__cue-line { position: absolute; inset: 0 auto 0 0; width: var(--s-4); background: var(--accent); }

/* PLAY WITH SOUND — browsers keep sound off until a click */
.b__gate { position: fixed; z-index: 35; left: 50%; bottom: calc(var(--s-5) + 44px); transform: translateX(-50%); display: grid; justify-items: center; gap: 12px; transition: opacity .6s var(--ease), visibility .6s; }
.b__gate.is-off { opacity: 0; visibility: hidden; pointer-events: none; }
.b__gate-btn { position: relative; display: inline-flex; align-items: center; gap: 14px; height: 56px; padding: 0 28px 0 22px; border-radius: 999px; background: var(--text); color: var(--bg); font-size: var(--t-xs); font-weight: var(--w-sb); letter-spacing: .2em; transition: background-color .5s var(--ease), transform .5s var(--ease); }
.b__gate-btn i { position: relative; width: 22px; height: 22px; border-radius: 50%; border: 1px solid rgba(239, 238, 234, .5); }
.b__gate-btn i::before { content: ""; position: absolute; left: 8px; top: 6px; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.b__gate-btn::after { content: ""; position: absolute; inset: -6px; border-radius: inherit; border: 1px solid rgba(26, 25, 24, .22); animation: b-ring 2.8s var(--ease) infinite; pointer-events: none; }
@keyframes b-ring { 0% { opacity: .9; transform: scale(.96); } 70%, 100% { opacity: 0; transform: scale(1.12); } }
.b__gate-btn:hover, .b__gate-btn:focus-visible { background: var(--accent); outline: none; }
.b__gate-btn:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
.b__gate-note { font-size: 11px; font-weight: var(--w-m); letter-spacing: .16em; color: var(--muted); }

/* packaging tags */
.b__tags { position: absolute; inset: 0; pointer-events: none; }
.b__tag { position: absolute; left: 0; top: 0; white-space: nowrap; text-align: center; will-change: transform, opacity; opacity: 0; }
.b__tag-num { display: block; font-size: var(--t-xs); font-weight: var(--w-b); letter-spacing: .16em; color: var(--accent); }
.b__tag-name { display: block; margin-top: 4px; font-size: var(--t-0); font-weight: var(--w-m); letter-spacing: .06em; }
.b__tag-spec { display: block; margin-top: 2px; font-size: var(--t-xs); font-weight: var(--w-l); letter-spacing: .08em; color: var(--muted); }

/* the colour configurator (packaging): small swatches, uppercase labels; the only interactive thing on the stage */
.b__cfg { margin-top: var(--s-5); display: grid; gap: 14px; pointer-events: auto; max-width: 30rem; }
.b__cfg-row { display: grid; grid-template-columns: 4.6em auto; grid-template-rows: auto auto; column-gap: var(--s-3); row-gap: 5px; align-items: center; }
.b__cfg-k { grid-row: 1 / 3; font-size: 11px; font-weight: var(--w-sb); letter-spacing: .16em; color: var(--text); align-self: start; padding-top: 6px; }
.b__cfg-sw { display: flex; flex-wrap: wrap; gap: 8px; }
.b__cfg-v { font-size: 10.5px; font-weight: var(--w-m); letter-spacing: .14em; color: var(--muted); min-height: 1.2em; }
.b__cfg-pick { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.b__sw { position: relative; width: 26px; height: 26px; border-radius: 50%; padding: 0; display: grid; place-items: center; transition: transform .4s var(--ease); }
.b__sw i { width: 20px; height: 20px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(26, 25, 24, .22); }
.b__sw[data-fin="gloss"] i { background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .85) 0 12%, rgba(255, 255, 255, 0) 34%), var(--c); }
.b__sw[data-fin="metal"] i { background: linear-gradient(135deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .18) 70%, rgba(255, 255, 255, .35)), var(--c); }
.b__sw--custom i { background: conic-gradient(from 200deg, #B85C38, #D8B46A, #8E9C6A, #5E7C9A, #7E5E8A, #B85C38) !important; }
.b__sw::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid transparent; transition: border-color .4s var(--ease); }
.b__sw.is-on::after { border-color: var(--text); }
.b__sw:hover { transform: scale(1.08); }
.b__sw:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
.b__sw--txt { width: auto; height: 26px; border-radius: 999px; padding: 0 9px; border: 1px solid var(--line); font-size: 9.5px; font-weight: var(--w-m); letter-spacing: .1em; white-space: nowrap; color: var(--muted); }
.b__sw--txt::after { display: none; }
.b__sw--txt.is-on { border-color: var(--text); color: var(--text); }
.b__sw--txt:hover { transform: none; border-color: var(--hair); }
.b__cfg-row--print .b__cfg-sw { gap: 6px; }
.b__cfg-row--print .b__cfg-v { display: none; }

/* the technical drawing (registered to the 3D bottle) */
.b__dr { transition: none; }
.b__dr-out { fill: none; stroke: var(--text); stroke-width: 1.15; stroke-dasharray: 1 2; stroke-linejoin: round; }

/* marks: journey stations + warehouse zones, projected from the scene */
.b__marks { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.b__mark { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 3px; white-space: nowrap; opacity: 0; will-change: transform, opacity; }
.b__mark b { font-size: var(--t-xs); font-weight: var(--w-b); letter-spacing: .16em; color: var(--mid); transition: color .5s var(--ease); }
.b__mark span { font-size: var(--t-0); font-weight: var(--w-m); letter-spacing: .08em; color: var(--muted); transition: color .5s var(--ease); }
.b__mark.is-on b { color: var(--accent); }
.b__mark.is-on span { color: var(--text); }
.b__zone { position: absolute; left: 0; top: 0; display: grid; justify-items: center; white-space: nowrap; opacity: 0; will-change: transform, opacity; text-decoration: none; color: inherit; pointer-events: none; border-radius: 2px; }
.b__zone.is-live { pointer-events: auto; cursor: pointer; }   /* links to identiscents.com (round 2) */
.b__zone span { transition: border-color .4s var(--ease), background-color .4s var(--ease), color .4s var(--ease); }
.b__zone:hover span, .b__zone:focus-visible span { border-color: var(--text); background: #fff; }
.b__zone:focus-visible { outline: none; }
.b__zone:focus-visible span { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent); }
.b__zone span::after { content: " \2197"; font-weight: var(--w-m); color: var(--accent); }
.b__zone span { display: block; padding: 5px 10px 4px; border: 1px solid var(--line); background: rgba(239, 238, 234, .88); font-size: 11px; font-weight: var(--w-sb); letter-spacing: .18em; color: var(--text); }
.b__zone::after { content: ""; width: 1px; height: 14px; background: var(--accent); }
/* journey sentence: the active stage word lights up */
.b__w { position: relative; color: var(--muted); transition: color .5s var(--ease); white-space: nowrap; }
.b__w::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.b__w.is-on { color: var(--text); }
.b__w.is-on::after { transform: scaleX(1); }
.b__w.is-past { color: var(--dark); }
/* one partner: the full chain, spelled out */
.b__chain { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 0; margin-top: var(--s-5); list-style: none; }
.b__chain li { position: relative; display: inline-flex; align-items: center; font-size: 11px; font-weight: var(--w-sb); letter-spacing: .16em; color: var(--mid); transition: color .5s var(--ease); }
.b__chain li + li::before { content: ""; width: 22px; height: 1px; margin: 0 8px; background: var(--hair); }
.b__chain li.is-on { color: var(--text); }
.b__chain li::after { content: ""; position: absolute; left: calc(100% - .5em); top: -6px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); opacity: 0; transition: opacity .5s var(--ease); }
.b__chain li.is-on:last-child::after { opacity: 1; }

/* finale: two lines, one per visual moment */
.b__fin { display: block; }
.b__nw { white-space: nowrap; }
.b__fin + .b__fin { margin-top: .08em; }

.b__ctas { display: flex; gap: var(--s-2); margin-top: var(--s-5); pointer-events: auto; }
.b__btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3); height: 52px; min-width: 210px; padding: 0 var(--s-4); border-radius: 999px; border: 1px solid var(--text); text-decoration: none; font-size: var(--t-xs); font-weight: var(--w-sb); letter-spacing: .16em; transition: background-color .5s var(--ease), color .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); }
.b__btn--solid { background: var(--text); color: var(--bg); }
.b__btn--solid:hover, .b__btn--solid:focus-visible { background: var(--accent); border-color: var(--accent); color: #fff; outline: none; }
.b__btn:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent); }
.b__btn svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.5; }

/* golden guides (press G) */
.b__guides { position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0; transition: opacity .4s; }
.b.is-guides .b__guides { opacity: 1; }
.b__guides i, .b__guides b { position: absolute; background: rgba(184, 92, 56, .6); }
.b__guides i { top: 0; bottom: 0; width: 1px; } .b__guides i.is-mid { background: rgba(26, 25, 24, .15); }
.b__guides b { left: 0; right: 0; height: 1px; }
.b__guides-note { position: absolute; right: var(--gut); bottom: var(--s-3); font-size: 11px; letter-spacing: .14em; color: var(--accent); }

/* ---------- footer: contact (scrolls over the stage) ---------- */
.b__foot-s { position: relative; z-index: 20; background: var(--bg); border-top: 1px solid var(--line); padding: calc(var(--s-7) + var(--s-6)) var(--gut) var(--s-5); display: grid; grid-template-rows: 1fr auto; grid-template-columns: minmax(0, 1fr); }
.b__foot-in { display: grid; grid-template-columns: 38.197% 1fr; column-gap: var(--s-6); align-content: start; }
.b__foot-in .b__step { grid-column: 1 / -1; }
.b__foot-h { grid-column: 1; font-weight: var(--w-l); font-size: clamp(var(--t-3), 3.9vw, var(--t-5)); line-height: 1.02; letter-spacing: -.012em; }
.b__foot-web { grid-column: 2; align-self: end; justify-self: start; display: inline-flex; align-items: center; gap: var(--s-3); font-size: clamp(var(--t-1), 2.3vw, var(--t-3)); font-weight: var(--w-l); letter-spacing: .02em; text-decoration: none; border-bottom: 1px solid var(--text); padding-bottom: 6px; transition: color .5s var(--ease), border-color .5s var(--ease); }
.b__foot-web svg { width: .5em; height: .5em; stroke: currentColor; fill: none; stroke-width: 1.2; }
.b__foot-web:hover, .b__foot-web:focus-visible { color: var(--accent); border-color: var(--accent); outline: none; }
.b__foot-dl { grid-column: 2; margin-top: var(--s-6); display: grid; max-width: 34rem; }
.b__foot-dl div { display: grid; grid-template-columns: 38.2% 1fr; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
.b__foot-dl div:first-child { border-top: 1px solid var(--text); }
.b__foot-dl dt { font-size: var(--t-xs); font-weight: var(--w-m); letter-spacing: .16em; color: var(--muted); padding-top: .2em; }
.b__foot-dl dd { font-size: var(--t-0); }
.b__tbc { display: inline-block; padding: 2px 8px; border: 1px dashed var(--accent); border-radius: 999px; font-size: var(--t-xs); font-weight: var(--w-sb); letter-spacing: .16em; color: var(--accent); }
.b__foot-note { grid-column: 2; margin-top: var(--s-3); font-size: var(--t-xs); font-weight: var(--w-l); letter-spacing: .08em; color: var(--muted); }
.b__foot-base { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--line); margin-top: var(--s-7); }
.b__foot-mark { line-height: 0; }
.b__foot-mark .b__logo { --logo-h: var(--logo-foot); }
.b.is-foot .b__bar { background: color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.b.is-foot .b__progress { opacity: 0; }

/* no-WebGL fallback: quiet typographic stage */
.b__fallback { display: none; position: absolute; inset: 0; z-index: 2; place-items: center; align-content: center; gap: var(--s-4); }
.b__fallback .b__logo { --logo-h: clamp(64px, 9vw, 140px); margin-left: 0; }
.b__fallback small { font-size: var(--t-xs); letter-spacing: .16em; color: var(--muted); }
.b.is-nogl .b__fallback { display: grid; transition: opacity .6s var(--ease); }
.b.is-nogl.is-early .b__fallback { opacity: 0; }
@media (min-width: 768px) { .b__fallback { padding-left: 38.197%; } .b__fallback .b__logo { --logo-h: clamp(56px, 6.18vw, 96px); } }   /* desktop: on the right of the text column, never under it */
.b.is-nogl .b__gl, .b.is-nogl .b__overlay, .b.is-nogl .b__tags, .b.is-nogl .b__marks { display: none; }

/* ===== storyboard scenes ===== */
/* bar: Play (autoplay) · Sound (music + voice) · chapter index */
.b__right { justify-self: end; display: inline-flex; align-items: center; gap: var(--s-4); pointer-events: auto; }
.b__ctl { display: inline-flex; gap: var(--s-1); }
.b__cbtn { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 10px; border: 1px solid var(--line); border-radius: 999px; background: rgba(239, 238, 234, .78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); font-size: 11px; font-weight: var(--w-m); letter-spacing: .14em; color: var(--muted); transition: border-color .5s var(--ease), color .5s var(--ease), background-color .5s var(--ease); }
.b__cbtn:hover, .b__cbtn:focus-visible { border-color: var(--hair); color: var(--text); outline: none; }
.b__cbtn:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.b__cbtn i { position: relative; width: 8px; height: 8px; flex: none; }
.b__play i::before { content: ""; position: absolute; inset: 0; background: currentColor; clip-path: polygon(10% 0, 100% 50%, 10% 100%); }
.b__play.is-on i::before { clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0); }
.b__snd i::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; }
.b__snd.is-on i::before { top: 0; bottom: 0; height: auto; background: linear-gradient(90deg, currentColor 0 1.5px, transparent 1.5px 3.25px, currentColor 3.25px 4.75px, transparent 4.75px 6.5px, currentColor 6.5px 8px); clip-path: polygon(0 40%, 18% 40%, 18% 60%, 0 60%, 0 40%, 41% 10%, 59% 10%, 59% 90%, 41% 90%, 41% 10%, 82% 25%, 100% 25%, 100% 75%, 82% 75%); animation: b-eq 1.1s ease-in-out infinite alternate; }
.b__cbtn.is-on { color: var(--text); border-color: var(--text); }
@keyframes b-eq { to { transform: scaleY(.55); } }

/* 01 · the opening line; it lives in the map layer, so IDEA can become the centre of the mind map */
.b__idea { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(17ch, 86vw); text-align: center; font-weight: var(--w-l); font-size: clamp(var(--t-3), 4.3vw, 4.6rem); line-height: 1.04; letter-spacing: -.01em; text-wrap: balance; }
.b__iw { display: inline-block; overflow: hidden; vertical-align: top; padding: .03em .02em; margin: -.03em -.02em; transform-origin: 50% 50%; will-change: transform, opacity; }
.b__iw-in { display: inline-block; }
.b__iw:nth-child(n+4) { font-weight: var(--w-sb); }   /* "with an idea." as in Option A */
.b__iw--dot { overflow: visible; }
.b__iw--dot .b__iw-in { width: .26em; }
/* the full stop: a drop of fresh ink, still bleeding softly into the paper */
.b__ink { position: relative; display: inline-block; width: .15em; height: .15em; margin-left: .03em; border-radius: 50%; background: radial-gradient(circle at 42% 40%, #2a2826 0, #1A1918 55%, #141312 100%); }
.b__ink::after { content: ""; position: absolute; inset: -.05em; border-radius: 50%; background: radial-gradient(circle, rgba(26, 25, 24, .35), rgba(26, 25, 24, 0) 70%); filter: blur(1px); opacity: .7; }
.b.is-alive .b__ink::after { animation: b-bleed 9s cubic-bezier(.2, .6, .2, 1) infinite alternate; }
@keyframes b-bleed { from { transform: scale(1); opacity: .55; } to { transform: scale(1.55); opacity: .2; } }

/* 01–02 · the mind map: hand-drawn ink on paper */
.b__map { position: absolute; inset: 0; z-index: 3; pointer-events: none; --mx: 0; --mf: 0; transform: translateX(calc(var(--mx) * 11.803vw)) scale(calc(1 - var(--mx) * .16)); transform-origin: 50% 50%;
  -webkit-mask-image: linear-gradient(to top, transparent calc(var(--mf) * 130% - 30%), #000 calc(var(--mf) * 130%)); mask-image: linear-gradient(to top, transparent calc(var(--mf) * 130% - 30%), #000 calc(var(--mf) * 130%)); }
.b__mm { position: absolute; inset: 0; overflow: visible; }
.b__mm path { fill: none; stroke-dasharray: 1 2; stroke-linecap: round; stroke-linejoin: round; }   /* stroke-dashoffset: an attribute, scrubbed by the timeline */
.b__mm .b__mm-measure { stroke: none; stroke-dasharray: none; }
.b__mm-ring { stroke: var(--text); stroke-width: 2.2; }
.b__mm-ring--2 { stroke-width: 1.1; opacity: .55; }
.b__mm-line { stroke: var(--text); stroke-width: 1.6; opacity: .85; }
.b__mm-line--2 { stroke-width: 1.2; opacity: .6; }
.b__mm-under { stroke: var(--accent); stroke-width: 2.6; opacity: 1; }
.b__mm text { font-family: "Caveat", "Clash Display", cursive; fill: var(--text); text-transform: uppercase; }
.b__mm-k1 text { font-size: var(--f1, 34px); font-weight: 700; letter-spacing: .03em; }
.b__mm-k2 text { font-size: var(--f2, 26px); font-weight: 500; fill: var(--dark); letter-spacing: .03em; }
.b__mm .b__mm-dot { stroke: rgba(26, 25, 24, .55); stroke-width: 1; stroke-dasharray: none; }
.b__mm-dot:nth-child(1) { fill: #B85C38; } .b__mm-dot:nth-child(2) { fill: #C8C6C2; } .b__mm-dot:nth-child(3) { fill: #1A1918; }

/* 03 · fragrance: Grasse in depth layers — back · hills · town · THE TEXT · the garden in front */
.b__ph { position: absolute; inset: 0; }
.b__ph-frame { position: absolute; left: 50px; right: 50px; top: 50px; bottom: 112px; overflow: hidden; border-radius: 2px; background: #B9B0A4; will-change: transform; }
.b__ph-l { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; will-change: transform; }
.b__ph-c { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.b__ph-shade { position: absolute; inset: 0; background: radial-gradient(60% 46% at 50% 45%, rgba(26, 25, 24, .64), rgba(26, 25, 24, .26) 68%, rgba(26, 25, 24, .05)), linear-gradient(to bottom, rgba(26, 25, 24, .18), rgba(26, 25, 24, 0) 30%); }
.b__ph-tag { position: absolute; left: var(--gut); top: var(--s-5); }
.b__ph-tag .b__step { color: #fff; margin: 0; }
.b__ph-copy { position: absolute; inset: 0 6% 8%; display: grid; place-items: center; will-change: transform; }
.b__ph-line { grid-area: 1 / 1; max-width: 15ch; text-align: center; color: #fff; font-weight: var(--w-l); font-size: clamp(2.4rem, 5.9vw, 6.6rem); line-height: .98; letter-spacing: -.01em; text-wrap: balance; text-shadow: 0 2px 30px rgba(26, 25, 24, .35), 0 1px 3px rgba(26, 25, 24, .25); }
.b__ph-line strong { font-weight: var(--w-sb); }
.b__kw { position: absolute; left: 50px; right: 50px; bottom: 0; height: 112px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px var(--s-4); list-style: none; }
.b__kw-i { position: relative; display: inline-grid; font-size: var(--t-xs); font-weight: var(--w-r); letter-spacing: .12em; color: #75726E; transition: color .5s var(--ease); }   /* 4.5:1 on the page: readable before it turns bold */
.b__kw-i::after { content: attr(data-t); grid-area: 1 / 1; height: 0; visibility: hidden; overflow: hidden; font-weight: var(--w-sb); }   /* reserves the bold width: nothing shifts */
.b__kw-i + .b__kw-i::before { content: ""; position: absolute; left: calc(var(--s-4) / -2 - 2px); top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: var(--edge); }
.b__kw-i.is-on { color: var(--text); font-weight: var(--w-sb); }

/* 09–10 · the finale on the straight road, then the truck's side on white */
.b__panel--brand .b__end { position: absolute; left: 0; right: 0; top: 72%; display: grid; justify-items: center; gap: var(--s-4); text-align: center; }
.b__tagline { font-size: clamp(var(--t-1), 1.9vw, var(--t-2)); line-height: 1.1; font-weight: var(--w-m); letter-spacing: .32em; margin-right: -.32em; }
.b__panel--brand .b__ctas { margin-top: 0; }

/* footer: clients — the real logos from identiscents.com/clients (assets/clients/SOURCE.txt), greyscale, even optical
   size, two calm rows drifting in opposite directions (a seamless loop: each row holds its list twice) */
.b__clients { min-width: 0; padding-bottom: var(--s-7); margin-bottom: var(--s-6); border-bottom: 1px solid var(--line); }
.b__clients-h { font-weight: var(--w-l); font-size: clamp(var(--t-2), 2.6vw, var(--t-4)); line-height: 1.02; letter-spacing: -.008em; margin-bottom: var(--s-5); }
.b__mq { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); margin: 0 calc(var(--gut) * -1); padding: var(--s-4) 0; border-top: 1px solid var(--text); border-bottom: 1px solid var(--line); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.b__mq-row { display: flex; width: max-content; animation: b-mq 92s linear infinite; }
.b__mq-row--rev { animation-direction: reverse; animation-duration: 104s; }
.b__mq:hover .b__mq-row { animation-play-state: paused; }
.b__mq-track { display: flex; list-style: none; flex: none; }
.b__mq-track li { flex: none; display: grid; place-items: center; width: 212px; height: 112px; }
.b__mq-track img { display: block; max-width: 176px; height: auto; filter: grayscale(1); opacity: .74; user-select: none; -webkit-user-drag: none; }
@keyframes b-mq { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* wide shots (warehouse, journey): the scene softly fades out under the text column */
@media (min-width: 768px) {
  .b__panel--inventory::before, .b__panel--journey::before, .b__panel--partner::before, .b__panel--finale::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 52%; pointer-events: none;
    background: linear-gradient(90deg, rgba(239, 238, 234, .94) 0, rgba(239, 238, 234, .82) 55%, rgba(239, 238, 234, 0)); }
}

/* ---------- mobile ---------- */
@media (max-width: 767px) {
  .b { --gut: 20px; --col: calc(100% - 40px); --logo-h: 34px; --logo-foot: 44px; }
  .b__bar { height: var(--s-6); grid-template-columns: 1fr 1fr; }
  .b__progress { display: none; }
  .b__pre-mark { top: calc((var(--s-6) - var(--logo-h)) / 2); }
  .b__index { min-width: 0; }
  .b__col { top: auto; bottom: var(--s-6); }
  .b__panel::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 52%; background: linear-gradient(to top, rgba(239, 238, 234, .97) 50%, rgba(239, 238, 234, 0)); pointer-events: none; }
  .b__panel--idea::before, .b__panel--brand::before, .b__panel--fragrance::before { display: none; }
  .b__title { font-size: clamp(1.75rem, 8.4vw, var(--t-3)); }
  .b__title--m { font-size: clamp(1.4rem, 6.4vw, 1.9rem); }
  .b__kick, .b__text { font-size: .875rem; line-height: 1.5; letter-spacing: .04em; }
  .b__text { margin-top: var(--s-3); }
  .b__kick { margin-bottom: var(--s-3); }
  .b__tag-name { font-size: 12px; margin-top: 2px; }
  .b__cfg { margin-top: var(--s-3); gap: 8px; }
  .b__cfg-row { grid-template-columns: 4em auto; row-gap: 0; }
  .b__cfg-k { font-size: 10px; padding-top: 5px; }
  .b__cfg-v { display: none; }
  .b__sw { width: 24px; height: 24px; }
  .b__sw i { width: 18px; height: 18px; }
  .b__cfg-sw { gap: 4px; }
  .b__sw--txt { width: auto; height: 24px; padding: 0 7px; font-size: 9px; letter-spacing: .06em; }
  .b__tag-num { font-size: 10px; }
  .b__tag-spec { font-size: 10px; }
  .b__mark span { font-size: var(--t-xs); font-weight: var(--w-sb); }
  .b__mark b { font-size: 10px; }
  .b__zone span { font-size: 9.5px; padding: 7px 8px 6px; letter-spacing: .14em; }   /* ≥ 24 px tap targets */
  .b__chain { margin-top: var(--s-4); }
  .b__chain li { font-size: 9.5px; letter-spacing: .12em; }
  .b__chain li + li::before { width: 12px; margin: 0 5px; }
  .b__ctas { flex-direction: column; width: min(320px, 100%); }
  .b__idea { width: min(14ch, 88vw); font-size: clamp(1.9rem, 9.4vw, 2.6rem); }
  .b__gate { bottom: calc(var(--s-5) + 40px); }
  .b__gate-btn { height: 52px; padding: 0 24px 0 18px; letter-spacing: .16em; }
  .b__foot-s { padding-top: calc(var(--s-6) + var(--s-6)); }
  .b__foot-in { grid-template-columns: 1fr; }
  .b__foot-h, .b__foot-web, .b__foot-dl, .b__foot-note { grid-column: 1; }
  .b__foot-web { margin-top: var(--s-5); font-size: var(--t-1); }
  .b__foot-dl { margin-top: var(--s-5); }
  .b__foot-base { flex-direction: column; align-items: flex-start; gap: var(--s-4); margin-top: var(--s-6); }
  .b__right { gap: var(--s-2); }
  .b__index-sep, .b__index-name { display: none; }
  .b__cbtn { height: 28px; padding: 0 9px 0 8px; letter-spacing: .1em; }
  .b__snd span { display: none; }
  .b__snd { padding: 0 9px; }
  .b__map { transform: none; }
  .b__ph-frame { left: 16px; right: 16px; top: 16px; bottom: 140px; }
  .b__ph-tag { left: var(--s-4); top: var(--s-4); }
  .b__ph-copy { inset: 0 5% 12%; }
  .b__ph-line { font-size: clamp(1.8rem, 9.2vw, 2.6rem); max-width: 12ch; }
  .b__kw { left: 16px; right: 16px; height: 140px; gap: 4px var(--s-4); align-content: center; }
  .b__kw-i { font-size: 10.5px; letter-spacing: .1em; }
  .b__panel--brand .b__end { top: 58%; }
  .b__panel--brand .b__ctas { width: auto; }
  .b__tagline { font-size: var(--t-0); letter-spacing: .26em; margin-right: -.26em; }
  .b__mq-track li { width: 150px; height: 86px; }
  .b__mq-track img { max-width: 124px; transform: scale(.78); }
}
@media (prefers-reduced-motion: reduce) {
  .b__cue-line { display: none; }
  .b__w, .b__w::after, .b__mark b, .b__mark span { transition: none; }
  .b__mq { -webkit-mask-image: none; mask-image: none; margin: 0; }
  .b__mq-row { animation: none; width: auto; display: block; }
  .b__mq-track[aria-hidden] { display: none; }
  .b__mq-track { flex-wrap: wrap; justify-content: center; }
  .b.is-alive .b__light, .b.is-alive .b__grain, .b.is-alive .b__ink::after, .b__gate-btn::after { animation: none; }
}