/* Sabahebat homepage v2: a scroll-driven paper explainer.
   Scenes are pinned stages (1440x900 desktop, 390x720 phone) scaled to fit the
   window; site.js drives a camera and the paper through them as you scroll.
   Without .motion (reduced motion, ?static, no JS) every scene lays out flat. */

:root {
  --paper: #EEE4CF; --paper-2: #E6D8B9; --card: #F7F1E3; --ink: #1A1814;
  --red: #B3261E; --red-2: #E0634E; --hl: #F4CF3A; --tape: rgba(238, 226, 176, .86);
  --sw: 1440px; --sh: 900px;
  --serif: "Source Serif 4", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --display: Anton, "Bebas Neue", Impact, "Arial Narrow", sans-serif;
}
@media (max-aspect-ratio: 1/1), (max-width: 760px) {
  :root { --sw: 390px; --sh: 720px; }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); font-family: var(--serif); overflow-x: hidden;
  background-color: var(--paper);
  background-image: radial-gradient(rgba(60, 40, 10, .07) 1px, transparent 1.2px), radial-gradient(rgba(60, 40, 10, .05) 1px, transparent 1.2px);
  background-size: 5px 5px, 7px 7px; background-position: 0 0, 2px 3px;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
a:hover { color: #8E1C15; }
a:focus-visible, button:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
p { margin: 0; text-wrap: pretty; }
h1, h2, h3 { margin: 0; font-weight: 400; }
img { display: block; max-width: none; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 14px; font-family: var(--mono); }
.skip:focus { left: 8px; }

.display { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: .005em; }
.mono { font-family: var(--mono); }
.small { font-size: 12px; }
.lbl { color: var(--red); }
.char .lbl { color: var(--hl); }
.kicker { font-size: 14px; display: flex; align-items: center; gap: 10px; }
.sq { width: 12px; height: 12px; background: var(--red); display: inline-block; }
.hl { background-image: linear-gradient(var(--hl), var(--hl)); background-repeat: no-repeat; background-size: 100% 100%; display: inline-block; line-height: 1; padding: 0 .09em; margin-left: -.09em; }
.char .hl { color: var(--ink); }
.ph { font-family: var(--mono); font-weight: 600; font-size: .8em; letter-spacing: 0; text-transform: none; border: 1.5px dashed currentColor; padding: 0 5px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ph.nw { white-space: nowrap; }
.card { background: var(--card); color: var(--ink); }
.torn { clip-path: polygon(0 2%, 6% 0, 13% 2.5%, 21% .5%, 30% 2%, 38% 0, 47% 2.2%, 55% .4%, 64% 2%, 72% 0, 81% 2.4%, 90% .6%, 100% 2%, 100% 97%, 93% 100%, 85% 97.6%, 76% 99.6%, 68% 97.4%, 59% 100%, 50% 97.8%, 41% 99.5%, 33% 97.2%, 24% 99.8%, 15% 97.5%, 7% 99.6%, 0 97%); }
.torn2 { clip-path: polygon(0 1%, 9% 0, 18% 1.4%, 29% .2%, 41% 1.2%, 52% 0, 63% 1.3%, 74% .3%, 86% 1.5%, 100% .4%, 99.2% 12%, 100% 26%, 99.4% 41%, 100% 57%, 99.3% 72%, 100% 86%, 99.5% 100%, 88% 99%, 76% 100%, 64% 98.8%, 51% 99.8%, 39% 98.9%, 27% 100%, 14% 99%, 2% 99.8%, .6% 86%, 0 71%, .7% 55%, 0 40%, .8% 24%, 0 11%); }
.shadow { box-shadow: 0 22px 34px -14px rgba(40, 25, 5, .5), 0 2px 4px rgba(40, 25, 5, .2); }
.char .shadow { box-shadow: 0 24px 36px -12px rgba(0, 0, 0, .75), 0 2px 4px rgba(0, 0, 0, .45); }
.halftone { background-color: #C9BC9E; background-image: radial-gradient(#1A1814 1.15px, transparent 1.45px); background-size: 6px 6px; }
.tape { position: absolute; background: var(--tape); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); width: 120px; height: 32px; z-index: 5; }
.tag { position: absolute; z-index: 6; background: var(--card); color: var(--ink); border: 1.5px dashed var(--ink); font: 11.5px/1.35 var(--mono); padding: 5px 8px; width: 170px; }
.cut { width: 100%; height: 100%; filter: drop-shadow(0 16px 16px rgba(40, 25, 5, .34)) drop-shadow(0 2px 2px rgba(40, 25, 5, .22)); }
.char .cut, .char .du-mk img, .char .du-bt img { filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .6)) drop-shadow(0 2px 2px rgba(0, 0, 0, .4)); }
.pen { fill: none; stroke: var(--red); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.char .pen { stroke: var(--red-2); }
.overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 7; }
.only-m { display: none; }
@media (max-aspect-ratio: 1/1), (max-width: 760px) {
  .only-d { display: none; }
  .only-m { display: inline; }
}
.wrap { max-width: 1296px; margin: 0 auto; padding: 0 24px; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; background: var(--ink); color: var(--paper); text-decoration: none; font: 600 15px var(--mono); transition: transform .12s steps(2, end), box-shadow .12s steps(2, end); }
.btn:hover { color: var(--paper); transform: translate(-3px, -3px); box-shadow: 4px 4px 0 var(--red); }
.btn:active { transform: translate(0, 0); box-shadow: none; }
.char .btn:hover, .card .btn:hover { box-shadow: 4px 4px 0 var(--hl); }
.link { font: 600 15px var(--mono); text-underline-offset: 5px; }
.link:hover, .nav a:hover { background-image: linear-gradient(var(--hl), var(--hl)); background-repeat: no-repeat; background-size: 100% 100%; color: var(--ink); }

