/* ─────────────────────────────────────────────────────────────────────────
   BioFormula Sport Line — Persian online catalog.

   Runs on the shared Business Review player (../deck/deck.js + deck.css):
   controls, overview, notes, offline copy all come from there. This file only
   re-skins the slides in the BioFormula identity — the same tokens as the
   brand site (SandBoX/biousa, src/styles/global.css):
     near-black canvas · acid green #8CC540 (from the logo) · gold #F2C230
     Archivo Black for the big Latin words · the 115° hairline pattern lifted
     off the leaf in the logo.
   Persian copy is Darbareh, the company's Persian face.
   ───────────────────────────────────────────────────────────────────────── */

@font-face { font-family: 'Archivo Black'; src: url('fonts/archivo-black.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Darbareh'; src: url('fonts/darbareh/Darbareh-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Darbareh'; src: url('fonts/darbareh/Darbareh-Medium.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Darbareh'; src: url('fonts/darbareh/Darbareh-SemiBold.woff2') format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Darbareh'; src: url('fonts/darbareh/Darbareh-Bold.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --ink: #050505;
  --surface: #0b0d0a;
  --surface-2: #11140f;
  --line: #1c1f1a;
  --line-2: #2a2f26;
  --fg: #ffffff;
  --fg-2: #d6dacf;
  --muted: #8c9285;
  --acid: #8cc540;
  --gold: #f2c230;
  --accent: var(--acid);
  --display: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  --fa: 'Darbareh', 'Segoe UI', Tahoma, system-ui, sans-serif;
  --font: var(--fa);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

body { font-family: var(--fa); }
#viewport { background: var(--ink); }

/* ═════════════════════════════════════════════════════════════════════════
   chrome: the shared bar, re-tinted acid and mirrored for RTL
   ═════════════════════════════════════════════════════════════════════════ */
#progress i { background: var(--acid); }
.bbtn[aria-pressed="true"] { background: rgba(140, 197, 64, .14); border-color: rgba(140, 197, 64, .5); color: #b6e07a; }
#nowBtn .idx, .ov-cap .n, #help dt, #notes .n-kicker { color: #b6e07a; }
#notes li::marker { color: var(--acid); }
.ov-item[aria-current="true"] .ov-thumb { box-shadow: 0 0 0 2px var(--acid); }
.ov-thumb { background: var(--ink); }
#bar .brand .mark::after { background: var(--acid); }
body.deck-rtl #bar .brand { margin-right: 0; margin-left: 6px; padding: 0 4px 0 14px; border-right: 0; border-left: 1px solid var(--ui-line); }
body.deck-rtl .ov-item { text-align: right; }
body.deck-rtl #help .close { float: left; }
body.deck-rtl #help dt { direction: ltr; text-align: right; }
body.deck-rtl #notes ul { padding-left: 0; padding-right: 18px; }
body.deck-rtl .ov-cap .n, body.deck-rtl #nowBtn .idx { direction: ltr; unicode-bidi: isolate; }

/* ═════════════════════════════════════════════════════════════════════════
   slide base
   ═════════════════════════════════════════════════════════════════════════ */
.slide {
  direction: rtl;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--fa);
  font-variant-numeric: normal;
}
.en {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: -.02em;
  direction: ltr;
  unicode-bidi: isolate;
}
.lat { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; direction: ltr; unicode-bidi: isolate; }
.num { font-family: var(--display); direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.acc { color: var(--accent); }

/* the house pattern: two sets of 115° hairlines, a bloom and a travelling band */
.pattern { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.pattern > i { position: absolute; inset: -20%; }
.pattern .l1 {
  background-image: repeating-linear-gradient(115deg, transparent 0 26px, color-mix(in srgb, var(--accent) 55%, transparent) 26px 27px, transparent 27px 53px);
  opacity: .14;
  animation: drift 34s linear infinite;
}
.pattern .l2 {
  background-image: repeating-linear-gradient(115deg, transparent 0 96px, color-mix(in srgb, var(--accent) 85%, transparent) 96px 98px, transparent 98px 196px);
  opacity: .09;
  animation: drift 68s linear infinite reverse;
}
.pattern .bl {
  background:
    radial-gradient(42% 55% at 22% 22%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%),
    radial-gradient(38% 48% at 88% 92%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 72%);
  opacity: .8;
}
.pattern .sw {
  background: linear-gradient(115deg, transparent 42%, color-mix(in srgb, var(--accent) 26%, transparent) 50%, transparent 58%);
  mix-blend-mode: screen;
  opacity: .55;
  animation: sweep 14s ease-in-out infinite;
}
.pattern.dim .l1 { opacity: .08; } .pattern.dim .l2 { opacity: .05; } .pattern.dim .bl { opacity: .5; }
@keyframes drift { to { translate: 106px 0; } }
@keyframes sweep { 0% { translate: -60% 0; } 60%, 100% { translate: 60% 0; } }

/* footer — hairline, logo, name of the piece, slide number */
.sl-foot {
  position: relative;
  z-index: 3;
  height: 52px;
  background: transparent;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 13.5px;
  padding: 0 56px;
}
.sl-foot .l img { height: 22px; }
.sl-foot .num { color: var(--fg); font-family: var(--display); font-size: 14px; font-weight: 400; text-align: left; }
.sl-foot .dot { width: 4px; height: 4px; rotate: 45deg; background: var(--accent); display: inline-block; }

/* chips — hairline box, a small rotated square in the accent */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  height: 30px; padding: 0 12px;
  border: 1px solid var(--line-2); border-radius: 2px;
  font-size: 13.5px; font-weight: 600; color: var(--fg-2);
  white-space: nowrap;
}
.chip::before { content: ''; width: 5px; height: 5px; rotate: 45deg; background: var(--accent); flex: none; }
.chip.now { border-color: color-mix(in srgb, var(--acid) 55%, transparent); color: #c6ec8f; }
.chip.now::before { background: var(--acid); box-shadow: 0 0 0 0 var(--acid); animation: ping 2.4s ease-out infinite; }
.chip.mehr { border-color: color-mix(in srgb, var(--gold) 55%, transparent); color: #ffe08a; }
.chip.mehr::before { background: var(--gold); }
.chip.soon { border-style: dashed; color: var(--fg-2); }
.chip.soon::before { background: transparent; border: 1px solid var(--fg-2); width: 4px; height: 4px; }
.chip.todo { border-color: #c0392b; color: #ff9b8f; border-style: dashed; }
.chip.todo::before { background: #ff6b5b; }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(140, 197, 64, .7); } 70%, 100% { box-shadow: 0 0 0 7px rgba(140, 197, 64, 0); } }

.eyebrow { font-size: 14px; font-weight: 600; color: var(--accent); letter-spacing: .02em; }
.eyebrow .en { font-size: 12px; letter-spacing: .22em; }

/* word mask reveal for the big Latin words: each .w rides up from its line */
.mask { display: block; overflow: hidden; padding-block: .14em; margin-block: -.14em; padding-inline: .1em; margin-inline: -.1em; }
.mask > .w { display: inline-block; translate: 0 112%; }
.slide.is-in .mask > .w { translate: 0 0; transition: translate .9s var(--ease-out); transition-delay: calc(var(--d, 0) * 90ms + 120ms); }

/* ═════════════════════════════════════════════════════════════════════════
   01 · cover
   ═════════════════════════════════════════════════════════════════════════ */
.s-cover .cv-photo {
  position: absolute; inset: 0; z-index: 0;
  background: url('img/l-tiger.webp') left center / cover no-repeat;
  opacity: .55;
  scale: 1.08;
  -webkit-mask: linear-gradient(270deg, transparent 18%, #000 70%);
          mask: linear-gradient(270deg, transparent 18%, #000 70%);
}
.slide.is-in.s-cover .cv-photo { scale: 1; transition: scale 6s var(--ease-out); }
.s-cover .cv-in { position: relative; z-index: 2; flex: 1; display: grid; grid-template-columns: 1fr 470px; padding: 48px 64px 0 40px; }
.s-cover .cv-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding-bottom: 40px; }
.s-cover .cv-logo { height: 52px; width: auto; align-self: flex-start; margin-bottom: 18px; }
.s-cover .cv-big { font-size: 78px; line-height: .92; margin: 0; }
.s-cover .cv-big .acc { color: var(--acid); }
.s-cover .cv-fa { font-size: 40px; font-weight: 700; line-height: 1.3; margin: 0; }
.s-cover .cv-fa .acc { color: var(--acid); }
.s-cover .cv-sub { font-size: 18px; color: var(--fg-2); line-height: 1.8; max-width: 560px; margin: 0; }
.s-cover .cv-meta { display: flex; gap: 10px; flex-wrap: wrap; }
.s-cover .cv-packs { position: relative; }
.s-cover .cv-packs img {
  position: absolute; bottom: 30px; width: auto;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .7));
  opacity: 0; translate: 0 60px; rotate: var(--r, 0deg);
}
.slide.is-in.s-cover .cv-packs img { opacity: 1; translate: 0 0; transition: opacity .8s ease, translate 1.1s var(--ease-out); transition-delay: calc(var(--d) * 110ms + 300ms); }
.s-cover .cv-packs .p1 { height: 410px; left: 100px; z-index: 3; --d: 1; }
.s-cover .cv-packs .p2 { height: 310px; left: -10px; bottom: 64px; z-index: 2; --r: -8deg; --d: 3; }
.s-cover .cv-packs .p3 { height: 310px; left: 262px; bottom: 64px; z-index: 2; --r: 8deg; --d: 2; }
.s-cover .cv-packs .float { animation: float 7s ease-in-out infinite; }
.s-cover .cv-packs .p2.float { animation-delay: -2.4s; }
.s-cover .cv-packs .p3.float { animation-delay: -4.6s; }
.s-cover .cv-floor { position: absolute; left: 40px; right: 0; bottom: 18px; height: 40px; background: radial-gradient(50% 50% at 50% 50%, rgba(140, 197, 64, .35), transparent 70%); filter: blur(6px); }
.s-cover .cv-hint { font-size: 13px; color: var(--muted); }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* ═════════════════════════════════════════════════════════════════════════
   generic body + titles
   ═════════════════════════════════════════════════════════════════════════ */
.bd { position: relative; z-index: 2; flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 22px; padding: 40px 56px 22px; }
.hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.hd .t { margin: 0; font-size: 40px; font-weight: 700; line-height: 1.2; }
.hd .t .acc { color: var(--accent); }
.hd .ghost-en { font-size: 64px; line-height: .9; color: transparent; -webkit-text-stroke: 1px var(--line-2); }
.lead { margin: 6px 0 0; font-size: 17px; color: var(--fg-2); line-height: 1.8; max-width: 760px; }

/* ═════════════════════════════════════════════════════════════════════════
   02 · range index
   ═════════════════════════════════════════════════════════════════════════ */
.ix-group { display: flex; flex-direction: column; gap: 10px; }
.ix-gh { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 700; }
.ix-gh .rule { flex: 1; height: 1px; background: var(--line); }
.ix-row { display: grid; gap: 10px; }
.ix-row.n8 { grid-template-columns: repeat(8, 1fr); }
.ix-row.n5 { grid-template-columns: repeat(5, 1fr); }
.ix-tile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 2px;
  text-align: center; cursor: pointer;
  transition: border-color .25s ease, background .25s ease;
}
.ix-tile::after { content: ''; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--acid); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease-io); }
.ix-tile:hover { border-color: var(--line-2); background: var(--surface-2); }
.ix-tile:hover::after { transform: scaleX(1); }
.ix-tile .im { height: 92px; display: grid; place-items: end center; }
.ix-tile .im img { max-height: 92px; width: auto; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .6)); transition: transform .45s var(--ease-out); }
.ix-tile:hover .im img { transform: translateY(-6px) scale(1.05); }
.ix-row.n5 .ix-tile .im { height: 100px; }
.ix-row.n5 .ix-tile .im img { max-height: 100px; }
.ix-tile .nm { font-size: 14.5px; font-weight: 700; line-height: 1.35; }
.ix-tile .ne { font-size: 10.5px; color: var(--muted); letter-spacing: .04em; }
.ix-tile .chip { height: 24px; font-size: 11.5px; padding: 0 8px; gap: 6px; }
.ix-tile.is-soon .im img { filter: grayscale(.85) brightness(.75) drop-shadow(0 10px 14px rgba(0, 0, 0, .6)); }
.ix-tile.is-soon:hover .im img { filter: grayscale(0) drop-shadow(0 10px 14px rgba(0, 0, 0, .6)); }

/* a drawn stand-in for packs we have no photo of */
.ph {
  display: grid; place-items: center;
  width: 66px; height: 90px;
  border: 1px dashed var(--line-2); border-radius: 2px;
  background: repeating-linear-gradient(115deg, transparent 0 9px, rgba(140, 197, 64, .08) 9px 10px);
  font-family: var(--display); font-size: 13px; color: var(--muted); direction: ltr; line-height: 1.1; text-align: center;
}

/* ═════════════════════════════════════════════════════════════════════════
   section divider
   ═════════════════════════════════════════════════════════════════════════ */
.s-sec .sec-in { position: relative; z-index: 2; flex: 1; display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 0 80px; gap: 40px; }
.s-sec .sec-no { font-family: var(--display); font-size: 300px; line-height: .8; color: transparent; -webkit-text-stroke: 2px var(--accent); direction: ltr; opacity: .9; }
.s-sec .sec-en { font-size: 118px; line-height: .9; margin: 0; }
.s-sec .sec-fa { font-size: 46px; font-weight: 700; margin: 18px 0 10px; }
.s-sec .sec-sub { font-size: 18px; color: var(--fg-2); line-height: 1.8; max-width: 640px; margin: 0; }
.s-sec .bars { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.s-sec .bars i {
  position: absolute; top: -20%; height: 140%; width: 54px; background: var(--accent); opacity: .9;
  rotate: 25deg; translate: 0 -120%;
}
.slide.is-in.s-sec .bars i { translate: 0 0; transition: translate 1s var(--ease-out); transition-delay: calc(var(--d) * 80ms); }
.s-sec .bars i:nth-child(1) { left: 25%; --d: 0; }
.s-sec .bars i:nth-child(2) { left: calc(25% + 80px); width: 18px; opacity: .55; --d: 1; }
.s-sec .bars i:nth-child(3) { left: calc(25% + 124px); width: 6px; opacity: .35; --d: 2; }

/* ═════════════════════════════════════════════════════════════════════════
   product slide
   ═════════════════════════════════════════════════════════════════════════ */
.s-prod .pd { position: relative; z-index: 2; flex: 1; min-height: 0; display: grid; grid-template-columns: 668px 1fr; }
.pd-copy { display: flex; flex-direction: column; gap: 16px; padding: 34px 56px 18px 12px; min-height: 0; }
.pd-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pd-top .idx { font-family: var(--display); font-size: 13px; color: var(--muted); direction: ltr; margin-left: 4px; }
.pd-name { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.pd-name .en { text-align: right; }
.pd-name .en { font-size: 70px; line-height: .92; }
.pd-name .en.sm { font-size: 54px; }
.pd-name .fa { font-size: 25px; font-weight: 700; color: var(--accent); }
.pd-lede { margin: 0; font-size: 16px; line-height: 1.85; color: var(--fg-2); max-width: 600px; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); border-radius: 2px; }
.stats.n3 { grid-template-columns: repeat(3, 1fr); }
.stat { padding: 11px 14px 10px; display: flex; flex-direction: column; gap: 2px; }
.stat + .stat { border-right: 1px solid var(--line); }
.stat .v .num.sm { font-size: 24px; }
.stat .v { white-space: nowrap; display: flex; align-items: baseline; gap: 5px; direction: ltr; justify-content: flex-end; }
.stat .v .num { font-size: 30px; line-height: 1.1; color: var(--fg); }
.stat .v .u { font-size: 14px; font-weight: 700; color: var(--accent); direction: rtl; }
.stat .k { font-size: 12.5px; color: var(--muted); }

.lists { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; min-height: 0; }
.lists.one { grid-template-columns: 1fr; }
.lists h4 { margin: 0 0 8px; font-size: 13.5px; font-weight: 700; color: var(--accent); display: flex; align-items: center; gap: 8px; }
.lists h4::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.lists ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.lists li { position: relative; padding-right: 16px; font-size: 14.5px; line-height: 1.65; color: var(--fg-2); }
.lists li::before { content: ''; position: absolute; right: 2px; top: .7em; width: 5px; height: 5px; rotate: 45deg; background: var(--accent); }
.lists li b { color: var(--fg); font-weight: 700; }
.slide .lists li { opacity: 0; translate: -10px 0; }
.slide.is-in .lists li { opacity: 1; translate: 0 0; transition: opacity .5s ease, translate .6s var(--ease-out); transition-delay: calc(var(--i, 0) * 55ms + 520ms); }

.when {
  margin-top: auto;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  border-right: 3px solid var(--accent);
  font-size: 14.5px; line-height: 1.6; color: var(--fg-2);
}
.when b { color: var(--fg); white-space: nowrap; }
.when .i { --s: 22px; color: var(--accent); }

/* the stage: ghost word, glow, pack, floor, flavour switch */
.pd-stage { position: relative; overflow: hidden; border-right: 1px solid var(--line); }
.pd-stage .ghost {
  position: absolute; top: 50%; left: -40%; right: -40%; translate: 0 -54%;
  display: flex; justify-content: center;
  font-family: var(--display); font-size: 190px; line-height: .8; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--accent) 35%, transparent);
  direction: ltr; text-transform: uppercase; letter-spacing: -.03em;
  opacity: 0; transform: translateX(-60px);
}
.slide.is-in .pd-stage .ghost { opacity: 1; transform: none; transition: opacity 1.2s ease .1s, transform 1.6s var(--ease-out) .1s; }
.pd-stage .glow {
  position: absolute; left: 50%; top: 52%; width: 520px; height: 520px; translate: -50% -50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 34%, transparent), transparent 72%);
  opacity: 0; scale: .6;
}
.slide.is-in .pd-stage .glow { opacity: 1; scale: 1; transition: opacity 1s ease .2s, scale 1.4s var(--ease-out) .2s; }
.pd-stage .glow.loopy { animation: breathe 6s ease-in-out infinite; }
@keyframes breathe { 50% { scale: 1.08; opacity: .8; } }
.pd-stage .floor { position: absolute; left: 50%; bottom: 74px; width: 300px; height: 34px; translate: -50% 0; background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .95), transparent 72%); }
.pd-stage .packs { position: absolute; inset: 0; perspective: 900px; }
.pd-stage .pack {
  position: absolute; left: 0; right: 0; margin-inline: auto; bottom: 88px; height: 470px; width: auto;
  filter: drop-shadow(0 28px 34px rgba(0, 0, 0, .75));
  opacity: 0; transform: translateY(70px) scale(.92) rotate(-4deg);
  transition: opacity .5s ease, transform .7s var(--ease-out);
}
.pd-stage .pack.tall { height: 500px; }
.pd-stage .pack.bottle { height: 400px; }
.slide.is-in .pd-stage .pack.on { opacity: 1; transform: translateY(0) scale(1) rotate(0); transition: opacity .7s ease .25s, transform 1.1s var(--ease-out) .25s; }
.slide.is-in .pd-stage .pack.on.swapped { transition-delay: 0s; }
.pd-stage .tilt { position: absolute; inset: 0; transition: transform .5s var(--ease-out); transform-style: preserve-3d; }
.pd-stage .bob { position: absolute; inset: 0; }
.pd-stage .bob.loopy { animation: float 7s ease-in-out 1.6s infinite; }
/* a one-off light sweep across the pack on entry */
.pd-stage .shine {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .16) 50%, transparent 60%);
  translate: 120% 0; mix-blend-mode: screen;
}
.slide.is-in .pd-stage .shine { translate: -120% 0; transition: translate 1.6s var(--ease-io) .9s; }

