/* daily — motion layer styles. Loaded after style.css on every page.

   Everything that moves is written under html.motion. motion.js adds that class only when
   GSAP, ScrollTrigger and Lenis loaded and reduced motion is off (OS setting or ?motion=reduce).
   Without it every section below is in its normal, readable, static state:
   the 3D story is a heading, her photo and six stacked cards; the marquee is one centred line.
   The wordmark never animates. Gold fills shapes only; it never sets small text. */

/* ------------------------------------------------------------ scroll container */
/* body{overflow-x:hidden} turns body into a scroll container, which stops the sticky header from
   sticking and makes pins unpredictable; clip keeps the same visual result without that. */
html body { overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }          /* Lenis does the smoothing; native smooth fights it */
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ------------------------------------------------------------ reduced motion */
/* the OS setting is covered by style.css; html.rm also covers ?motion=reduce */
html.rm { scroll-behavior: auto; }
html.rm *, html.rm *::before, html.rm *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; transition-delay: 0s !important;
}
html.rm .rv { opacity: 1 !important; transform: none !important; }
html.rm .hero img { transform: none; }

/* registered so CSS can transition them (fan hover) and GSAP can tween them */
@property --sx { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --sy { syntax: '<percentage>'; inherits: false; initial-value: 0%; }
@property --sr { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --lift { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --rk { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --sc { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --tx { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --ty { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ------------------------------------------------------------ hero */
.motion .hero img { animation: none !important; transition: scale 1.3s cubic-bezier(.2,.7,.2,1); will-change: transform; }
/* desktop depth layer (motion.js): the panels fold back on scroll, hinged on their inner edges, and the
   photos drift against the copy with the mouse. Static and phone layouts are untouched. */
.motion .hero.is-3d { perspective: 1500px; perspective-origin: 50% 45%; }
.motion .hero.is-3d figure { border-radius: var(--fr, 0px); will-change: transform; backface-visibility: hidden; }
.motion .hero.is-3d figure:nth-child(1) { transform-origin: 100% 50%; }
.motion .hero.is-3d figure:nth-child(3) { transform-origin: 0% 50%; }
.motion[dir="rtl"] .hero.is-3d figure:nth-child(1) { transform-origin: 0% 50%; }
.motion[dir="rtl"] .hero.is-3d figure:nth-child(3) { transform-origin: 100% 50%; }
.motion .hero h1 .hl-w { transform-origin: 50% 90%; }
.motion .hero h1 .hl-w { display: inline-block; will-change: transform; }
.scroll-cue { display: none; }
.motion .scroll-cue {
  display: flex; position: absolute; z-index: 2; inset-inline-end: var(--gut); bottom: clamp(36px, 8vh, 84px);
  flex-direction: column; align-items: center; gap: 12px; color: #fff; pointer-events: none;
  font: 600 .66rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; text-shadow: 0 1px 12px rgba(0,0,0,.35);
}
.motion .scroll-cue i { width: 1px; height: 64px; background: rgba(255,255,255,.35); position: relative; overflow: hidden; }
.motion .scroll-cue i::after { content: ""; position: absolute; inset: 0; background: #fff; transform-origin: 50% 0; transform: translateY(100%); animation: cue 2.4s cubic-bezier(.65,0,.35,1) 2; }   /* twice, then still (under 5 s) */
@keyframes cue { 0% { transform: translateY(-100%); } 55% { transform: translateY(0); } 100% { transform: translateY(100%); } }
@media (max-width: 899.98px) { .motion .scroll-cue { display: none; } }

/* ------------------------------------------------------------ image parallax */
/* GSAP owns `transform` on these images (scale 1.12 + a scrubbed yPercent); hover zoom moves to the
   separate `scale` property and the old transform transition is dropped, so a scrub never smears. */
.motion .px-img { will-change: transform; transition: scale .8s cubic-bezier(.2,.7,.2,1), opacity .3s !important; }
.motion .tile:hover .px-img, .motion .shelf:hover .px-img, .motion .card:hover .px-img { scale: 1.05; }

/* bento: tiles rise in a stagger (CSS owns .rv; motion.js only sets --i) */
.motion .bento .tile.rv { transform: translateY(48px) scale(.965); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform 1.15s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i, 0) * 80ms); }
.motion .bento .tile.rv.in { transform: none; }

/* ------------------------------------------------------------ fan: spread on scroll + tilt */
/* the fan's transform is rebuilt from variables so scroll (GSAP), hover (CSS) and tilt never overwrite each other */
.motion .fan { perspective: 1200px; }
.motion .fan > a {
  transform: translate(var(--sx), calc(var(--sy) - var(--lift))) rotate(calc(var(--r, 0deg) * var(--rk) + var(--sr))) rotateX(var(--tx)) rotateY(var(--ty)) scale(var(--sc));
  transition: --lift .5s cubic-bezier(.2,.7,.2,1), --rk .5s cubic-bezier(.2,.7,.2,1), --sc .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s, z-index 0s .1s;
}
.motion .fan > a:nth-child(1) { --r: -7deg; }
.motion .fan > a:nth-child(2) { --r: 1deg; }
.motion .fan > a:nth-child(3) { --r: 8deg; }
.motion[dir="rtl"] .fan > a:nth-child(1) { --r: 7deg; }
.motion[dir="rtl"] .fan > a:nth-child(2) { --r: -1deg; }
.motion[dir="rtl"] .fan > a:nth-child(3) { --r: -8deg; }
.motion .fan > a:hover, .motion .fan > a:focus-visible { --lift: 14px; --rk: 0; --sc: 1.03; z-index: 5; }

/* soft glare that follows the mouse (cards and fan only, fine pointers) */
.motion .card { position: relative; }
.motion .card.rv.in { transform: perspective(900px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)); }
.motion .card.tilting { transition-property: opacity, box-shadow, background-color, border-color, color !important; }
.motion .card::after, .motion .fan > a::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 30%), rgba(255,255,255,.34), rgba(255,255,255,0) 62%);
  opacity: 0; transition: opacity .4s;
}
.motion .card.is-tilt::after, .motion .fan > a.is-tilt::after { opacity: 1; }

/* ------------------------------------------------------------ velocity marquee band */
.tk-band { position: relative; background: var(--char); color: var(--paper); margin-top: clamp(60px, 8vw, 110px); padding-block: clamp(22px, 3.4vw, 48px) clamp(30px, 4.4vw, 62px); overflow-x: clip; }
.tk-wave { position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); width: 100%; height: clamp(50px, 7vw, 110px); display: block; }
.tk-wave path { fill: var(--char); }
.tk-line { margin: 0; padding-inline: var(--gut); text-align: center; font: 700 clamp(1.5rem, 4.2vw, 3.3rem)/1.2 var(--serif); text-transform: uppercase; letter-spacing: .02em; text-wrap: balance; }
[dir="rtl"] .tk-line { letter-spacing: 0; line-height: 1.5; }
.tk-i { display: inline-block; white-space: nowrap; }     /* app.js: one unbreakable unit per item */
.tk { display: none; }
.motion .tk-line { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; padding: 0; }
.motion .tk { display: block; overflow: hidden; white-space: nowrap; line-height: 1; }
.motion .tk + .tk { margin-top: clamp(4px, .8vw, 12px); }
.tk-track { display: inline-flex; will-change: transform; }
.tk-set { display: inline-flex; align-items: center; flex: none; }
.tk-w { font: 700 clamp(2.1rem, 5.8vw, 5.2rem)/1.12 var(--serif); text-transform: uppercase; letter-spacing: .01em; padding-inline: .32em; }
[dir="rtl"] .tk-w { letter-spacing: 0; line-height: 1.45; }
.tk-b .tk-w { color: transparent; -webkit-text-stroke: 1px rgba(250,248,244,.7); }
.tk-spark { width: clamp(16px, 2vw, 30px); height: clamp(16px, 2vw, 30px); fill: var(--gold); flex: none; }

/* ------------------------------------------------------------ the 3D story: static (default) */
.oil-story {
  position: relative; background: var(--os-ground, var(--stone)); color: var(--ink);
  padding-block: clamp(72px, 9vw, 128px); padding-inline: max(var(--gut), calc((100% - var(--max)) / 2));
  display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); grid-template-areas: "head head" "photo beats";
  column-gap: clamp(28px, 5vw, 80px); align-items: start;
}
.os-head { grid-area: head; margin-bottom: clamp(28px, 4vw, 48px); max-width: 30ch; }
.os-head .h-cap { margin-top: .4em; }
.os-photo { grid-area: photo; position: sticky; top: 120px; margin: 0; border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--cream); }
.os-photo img { width: 100%; height: 100%; object-fit: cover; }
.os-stage, .os-count, .os-meta { display: none; }
.os-beats { grid-area: beats; list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(14px, 2vw, 22px); }
.os-beat { margin: 0; }