/* ------------------------------------------------------------ masthead */
.masthead { position: relative; z-index: 30; }
.motion .masthead { position: absolute; top: 0; left: 0; right: 0; }
.motion .site-header { background-color: var(--paper); background-image: radial-gradient(rgba(60, 40, 10, .07) 1px, transparent 1.2px), radial-gradient(rgba(60, 40, 10, .05) 1px, transparent 1.2px); background-size: 5px 5px, 7px 7px; background-position: 0 0, 2px 3px; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 48px; border-bottom: 2px solid var(--ink); background: transparent; }
.brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; }
.brand { display: flex; align-items: center; gap: 12px; line-height: 0; }   /* the emblem, then the word SABAHEBAT */
.brand-logo { display: block; height: 52px; width: auto; }
.brand-word { display: block; height: 30px; width: auto; }   /* the word in the logo's lettering, drawn in ink (logo.word_svg) */
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav { display: flex; align-items: center; gap: 28px; font-size: 14px; }
.nav a { text-decoration: none; padding: 4px 2px; }
.nav .nav-cta { border: 2px solid var(--ink); padding: 10px 16px; }
.menu-btn { display: none; }
/* the menu (src/chrome.py, the same on every page): Home's arrow drops down the homepage's sections */
.nav a.here, .menu-panel nav a.here { background-image: linear-gradient(var(--hl), var(--hl)); background-repeat: no-repeat; background-size: 100% 100%; color: var(--ink); }
.nav-home { position: relative; display: flex; align-items: center; }
.nav-caret { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 40px; margin: 0 -10px 0 -2px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.nav-caret:hover, .nav-caret:focus-visible { background: var(--hl); }
.nav-caret svg, .mp-caret svg { width: 11px; height: 8px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s steps(2, end); }
.nav-caret[aria-expanded="true"] svg, .mp-caret[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-sub { position: absolute; left: -16px; top: calc(100% + 18px); z-index: 40; width: 244px; display: flex; flex-direction: column; background: var(--card); color: var(--ink); border: 2px solid var(--ink); box-shadow: 0 24px 40px -16px rgba(40, 25, 5, .6); transform-origin: 20% 0; }
.nav-sub[hidden] { display: none; }
.nav-sub::before { content: ""; position: absolute; left: -2px; right: -2px; top: -22px; height: 20px; }   /* lets the pointer cross the gap */
.nav .nav-sub a { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 16px; font-size: 14px; border-bottom: 1px dashed rgba(26, 24, 20, .28); }
.nav .nav-sub a:last-child { border-bottom: 0; }
.nav .nav-sub a:hover, .nav .nav-sub a:focus-visible { background: var(--hl); color: var(--ink); }
.nav-sub .n, .mp-sub .n { font-size: 12px; font-weight: 600; color: var(--red); }
html:not(.js) .nav-home:hover .nav-sub[hidden], html:not(.js) .nav-home:focus-within .nav-sub[hidden] { display: flex; }
.motion .nav-sub:not([hidden]) { animation: pop 250ms steps(1, end) both; }
.nav-ext { white-space: nowrap; }
.ext { width: 10px; height: 10px; margin-left: 5px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lang { position: relative; display: flex; align-items: center; gap: 6px; font-size: 13px; }
/* EN, BM and 中文 (chrome.lang_switch): BM and 中文 say, in their own language, that their version is coming (nav.js) */
.lang button, .mp-lang button { padding: 4px 3px; border: 0; background: none; color: inherit; font: inherit; white-space: nowrap; cursor: pointer; }
.lang button[aria-pressed="true"], .mp-lang button[aria-pressed="true"] { text-decoration: underline; text-underline-offset: 4px; }
.lang button:hover, .lang button:focus-visible, .mp-lang button:hover, .mp-lang button:focus-visible { background: var(--hl); }
.lang-note { position: absolute; top: calc(100% + 12px); right: 0; z-index: 70; width: max-content; max-width: min(300px, calc(100vw - 32px)); margin: 0; padding: 9px 13px 10px; background: var(--card); color: var(--ink); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--hl); font-size: 13.5px; font-weight: 600; line-height: 1.35; white-space: normal; rotate: -1.5deg; }
.motion .lang-note { animation: noteIn 250ms steps(1, end) both; }
@keyframes noteIn { 0% { opacity: 0; transform: translateY(-8px) scale(.94); } 33% { opacity: 1; transform: translateY(2px) scale(1.02); } 66% { transform: translateY(-1px); } 100% { transform: none; } }
.lang-note[hidden] { display: none; }
.ticker { position: relative; height: 44px; background: var(--ink); color: var(--paper); overflow: hidden; display: flex; align-items: center; font: 14px var(--mono); }
.ticker .track { display: flex; width: max-content; padding-left: 48px; }
.ticker .set { display: flex; align-items: center; gap: 40px; padding-right: 40px; white-space: nowrap; }
.ticker .sep { color: var(--hl); }
.motion .ticker::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 60px; background: var(--ink); box-shadow: -14px 0 12px -4px var(--ink); }
.tickbtn { z-index: 1; position: absolute; right: 10px; top: 50%; margin-top: -18px; width: 36px; height: 36px; border: 2px solid var(--paper); background: var(--ink); color: var(--paper); display: none; align-items: center; justify-content: center; padding: 0; cursor: pointer; }
.tickbtn svg { width: 12px; height: 14px; }
.tickbtn .i-play { display: none; }
.ticker.paused .tickbtn .i-play { display: block; }
.ticker.paused .tickbtn .i-pause { display: none; }
.motion .tickbtn { display: flex; }
.motion .ticker .track { animation: marquee 70s linear infinite; }
.ticker:hover .track, .ticker.paused .track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (max-width: 1180px) {
  .site-header { padding: 18px 28px; gap: 18px; }
  .brand-logo { height: 46px; }
  .brand-word { height: 26px; }
  .nav { gap: 16px; font-size: 13px; }
  .nav .nav-cta { padding: 9px 12px; }
  .lang { gap: 4px; font-size: 12px; }
}.nav a { white-space: nowrap; }
/* small landscape screens (761-960px): the header keeps to one line */
@media (max-width: 960px) and (min-width: 761px) and (min-aspect-ratio: 1001/1000) {
  .site-header { padding: 16px 20px; gap: 14px; }
  .brand { gap: 8px; }
  .brand-logo { height: 40px; }
  .brand-word { height: 23px; }
  .nav { gap: 12px; font-size: 12.5px; }
  .nav .nav-cta { padding: 8px 10px; }
  .lang { gap: 2px; font-size: 12px; }
}

@media (max-aspect-ratio: 1/1), (max-width: 760px) {
  .site-header { padding: 14px 18px; }
  .brand { gap: 9px; }
  .brand-logo { height: 40px; }
  .brand-word { height: 24px; }
  .lang { display: none; }
  .menu-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; }
  .nav { display: none; }
  .ticker { height: 36px; font-size: 12px; }
  .ticker .track { padding-left: 18px; }
  .ticker .set { gap: 28px; padding-right: 28px; }
}

/* ------------------------------------------------------------ main moments: snap points on iPhone, parking on other touch screens (see site.js) */
html { scrollbar-gutter: stable; }
html.motion.snap-native { scroll-snap-type: y mandatory; }
html.sb-park { overscroll-behavior: none; }
html.sb-park body { overflow: hidden; }
.snaps { position: absolute; left: 0; top: 0; width: 100%; height: 0; overflow: clip; pointer-events: none; }
.snaps > i { position: absolute; left: 0; width: 100%; scroll-snap-align: start; }
.snaps > i.stop { scroll-snap-stop: always; }

/* ------------------------------------------------------------ progress pen */
.progress { position: fixed; left: 0; top: 0; right: 0; height: 4px; z-index: 50; pointer-events: none; }
.progress i { display: block; height: 100%; background: var(--red); transform-origin: 0 50%; transform: scaleX(0); border-radius: 0 3px 3px 0; }
html:not(.motion) .progress { display: none; }

/* ------------------------------------------------------------ scenes + stages */
.scene { position: relative; }
.pin { position: relative; }
.phase { position: relative; overflow: hidden; height: calc(var(--sh) * var(--fitw, 1)); }
.stage { position: absolute; top: 0; left: 50%; width: var(--sw); height: var(--sh); transform: translateX(-50%) scale(var(--fitw, 1)); transform-origin: 50% 0; }
.cam { position: absolute; inset: 0; transform-origin: 50% 50%; }
.piece { position: absolute; }
.piece img { width: 100%; height: 100%; }

.motion .scene { height: calc(var(--vh, 1vh) * var(--len)); }
.motion .pin { position: sticky; top: 0; height: calc(var(--vh, 1vh) * 100); overflow: hidden; }
.motion .phase { position: absolute; inset: 0; height: auto; }
.motion .stage { top: 50%; transform: translate(-50%, -50%) scale(var(--fit, 1)); transform-origin: 50% 50%; }
/* scene clocks run 1.5x the scroll (site.js "pace"), with a short still stretch round each main moment */
.motion .act1 { --len: 613; z-index: 1; }
.motion .act2 { --len: 277.33; margin-top: calc(var(--vh, 1vh) * -100); z-index: 3; }
.motion .act2-more { z-index: 4; min-height: calc(var(--vh, 1vh) * 100); display: flex; flex-direction: column; justify-content: center; }
.motion .act2-more > .wrap { width: 100%; }
.motion .act3 { --len: 340; margin-top: calc(var(--vh, 1vh) * -100); z-index: 2; }
.motion.snap-native .act3 { --len: 380.11; }       /* iPhone/iPad: the zoom runs a little slower than the scroll (site.js SNAP_A3) */
.motion.snap-native .act1 { --len: 712; }          /* iPhone/iPad: stops >= 125vh apart, so slower to the estate from the air, inside the fruit and through the bunch's fall (site.js SNAP_A1) */
@media (max-aspect-ratio: 1/1), (max-width: 760px) {
  .motion .act1 { --len: 593; }
  .motion .act2 { --len: 273.33; }
  .motion .act3 { --len: 334; }
  .motion.snap-native .act3 { --len: 379.33; }
  .motion.snap-native .act1 { --len: 715.21; }
}
.motion .oil { clip-path: circle(0 at 50% 50%); }
/* inside the fruit (site.js bd): the palm's circle opens onto it, and it hands over to the estate when the bunch lands */
.breakdown { display: none; }
.motion .breakdown { display: block; visibility: hidden; clip-path: circle(0 at 50% 50%); z-index: 7; }
.bd-canvas { display: block; width: 100%; height: 100%; }
.portal-ring { display: none; }
.motion .portal-ring { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 8; }
.portal-ring circle { fill: none; stroke: var(--red); stroke-width: 7; }
/* the estate from the air (site.js a1, build_v2.py AERIAL): Membakut's circle opens onto it, an ink print that turns
   into the photo, whose colour fills in as you scroll; then the pen circles one palm and the bunch comes out of it */
.motion .aerial { visibility: hidden; clip-path: circle(0 at 50% 50%); z-index: 6; background: var(--paper); }
.ae-cam { position: absolute; inset: 0; transform-origin: 50% 50%; }
.ae-cam picture, .ae-cam img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ae-cam img { display: block; object-fit: cover; }
.ae-mute { position: absolute; inset: 0; }
.ae-mute img { filter: saturate(.35); }
.ae-mute::after { content: ""; position: absolute; inset: 0; background: var(--paper); opacity: .28; }
.ae-print.dots { mix-blend-mode: multiply; opacity: .6; }
.ae-print.off { visibility: hidden; }
.ae-pen { position: absolute; overflow: visible; }
.ae-pen .pen { stroke-width: 6.5; }
html:not(.motion) .ae-mute, html:not(.motion) .ae-print, html:not(.motion) .ae-pen { display: none; }
/* the slip that names it, taped on while the page holds on the colour (paper, so it reads on the photo) */
.ae-slip { position: absolute; left: 56px; bottom: 56px; z-index: 2; rotate: -3deg; }
.motion .ae-slip { visibility: hidden; }
.motion .ae-slip.on { visibility: visible; animation: slapDown 333ms steps(1, end) both; }
.ae-slip-in { display: flex; flex-direction: column; gap: 7px; padding: 18px 22px 16px; }
.ae-slip .display { font-size: 34px; line-height: .95; }
.ae-slip .mono { font-size: 13px; }
.t-slip { left: 30%; top: -13px; width: 92px; height: 26px; rotate: -5deg; }

