/* OD Nutra remake: home hero (frame 1).
   Structure from Lino's wireframe (two rounded panels, logo left, nav pill right, title
   bottom-left, "Made in house" bottom-right). From the reference: the product jar sitting
   across the seam of the two panels and the stacked product cards on the right.
   Type and brand colours come from ds/tokens.css (first OD Nutra project): Geist only,
   Poppins only for the wordmark. */

:root {
  /* Remake additions, taken from the wireframe */
  --navy-900: #0f2340;          /* Get a Quote pill (white text 15.9:1) */
  --navy-800: #1a3456;          /* its hover */
  --navy-700: #34506b;          /* "Made in house" eyebrow (7.0:1 on the panel) */
  --aqua-cta: #35d0c6;          /* Get a Sample pill (teal-950 text 10.6:1) */
  --aqua-cta-hover: #5adbd2;
  --panel: #e9eded;             /* panel ground */
  --panel-light: #fbfdfd;       /* the light pool behind the jar */
  --ink-title: var(--neutral-800);   /* 9.6:1 on the panel */
  --ink-body: var(--neutral-700);    /* 6.4:1 on the panel */
  --frame: clamp(8px, 1vw, 14px);
  --seam: 6px;
  --pad-x: clamp(22px, 2.5vw, 40px);
  --hero-h: max(100svh, 640px);
  --jar-w: min(29vw, 56svh, 500px);
  --jar-y: 48%;
  --loop: 12s;
  --line: #4fb4c4;              /* the drawn outline */
  --rgb-line: 93 178 195;
  /* Lino 2026-11-11: the 'Made in house' size (17px) is the size for every eyebrow and body line */
  --text-eyebrow: 1.0625rem;
  --text-body: 1.0625rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--white); color: var(--ink-title);
  font-family: var(--font-sans); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; }
a { color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: var(--radius-pill); background: var(--white); color: var(--text-1); text-decoration: none; font-weight: 500; }
.skip:focus-visible { top: 16px; }
:focus-visible { outline: 2px solid var(--teal-700); outline-offset: 3px; border-radius: var(--radius-focus); }

/* ---------- Frame and panels ---------- */
.hero { position: relative; height: var(--hero-h); padding: var(--frame); overflow: hidden; }
.hero__main { display: grid; grid-template-columns: 1fr 1fr; gap: var(--seam); height: 100%; }
.panel { position: relative; border-radius: var(--radius-panel); background-color: var(--panel); overflow: hidden; }
/* A soft light pool that meets at the seam, so the jar reads as lit from the middle */
.panel--a { background-image: radial-gradient(62% 58% at 100% var(--jar-y), var(--panel-light) 0%, rgb(251 253 253 / 0) 72%); }
.panel--b { background-image: radial-gradient(62% 58% at 0% var(--jar-y), var(--panel-light) 0%, rgb(251 253 253 / 0) 72%); }

/* ---------- Top bar ---------- */
.bar {
  position: fixed; z-index: 40; top: calc(var(--frame) + clamp(16px, 2.2vw, 26px));
  left: calc(var(--frame) + var(--pad-x)); right: calc(var(--frame) + clamp(14px, 1.6vw, 26px));
  display: flex; align-items: center; justify-content: space-between; gap: 24px; pointer-events: none;
}
.bar > * { pointer-events: auto; }
/* Scrolling down dissolves the bar into dust and scrolling up gathers it again (script: "Navbar dust") */
.bar { transition: opacity 140ms ease; }
.bar--gone { opacity: 0; }
.bar--gone > * { pointer-events: none; }
.bar-dust { position: fixed; top: 0; left: 0; z-index: 41; pointer-events: none; }

.wm { display: inline-flex; align-items: center; gap: 0.12em; font-size: clamp(24px, 2vw, 30px); line-height: 1; letter-spacing: -0.02em; text-decoration: none; }
.wm__tab { width: 1.42em; height: 1.42em; flex: none; margin-right: 0.22em; filter: drop-shadow(0 1px 2px rgb(var(--rgb-ink) / 0.18)); }
.wm__od { font-family: "Poppins", var(--font-sans); font-weight: 800; color: var(--teal-500); letter-spacing: -0.01em; }
.wm__nutra { font-family: "Poppins", var(--font-sans); font-weight: 600; color: var(--aqua-400); letter-spacing: -0.03em; }