.flv { position: absolute; z-index: 4; bottom: 22px; left: 50%; translate: -50% 0; display: flex; gap: 6px; }
.flv button {
  height: 32px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 2px;
  background: rgba(5, 5, 5, .6); color: var(--fg-2); font: 600 13px var(--fa);
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.flv button i { width: 9px; height: 9px; rotate: 45deg; background: var(--c, var(--acid)); }
.flv button:hover { color: var(--fg); border-color: var(--muted); }
.flv button[aria-pressed="true"] { border-color: var(--c, var(--acid)); color: var(--fg); background: color-mix(in srgb, var(--c, var(--acid)) 14%, rgba(5, 5, 5, .7)); }

/* placeholder stage for products we have no pack photo of yet */
.pd-stage .phbig {
  position: absolute; left: 50%; bottom: 96px; translate: -50% 0;
  width: 250px; height: 380px; display: grid; place-items: center; text-align: center;
  border: 1.5px dashed var(--line-2); border-radius: 4px;
  background: repeating-linear-gradient(115deg, transparent 0 16px, rgba(140, 197, 64, .07) 16px 17px), rgba(11, 13, 10, .8);
  font-family: var(--display); font-size: 34px; line-height: 1; direction: ltr; color: var(--fg);
}
.pd-stage .phbig small { display: block; margin-top: 14px; font: 600 13px/1.6 var(--fa); color: var(--muted); direction: rtl; }
.todo-note { font-size: 13px; color: #ff9b8f; line-height: 1.7; border: 1px dashed rgba(192, 57, 43, .7); padding: 8px 12px; }

/* ingredient orbit (pump) */
.orbit { position: absolute; inset: 0; pointer-events: none; }
.orbit span {
  position: absolute; left: 50%; top: 46%;
  height: 28px; padding: 0 10px; display: inline-flex; align-items: center;
  background: rgba(5, 5, 5, .82); border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); border-radius: 2px;
  font: 600 12.5px var(--fa); color: var(--fg); white-space: nowrap;
  translate: -50% -50%; opacity: 0;
}
.slide.is-in .orbit span { opacity: 1; translate: calc(-50% + var(--x)) calc(-50% + var(--y)); transition: opacity .6s ease, translate 1.1s var(--ease-out); transition-delay: calc(var(--i) * 90ms + 700ms); }

/* ═════════════════════════════════════════════════════════════════════════
   whey deep-dive: three wheys
   ═════════════════════════════════════════════════════════════════════════ */
.tri { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; flex: 1; min-height: 0; }
.tri-c {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px; padding: 16px 20px 14px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 2px;
}
.tri-c .big { font-size: 34px; line-height: .9; color: transparent; -webkit-text-stroke: 1.5px var(--accent); }
.tri-c h3 { margin: 0; font-size: 21px; font-weight: 700; }
.tri-c h3 small { display: block; font: 400 12px var(--display); color: var(--muted); letter-spacing: .12em; direction: ltr; text-align: right; margin-top: 2px; }
.tri-c .meter { height: 6px; background: var(--line); border-radius: 0; overflow: hidden; }
.tri-c .meter i { display: block; height: 100%; width: 0; background: var(--accent); }
.slide.is-in .tri-c .meter i { width: var(--w); transition: width 1.4s var(--ease-out) .6s; }
.tri-c .ml { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); }
.tri-c .ml .num { color: var(--fg); font-size: 13px; }
.tri-c ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.tri-c li { position: relative; padding-right: 16px; font-size: 14px; line-height: 1.6; color: var(--fg-2); }
.tri-c li::before { content: ''; position: absolute; right: 2px; top: .7em; width: 5px; height: 5px; rotate: 45deg; background: var(--accent); }
.tri-c::after { content: ''; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: right; }
.slide.is-in .tri-c::after { transform: scaleX(1); transition: transform .9s var(--ease-io); transition-delay: calc(var(--d) * 120ms + 500ms); }
.plus-row { display: flex; gap: 14px; }
.plus-row .callout { flex: 1; display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 1px solid var(--line); background: var(--surface); font-size: 15px; line-height: 1.7; color: var(--fg-2); }
.plus-row .callout b { color: var(--fg); }
.plus-row .callout .i { --s: 24px; color: var(--accent); }