.os-card {
  position: relative; display: grid; gap: 12px; align-content: start; background: var(--paper); color: var(--ink);
  border: 1px solid var(--line); border-radius: 10px; padding: clamp(22px, 2.6vw, 34px);
  box-shadow: 0 30px 60px -44px rgba(31,28,25,.5);
}
.os-card h3 { margin: 0; font: 700 clamp(1.45rem, 2.3vw, 2.05rem)/1.06 var(--serif); text-transform: uppercase; letter-spacing: .01em; }
.os-card p { margin: 0; }
.os-card > p:not([class]) { font-size: 1.04rem; line-height: 1.55; max-width: 40ch; }
.os-card--ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.os-card--ink .tag { color: var(--paper); border-color: var(--gold-light); }   /* gold marks the edge; the words stay paper */
.os-known { font: 600 .74rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.os-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; }
.os-chips li { background: var(--cream); color: var(--ink); border: 1px solid transparent; border-radius: 99px; padding: 4px 11px; font-size: .84rem; line-height: 1.35; transition: opacity .35s, background-color .35s, border-color .35s; }
.os-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; counter-reset: st; }
.os-steps[start="3"] { counter-reset: st 2; }
.os-steps li { counter-increment: st; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; font: 700 clamp(1.1rem, 1.8vw, 1.5rem)/1.15 var(--serif); text-transform: uppercase; letter-spacing: .01em; text-wrap: balance; }
.os-steps li::before { content: counter(st); display: grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: 50%; background: var(--gold); color: var(--ink); font: 700 .8em/1 var(--serif); }
:lang(ar) .os-steps li::before, :lang(ckb) .os-steps li::before { content: counter(st, arabic-indic); }
[dir="rtl"] .os-steps li, [dir="rtl"] .os-card h3 { text-transform: none; letter-spacing: 0; line-height: 1.35; }
[dir="rtl"] :is(.os-known, .os-src) { font-size: .8rem; }
.os-src { font: 600 .74rem/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); }
.os-card--ink .os-src { color: #CFC6BA; }
.os-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.os-benefits li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: baseline; }
.os-benefits li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); transform: translateY(-2px); }
.os-buy { display: grid; gap: 12px; border-top: 1px solid var(--line); padding-top: 14px; margin-top: 2px; }
.os-price { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.os-price b { font: 700 1.3rem/1.2 var(--serif); }
.os-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.os-btns .btn { flex: 1 1 auto; }
.os-standin { margin: 0; }
@media (max-width: 899.98px) {
  .oil-story { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "photo" "beats"; }
  .os-photo { position: static; width: min(100%, 460px); margin-inline: auto; margin-bottom: 22px; }
}

/* ------------------------------------------------------------ the 3D story: pinned (motion) */
.motion .oil-story {
  display: block; height: 100vh; height: 100svh; padding: 0; overflow: clip; transition: none;
  /* the stage frame: full width up to the page's 1240px grid, centred beyond it (wide screens keep the
     heading, counter and cards on the same grid as the header and the sections around the story) */
  --fw: min(100vw, var(--max)); --fx: max(0px, (100vw - var(--max)) / 2);
}
.motion .os-head { position: absolute; z-index: 3; top: calc(var(--headH, 96px) + clamp(18px, 4vh, 44px)); inset-inline-start: calc(var(--fx) + var(--gut)); width: calc(var(--fw) * .27); max-width: none; margin: 0; }
.motion .os-head .h-cap { font-size: clamp(1.7rem, 2.9vw, 2.8rem); text-wrap: balance; }
/* Amiri sets wider than Bodoni caps: a smaller size keeps the Arabic / Kurdish title inside its column */
@media (min-width: 900px) { html.motion:is([lang="ar"], [lang="ckb"]) .os-head .h-cap { font-size: clamp(1.6rem, 2.4vw, 2.4rem); } }
.motion .os-photo { position: absolute; z-index: 1; inset-inline-start: calc(var(--fx) + var(--gut) + var(--fw) * .27 + 28px); width: calc(var(--fw) * .3 - var(--gut) - 56px); top: calc(var(--headH, 96px) + 7vh); transition: opacity .7s, visibility .7s; }
.motion.gl-on .os-photo { opacity: 0; visibility: hidden; }
.motion .os-stage { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.os-gl { position: absolute; top: 0; height: 100%; inset-inline-start: calc(var(--fx, 0px) + var(--fw, 100vw) * .12); width: calc(var(--fw, 100vw) * .56); display: block; visibility: hidden; }
.motion .os-anchor { position: absolute; inset-inline-start: calc(var(--fx) + var(--fw) * .32); width: calc(var(--fw) * .18); top: calc(var(--headH, 96px) + 3vh); height: calc(73vh - var(--headH, 96px) - 3vh); }
.motion.gl-on .os-anchor { pointer-events: auto; cursor: grab; touch-action: pan-y; }
.motion.gl-on .os-anchor.grabbing { cursor: grabbing; }
.os-roots, .os-widgets, .os-standin, .os-drag { display: none; }
.motion .os-roots { display: block; position: absolute; inset-inline-start: calc(var(--fx) + var(--fw) * .28); width: calc(var(--fw) * .26); top: auto; bottom: 0; height: auto; aspect-ratio: 400 / 190; max-height: 23vh; opacity: 0; transform: translateY(70%); transition: transform .9s cubic-bezier(.34,1.56,.64,1), opacity .45s; }
.motion .oil-story[data-beat="3"] .os-roots, .motion .oil-story[data-beat="4"] .os-roots { transform: none; opacity: 1; }
.os-roots svg { width: 100%; height: 100%; display: block; overflow: visible; }
.os-roots .strand { transform-box: fill-box; transform-origin: 50% 100%; }
.motion .oil-story[data-beat="4"][data-phase="timer"] .os-roots .strand { animation: os-wiggle 1.1s ease-in-out infinite alternate; }
.motion .oil-story[data-beat="4"] .os-roots .strand:nth-child(even) { animation-delay: -.55s; }
@keyframes os-wiggle { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
.os-part { position: absolute; left: 50%; top: 5%; width: 2px; height: 2px; }

/* left column read-outs: the oil counter (beat 3) and the routine timer / clock (beat 5) share one slot */
.motion .os-count, .motion .os-widgets { position: absolute; z-index: 3; inset-inline-start: calc(var(--fx) + var(--gut)); top: 47vh; }
.motion .os-count { display: flex; align-items: baseline; gap: 10px; margin: 0; opacity: 0; transform: translateY(14px); transition: opacity .4s, transform .6s cubic-bezier(.34,1.56,.64,1); }
.motion .oil-story[data-beat="2"] .os-count { opacity: 1; transform: none; }
.os-count b { font: 700 clamp(4rem, 8.4vw, 7.6rem)/.9 var(--serif); font-variant-numeric: lining-nums tabular-nums !important; }
.os-count small { font: 600 .8rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; }
.motion .os-widgets { display: block; width: clamp(92px, 9vw, 128px); height: clamp(92px, 9vw, 128px); }
.os-w { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: var(--paper); box-shadow: 0 22px 40px -26px rgba(31,28,25,.55); opacity: 0; transform: scale(.6) rotate(-16deg); transition: opacity .35s, transform .6s cubic-bezier(.34,1.56,.64,1); }
.os-w svg { position: absolute; inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); }
.os-w b { position: relative; font: 700 clamp(1.05rem, 1.5vw, 1.4rem)/1 var(--serif); font-variant-numeric: lining-nums tabular-nums !important; direction: ltr; }
.motion .oil-story[data-beat="4"][data-phase="timer"] .os-timer, .motion .oil-story[data-beat="4"][data-phase="clock"] .os-clock { opacity: 1; transform: none; }

/* the progress row never reaches the scalp drawing (which starts at 28% of the frame): the dashes shrink */
.motion .os-meta { display: flex; position: absolute; z-index: 3; inset-inline-start: calc(var(--fx) + var(--gut)); max-width: calc(var(--fw) * .28 - var(--gut) - 24px); bottom: clamp(48px, 8vh, 92px); align-items: baseline; gap: 12px; }
.os-now { flex: none; font: 700 clamp(2.2rem, 3.2vw, 3.2rem)/1 var(--serif); font-variant-numeric: lining-nums tabular-nums !important; }
.os-of { flex: none; font: 600 .8rem/1 var(--sans); letter-spacing: .1em; }
.os-dots { display: inline-flex; flex: 0 1 auto; min-width: 0; gap: 6px; margin-inline-start: 10px; align-self: center; }
.os-dots i { flex: 0 1 auto; width: 22px; min-width: 6px; height: 4px; border-radius: 2px; background: rgba(31,28,25,.18); transition: background-color .3s, width .45s cubic-bezier(.34,1.56,.64,1); }
.os-dots i.on { background: var(--ink); width: 34px; }

/* honesty: the 3D pack is a stand-in, said beside it while it is on screen */
/* desktop: under the heading, beside the bottle's column; phones: at the top of the bottle's box */
.motion.gl-on .os-standin { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 18px; }
.motion.gl-on .os-standin .tag { background: var(--paper); }
.motion.gl-on .os-drag { display: inline-flex; align-items: center; gap: 6px; font: 600 .66rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--char); }
.motion.gl-on .os-drag::before { content: ""; width: 16px; height: 1px; background: currentColor; }
.motion.gl-on .os-drag { transition: opacity .35s; }
.motion .oil-story:is([data-beat="3"], [data-beat="4"]) .os-drag { opacity: 0; }   /* the flipped bottle swings over this column */

/* cards fly in 3D (perspective here, preserve-3d on the beat; never overflow on these two) */
.motion .os-beats { position: absolute; z-index: 3; inset-inline-start: calc(var(--fx) + var(--fw) * .57); inset-inline-end: calc(var(--fx) + var(--gut)); top: var(--headH, 96px); bottom: 0; margin: 0; display: block; perspective: 1300px; }
.motion .os-beat { position: absolute; inset: 0; display: grid; place-items: center start; transform-style: preserve-3d; pointer-events: none; }
.motion .os-card { pointer-events: auto; width: min(100%, 470px); will-change: transform; box-shadow: 0 44px 80px -46px rgba(31,28,25,.6); backface-visibility: hidden; }
/* the named oils light up as they land: the fill changes, the text stays fully readable */
.motion .os-card--oils .os-chips li { display: inline-flex; align-items: center; gap: 6px; }
.motion .os-card--oils .os-chips li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); transform: scale(0); transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.motion .os-card--oils .os-chips li:not(.lit) { background: transparent; border-color: var(--line); color: var(--char); }
.motion .os-card--oils .os-chips li.lit::before { transform: none; }