/* stop-motion boil while a scene is on screen */
.motion .live .boil { animation: boil .36s steps(1) infinite; }
@keyframes boil { 0% { translate: 0 0; rotate: 0deg; } 33% { translate: .7px -.5px; rotate: .35deg; } 66% { translate: -.6px .4px; rotate: -.3deg; } }

/* pen strokes the camera draws */
.motion .draw { stroke-dasharray: 101 130; stroke-dashoffset: 104; }

/* ------------------------------------------------------------ ACT 1: opening */
.open { background: transparent; }
.o-hl { position: absolute; left: 72px; top: 170px; width: 640px; z-index: 6; }
.h1 { font-size: 104px; line-height: .98; margin-top: 16px; }
.h1 .ln { display: block; transform-origin: 0 100%; }
.o-body { font-size: 21px; line-height: 1.55; max-width: 540px; margin-top: 26px; }
.o-cta { display: flex; align-items: center; gap: 28px; margin-top: 28px; }
.o-map { left: 700px; top: 188px; width: 350px; height: 449px; rotate: -3deg; transform-origin: 17.24% 73.39%; z-index: 2; }
.fill { width: 100%; height: 100%; }
.sheet { width: 100%; height: 100%; background: #F5EEDD; }
.map-pen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 3; }
.shade { filter: drop-shadow(0 20px 18px rgba(40, 25, 5, .3)) drop-shadow(0 2px 2px rgba(40, 25, 5, .2)); }
.char .shade { filter: drop-shadow(0 22px 20px rgba(0, 0, 0, .62)) drop-shadow(0 2px 3px rgba(0, 0, 0, .4)); }
.map-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sheet { position: relative; }
.m-lab { position: absolute; display: flex; flex-direction: column; gap: 3px; white-space: nowrap; line-height: 1; pointer-events: none; }
.m-lab b { font-size: 21.7px; font-weight: 400; }
.m-lab i { font-style: normal; font-size: 13px; }
.m-water { position: absolute; left: 50%; top: 42%; font-size: 58px; line-height: 1; opacity: .1; pointer-events: none; }   /* stays inside the sheet */
.o-note { position: absolute; left: -62%; top: 56%; width: 136px; text-align: right; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--red); rotate: -3deg; }
.t-map { left: 36%; top: -16px; rotate: -5deg; }
.o-palm { left: 1040px; top: 150px; width: 390px; height: 459px; rotate: -1.5deg; z-index: 3; }
.o-palm .tag { left: 52%; top: 72%; width: 150px; }
.t-palm { left: 42%; top: 86%; width: 104px; height: 30px; rotate: -14deg; }
.o-durian { left: 880px; top: 560px; width: 250px; height: 299px; rotate: 4deg; z-index: 4; transform-origin: 50% 8%; }
.o-durian .tag { left: -46%; top: 78%; width: 130px; }
.t-dur { left: 26%; top: 2%; width: 96px; height: 28px; rotate: 8deg; }
.o-card { left: 1170px; top: 626px; width: 206px; rotate: 4deg; z-index: 5; }
.o-card .inner { padding: 26px 22px; display: flex; flex-direction: column; gap: 8px; }
.o-card .display { font-size: 40px; line-height: .95; }
.o-card .rule { display: block; height: 2px; background: var(--ink); }
.o-card .keep-case { text-transform: none; }        /* myGAP is written with a lower-case "my" */
.t-card { left: 28%; top: -14px; width: 100px; height: 28px; rotate: -6deg; }
.hk { width: 100%; height: 100%; }

/* ACT 1: oil palm */
.oil { background-color: var(--paper); background-image: radial-gradient(rgba(60, 40, 10, .07) 1px, transparent 1.2px), radial-gradient(rgba(60, 40, 10, .05) 1px, transparent 1.2px); background-size: 5px 5px, 7px 7px; }
.oi-cam { transform-origin: 0 0; }
.oi-hl { position: absolute; left: 770px; top: 232px; width: 600px; z-index: 4; }   /* centred on the harvest print */
.h2 { font-size: 96px; line-height: .95; margin-top: 14px; }
.h2 .ln { display: block; transform-origin: 0 100%; }
.oi-body { font-size: 20px; line-height: 1.6; max-width: 540px; margin-top: 22px; }
.oi-foot { display: flex; align-items: center; gap: 30px; margin-top: 30px; }
.oi-stamp { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 14px 5px; border: 4px solid var(--red); color: var(--red); rotate: -7deg; -webkit-mask-image: url(../sustainability/art/ink.webp); mask-image: url(../sustainability/art/ink.webp); -webkit-mask-size: 300px; mask-size: 300px; }
a.oi-stamp { text-decoration: none; transition: transform .12s steps(2, end); }   /* links to the certificate */
a.oi-stamp:hover, a.oi-stamp:focus-visible { color: var(--red); transform: scale(1.04); }
.oi-stamp .mono { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.oi-stamp .display { font-size: 34px; line-height: 1; }
.oi-mill { position: absolute; z-index: 5; display: flex; flex-direction: row; align-items: center; gap: 6px; font-size: 12px; }
.oi-mill .mill-ico { width: 44px; height: 42px; display: block; overflow: visible; transform-origin: 50% 100%; }
.mill-ico * { stroke: var(--ink); stroke-width: 2.6; stroke-linejoin: round; }
.mill-ico .mi-wall, .mill-ico .mi-puff { fill: var(--card); }
.mill-ico .mi-band { fill: var(--red); } .mill-ico .mi-door { fill: var(--ink); } .mill-ico .mi-win { fill: var(--hl); stroke-width: 2; }
/* the photos (Kyle, 2026-09-28). Positions: build_v2.py OIL. Screen B sits one stage below screen A. */
.oi-harvest { z-index: 1; }
.oi-print { background: #E9DEC4; }
html:not(.motion) .oi-print, .oi-print.cut { -webkit-mask: url(../assets/oil-harvest-hole.svg) 0 0 / 100% 100% no-repeat; mask: url(../assets/oil-harvest-hole.svg) 0 0 / 100% 100% no-repeat; }
.t-harv { left: 38%; top: -14px; rotate: -4deg; }
.oi-note { position: absolute; z-index: 6; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--red); }
.oi-heap { z-index: 2; }
.t-heap1 { left: -28px; top: 16px; width: 96px; height: 28px; rotate: -36deg; }
.t-heap2 { right: -28px; top: 12px; width: 96px; height: 28px; rotate: 32deg; }
.oi-worker { z-index: 3; }
.overlay.oi-under { z-index: 2; }                 /* the route runs under the worker's cutout, like a line drawn before he was stuck down */
.oi-worker .hk { transform-origin: 50% 98%; }
.oi-bunch { position: absolute; z-index: 6; }
.oi-bunch-in { width: 100%; height: 100%; transform-origin: 50% 88%; }
.oi-bunch img { width: 100%; height: 100%; }
.oi-bunch.up img { filter: drop-shadow(0 30px 24px rgba(40, 25, 5, .42)) drop-shadow(0 4px 4px rgba(40, 25, 5, .22)); }
.oi-fruits { position: absolute; inset: 0; z-index: 5; pointer-events: none; --hop: 50px; }
.oi-trail { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.oi-dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--red); }
html:not(.motion) .oi-trail { display: none; }
.oi-fr { position: absolute; transform: rotate(var(--r)); filter: drop-shadow(0 3px 2px rgba(40, 25, 5, .35)); background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Cellipse cx='20' cy='14' rx='18.5' ry='12.5' fill='%23F7F1E3'/%3E%3Cellipse cx='20' cy='14' rx='16' ry='10' fill='%23D6452B'/%3E%3Cpath d='M14 4.73A16 10 0 0 0 14 23.27C18 20 18 8 14 4.73Z' fill='%232B0F09'/%3E%3Cellipse cx='26' cy='10.5' rx='4.5' ry='2' fill='%23F2956A'/%3E%3C/svg%3E"); }

/* ------------------------------------------------------------ ACT 2: durian */
.char { background-color: var(--ink); color: var(--paper); background-image: radial-gradient(rgba(238, 228, 207, .05) 1px, transparent 1.2px); background-size: 6px 6px; }
.act2 .pin { background-color: var(--ink); background-image: radial-gradient(rgba(238, 228, 207, .05) 1px, transparent 1.2px); background-size: 6px 6px; }
.motion .act2 .pin { clip-path: polygon(0 16px, 4% 6px, 9% 14px, 15% 3px, 22% 12px, 28% 5px, 35% 15px, 42% 4px, 49% 13px, 56% 2px, 63% 12px, 70% 5px, 77% 15px, 84% 4px, 91% 12px, 96% 3px, 100% 11px, 100% 100%, 0 100%); }
.du-hl { position: absolute; left: 72px; top: 110px; width: 540px; z-index: 5; }
.du-hl .h2 { font-size: 104px; }
.du-body { font-size: 20px; line-height: 1.6; margin-top: 24px; max-width: 520px; }
.du-mk { left: 600px; top: 150px; width: 520px; height: 560px; z-index: 2; }
.du-mk img { position: absolute; inset: 0; width: 100%; height: 100%; }
.du-half { transform-origin: 50% 91.4%; }
.du-half-l { rotate: -15deg; }
.du-half-r { rotate: 17deg; }
.du-mk .tag { left: 5%; top: 99%; width: 230px; }
.du-note { position: absolute; z-index: 6; font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--paper); }
.du-note-mk { left: 1124px; top: 160px; width: 210px; }
.du-bt { left: 1090px; top: 470px; width: 300px; height: 330px; z-index: 3; }
.du-bt-fruit { position: absolute; inset: 0; }
.du-pod { position: absolute; width: 140px !important; height: 104px !important; left: 190px; top: 230px; transform-origin: 20% 60%; }
.du-bt .tag { left: 6%; top: -21%; width: 210px; }
.du-note-bt { left: 900px; top: 768px; width: 190px; }
.du-plate { position: absolute; z-index: 4; padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 16px 24px -10px rgba(0, 0, 0, .7); }
.du-plate .display { font-size: 34px; line-height: 1; }
.du-plate .mono { font-size: 12.5px; }
.du-plate-mk { left: 640px; top: 774px; rotate: -1.5deg; }
.du-plate-bt { left: 1112px; top: 812px; rotate: 1.5deg; }
/* the rest of the collection (Kyle, 2026-09-29: all five varieties, from the Mr.Wow site) rolls in under the copy */
.du-more { z-index: 3; }
.du-more .du-roll { position: absolute; inset: 0; }
.char .du-more img { filter: drop-shadow(0 18px 18px rgba(0, 0, 0, .6)) drop-shadow(0 2px 2px rgba(0, 0, 0, .4)); }
.du-d24 { left: 76px; top: 600px; width: 146px; height: 161px; }
.du-d88 { left: 246px; top: 594px; width: 136px; height: 165px; }
.du-dal { left: 410px; top: 604px; width: 146px; height: 161px; }
.du-more .du-pod2 { position: absolute; transform-origin: 20% 60%; }
.du-d24 .du-pod2 { left: 96px; top: 112px; width: 70px; height: 52px; }
.du-d88 .du-pod2 { left: 88px; top: 118px; width: 70px; height: 52px; }
.du-dal .du-pod2 { left: 100px; top: 96px; width: 96px; height: 71px; }
.du-plate.sm { padding: 8px 12px 10px; gap: 2px; }
.du-plate.sm .display { font-size: 24px; }
.du-plate.sm .mono { font-size: 11px; }
.du-plate-d24 { left: 70px; top: 772px; rotate: -1.5deg; }
.du-plate-d88 { left: 236px; top: 780px; rotate: 1deg; }
.du-plate-dal { left: 402px; top: 772px; rotate: -1deg; }
.du-note-dal { left: 190px; top: 858px; width: 410px; }