/* ═════════════════════════════════════════════════════════════════════════
   electrolyte: comparison table
   ═════════════════════════════════════════════════════════════════════════ */
.cmp { width: 100%; border-collapse: collapse; font-size: 15px; }
.cmp th, .cmp td { padding: 6px 14px; border-bottom: 1px solid var(--line); text-align: center; }
.cmp th:first-child, .cmp td:first-child { text-align: right; color: var(--fg-2); }
.cmp thead th { font-size: 13.5px; font-weight: 700; color: var(--muted); }
.cmp thead th.us { color: var(--acid); }
.cmp td.us { background: rgba(140, 197, 64, .07); }
.cmp .y, .cmp .n { display: inline-grid; place-items: center; width: 24px; height: 24px; }
.cmp .y { color: var(--ink); background: var(--acid); rotate: 45deg; scale: 0; }
.cmp .y::after { content: '✓'; rotate: -45deg; font-weight: 700; font-size: 13px; }
.slide.is-in .cmp .y { scale: .78; transition: scale .5s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(var(--i, 0) * 70ms + 500ms); }
.cmp .n { color: var(--line-2); font-weight: 700; }
.e-badges { display: flex; gap: 8px; flex-wrap: wrap; }

/* ═════════════════════════════════════════════════════════════════════════
   goal finder
   ═════════════════════════════════════════════════════════════════════════ */