.nav {
  position: relative; display: flex; align-items: center; gap: clamp(20px, 2vw, 32px);
  height: 54px; padding: 5px 5px 5px 26px; border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.94); border: 1px solid rgb(255 255 255 / 0.9); /* near solid: it sits on the dark hero first */
  box-shadow: 0 1px 2px rgb(var(--rgb-ink) / 0.04), 0 8px 24px rgb(var(--rgb-ink) / 0.05);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
}
.nav__links { display: flex; gap: clamp(18px, 1.7vw, 28px); margin: 0; padding: 0; list-style: none; }
.nav__link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 0.9375rem; letter-spacing: var(--ui-track); color: var(--ink-body); text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}
.nav__link:hover { color: var(--text-1); }
.nav__link--key { color: var(--text-1); font-weight: 500; }
.nav__menu {
  display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 6px;
  border: 0; background: none; font: inherit; font-size: 0.9375rem; font-weight: 500; color: var(--text-1); cursor: pointer;
}
.nav__menu svg { width: 16px; height: 16px; }
.nav__panel {
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 240px; padding: 8px;
  display: grid; border-radius: var(--radius-card); background: var(--white);
  box-shadow: 0 2px 6px rgb(var(--rgb-ink) / 0.06), 0 18px 40px rgb(var(--rgb-ink) / 0.14);
}
.nav__panel[hidden] { display: none; }
.nav__panel a { display: flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: var(--radius-item); font-size: 1rem; color: var(--text-1); text-decoration: none; }
.nav__panel a:hover { background: var(--neutral-50); }

/* ---------- Buttons: pill + round arrow dot ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 14px; flex: none;
  border-radius: var(--radius-pill); text-decoration: none; font-weight: 500; letter-spacing: var(--btn-track); white-space: nowrap;
  transition: background-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.btn__dot { display: grid; place-items: center; border-radius: 50%; background: var(--white); flex: none; }
.btn__dot svg { width: 16px; height: 16px; transition: transform var(--dur-slow) var(--ease-spring); }
.btn:hover .btn__dot svg { transform: translateX(3px); }
.btn--navy { height: 44px; padding: 0 4px 0 20px; background: var(--navy-900); color: var(--white); font-size: 0.9375rem; }
.btn--navy .btn__dot { width: 36px; height: 36px; color: var(--navy-900); }
.btn--navy:hover { background: var(--navy-800); }
.btn--aqua { height: 52px; padding: 0 5px 0 24px; background: var(--aqua-cta); color: var(--teal-950); font-size: 1rem; box-shadow: 0 10px 30px -10px rgb(53 208 198 / 0.7); }
.btn--aqua .btn__dot { width: 42px; height: 42px; color: var(--teal-950); }
.btn--aqua:hover { background: var(--aqua-cta-hover); }

/* ---------- Left panel: proof, title, CTA ---------- */
.intro { position: absolute; left: var(--pad-x); right: var(--pad-x); bottom: clamp(28px, 3.4vw, 48px); }
.proof { display: flex; align-items: center; gap: 10px; margin: 0; }
.proof__faces { display: flex; }
.proof__faces img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--panel); }
.proof__faces img + img { margin-left: -10px; }
.proof__text { font-size: 0.8125rem; line-height: 1.2; letter-spacing: var(--small-track); color: var(--ink-body); }
.title {
  max-width: 10.6em; margin: clamp(14px, 1.4vw, 20px) 0 clamp(22px, 2.2vw, 32px);
  font-size: clamp(2.125rem, 1rem + 2.35vw, 3.375rem); font-weight: 500; line-height: 1.02; letter-spacing: -0.04em;
  color: var(--ink-title); text-wrap: balance;
}
.title em { font-style: normal; color: var(--teal-600); }   /* Lino 2026-11-12: "manufacturing." in the site's teal, 4.35:1 on the panel (large text) */