/* no WebGL (or three.js did not load): her photo stands where the bottle would be */
.motion.no-gl .os-photo { opacity: 1; visibility: visible; }
.motion.no-gl .os-gl, .motion.no-gl .os-standin, .motion.no-gl .os-roots { display: none; }   /* no bottle: no scalp for it */
.motion.no-gl .oil-story:is([data-beat="3"], [data-beat="4"]) { --os-roots: 0px; }   /* so the photo keeps its full box */

@media (max-width: 899.98px) {
  /* --os-top: under the heading; --os-cardH: the card on screen (both from motion.js); the bottle's box
     takes the space between, and in the flip beats it shares it with the scalp drawing */
  .motion .oil-story { --os-gap: 64px; --os-min: 150px; --os-bottom: calc(var(--os-gap) + var(--os-cardH, 200px) + 16px); --os-roots: 0px; }
  .motion .oil-story:is([data-beat="3"], [data-beat="4"]) { --os-roots: min(13vh, 110px); }
  .motion .os-head { top: calc(var(--headH, 64px) + 14px); width: auto; inset-inline-end: var(--gut); }
  .motion .os-head .kicker { display: none; }
  .motion .os-head .h-cap { margin: 0; font-size: clamp(1.45rem, 6.4vw, 2.1rem); }
  .os-gl { inset-inline-start: 0; width: 100%; }
  .motion .os-anchor {
    inset-inline-start: 22vw; width: 56vw; top: var(--os-top, calc(var(--headH, 64px) + 104px));
    height: max(var(--os-min), calc(100% - var(--os-top, calc(var(--headH, 64px) + 104px)) - var(--os-bottom) - var(--os-roots)));
    transition: height .7s cubic-bezier(.2,.7,.2,1);
  }
  /* her photo stands in the bottle's box, narrow enough to leave the oil counter its own column */
  .motion .os-photo {
    inset-inline-start: auto; left: 50%; translate: -50% 0; width: auto; max-width: calc(100% - 2 * (var(--gut) + 84px)); aspect-ratio: 4 / 5;
    top: var(--os-top, calc(var(--headH, 64px) + 104px)); height: max(var(--os-min), calc(100% - var(--os-top, calc(var(--headH, 64px) + 104px)) - var(--os-bottom)));
    transition: height .7s cubic-bezier(.2,.7,.2,1), opacity .7s, visibility .7s;
  }
  .motion .os-count, .motion .os-widgets { top: calc(var(--headH, 64px) + 132px); }
  .os-count b { font-size: clamp(3rem, 15vw, 4.4rem); }
  .motion .os-count { flex-direction: column; align-items: flex-start; gap: 4px; }   /* the label under the number's start, in both directions */
  .motion .os-widgets { width: 76px; height: 76px; }
  .os-w b { font-size: .92rem; }
  html:is([lang="ar"], [lang="ckb"]) .os-w b { font-size: 1.1rem; }   /* Amiri never below 1.1rem */
  .motion .os-meta { display: none; }
  .motion .os-roots { inset-inline-start: 14vw; width: 72vw; top: auto; bottom: calc(var(--os-bottom) - 6px); height: min(13vh, 110px); }
  .motion.gl-on .os-standin { margin-top: 8px; }
  .motion.gl-on .os-drag { display: none; }
  .motion .os-beats { inset-inline: var(--gut); top: auto; bottom: var(--os-gap); height: calc(100% - var(--os-top, 180px) - var(--os-gap)); }   /* clear of the (i) button */
  .motion .os-beat { place-items: end center; }
  .motion .os-card { width: 100%; padding: 16px 18px; gap: 8px; }
  .motion .os-card h3 { font-size: 1.32rem; }
  .motion .os-card > p:not([class]), .motion .os-benefits { font-size: .94rem; line-height: 1.45; }
  .motion .os-steps li { font-size: 1.02rem; }
  html.motion:is([lang="ar"], [lang="ckb"]) .os-steps li { font-size: 1.1rem; }   /* Amiri never below 1.1rem */
  .motion .os-chips li { font-size: .76rem; padding: 3px 9px; }
  .motion .os-btns .btn { min-height: 44px; padding-inline: 1.1em; }
}
/* tablets: a card sized to its words, not stretched gutter to gutter */
@media (min-width: 600px) and (max-width: 899.98px) { .motion .os-card { width: min(100%, 520px); } }
@media (max-width: 899.98px) and (max-height: 700px) {
  .motion .oil-story:is([data-beat="3"], [data-beat="4"]) { --os-roots: 9vh; }
  .motion .os-roots { height: 9vh; }
  .motion .os-benefits { gap: 2px; }
}
/* short phones (an SE, a phone with its browser bars showing): the heading and the bottle sit side by side and
   the cards go compact (the oil chips in one scrolling row, both buttons on one row), so no card ever covers
   the bottle, the oil counter or the "Packaging stand-in" tag */