.gf { flex: 1; min-height: 0; display: grid; grid-template-columns: 330px 1fr; gap: 22px; }
.gf-goals { display: flex; flex-direction: column; gap: 8px; }
.gf-goals button {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 12px; text-align: right;
  height: 56px; padding: 0 16px; border: 1px solid var(--line); border-radius: 2px;
  background: var(--surface); color: var(--fg-2); font: 700 16px var(--fa); cursor: pointer;
  transition: border-color .25s ease, color .25s ease;
}
.gf-goals button .i { --s: 20px; color: var(--muted); transition: color .25s ease; }
.gf-goals button::before { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--acid) 14%, transparent); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-io); z-index: -1; }
.gf-goals button { isolation: isolate; }
.gf-goals button[aria-pressed="true"] { border-color: var(--acid); color: var(--fg); }
.gf-goals button[aria-pressed="true"] .i { color: var(--acid); }
.gf-goals button[aria-pressed="true"]::before { transform: scaleX(1); }
.gf-goals button .bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--acid); }
.gf-goals button.run .bar { width: 100%; transition: width var(--t, 4.5s) linear; }
.gf-grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 1fr); gap: 10px; min-height: 0; }
.gf-item {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px;
  padding: 10px 6px 12px; border: 1px solid var(--line); border-radius: 2px; background: var(--surface);
  transition: opacity .45s ease, border-color .45s ease, transform .45s var(--ease-out), filter .45s ease;
  cursor: pointer;
}
.gf-item img { height: 150px; width: auto; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .6)); }
.gf-item .ph { width: 92px; height: 140px; }
.gf-item span { font-size: 13.5px; font-weight: 700; }
.gf.has-goal .gf-item { opacity: .22; filter: grayscale(1); transform: scale(.96); }
.gf.has-goal .gf-item.hit { opacity: 1; filter: none; transform: translateY(-4px); border-color: var(--acid); }
.gf-why { min-height: 28px; font-size: 15px; color: var(--fg-2); line-height: 1.7; }
.gf-why b { color: var(--acid); }