/* ---------- Right panel: product cards and "Made in house" ---------- */
.panel--b { --edge-r: clamp(20px, 2.4vw, 40px); }   /* the right edge the cards and "Made in house" share */
.picks {
  position: absolute; right: var(--edge-r); top: 46%; transform: translateY(-50%);
  display: grid; gap: 34px; margin: 0; padding: 0; list-style: none;
}
.pick { position: relative; display: block; text-decoration: none; border-radius: 24px; }
.pick__shot {
  position: relative; display: grid; place-items: center; width: clamp(112px, 10.4vw, 156px); aspect-ratio: 1;
  border-radius: 24px; background: var(--white);
  box-shadow: 0 1px 2px rgb(var(--rgb-ink) / 0.05), 0 14px 30px -12px rgb(var(--rgb-ink) / 0.18);
  transition: transform var(--dur-slow) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out);
}
.pick__shot img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 13% 0; object-fit: contain; transition: transform var(--dur-slow) var(--ease-out); }
.pick__shot--tub img { padding: 0 15%; }
.pick__mark { position: absolute; left: 50%; top: 55%; width: 15%; height: auto; aspect-ratio: 1; transform: translate(-50%, -50%); color: rgb(214 240 243 / 0.82); }
.pick__shot--tub .pick__mark { top: 58%; width: 14%; color: rgb(200 222 225 / 0.7); }
.pick__plus {
  position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%);
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--neutral-950); color: var(--white); box-shadow: 0 0 0 4px var(--panel);
  transition: transform var(--dur-slow) var(--ease-spring);
}
.pick__plus svg { width: 14px; height: 14px; }
.pick:hover .pick__shot { transform: translateY(-3px); box-shadow: 0 1px 2px rgb(var(--rgb-ink) / 0.05), 0 22px 38px -14px rgb(var(--rgb-ink) / 0.24); }
.pick:hover .pick__shot img { transform: scale(1.05); }
.pick:hover .pick__plus { transform: translate(-50%, 50%) rotate(90deg); }

/* Lino round M: the hero reads as three areas (title, jar, cards). "Made in house" mirrors the left
   panel: flush right on the same edge as the product cards, and never wider than the room between
   the jar and that edge */
.made {
  position: absolute; right: var(--edge-r); bottom: clamp(32px, 4.2vw, 60px); text-align: right; width: min(282px, 70%);
}
.made__eyebrow { margin: 0 0 10px; font-size: var(--text-eyebrow); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--navy-700); }
.made__text { margin: 0; font-size: var(--text-body); line-height: 1.38; letter-spacing: -0.01em; color: var(--ink-body); }

/* ---------- Jar loop ---------- */
.jar {
  position: absolute; z-index: 5; left: 50%; top: calc(var(--frame) + (var(--hero-h) - 2 * var(--frame)) * 0.48);
  width: var(--jar-w); margin: 0; transform: translate(-50%, -50%); pointer-events: none;
}
.jar__float { animation: jar-float 6s ease-in-out infinite alternate; }
.jar__stage { position: relative; }
.jar__body { position: relative; animation: jar-fill var(--loop) linear infinite; }
.jar__img { position: relative; display: block; width: 100%; height: auto; }
/* The turn. Two rings of 30 faces wrap the photo's cylinder: the label band (34% to 76% of the
   photo height) and the lid ribs (top 26%). The photo's light stays still, as on a turntable:
   the rib layer is masked by the measured rib brightness, the band fades towards the silhouette.
   --bw is the cylinder diameter; a face is 2r tan(6deg) wide and shows 1/30 of the unrolled band. */