@media (max-width: 899.98px) and (max-height: 760px) {
  .motion .oil-story { --os-gap: 14px; --os-min: 120px; --os-col: 40vw; --os-box-top: calc(var(--headH, 64px) + 8px); }
  .motion .os-head { inset-inline-end: auto; width: calc(100% - 2 * var(--gut) - var(--os-col) - 12px); top: calc(var(--headH, 64px) + 10px); }
  .motion .os-head .h-cap { font-size: clamp(1.25rem, 5.6vw, 1.6rem); }
  .motion .os-anchor, .motion .os-photo {
    inset-inline-start: auto; left: auto; translate: none; inset-inline-end: var(--gut); width: var(--os-col); max-width: var(--os-col);
    top: var(--os-box-top); height: max(var(--os-min), calc(100% - var(--os-box-top) - var(--os-bottom) - var(--os-roots)));
  }
  .motion .os-photo { width: auto; }
  .motion .os-count, .motion .os-widgets { top: var(--os-top, calc(var(--headH, 64px) + 132px)); }
  .os-count b { font-size: clamp(2.6rem, 12vw, 3.4rem); }
  .motion .os-roots { inset-inline-start: auto; inset-inline-end: var(--gut); width: var(--os-col); }
  .motion .os-beats { height: calc(100% - var(--os-box-top) - var(--os-gap)); }
  .motion .os-card { padding: 12px 14px; gap: 6px; }
  .motion .os-card h3 { font-size: 1.12rem; }
  html.motion:is([lang="ar"], [lang="ckb"]) .os-card h3 { font-size: 1.15rem; }
  .motion .os-card > p:not([class]), .motion .os-benefits { font-size: .88rem; line-height: 1.4; }
  .motion .os-benefits { gap: 2px; }
  .motion .os-steps { gap: 8px; }
  .motion .os-steps li { font-size: .98rem; }
  html.motion:is([lang="ar"], [lang="ckb"]) .os-steps li { font-size: 1.1rem; }
  .motion .os-chips { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: -14px; padding: 2px 14px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); }
  .motion .os-chips::-webkit-scrollbar { display: none; }
  .motion .os-chips li { flex: none; }
  .motion .os-buy { gap: 8px; padding-top: 10px; }
  .motion .os-price b { font-size: 1.1rem; }
  .motion .os-btns { flex-wrap: nowrap; gap: 8px; }
  .motion .os-btns .btn { flex: 1 1 0; min-width: 0; white-space: normal; text-wrap: balance; line-height: 1.2; padding-inline: .7em; font-size: .68rem; letter-spacing: .06em; }
}
/* Arabic / Kurdish: the small motion labels in Vazirmatn at the .84rem floor */
html:is([lang="ar"], [lang="ckb"]) :is(.scroll-cue, .os-drag, .v3d-hint) { font-size: .84rem; line-height: 1.3; }