/* ═════════════════════════════════════════════════════════════════════════
   availability timeline
   ═════════════════════════════════════════════════════════════════════════ */
.tl { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: 1.6fr 1fr 1.5fr; gap: 18px; padding-top: 44px; }
.tl-line { position: absolute; top: 15px; right: 0; left: 0; height: 2px; background: var(--line); }
.tl-line i { position: absolute; inset: 0; background: linear-gradient(270deg, var(--acid), var(--gold) 55%, rgba(255, 255, 255, .5)); transform: scaleX(0); transform-origin: right; }
.slide.is-in .tl-line i { transform: scaleX(1); transition: transform 2.2s var(--ease-io) .3s; }
.tl-st { position: relative; display: flex; flex-direction: column; gap: 12px; }
.tl-st::before { content: ''; position: absolute; top: -36px; right: 0; width: 14px; height: 14px; rotate: 45deg; background: var(--ink); border: 2px solid var(--c); scale: 0; }
.slide.is-in .tl-st::before { scale: 1; transition: scale .5s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(var(--d) * 650ms + 400ms); }
.tl-st h3 { margin: 0; font-size: 26px; font-weight: 700; color: var(--c); }
.tl-st h3 small { display: block; font: 600 13px var(--fa); color: var(--muted); margin-top: 2px; }
.tl-packs { display: flex; flex-wrap: wrap; gap: 10px; }
.tl-p { opacity: 0; translate: 0 14px; }
.slide.is-in .tl-p { opacity: 1; translate: 0 0; transition: opacity .5s ease, translate .6s var(--ease-out); transition-delay: calc(var(--d) * 650ms + 600ms); }
.tl-p { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 112px; padding: 12px 6px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; transition: border-color .2s ease; }
.tl-p:hover { border-color: var(--c); }
.tl-p img { height: 124px; width: auto; transition: transform .35s var(--ease-out); }
.tl-p:hover img { transform: translateY(-5px); }
.tl-p .ph { width: 80px; height: 118px; font-size: 11px; }
.tl-p > span:last-child { font-size: 13px; font-weight: 700; text-align: center; line-height: 1.35; }