.jar__turn {
  position: absolute; inset: 0; pointer-events: none;
  -webkit-mask: url("assets/jar-500.webp") center / 100% 100% no-repeat; mask: url("assets/jar-500.webp") center / 100% 100% no-repeat;
}
.jar__lid, .jar__band { position: absolute; left: 0; right: 0; perspective: calc(var(--jar-w) * 7); }
.jar__band {
  top: 34%; height: 42%; --bw: calc(var(--jar-w) * 0.982);
  -webkit-mask: linear-gradient(90deg, transparent 1%, #000 24%, #000 76%, transparent 99%); mask: linear-gradient(90deg, transparent 1%, #000 24%, #000 76%, transparent 99%);
  animation: jar-label var(--loop) linear infinite;
}
.jar__lid {
  top: 0; height: 26.1%; --bw: calc(var(--jar-w) * 0.954);
  -webkit-mask: url("assets/jar-lid-env.webp") 0 0 / 100% 100% no-repeat; mask: url("assets/jar-lid-env.webp") 0 0 / 100% 100% no-repeat;
}
.jar__ring {
  position: absolute; left: 50%; top: 0; width: 0; height: 100%; transform-style: preserve-3d;
  --fw: calc(var(--bw) * 0.1056); --arc: calc(var(--bw) * 0.10472);
  transform: translateZ(calc(var(--bw) / -2)) rotateY(0deg);
  animation: jar-turn var(--loop) linear infinite;
}
.jar__ring i {
  position: absolute; top: 0; left: calc(var(--fw) / -2); width: var(--fw); height: 100%;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  transform: rotateY(calc(var(--i) * 12deg)) translateZ(calc(var(--bw) / 2));
}
.jar__band i {
  background: url("assets/jar-band.webp") repeat-x;
  background-size: calc(var(--bw) * 3.14159) 100%;
  background-position: calc(var(--fw) / 2 - var(--bw) * 0.785398 - var(--i) * var(--arc)) 0;
}
/* 220 ribs round the lid, a narrow highlight in each, as measured on the photo (13.6 px at 1000 px) */
.jar__lid i {
  background: linear-gradient(90deg, rgb(214 220 220 / 0) 30%, rgb(214 220 220 / 0.5) 44%, rgb(214 220 220 / 0) 58%) repeat-x;
  background-size: calc(var(--bw) * 0.014280) 100%;
  background-position: calc(var(--i) * var(--arc) * -1) 0;
}
.jar__halo {
  position: absolute; inset: -18% -22%; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--rgb-line) / 0.34), rgb(var(--rgb-line) / 0.12) 55%, rgb(var(--rgb-line) / 0) 100%);
  animation: jar-halo var(--loop) linear infinite;
}
/* The bright edge that rides the fill and the drain; masked to the jar's own silhouette */
.jar__scan {
  position: absolute; inset: 0; overflow: hidden;
  -webkit-mask: url("assets/jar-500.webp") center / 100% 100% no-repeat; mask: url("assets/jar-500.webp") center / 100% 100% no-repeat;
}
.jar__scan i {
  position: absolute; left: 0; right: 0; top: 0; height: 14%;
  background: linear-gradient(to bottom, rgb(196 245 252 / 0) 0%, rgb(196 245 252 / 0.55) 46%, rgb(255 255 255 / 0.95) 50%, rgb(196 245 252 / 0.35) 54%, rgb(196 245 252 / 0) 100%);
  transform: translateY(-50%); animation: jar-scan var(--loop) linear infinite;
}
.jar__line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 3px rgb(var(--rgb-line) / 0.9)) drop-shadow(0 0 12px rgb(var(--rgb-line) / 0.55)); }
.jar__line path { fill: none; stroke: var(--line); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1 1; }
.jar__path { animation: jar-draw var(--loop) linear infinite; }
.jar__seam { animation: jar-seam var(--loop) linear infinite; }
.jar__shadow { position: relative; height: 0; animation: jar-shadow-in var(--loop) linear infinite; }
.jar__shadow i {
  position: absolute; left: 12%; right: 12%; top: -1.5%; height: calc(var(--jar-w) * 0.07); border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--rgb-ink) / 0.26), rgb(var(--rgb-ink) / 0));
  animation: jar-shadow-float 6s ease-in-out infinite alternate;
}