/* ------------------------------------------------------------ product page: 3D toggle (hair oil only) */
.v3d-btn {
  position: absolute; z-index: 4; inset-block-start: 12px; inset-inline-end: 12px; min-width: 48px; height: 44px; padding: 0 14px;
  border: 0; border-radius: 99px; background: rgba(250,248,244,.88); color: var(--ink); cursor: pointer;
  font: 700 .8rem/1 var(--sans); letter-spacing: .08em; box-shadow: 0 6px 18px -10px rgba(31,28,25,.45), inset 0 0 0 1px rgba(31,28,25,.08);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .25s, color .25s;
}
.v3d-btn:hover { background: var(--paper); }
.v3d-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.v3d { position: absolute; inset: 0; z-index: 3; background: var(--cream); opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.main.is-3d .v3d { opacity: 1; visibility: visible; }
.v3d canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: pan-y; }
.v3d canvas.grabbing { cursor: grabbing; }
.v3d .tag { position: absolute; inset-block-start: 18px; inset-inline-start: 16px; background: var(--paper); }
.v3d-hint { position: absolute; inset-inline: 0; bottom: 16px; text-align: center; pointer-events: none; font: 600 .66rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--char); }
.main.is-3d .arrow, .main.is-3d .count { visibility: hidden; }
.v3d canvas:focus-visible { outline: none; }
.v3d:has(canvas:focus-visible)::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px var(--ink); pointer-events: none; }