.act2-more { position: relative; padding: 110px 0 150px; }
.act2-more .edge-bottom { position: absolute; left: 0; right: 0; bottom: -1px; height: 18px; background: var(--paper); clip-path: polygon(0 100%, 0 60%, 5% 20%, 11% 70%, 18% 10%, 25% 60%, 32% 25%, 39% 80%, 46% 15%, 53% 65%, 60% 20%, 67% 75%, 74% 10%, 81% 55%, 88% 20%, 94% 70%, 100% 30%, 100% 100%); }
.motion .act2-more .edge-bottom { display: none; }
.motion .act2-more { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), 96% calc(100% - 4px), 91% calc(100% - 13px), 85% calc(100% - 3px), 78% calc(100% - 14px), 71% calc(100% - 5px), 64% calc(100% - 15px), 57% calc(100% - 4px), 50% calc(100% - 12px), 43% calc(100% - 2px), 36% calc(100% - 13px), 29% calc(100% - 5px), 22% calc(100% - 15px), 15% calc(100% - 3px), 8% calc(100% - 12px), 3% calc(100% - 4px), 0 calc(100% - 14px)); }
/* the collection: one paper card per variety, its drawn fruit breaking out of the top (build_v2.py DURIANS) */
.dm-collection .kicker { margin-bottom: 20px; }
.dm-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px; align-items: start; }
.dm-card { position: relative; rotate: var(--tilt); }
.dm-art { position: relative; z-index: 2; width: 150px; height: 162px; margin: 0 auto -58px; }
.dm-art img { position: absolute; filter: drop-shadow(0 14px 14px rgba(0, 0, 0, .6)) drop-shadow(0 2px 2px rgba(0, 0, 0, .4)); }
.dm-fruit, .dm-mk .dm-art img { left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; }
.dm-pod { right: -12%; bottom: 2%; width: 48%; height: auto; }
.dm-dal .dm-pod { width: 58%; }
.dm-half { transform-origin: 50% 91.4%; }
.dm-half-l { rotate: -15deg; }
.dm-half-r { rotate: 17deg; }
.dm-body { position: relative; padding: 70px 18px 22px; }
.dm-no { position: absolute; left: 14px; top: 12px; color: var(--red); font-weight: 600; }
.dm-body h3 { font-size: 34px; line-height: 1; }
.dm-sub { margin: 6px 0 10px; }
.dm-desc { font-size: 15.5px; line-height: 1.5; }
.dm-rare { display: inline-block; margin-left: 8px; vertical-align: middle; border: 3px solid var(--red); color: var(--red); font-size: 18px; line-height: 1; padding: 3px 7px 2px; rotate: -7deg; }
.dm-season { font-size: 15px !important; line-height: 1.5; }
.dm-in .link { align-self: flex-start; }
.dm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; max-width: 980px; margin: 72px auto 0; align-items: start; }
.dm-grow { position: relative; padding: 30px 30px 34px; rotate: -.8deg; }
.dm-grow h3 { font-size: 36px; line-height: 1; }
.dm-grow dl { margin: 16px 0 0; display: grid; gap: 10px; font-size: 13px; line-height: 1.45; }
.dm-grow dl div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
.dm-grow dd { margin: 0; }
.dm-cert { position: relative; margin: 22px 0 0 auto; width: 170px; rotate: 3deg; box-shadow: 0 14px 22px -10px rgba(40, 25, 5, .6); }
.dm-cert img { width: 100%; height: auto; }
.dm-cert .tape { left: 30%; top: -12px; width: 80px; height: 24px; rotate: -4deg; }
/* How we grow it: its own strip on the paper, straight after Every tree has a file */
.act3-more { position: relative; z-index: 2; background: var(--paper); padding: 48px 0 104px; }
.act3-more .dm-grow { display: grid; grid-template-columns: minmax(0, 1fr) 232px; column-gap: 56px; align-items: start; max-width: 940px; padding: 40px 48px 44px; }
.act3-more .dm-grow h3 { font-size: 56px; }
.act3-more .dm-grow dl { margin-top: 24px; gap: 14px; font-size: 15px; }
.act3-more .dm-grow dl div { grid-template-columns: 112px minmax(0, 1fr); }
.act3-more .dm-cert { width: 100%; margin: 8px 0 0; }
.dm-route { rotate: 1.2deg; }
.dm-in { padding: 30px 26px; display: flex; flex-direction: column; gap: 12px; }
.dm-station { rotate: -1.2deg; }
.dm-logo { width: 120px; height: auto; }
.dm-route h3 { font-size: 38px; line-height: 1; }
.dm-route p:not(.small) { font-size: 17px; line-height: 1.55; }
.dm-in .btn { align-self: flex-start; }
.dm-rack { margin: 0; }
.dm-rack img { width: 100%; height: auto; }