/* ═════════════════════════════════════════════════════════════════════════
   closing
   ═════════════════════════════════════════════════════════════════════════ */
.s-end .end-in { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; text-align: center; }
.s-end .end-logo { height: 76px; width: auto; }
.s-end .end-big { font-size: 104px; line-height: .9; margin: 0; }
.s-end .end-fa { font-size: 30px; font-weight: 700; margin: 0; }
.s-end .end-sub { font-size: 16px; color: var(--muted); line-height: 1.9; margin: 0; }
.s-end .marq { position: absolute; bottom: 70px; left: 0; right: 0; overflow: hidden; z-index: 1; opacity: .5; direction: ltr; }
.s-end .marq div { display: flex; gap: 36px; width: max-content; font-family: var(--display); font-size: 40px; color: transparent; -webkit-text-stroke: 1px var(--line-2); text-transform: uppercase; animation: marq 40s linear infinite; }
@keyframes marq { to { translate: -50% 0; } }

/* loops off — everything that repeats stands still (deck.css already stops .loopy) */
body.loops-off .pattern > i, body.loops-off .chip.now::before, body.loops-off .s-cover .float, body.loops-off .marq div { animation: none !important; }


/* ═════════════════════════════════════════════════════════════════════════
   details slide — the full scientific copy from the product's docx, flowed
   through three columns (right to left) so long text reads like a datasheet
   ═════════════════════════════════════════════════════════════════════════ */