/* Loop, 12 s: 0-13% outline draws, 13-25% fills bottom-up, 28-36% label prints, 39-84% one slow
   turn (label round to the Supplement Facts on the back and home again), 88-96% drains top-down,
   then the outline erases itself. The build and drain keep the 8 s loop's durations. */
@keyframes jar-draw {
  0% { stroke-dashoffset: 1; opacity: 1; }
  13.33% { stroke-dashoffset: 0; opacity: 1; }
  25.33% { stroke-dashoffset: 0; opacity: 1; }
  32% { stroke-dashoffset: 0; opacity: 0; }
  88% { stroke-dashoffset: 0; opacity: 0; }
  92% { stroke-dashoffset: 0; opacity: 1; }
  96% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: -1; opacity: 1; }
}
@keyframes jar-seam {
  0%, 8% { stroke-dashoffset: 1; opacity: 1; }
  16% { stroke-dashoffset: 0; opacity: 1; }
  25.33% { stroke-dashoffset: 0; opacity: 1; }
  32% { stroke-dashoffset: 0; opacity: 0; }
  88% { stroke-dashoffset: 0; opacity: 0; }
  92% { stroke-dashoffset: 0; opacity: 1; }
  96% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: -1; opacity: 1; }
}
@keyframes jar-fill {
  0%, 13.33% { clip-path: inset(100% 0 0 0); filter: brightness(1.5) saturate(0.7); }
  25.33% { clip-path: inset(0 0 0 0); filter: brightness(1.12) saturate(0.95); }
  33.33%, 89.33% { clip-path: inset(0 0 0 0); filter: none; }
  96%, 100% { clip-path: inset(100% 0 0 0); filter: brightness(1.4) saturate(0.7); }
}
@keyframes jar-scan {
  0%, 13.33% { top: 100%; opacity: 0; }
  14% { top: 100%; opacity: 1; }
  24.67% { top: 0%; opacity: 1; }
  26%, 89.33% { top: 0%; opacity: 0; }
  90% { top: 0%; opacity: 1; }
  95.33% { top: 100%; opacity: 1; }
  96.67%, 100% { top: 100%; opacity: 0; }
}
@keyframes jar-label {
  0%, 28% { opacity: 0; filter: blur(6px); transform: translateY(4%); }
  36%, 88% { opacity: 1; filter: blur(0); transform: none; }
  90.67%, 100% { opacity: 0; filter: blur(4px); transform: none; }
}
/* One full turn, eased in and out; the front faces the camera again before the drain */
@keyframes jar-turn {
  0%, 39% { transform: translateZ(calc(var(--bw) / -2)) rotateY(0deg); animation-timing-function: cubic-bezier(.45, 0, .2, 1); }
  84%, 100% { transform: translateZ(calc(var(--bw) / -2)) rotateY(-360deg); }
}
@keyframes jar-halo {
  0% { opacity: 0.35; }
  9.33% { opacity: 1; }
  26.67%, 88% { opacity: 0.45; }
  94.67% { opacity: 1; }
  100% { opacity: 0.35; }
}
@keyframes jar-shadow-in {
  0%, 16% { opacity: 0; }
  25.33%, 89.33% { opacity: 1; }
  96%, 100% { opacity: 0; }
}
@keyframes jar-float { from { transform: translateY(6px); } to { transform: translateY(-10px); } }
@keyframes jar-shadow-float { from { transform: scale(1); opacity: 1; } to { transform: scale(0.86); opacity: 0.7; } }


/* ---------- Narrower desktops: the links fold into a menu ---------- */
@media (max-width: 1239px) {
  .nav { padding-left: 14px; gap: 10px; }
  .nav__links { display: none; }
  .nav__menu { display: inline-flex; }
}

/* ---------- Landscape screens: the title stays in the left area ----------
   The title sits beside the jar, so it never runs past the jar's left edge (with 28px of air): its
   size is capped by the room between the panel padding and the jar. The cap is still measured on the
   old 9.9em line "Complete supplement" so the shorter "Supplement / manufacturing." (Lino 2026-11-12)
   keeps the same size and leaves more air before the jar instead of growing. "Made in house" keeps the same air on the right side. Portrait screens put
   both under the jar and keep the full size. */