/* ------------------------------------------------------------ ACT 3: traceability */
.act3 .pin { background: var(--paper); }
.tr-photo { position: relative; overflow: hidden; height: calc(var(--sh) * var(--fitw, 1)); }
.motion .tr-photo { position: absolute; inset: 0; height: auto; }
.tr-frame { position: absolute; left: 50%; top: 50%; width: max(100%, calc(var(--vh, 1vh) * 100 * 1.777)); aspect-ratio: 2200 / 1238; transform: translate(-50%, -50%); transform-origin: 45.9% 77.5%; }
html:not(.motion) .tr-frame { width: max(100%, calc(var(--sh) * var(--fitw, 1) * 1.7771)); top: 0; transform: translateX(-50%); }
.tr-frame > img { width: 100%; height: 100%; }
.pin-tag { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; z-index: 2; }
.pin-tag i { position: absolute; left: -14px; top: -42px; width: 28px; height: 42px; scale: var(--pz, 1); transform-origin: 50% 100%; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 42'%3E%3Cpath d='M14 41 C 14 41 2 24 2 14 A 12 12 0 1 1 26 14 C 26 24 14 41 14 41 Z' fill='%23B3261E' stroke='%231A1814' stroke-width='2'/%3E%3Crect x='7.5' y='7.5' width='13' height='13' fill='%23F7F1E3' stroke='%231A1814' stroke-width='1.2'/%3E%3Cpath d='M9.5 9.5h3v3h-3zM15.5 9.5h3v3h-3zM9.5 15.5h3v3h-3zM15 15h1.5v1.5H15zM17 17h1.5v1.5H17z' fill='%231A1814'/%3E%3C/svg%3E"); filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .45)); }
.tr-ring { position: absolute; left: calc(45.9% - 40px); top: calc(77.5% - 68px); width: 80px; height: 80px; overflow: visible; z-index: 3; scale: var(--pz, 1); transform-origin: 50% 85%; }
.tr-ring .pen { stroke-width: 5; }
.tr-hl { position: absolute; left: 60px; top: 96px; width: 580px; z-index: 5; }
.tr-hl-in { padding: 28px 32px 34px; }
.tr-hl .h2 { font-size: 86px; }
.tr-body { font-size: 18.5px; line-height: 1.6; margin-top: 18px; }
.tr-steps { position: absolute; left: 60px; top: 540px; width: 580px; margin: 0; padding: 20px 24px; list-style: none; display: grid; gap: 10px; z-index: 5; }
.tr-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 16px; line-height: 1.45; padding: 6px 8px; transition: background-color .2s steps(2, end); }
.tr-steps li .display { font-size: 30px; line-height: 1; color: var(--red); }
.tr-steps li.on { background: rgba(244, 207, 58, .55); }
.tr-cert { position: absolute; left: 860px; top: 104px; width: 500px; background: #F9F4E8; padding: 16px; rotate: -2deg; z-index: 6; }
.tr-cert-in { border: 4px double var(--ink); padding: 28px 28px 22px; display: flex; flex-direction: column; gap: 14px; }
.tr-cert-title { font-size: 40px; line-height: 1; }
.tr-fields { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.tr-fields .row { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px dotted var(--ink); padding-bottom: 5px; }
.tw { font-weight: 600; white-space: pre; display: inline-block; }
.motion .tw { clip-path: inset(0 calc((1 - var(--c, 0) / var(--n)) * 100%) 0 0); }
.tr-cert-foot { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 6px; }
.tr-scan { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.qr { width: 176px; height: 176px; background: #fff; padding: 11px; border: 1px solid var(--ink); }
.qr svg { display: block; width: 100%; height: 100%; }
.qr path { fill: var(--ink); }
.motion .qr path { opacity: clamp(0, (var(--lv, 0) - var(--g)) * 1000, 1); }
.stamp { border: 5px solid var(--red); color: var(--red); font-size: 44px; line-height: 1; padding: 8px 16px; rotate: -12deg; margin-right: 10px; }

/* ------------------------------------------------------------ flow sections */
.flow { position: relative; z-index: 6; overflow-x: clip; }

/* ------------------------------------------------------------ contact */
.contact { padding: 130px 0 140px; }
.ct-grid { display: grid; grid-template-columns: 460px minmax(0, 1fr); gap: 72px; align-items: start; }
.ct-hl .h2 { font-size: 92px; white-space: nowrap; }
.ct-hl > p:not(.kicker) { font-size: 20px; line-height: 1.6; margin-top: 22px; }
.ct-lines { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }
.ct-lines a { font-size: 18px; text-underline-offset: 5px; }
.ct-mail { position: relative; font-size: 24px !important; font-weight: 600; text-decoration: none; align-self: flex-start; }
.ct-mail svg { position: absolute; left: 0; right: 0; bottom: -12px; width: 100%; height: 14px; overflow: visible; }
.ct-mail .pen { stroke: var(--hl); stroke-width: 4; }
.ct-lines span { font-size: 15px; line-height: 1.5; color: rgba(238, 228, 207, .8); }
.ct-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 24px; }
.slip { position: relative; padding: 40px 22px 24px; rotate: var(--tilt); transform-origin: 50% 14px; display: flex; flex-direction: column; gap: 12px; transition: transform .15s steps(3, end), box-shadow .15s steps(3, end); }
.slip:hover { transform: translateY(-6px) rotate(calc(var(--tilt) * -1)); }
.slip h3 { font-size: 42px; line-height: 1; }
.slip p { font-size: 17px; line-height: 1.5; min-height: 52px; }
.slip .btn { align-self: flex-start; font-size: 13px; padding: 0 14px; }
.pinhead { position: absolute; left: 50%; top: 10px; margin-left: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--red); box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .25), 0 3px 4px rgba(0, 0, 0, .35); }

/* ------------------------------------------------------------ footer */
.site-footer { position: relative; z-index: 6; padding: 110px 0 36px; background-color: var(--paper); }
.ft-top { display: grid; grid-template-columns: 7fr 5fr; gap: 88px; align-items: end; }
.ft-big { font-size: 96px; line-height: .94; }
.ft-big > span { display: block; }
.ft-u { position: relative; display: inline-block; }
.ft-u svg { position: absolute; left: -2%; width: 104%; bottom: -10px; height: 20px; overflow: visible; }
.ft-u .pen { stroke-width: 5; }
.ft-about p { font-size: 19px; line-height: 1.6; }
.ft-about .link { display: inline-block; margin-top: 14px; }
.ft-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; border-top: 2px solid var(--ink); padding-top: 30px; margin-top: 60px; }
.ft-cols > div { display: flex; flex-direction: column; gap: 6px; font-size: 17px; line-height: 1.5; }
.ft-mark { display: block; line-height: 0; }
.ft-logo { display: block; width: 180px; max-width: 100%; height: auto; }
.ft-base { display: flex; justify-content: space-between; font-size: 13px; margin-top: 40px; }