.bd.dt { gap: 16px; padding-top: 30px; padding-bottom: 18px; }
.dt-hd { display: flex; align-items: center; gap: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.dt-pack { height: 84px; width: auto; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .6)); }
.dt-ti { flex: 1; min-width: 0; }
.dt-ti .t { margin: 2px 0 0; font-size: 30px; font-weight: 700; line-height: 1.25; }
.dt-tag { margin: 4px 0 0; font-size: 14.5px; color: var(--accent); font-weight: 600; line-height: 1.6; }
.dt-hd .ghost-en { font-size: 56px; line-height: .9; color: transparent; -webkit-text-stroke: 1px var(--line-2); white-space: nowrap; }
.dt-cols {
  flex: 1; min-height: 0;
  column-count: 3; column-gap: 34px; column-rule: 1px solid var(--line); column-fill: auto;
}
.dt-s { margin: 0 0 14px; }
.dt-s h4 {
  display: flex; align-items: center; gap: 8px; margin: 0 0 6px;
  font-size: 14.5px; font-weight: 700; color: var(--accent); break-after: avoid;
}
.dt-s h4::before { content: ''; width: 6px; height: 6px; rotate: 45deg; background: var(--accent); flex: none; }
.dt-s h5 { margin: 8px 0 3px; font-size: 13.5px; font-weight: 700; color: var(--fg); break-after: avoid; }
.dt-s p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.85; color: var(--fg-2); text-align: justify; }
.dt-s ul { margin: 0 0 4px; padding: 0; list-style: none; }
.dt-s li { position: relative; padding-right: 14px; margin-bottom: 4px; font-size: 13.5px; line-height: 1.8; color: var(--fg-2); }
.dt-s li::before { content: ''; position: absolute; right: 1px; top: .78em; width: 4px; height: 4px; rotate: 45deg; background: var(--accent); }
.dt-s li b, .dt-s p b { color: var(--fg); font-weight: 700; }
.slide .dt-s { opacity: 0; translate: 0 10px; }
.slide.is-in .dt-s { opacity: 1; translate: 0 0; transition: opacity .5s ease, translate .6s var(--ease-out); transition-delay: calc(var(--i) * 70ms + 250ms); }
.tri-c .ml span { color: var(--fg-2); }