@media (min-width: 760px) and (min-aspect-ratio: 4/5) {
  .title { font-size: min(clamp(2.125rem, 1rem + 2.35vw, 3.375rem), max(1.75rem, calc((50vw - var(--jar-w) / 2 - var(--frame) - var(--pad-x) - 28px) / 9.9))); }
  .made { width: min(282px, 70%, calc(50vw - var(--jar-w) / 2 - var(--frame) - var(--edge-r) - 28px)); }
}

/* ---------- Portrait tablets: more room for the jar ---------- */
@media (min-width: 760px) and (max-aspect-ratio: 4/5) {
  :root { --jar-w: min(40vw, 44svh); }
}

/* ---------- Phones: one column; the jar leads, the right panel follows ---------- */
@media (max-width: 759px) {
  :root { --hero-h: auto; --jar-w: min(74vw, 360px); --seam: 8px; }
  .hero { height: auto; }
  .hero__main { grid-template-columns: 1fr; height: auto; }
  .panel--a { padding: calc(96px + var(--jar-w) * 0.927 + 56px) var(--pad-x) 36px; background-image: radial-gradient(80% 42% at 50% 34%, var(--panel-light) 0%, rgb(251 253 253 / 0) 75%); }
  .panel--b { display: grid; gap: 40px; padding: 36px var(--pad-x) 44px; background-image: none; }
  .bar { top: calc(var(--frame) + 14px); left: calc(var(--frame) + 16px); right: calc(var(--frame) + 10px); gap: 10px; }
  .intro { position: static; }
  .nav__menu { padding: 0 10px; }
  .nav__menu span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav__menu svg { width: 18px; height: 18px; }
  .nav { height: 48px; padding: 3px; gap: 2px; }
  .btn--navy { height: 40px; padding-left: 14px; font-size: 0.875rem; gap: 10px; }
  .btn--navy .btn__dot { width: 32px; height: 32px; }
  .wm { font-size: 22px; }
  .jar { top: calc(var(--frame) + 96px); transform: translateX(-50%); }
  .title { font-size: clamp(2rem, 8.6vw, 2.5rem); }
  .picks { position: static; transform: none; grid-auto-flow: column; justify-content: start; gap: 18px; padding-bottom: 18px; }
  .pick__shot { width: clamp(120px, 38vw, 160px); }
  .made { position: static; width: auto; max-width: 30em; order: -1; text-align: left; }
}
/* Small phones: the header pill loses its arrow dot so logo, menu and pill fit side by side */
@media (max-width: 379px) {
  .bar .btn--navy { padding: 0 14px; }
  .bar .btn--navy .btn__dot { display: none; }
  .bar .btn--navy span:first-child { font-size: 0.8125rem; }
  .wm { font-size: 19px; }
}

/* ---------- Reduced motion: the finished jar, standing still ---------- */
@media (prefers-reduced-motion: reduce) {
  .jar *, .jar *::before, .jar *::after { animation: none !important; }
  .jar__line, .jar__scan { display: none; }
  .jar__halo { opacity: 0.45; }
  .btn__dot svg, .pick__shot, .pick__shot img, .pick__plus { transition: none; }
}

/* ---------- Dark ground (Lino 2026-11-11: "lo que queria que fuera oscurisimo es el blanco de fondo,
   no los dos cuadrados") ----------
   The frame around and between the two light panels is a near-black midnight blue. In the pinned
   reel it stays dark while the panels slide away and the film opens, and turns white only once the
   film nearly fills the frame (--ground, set in the reel script), so frame 2 settles on white as before. */
:root { --hero-bg: #070f1f; }
.hero { background: var(--hero-bg); }
.reel-on .hero { background: color-mix(in srgb, var(--hero-bg) calc(var(--ground, 1) * 100%), transparent); }
.hero .proof__faces img { box-shadow: 0 0 0 2px var(--panel); }