/* ------------------------------------------------------------ hits (one-shot paper moves, 12fps) */
.motion .intro .o-hl .ln { animation: slam 333ms steps(1, end) both; }
.motion .intro .o-hl .l1 { animation-delay: 60ms; } .motion .intro .o-hl .l2 { animation-delay: 200ms; }
.motion .intro .o-hl .l3 { animation-delay: 340ms; } .motion .intro .o-hl .l4 { animation-delay: 480ms; }
@keyframes slam { 0% { opacity: 0; transform: scale(1.26) rotate(-2.5deg) translateY(-14px); } 25% { opacity: 1; transform: scale(1.26) rotate(-2.5deg) translateY(-14px); } 50% { opacity: 1; transform: scale(.95) rotate(1deg) translateY(3px); } 75% { opacity: 1; transform: scale(1.02) rotate(-.4deg); } 99%, 100% { opacity: 1; transform: none; } }
.motion .intro .sw { animation: sweep 380ms cubic-bezier(.6, 0, .2, 1) 780ms both; }
@keyframes sweep { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
.motion .intro .o-body, .motion .intro .o-cta { animation: rise 250ms steps(1, end) 560ms both; }
@keyframes rise { 0% { opacity: 0; transform: translateY(26px); } 33% { opacity: 1; transform: translateY(12px); } 66% { opacity: 1; transform: translateY(3px); } 100% { opacity: 1; transform: none; } }
.motion .intro .o-map .hk { animation: slideMap 500ms steps(1, end) 120ms both; }
@keyframes slideMap { 0% { transform: translate(900px, -60px) rotate(12deg); } 17% { transform: translate(420px, -30px) rotate(7deg); } 33% { transform: translate(150px, -12px) rotate(4deg); } 50% { transform: translate(40px, -2px) rotate(1deg); } 67% { transform: translate(-10px, 2px) rotate(-.8deg); } 83% { transform: translate(3px, 0) rotate(.3deg); } 100% { transform: none; } }
.motion .intro .o-palm .hk { animation: dropPalm 583ms steps(1, end) 300ms both; transform-origin: 50% 100%; }
@keyframes dropPalm { 0% { transform: translateY(-760px); } 14% { transform: translateY(-520px); } 29% { transform: translateY(-250px); } 43% { transform: translateY(-40px); } 57% { transform: translateY(8px) scale(1.03, .93); } 71% { transform: translateY(-10px) scale(.99, 1.02); } 86% { transform: translateY(2px); } 100% { transform: none; } }
.motion .intro .o-durian .hk { animation: swing 750ms steps(1, end) 520ms both; transform-origin: 50% 6%; }
@keyframes swing { 0% { transform: translateY(-1000px) rotate(-38deg); } 11% { transform: translateY(-220px) rotate(-26deg); } 22% { transform: rotate(16deg); } 33% { transform: rotate(-10deg); } 44% { transform: rotate(6deg); } 56% { transform: rotate(-3.5deg); } 67% { transform: rotate(2deg); } 78% { transform: rotate(-1deg); } 89% { transform: rotate(.4deg); } 100% { transform: none; } }
.motion .intro .o-card .hk { animation: flipIn 417ms steps(1, end) 760ms both; }
@keyframes flipIn { 0% { transform: translate(120px, 260px) rotate(-28deg); } 20% { transform: translate(70px, 150px) rotate(-18deg); } 40% { transform: translate(20px, 40px) rotate(-6deg); } 60% { transform: translate(-4px, -6px) rotate(2deg); } 80% { transform: translate(1px, 1px) rotate(-.6deg); } 100% { transform: none; } }
.motion .intro .m-circle { animation: drawOn 420ms cubic-bezier(.45, .05, .25, 1) 1100ms both; }
.motion .intro .m-arrow { animation: drawOn 200ms ease-out 1420ms both; }
.motion .intro .m-arrow-h { animation: drawOn 100ms ease-out 1600ms both; }
.motion .intro .o-note { animation: typeNote 333ms steps(4, end) 1300ms both; }
/* Safari ends some animations at progress 0.9999..., which leaves steps() one step short; the 99% holds land the last step first */
@keyframes typeNote { from { clip-path: inset(0 100% 0 0); } 99%, to { clip-path: inset(0 0 0 0); } }
@keyframes drawOn { from { stroke-dashoffset: 104; } to { stroke-dashoffset: 0; } }
.motion .intro .tape { animation: tape 333ms steps(1, end) both; }
.motion .intro .t-map { animation-delay: 1650ms; } .motion .intro .t-palm { animation-delay: 1740ms; }
.motion .intro .t-dur { animation-delay: 1830ms; } .motion .intro .t-card { animation-delay: 1920ms; }
@keyframes tape { 0% { clip-path: inset(0 100% 0 0); scale: 1.08; } 25% { clip-path: inset(0 45% 0 0); scale: 1.08; } 50% { clip-path: inset(0 0 0 0); scale: 1.05; } 75% { clip-path: inset(0 0 0 0); scale: .985; } 99%, 100% { clip-path: inset(0 0 0 0); scale: 1; } }
.motion .intro-done .m-circle, .motion .intro-done .m-arrow, .motion .intro-done .m-arrow-h { stroke-dashoffset: 0; }

/* scroll hits */
.motion .oi-hl .ln { opacity: 0; }
.motion .oi-hl.on .ln { animation: slam 333ms steps(1, end) both; }
.motion .oi-hl.on .ln:nth-child(2) { animation-delay: 110ms; } .motion .oi-hl.on .ln:nth-child(3) { animation-delay: 220ms; }
.motion .oi-hl .kicker, .motion .oi-body { opacity: 0; }
.motion .oi-hl.on .kicker { animation: rise 250ms steps(1, end) both; }
.motion .oi-hl.on .oi-body { animation: rise 250ms steps(1, end) 330ms both; }
.motion .oi-hl .btn { opacity: 0; }
.motion .oi-hl.on .btn { animation: rise 250ms steps(1, end) 480ms both; }
.motion .oi-stamp:not(.on) { visibility: hidden; }
.motion .oi-stamp.on { animation: stampHit 333ms steps(1, end) both; }
/* the bunch leaves a hole in the print, falls (site.js), lands on the heap with a squash; loose fruit bounces off */
.motion .oi-bunch:not(.on) { visibility: hidden; }
.motion .oi-bunch.up .oi-bunch-in { animation: liftOff 250ms steps(1, end) both; }
@keyframes liftOff { 0% { transform: scale(.96); } 33% { transform: scale(1.14) rotate(-3deg); } 66% { transform: scale(1.03) rotate(1deg); } 100% { transform: none; } }
.motion .oi-bunch.land .oi-bunch-in { animation: landSquash 333ms steps(1, end) both; }
@keyframes landSquash { 0% { transform: translateY(8px) scale(1.12, .8); } 25% { transform: translateY(-10px) scale(.94, 1.07); } 50% { transform: translateY(2px) scale(1.03, .97); } 75% { transform: scale(.99, 1.01); } 100% { transform: none; } }
.motion .oi-fruits:not(.on) .oi-fr { visibility: hidden; }
.motion .oi-fruits.on .oi-fr { animation: burst 417ms steps(1, end) both; }
.motion .oi-fruits.on .oi-fr:nth-child(2n) { animation-delay: 40ms; }
.motion .oi-fruits.on .oi-fr:nth-child(3n) { animation-delay: 80ms; }
@keyframes burst { 0% { transform: translate(calc(var(--dx) * -1), calc(var(--dy) * -1)) scale(.4); } 20% { transform: translate(calc(var(--dx) * -.6), calc(var(--dy) * -.6 - var(--hop))) rotate(calc(var(--r) * .3)); } 40% { transform: translate(calc(var(--dx) * -.25), calc(var(--dy) * -.25 - var(--hop) * .7)) rotate(calc(var(--r) * .6)); } 60% { transform: translateY(-4px) rotate(var(--r)); } 80% { transform: translateY(1px) rotate(var(--r)); } 100% { transform: rotate(var(--r)); } }
.motion .oi-heap:not(.on) { visibility: hidden; }
.motion .oi-heap.on .hk { animation: slapDown 333ms steps(1, end) both; }
@keyframes slapDown { 0% { transform: translate(-40px, -140px) rotate(-7deg) scale(1.1); } 25% { transform: translate(-10px, -40px) rotate(-3deg) scale(1.04); } 50% { transform: translate(2px, 4px) rotate(.6deg) scale(.99); } 75% { transform: translate(0, -1px) rotate(-.2deg); } 100% { transform: none; } }
.motion .oi-worker:not(.on) { visibility: hidden; }
.motion .oi-worker.on .hk { animation: standUp 500ms steps(1, end) both; }
@keyframes standUp { 0% { transform: scale(1, .05); } 17% { transform: scale(1.04, .6) skewX(4deg); } 33% { transform: scale(.97, 1.08) skewX(-2deg); } 50% { transform: scale(1.02, .96); } 67% { transform: scale(.99, 1.02); } 83% { transform: scale(1, .995); } 100% { transform: none; } }
.motion .oi-note:not(.on) { clip-path: inset(0 100% 0 0); }
.motion .oi-note.on { animation: typeNote 333ms steps(5, end) both; }
.motion .oi-mill:not(.on) { visibility: hidden; }
.motion .oi-dot:not(.on) { visibility: hidden; }
.motion .oi-dot.on { animation: dotIn 167ms steps(1, end) both; }
@keyframes dotIn { 0% { transform: scale(2.2); } 50% { transform: scale(.7); } 100% { transform: none; } }
/* once he's up, the worker leans on his pole every few seconds */
.motion .live .oi-worker.on .cut { transform-origin: 50% 96%; animation: boil .36s steps(1) infinite, lever 2.6s steps(1, end) 700ms infinite; }
@keyframes lever { 0%, 64% { transform: none; } 68% { transform: rotate(-1.4deg) translateY(1px); } 72% { transform: rotate(-2.6deg) translateY(3px); } 76% { transform: rotate(-2deg) translateY(2px); } 80% { transform: rotate(-.8deg); } 84%, 100% { transform: none; } }
@keyframes pop { 0% { transform: scale(.3) rotate(-8deg); } 33% { transform: scale(1.12) rotate(3deg); } 66% { transform: scale(.97) rotate(-1deg); } 100% { transform: none; } }
.motion .oi-mill:not(.on) .mill-ico { transform: scale(0); }
.motion .oi-mill.on .mill-ico { animation: stampIn 250ms steps(1, end) both; }
@keyframes stampIn { 0% { transform: scale(1.8) rotate(-12deg); } 33% { transform: scale(.9) rotate(3deg); } 66% { transform: scale(1.05); } 99%, 100% { transform: none; } }

.motion .du-note:not(.on) { clip-path: inset(0 100% 0 0); }
.motion .du-note.on { animation: typeNote 333ms steps(5, end) both; }
.motion .du-pod:not(.on) { transform: scale(0); }
.motion .du-pod.on { animation: popPod 333ms steps(1, end) both; }
@keyframes popPod { 0% { transform: translate(-70px, 10px) scale(.2) rotate(-40deg); } 25% { transform: translate(-20px, -30px) scale(1.15) rotate(10deg); } 50% { transform: translate(4px, 6px) scale(.95) rotate(-3deg); } 75% { transform: translate(0, -2px) scale(1.02); } 100% { transform: none; } }
.motion .du-plate:not(.on) { visibility: hidden; }
.motion .du-pod2:not(.on) { transform: scale(0); }
.motion .du-pod2.on { animation: popPod 333ms steps(1, end) both; }
.motion .du-plate.on { animation: plateUp 333ms steps(1, end) both; }
@keyframes plateUp { 0% { transform: translateY(90px) rotate(6deg); } 25% { transform: translateY(40px) rotate(3deg); } 50% { transform: translateY(-6px) rotate(-1deg); } 75% { transform: translateY(2px); } 100% { transform: none; } }

.motion .pin-tag:not(.on) i { visibility: hidden; }
.motion .pin-tag.on i { animation: pinDrop 333ms steps(1, end) both; }
@keyframes pinDrop { 0% { transform: translateY(-120px) scale(1.4); } 25% { transform: translateY(-40px) scale(1.2); } 50% { transform: translateY(4px) scale(1.05, .85); } 75% { transform: translateY(-6px) scale(.98, 1.04); } 100% { transform: none; } }
.motion .tr-steps li:not(.in) { visibility: hidden; }
.motion .tr-steps:not(.in) { visibility: hidden; }
.motion .tr-steps li.in { animation: rise 250ms steps(1, end) both; }
.motion .stamp:not(.on) { visibility: hidden; }
.motion .stamp.on { animation: stampHit 333ms steps(1, end) both; }
@keyframes stampHit { 0% { transform: scale(1.5) rotate(-6deg); opacity: 0; } 25% { transform: scale(1.35) rotate(-4deg); opacity: 1; } 50% { transform: scale(.94) rotate(-.5deg); } 75% { transform: scale(1.02); } 100% { transform: none; opacity: 1; } }
.motion .tr-cert.jolt { animation: jolt 250ms steps(1, end) both; }
@keyframes jolt { 0% { translate: 0 4px; } 33% { translate: 0 -2px; } 66% { translate: 0 1px; } 100% { translate: 0 0; } }

[data-reveal].drop { transition: none; }
.motion [data-reveal]:not(.in) { visibility: hidden; }
.motion .dm-grow.in, .motion .dm-route.in { animation: dropCard 417ms steps(1, end) both; }
.motion .dm-route.in { animation-delay: 120ms; } .motion .dm-station.in { animation-delay: 240ms; }
.motion .dm-card.in { animation: dropCard 417ms steps(1, end) both; animation-delay: calc(var(--i) * 90ms); }
.motion .dm-card.in .dm-rare { animation: stampHit 333ms steps(1, end) both; animation-delay: calc(var(--i) * 90ms + 560ms); }
@keyframes dropCard { 0% { transform: translateY(-160px) rotate(-10deg); } 20% { transform: translateY(-60px) rotate(-5deg); } 40% { transform: translateY(8px) rotate(2deg); } 60% { transform: translateY(-4px) rotate(-1deg); } 80% { transform: translateY(1px); } 99%, 100% { transform: none; } }
.motion .slip.in { animation: swingSlip 667ms steps(1, end) both; }
.motion .slip.s2.in { animation-delay: 160ms; } .motion .slip.s3.in { animation-delay: 320ms; }
@keyframes swingSlip { 0% { transform: translateY(-60px) rotate(12deg); } 12.5% { transform: rotate(-7deg); } 25% { transform: rotate(4.5deg); } 37.5% { transform: rotate(-3deg); } 50% { transform: rotate(1.6deg); } 62.5% { transform: rotate(-.8deg); } 75% { transform: rotate(.3deg); } 100% { transform: none; } }

/* ------------------------------------------------------------ phone stage positions */
@media (max-aspect-ratio: 1/1), (max-width: 760px) {
  .o-hl { left: 20px; top: 322px; width: 350px; }
  .o-hl .kicker { display: none; }
  .h1 { font-size: 48px; margin-top: 0; }
  .o-body { font-size: 15.5px; line-height: 1.5; margin-top: 14px; }
  .o-cta { gap: 16px; margin-top: 16px; }
  .o-cta .btn { min-height: 46px; padding: 0 16px; font-size: 14px; }
  .o-cta .link { font-size: 13px; }
  .o-map { left: 12px; top: 104px; width: 164px; height: 210px; }
  .o-note { left: 8%; top: 84%; width: auto; text-align: left; font-size: 12px; background: rgba(245, 238, 221, .9); padding: 2px 4px; }
  .t-map { left: 40%; top: -12px; width: 76px; height: 22px; }
  .o-palm { left: 190px; top: 96px; width: 170px; height: 200px; }
  .o-palm .tag { left: 44%; top: 64%; width: 104px; font-size: 10px; padding: 3px 5px; }
  .t-palm { width: 64px; height: 20px; }
  .o-durian { left: 296px; top: 206px; width: 80px; height: 96px; }
  .o-durian .tag { display: none; }
  .t-dur { width: 50px; height: 16px; }
  .o-card { display: none; }
  .ae-slip { left: 18px; bottom: 30px; }
  .ae-slip-in { gap: 5px; padding: 14px 16px 12px; }
  .ae-slip .display { font-size: 26px; }
  .ae-slip .mono { font-size: 11.5px; }
  .t-slip { width: 72px; height: 22px; top: -11px; }
  .map-pen .pen { stroke-width: 6; }
  .m-lab b { font-size: 11px; }
  .m-lab i { display: none; }
  .m-water { left: 55%; top: 48%; font-size: 26px; }

  .oi-hl { left: 20px; top: 84px; width: 350px; }    /* the headline runs to three lines (2026-10-07): room above the print */
  .h2 { font-size: 44px; margin-top: 8px; }
  .kicker { font-size: 12.5px; }
  .oi-body { font-size: 15px; line-height: 1.55; margin-top: 12px; }
  .oi-foot { gap: 20px; margin-top: 16px; }
  .oi-foot .btn { min-height: 44px; padding: 0 16px; font-size: 14px; }
  .oi-stamp { padding: 5px 9px 4px; border-width: 3px; }
  .oi-stamp .mono { font-size: 9px; }
  .oi-stamp .display { font-size: 24px; }
  .oi-mill { font-size: 10px; }
  .oi-note { font-size: 12px; }
  .t-harv { width: 64px; height: 20px; top: -9px; }
  .t-heap1, .t-heap2 { width: 60px; height: 18px; }
  .t-heap1 { left: -16px; top: 8px; } .t-heap2 { right: -16px; top: 6px; }
  .oi-fruits { --hop: 22px; }
  .oi-dot { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; }
  .oi-mill .mill-ico { width: 32px; height: 31px; }

  .du-hl { left: 20px; top: 88px; width: 350px; }
  .du-hl .h2 { font-size: 46px; }
  .du-body { font-size: 14.5px; line-height: 1.5; margin-top: 12px; }
  .du-mk { left: 0; top: 368px; width: 260px; height: 280px; }
  .du-mk .tag { left: 12%; top: 100%; width: 180px; font-size: 10px; padding: 3px 5px; }
  .du-note-mk { left: 240px; top: 376px; width: 140px; font-size: 11.5px; }
  .du-bt { left: 236px; top: 520px; width: 140px; height: 154px; }
  .du-pod { width: 64px !important; height: 48px !important; left: 86px; top: 106px; }
  .du-bt .tag { left: 6%; top: -26%; width: 120px; font-size: 10px; padding: 3px 5px; }
  .du-note-bt { left: 196px; top: 682px; width: 190px; font-size: 11.5px; }
  .du-plate { display: none; }
  .du-d24 { left: 12px; top: 744px; width: 104px; height: 114px; }
  .du-d88 { left: 144px; top: 738px; width: 96px; height: 117px; }
  .du-dal { left: 270px; top: 744px; width: 104px; height: 114px; }
  .du-d24 .du-pod2 { left: 66px; top: 78px; width: 50px; height: 37px; }
  .du-d88 .du-pod2 { left: 58px; top: 84px; width: 50px; height: 37px; }
  .du-dal .du-pod2 { left: 48px; top: 70px; width: 64px; height: 47px; }
  .du-plate.sm { display: flex; padding: 5px 8px 6px; }
  .du-plate.sm .display { font-size: 17px; }
  .du-plate.sm .mono { font-size: 9.5px; }
  .du-plate-d24 { left: 8px; top: 868px; max-width: 124px; }
  .du-plate-d88 { left: 138px; top: 874px; max-width: 118px; }
  .du-plate-dal { left: 262px; top: 868px; max-width: 120px; }
  .du-note-dal { left: 150px; top: 944px; width: 226px; font-size: 11.5px; text-align: right; }

  .tr-frame { transform-origin: 45.9% 77.5%; }
  .tr-hl { left: 16px; top: 86px; width: 358px; }
  .tr-hl-in { padding: 18px 20px 22px; }
  .tr-hl .h2 { font-size: 44px; }
  .tr-body { font-size: 14.5px; line-height: 1.5; margin-top: 10px; }
  .tr-steps { left: 16px; top: 420px; width: 358px; padding: 12px 14px; gap: 4px; }
  .tr-steps li { font-size: 13.5px; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; padding: 4px 6px; }
  .tr-steps li .display { font-size: 22px; }
  .tr-cert { left: 22px; top: 112px; width: 346px; padding: 10px; }
  .tr-cert-in { padding: 16px 16px 14px; gap: 10px; }
  .tr-cert-title { font-size: 30px; }
  .tr-fields { font-size: 12.5px; gap: 7px; }
  .qr { width: 128px; height: 128px; padding: 8px; }
  .tr-scan { gap: 6px; }
  .stamp { font-size: 30px; border-width: 4px; padding: 5px 10px; }
  .pin-tag i { left: -10px; top: -30px; width: 20px; height: 30px; }
  .tr-ring { left: calc(45.9% - 30px); top: calc(77.5% - 50px); width: 60px; height: 60px; }

  .act2-more { padding: 70px 0 110px; }
  .act3-more { padding: 40px 0 96px; }
  .act3-more .dm-grow { grid-template-columns: 1fr; padding: 30px 24px 34px; }
  .act3-more .dm-grow h3 { font-size: 38px; }
  .act3-more .dm-grow dl { margin-top: 16px; gap: 10px; font-size: 13px; }
  .act3-more .dm-grow dl div { grid-template-columns: 88px minmax(0, 1fr); }
  .act3-more .dm-cert { width: 170px; margin: 24px 0 0 auto; }
  .dm-cards { grid-template-columns: 1fr; gap: 26px; }
  .dm-card { display: grid; grid-template-columns: 104px minmax(0, 1fr); align-items: center; }
  .dm-art { grid-row: 1; grid-column: 1; width: 104px; height: 116px; margin: 0 0 0 -6px; }
  .dm-body { grid-row: 1; grid-column: 1 / 3; margin-left: 48px; padding: 18px 16px 20px 62px; }
  .dm-no { left: auto; right: 14px; top: 12px; }
  .dm-body h3 { font-size: 30px; padding-right: 22px; }
  .dm-desc { font-size: 15px; }
  .dm-rare { font-size: 15px; }
  .dm-grid { grid-template-columns: 1fr; gap: 28px; margin-top: 44px; }
  .ct-grid, .ft-top { grid-template-columns: 1fr; gap: 36px; }
  .contact { padding: 80px 0 90px; }
  .ct-hl .h2 { font-size: 60px; }
  .ct-cards { grid-template-columns: 1fr; }
  .ct-mail { font-size: 19px !important; }
  .ft-big { font-size: 50px; }
  .ft-cols { grid-template-columns: 1fr; gap: 16px; }
  .site-footer { padding: 70px 0 28px; }
}


/* ------------------------------------------------------------ logo motion (the redrawn emblem on the About page and the floating button; the header logo is SAN's official image and stays still) */
.fab-emblem .lg-flame { transform-box: fill-box; }
@keyframes ignite { 0% { transform: scale(.3, .08); } 20% { transform: scale(.82, .55); } 40% { transform: scale(1.06, 1.2); } 60% { transform: scale(.97, .93) skewX(2deg); } 80% { transform: scale(1.01, 1.04) skewX(-1deg); } 100% { transform: none; } }
@keyframes stampS { 0% { transform: scale(1.9); opacity: 0; } 33% { transform: scale(.86); opacity: 1; } 66% { transform: scale(1.06); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes flicker { 0% { transform: none; } 20% { transform: scale(1.03, 1.09) skewX(-2.5deg); } 40% { transform: scale(.98, .95) skewX(1.5deg); } 60% { transform: scale(1.02, 1.05) skewX(-1deg); } 80% { transform: scale(.99, .98); } 100% { transform: none; } }
.motion .fab:hover .lg-flame { transform-origin: 50% 100%; animation: flicker 500ms steps(1, end) 1; }
.motion .fab.show .lg-flame { transform-origin: 50% 100%; animation: flicker 500ms steps(1, end) 200ms 1; }

/* ------------------------------------------------------------ always-there menu */
.fab { position: fixed; z-index: 60; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); display: flex; align-items: center; gap: 4px; height: 46px; padding: 0 14px 0 3px; background: var(--card); color: var(--ink); border: 2px solid var(--ink); box-shadow: 0 10px 18px -8px rgba(40, 25, 5, .55); cursor: pointer; font: 600 14px var(--mono); visibility: hidden; transform: translateY(-90px) rotate(-5deg); transition: transform .25s steps(3, end), visibility 0s linear .25s, box-shadow .12s steps(2, end); }
.fab.show { visibility: visible; transform: none; transition: transform .25s steps(3, end), visibility 0s, box-shadow .12s steps(2, end); }
.fab.show:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--red); }
.fab-mark { display: block; width: 40px; height: 40px; }
.fab-emblem { display: block; width: 100%; height: 100%; overflow: visible; }
.menu-panel { position: fixed; z-index: 59; top: calc(max(12px, env(safe-area-inset-top)) + 56px); right: max(12px, env(safe-area-inset-right)); width: 300px; background: var(--card); color: var(--ink); border: 2px solid var(--ink); box-shadow: 0 24px 40px -16px rgba(40, 25, 5, .6); transform-origin: 88% 0; }
.menu-panel[hidden] { display: none; }
.motion .menu-panel:not([hidden]) { animation: pop 250ms steps(1, end) both; }
.menu-panel nav { display: flex; flex-direction: column; padding-top: 4px; }
.menu-panel nav a { display: flex; align-items: center; min-height: 48px; padding: 0 20px; font-size: 16px; text-decoration: none; border-bottom: 1px dashed rgba(26, 24, 20, .28); }
.menu-panel nav a:hover, .menu-panel nav a:focus-visible { background: var(--hl); color: var(--ink); }
.menu-panel .mp-cta { font-weight: 600; }
.menu-panel { max-height: calc(100vh - 90px); max-height: calc(100dvh - 90px); overflow-y: auto; overscroll-behavior: contain; }
.mp-home { display: flex; border-bottom: 1px dashed rgba(26, 24, 20, .28); }
.menu-panel nav .mp-home a { flex: 1; border-bottom: 0; }
.mp-caret { flex: none; display: flex; align-items: center; justify-content: center; width: 56px; padding: 0; border: 0; border-left: 1px dashed rgba(26, 24, 20, .28); background: none; color: inherit; cursor: pointer; }
.mp-caret:hover, .mp-caret:focus-visible { background: var(--hl); }
.mp-sub { display: flex; flex-direction: column; padding: 4px 0; background: rgba(26, 24, 20, .05); border-bottom: 1px dashed rgba(26, 24, 20, .28); }
.mp-sub[hidden] { display: none; }
.menu-panel nav .mp-sub a { min-height: 44px; padding-left: 34px; gap: 12px; font-size: 14.5px; border-bottom: 0; }
.mp-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 4px 20px 6px 14px; font-size: 13px; }
.mp-lang { position: relative; display: flex; gap: 4px; }
.mp-lang button { min-width: 44px; min-height: 44px; padding: 0 6px; }   /* thumb-sized on phones */
.mp-lang .lang-note { top: auto; bottom: calc(100% + 6px); left: 0; right: auto; }   /* above: the panel scrolls, so below would be cut off */
.mp-foot a { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
@media (max-aspect-ratio: 1/1), (max-width: 760px) {
  .menu-panel { left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); width: auto; }
  .fab { height: 44px; }
  .fab-mark { width: 38px; height: 38px; }
}