/* electrolytes: twelve flavours — a 6×2 swatch grid under the bottle */
.pd-stage .pack.bottle { height: 400px; }
#electro .pd-stage .pack.bottle { height: 430px; bottom: 120px; }
#electro .pd-stage .floor { bottom: 106px; }
.flv.flv-grid { display: grid; grid-template-columns: repeat(6, auto); gap: 5px; bottom: 16px; }
.flv.flv-grid button { height: 28px; padding: 0 8px; font-size: 11.5px; gap: 6px; white-space: nowrap; }
.flv.flv-grid button i { width: 7px; height: 7px; }

/* electrolytes: the flavour wall */
.fw { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(6, 1fr); grid-template-rows: repeat(2, 1fr); gap: 10px; }
.fw-b {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px;
  padding: 8px 6px 10px; border: 1px solid var(--line); border-radius: 2px; background: var(--surface); cursor: pointer; color: var(--fg);
  transition: border-color .25s ease, background .25s ease;
}
.fw-b::before { content: ''; position: absolute; inset: auto 15% 22% 15%; height: 60%; background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 45%, transparent), transparent 75%); opacity: .7; transition: opacity .3s ease; }
.fw-b img { position: relative; height: 196px; width: auto; filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .65)); transition: transform .45s var(--ease-out); }
.fw-b span { position: relative; font: 700 14px var(--fa); }
.fw-b span::before { content: ''; display: inline-block; width: 7px; height: 7px; rotate: 45deg; background: var(--c); margin-left: 7px; vertical-align: 1px; }
.fw-b:hover { border-color: var(--c); background: var(--surface-2); }
.fw-b:hover img { transform: translateY(-8px) rotate(-3deg); }
.fw-b:hover::before { opacity: 1; }
.slide .fw-b img { opacity: 0; translate: 0 40px; }
.slide.is-in .fw-b img { opacity: 1; translate: 0 0; transition: opacity .6s ease, translate .9s var(--ease-out), transform .45s var(--ease-out); transition-delay: calc(var(--i) * 60ms + 250ms), calc(var(--i) * 60ms + 250ms), 0s; }

/* supplement-facts table inside a details slide (Multi Daily) */
.sf { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 4px; }
.sf th { text-align: right; font-weight: 700; color: var(--muted); padding: 3px 4px; border-bottom: 1px solid var(--line-2); font-size: 11.5px; }
.sf td { padding: 2.5px 4px; border-bottom: 1px solid var(--line); color: var(--fg-2); direction: ltr; text-align: left; white-space: nowrap; }
.sf td:first-child { white-space: normal; }
.sf td:nth-child(2) { color: var(--fg); }
.sf td:nth-child(3), .sf th:nth-child(3) { color: var(--accent); text-align: center; }
.sf thead th:first-child { text-align: left; }
.sf-note { font-size: 11.5px !important; color: var(--muted) !important; }
.dt-s:has(.sf) { break-inside: auto; }

/* printing (PDF button / Ctrl+P): bio.js marks every slide .is-in; nothing may be mid-flight */
body.is-printing .slide *, body.is-printing .slide *::before, body.is-printing .slide *::after { transition: none !important; animation: none !important; }
@media print {
  .slide.no-print { display: none !important; }
  .slide .fw-b img { opacity: 1 !important; translate: none !important; }
  /* every slide prints in its finished state — not only the one that was on screen */
  .slide { background: var(--ink) !important; }
  .slide *, .slide *::before, .slide *::after { transition: none !important; animation: none !important; }
  .mask > .w, .slide .lists li, .tl-p, .s-cover .cv-packs img, .slide .dt-s { opacity: 1 !important; translate: none !important; }
  .s-cover .cv-packs img { rotate: var(--r, 0deg); }
  .pd-stage .pack.on { opacity: 1 !important; transform: none !important; }
  .pd-stage .ghost { opacity: 1 !important; transform: none !important; }
  .pd-stage .glow { opacity: 1 !important; scale: 1 !important; }
  .pd-stage .shine { display: none !important; }
  .orbit span { opacity: 1 !important; translate: calc(-50% + var(--x)) calc(-50% + var(--y)) !important; }
  .s-sec .bars i { translate: 0 0 !important; }
  .tri-c .meter i { width: var(--w) !important; }
  .tri-c::after, .tl-line i { transform: scaleX(1) !important; }
  .cmp .y { scale: .78 !important; }
  .tl-st::before { scale: 1 !important; }
}
@media (prefers-reduced-motion: reduce) {
  .mask > .w { translate: 0 0; }
  .pd-stage .pack.on, .pd-stage .ghost, .slide .lists li, .s-cover .cv-packs img { opacity: 1; transform: none; translate: none; }
  .pd-stage .glow { opacity: 1; scale: 1; }
  .orbit span { opacity: 1; translate: calc(-50% + var(--x)) calc(-50% + var(--y)); }
}
.stats.n1 { grid-template-columns: 1fr; max-width: 240px; }
.stats.n2 { grid-template-columns: repeat(2, 1fr); }
.flv button { white-space: nowrap; }