/* mid widths in landscape (small laptops, tablets on their side): stack the wide two-column flows */
@media (max-width: 1300px) and (min-width: 761px) and (min-aspect-ratio: 1001/1000) {
  .ct-grid { grid-template-columns: 1fr; gap: 44px; }
  .ct-hl > p:not(.kicker) { max-width: 560px; }
  .dm-grid { grid-template-columns: 1fr 1fr; }
  .dm-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 60px; }
  .ft-top { grid-template-columns: 1fr; gap: 28px; }
  .ft-cols { grid-template-columns: 1fr 1fr; }
}

/* static layout (reduced motion, ?static, no JS): scenes lie flat, one frame each */
html:not(.motion) .act2 .pin { height: calc(var(--sh) * var(--fitw, 1)); overflow: hidden; }
html:not(.motion) .oi-hl .ln, html:not(.motion) .oi-hl .kicker, html:not(.motion) .oi-body, html:not(.motion) .oi-hl .btn { opacity: 1; }
html:not(.motion) .oil { height: calc((var(--sh) * 2 + 100px) * var(--fitw, 1)); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media (max-aspect-ratio: 1/1), (max-width: 760px) {
  html:not(.motion) .act2 .pin { height: calc((var(--sh) + 290px) * var(--fitw, 1)); }
}