/* ─────────────────────────────────────────────
   /oppsett — animated install tutorial (scrolly phone mockup)
   Loaded ONLY on /oppsett (merdata/web/views/guides_pages.py config_guide_page).
   Ported 2026-09-30 from the approved standalone prototype. Reuses the site's
   own tokens/fonts from style.css (--bg/--ink/--accent/--serif/--sans/--mono
   etc.) instead of redefining a palette — merdata.no is light-first with no
   working dark theme (see the [data-theme="dark"] stub note in style.css), so
   this file has no dark-mode branch either.

   Layout: full-width section above the article body (guides_pages.py puts it
   outside the 65ch prose column). Desktop = two-column stage, phone sticky in
   the left column, steps scrolling in the right one — they can never overlap.
   <=760px = phone pinned on top on an opaque band, steps scroll in the space
   below it. --ot-head is the sticky site header height (measured by the JS,
   64px fallback) so nothing pins underneath the header.

   Progressive enhancement: default state (no JS) is a plain, fully-opaque
   step list with NO phone — every step is readable without markup changes.
   oppsett-tutorial.js adds `.ot-js` to the root once it has wired up the
   scroll sync, which is what reveals the phone + per-step dimming. Reduced
   motion keeps the phone (JS still runs) but collapses every timeline to its
   end state — see the media query at the bottom. */

.ot-tutorial {
  --ot-bezel: #1c1a17;
  --ot-scr-ios: #f2f2f7;
  --ot-scr-and: #f4f4f6;
  --ot-scr-card: #ffffff;
  --ot-scr-ink: #111111;
  --ot-scr-ink-2: #6e6e73;
  --ot-scr-line: #e3e3e8;
  --ot-ios-blue: #0a6fe0;
  --ot-ios-green: #34c759;
  --ot-and-blue: #2f6fed;
  --ot-scr-cream: #faf8f3;
  --ot-shade: rgba(0, 0, 0, 0.38);
  --ot-head: 64px;
  margin: 8px 0 40px;
}
.ot-tutorial :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.ot-scroll-hint {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--ink-3); margin: -8px 0 20px;
}

/* ── Tabs + dots (JS-only — see .ot-js gate below) ── */
.ot-tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--bg-soft); border: 1px solid var(--line); }
.ot-tab { appearance: none; border: 0; background: transparent; padding: 8px 18px; border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--ink-3); cursor: pointer; min-height: 40px; }
.ot-tab[aria-selected="true"] { background: var(--bg-elev); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--line); }
.ot-dots { display: flex; gap: 2px; }
.ot-dot { appearance: none; border: 0; background: transparent; width: 24px; height: 28px; padding: 0; cursor: pointer; display: grid; place-items: center; }
.ot-dot span { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); transition: width .25s ease, background .25s ease; }
.ot-dot[aria-current="step"] span { width: 20px; border-radius: 4px; background: var(--accent); }

/* ── Phone column — hidden until JS enhances the page ── */
.ot-phone-col { display: none; }
.ot-tutorial.ot-js .ot-stage {
  display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(28px, 6vw, 80px); align-items: start; margin-top: 28px;
}
.ot-tutorial.ot-js .ot-phone-col {
  display: grid; justify-items: center; gap: 16px;
  position: sticky; top: max(calc(var(--ot-head) + 16px), calc(50vh - 370px)); z-index: 2;
}

/* ── Steps: plain readable list by default; scrolly spacing only with JS ── */
.ot-steps { list-style: none; margin: 0; padding: 0; counter-reset: ot-s; }
.ot-step { counter-increment: ot-s; padding: 14px 0; border-bottom: 0.5px solid var(--line); }
.ot-steps .ot-step:last-child { border-bottom: 0; }
.ot-card { position: relative; padding: 2px 0 2px 46px; display: grid; gap: 6px; }
.ot-card::before {
  content: counter(ot-s); position: absolute; left: 0; top: 0;
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--mono); font-size: 13px; color: var(--ink-3);
  border: 1px solid var(--line-2); background: var(--bg);
}
.ot-step h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.2; letter-spacing: -0.01em; margin: 0; }
.ot-step p { margin: 0; font-size: 17px; color: var(--ink-2); }
.ot-step .ot-when { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.ot-step .ot-aside { font-size: 14px; color: var(--ink-3); }

.ot-tutorial.ot-js .ot-steps { padding-bottom: 18vh; }
.ot-tutorial.ot-js .ot-step {
  min-height: 78vh; display: flex; align-items: center; padding: 0;
  border-bottom: 0; counter-increment: ot-s;
}
.ot-tutorial.ot-js .ot-card { max-width: 34rem; padding-left: 58px; opacity: .38; transition: opacity .35s ease; }
.ot-tutorial.ot-js .ot-card::before { transition: background .3s ease, color .3s ease, border-color .3s ease; }
.ot-tutorial.ot-js .ot-step[aria-current="step"] .ot-card { opacity: 1; }
.ot-tutorial.ot-js .ot-step[aria-current="step"] .ot-card::before { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ── Phones: device pinned on an opaque band under the site header ── */
@media (max-width: 760px) {
  .ot-tutorial.ot-js .ot-stage { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 20px; }
  .ot-tutorial.ot-js .ot-phone-col {
    top: var(--ot-head); gap: 8px; padding-block: 10px 12px;
    background: var(--bg);
    margin-inline: calc(-1 * var(--pad)); padding-inline: var(--pad);
  }
  .ot-tutorial.ot-js .ot-phone-col::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -24px; height: 24px;
    background: linear-gradient(var(--bg), transparent); pointer-events: none;
  }
  .ot-tutorial .ot-phone { --pw: min(250px, 62vw, 20vh); }
  .ot-tab { padding: 6px 16px; min-height: 36px; font-size: 14px; }
  .ot-dot { height: 22px; }
  .ot-tutorial.ot-js .ot-step { min-height: 52vh; align-items: flex-start; padding-top: 28px; }
  .ot-tutorial.ot-js .ot-card { padding-left: 46px; }
  .ot-step h3 { font-size: 20px; }
  .ot-step p { font-size: 16px; }
}
/* Landscape phones: no room to pin anything — let the phone scroll away. */
@media (max-width: 900px) and (max-height: 520px) {
  .ot-tutorial.ot-js .ot-phone-col { position: static; }
}

/* ── Notes grid ── */
.ot-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 28px; }
.ot-note { background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; display: grid; gap: 6px; align-content: start; }
.ot-note h4 { font-family: var(--serif); font-weight: 600; font-size: 15.5px; margin: 0; }
.ot-note p { margin: 0; font-size: 14px; color: var(--ink-2); }
.ot-note .ot-path { font-family: var(--mono); font-size: 12px; color: var(--ink-2); background: var(--bg-soft); border-radius: 6px; padding: 2px 6px; display: inline-block; line-height: 1.7; margin-top: 2px; }
@media (max-width: 560px) {
  .ot-notes { grid-template-columns: minmax(0, 1fr); }
}

/* ── Phone ── */
.ot-phone { --pw: min(288px, 72vw, calc((100vh - var(--ot-head) - 150px) * .48)); width: var(--pw); aspect-ratio: 288 / 600; background: var(--ot-bezel); border-radius: calc(var(--pw) * .165); padding: calc(var(--pw) * .034); box-shadow: 0 20px 44px -20px rgba(26, 24, 20, .4), 0 0 0 1px rgba(255, 255, 255, .06) inset; position: relative; }
.ot-screen { container-type: inline-size; position: relative; width: 100%; height: 100%; border-radius: calc(var(--pw) * .135); overflow: hidden; background: var(--ot-scr-ios); font-family: -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif; color: var(--ot-scr-ink); }
.ot-screen.ot-and { background: var(--ot-scr-and); font-family: 'Inter', Roboto, system-ui, sans-serif; }
.ot-island { position: absolute; left: 50%; top: 2.6cqw; width: 30cqw; height: 8.6cqw; border-radius: 99px; background: #000; transform: translateX(-50%); z-index: 5; }
.ot-and .ot-island { width: 3.6cqw; height: 3.6cqw; top: 3.4cqw; }
.ot-sb { position: absolute; inset: 0 0 auto 0; height: 13cqw; display: flex; align-items: center; justify-content: space-between; padding: 0 8cqw 0 9cqw; font-size: 4.2cqw; font-weight: 600; z-index: 4; letter-spacing: -.01em; }
.ot-and .ot-sb { padding: 0 6cqw; font-size: 3.8cqw; font-weight: 500; }
.ot-sb-r { display: flex; align-items: center; gap: 1.4cqw; }
.ot-sb svg { display: block; height: 3.3cqw; width: auto; }
.ot-sb-4g { font-size: 3.4cqw; font-weight: 700; opacity: 0; }
.ot-bars rect { fill: var(--ot-scr-ink); }
.ot-bars rect.ot-off { fill: #c7c7cc; }

.ot-scene { position: absolute; inset: 13cqw 0 0 0; opacity: 0; transform: translateX(7%); transition: opacity .45s ease, transform .5s cubic-bezier(.2, .7, .2, 1); pointer-events: none; display: flex; flex-direction: column; }
.ot-scene.ot-is-past { transform: translateX(-7%); }
.ot-scene.ot-is-active { opacity: 1; transform: none; }

.ot-urlbar { margin: 1.5cqw 4cqw 0; height: 9cqw; border-radius: 3cqw; background: #e6e6eb; display: flex; align-items: center; justify-content: center; gap: 1.4cqw; font-size: 3.6cqw; color: #3a3a3c; flex-shrink: 0; }
.ot-and .ot-urlbar { border-radius: 99px; background: #eceef1; justify-content: flex-start; padding-left: 4cqw; }
.ot-urlbar svg { height: 3cqw; width: auto; }
.ot-page { flex: 1; background: var(--ot-scr-cream); margin-top: 2cqw; padding: 5cqw 6cqw; display: flex; flex-direction: column; gap: 2.6cqw; color: #1a1814; font-family: 'Inter', system-ui, sans-serif; }
.ot-p-brand { display: flex; align-items: center; }
.ot-p-brand svg { height: 4.6cqw; width: 4.6cqw; display: block; margin-right: 1.4cqw; color: var(--ot-scr-ink); }
.ot-p-brand span { font-family: var(--serif); font-weight: 600; font-size: 4.6cqw; letter-spacing: -0.03em; }
.ot-p-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 1.4cqw; font-family: var(--mono); font-size: 2.8cqw; letter-spacing: .1em; padding: 1cqw 2.6cqw; border-radius: 99px; background: rgba(45, 106, 79, .12); color: #2d6a4f; margin-top: 1.5cqw; }
.ot-p-pill b { width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: #2d6a4f; }
.ot-p-h { font-family: var(--serif); font-weight: 600; font-size: 7cqw; line-height: 1.05; letter-spacing: -.02em; }
.ot-p-sub { font-family: var(--mono); font-size: 3cqw; color: #6b6557; }
.ot-p-lab { font-family: var(--mono); font-size: 2.6cqw; letter-spacing: .12em; color: #6b6557; margin-top: 2cqw; }
.ot-p-btn { position: relative; height: 11.5cqw; border-radius: 99px; background: #c65228; color: #fff; font-weight: 600; font-size: 3.8cqw; display: flex; align-items: center; justify-content: center; white-space: nowrap; }
.ot-p-hint { font-size: 3cqw; color: #6b6557; text-align: center; }
.ot-qr { align-self: center; width: 32cqw; height: 32cqw; background: #fff; border-radius: 2cqw; padding: 2cqw; box-shadow: 0 0 0 .3cqw rgba(26, 24, 20, .08); }
.ot-qr svg { width: 100%; height: 100%; display: block; }
.ot-toast { position: absolute; left: 50%; bottom: 6cqw; transform: translateX(-50%); background: rgba(28, 28, 30, .92); color: #fff; font-size: 3.5cqw; font-weight: 500; padding: 2.4cqw 4.4cqw; border-radius: 99px; white-space: nowrap; display: flex; align-items: center; gap: 1.8cqw; opacity: 0; }
.ot-toast svg { height: 3.6cqw; width: auto; }

.ot-nav { padding: 1cqw 5cqw 0; display: flex; flex-direction: column; gap: 1cqw; }
.ot-nav .ot-back { font-size: 4cqw; color: var(--ot-ios-blue); }
.ot-nav .ot-title { font-size: 8.4cqw; font-weight: 700; letter-spacing: -.02em; line-height: 1.1; }
.ot-nav .ot-title.ot-sm { font-size: 6.6cqw; }
.ot-and .ot-nav { padding: 9cqw 6cqw 3cqw; }
.ot-and .ot-nav .ot-title { font-size: 8cqw; font-weight: 500; letter-spacing: -.01em; }
.ot-and .ot-nav .ot-back { color: var(--ot-scr-ink-2); font-size: 3.6cqw; }
.ot-glab { font-size: 3cqw; color: var(--ot-scr-ink-2); padding: 4cqw 9cqw 1.4cqw; letter-spacing: .02em; }
.ot-group { margin: 0 4cqw; background: var(--ot-scr-card); border-radius: 3.6cqw; overflow: hidden; }
.ot-and .ot-group { border-radius: 6cqw; margin: 0 3.5cqw; }
.ot-row { position: relative; min-height: 11cqw; padding: 2.2cqw 4cqw; display: flex; align-items: center; justify-content: space-between; gap: 2cqw; font-size: 3.9cqw; }
.ot-row + .ot-row::before { content: ""; position: absolute; left: 4cqw; right: 0; top: 0; height: 1px; background: var(--ot-scr-line); }
.ot-row .ot-sub { display: block; font-size: 3cqw; color: var(--ot-scr-ink-2); margin-top: .3cqw; }
.ot-row .ot-val { color: var(--ot-scr-ink-2); display: flex; align-items: center; gap: 1.2cqw; position: relative; }
.ot-and .ot-row .ot-val { color: var(--ot-and-blue); }
.ot-chev { height: 3cqw; width: auto; }
.ot-swap { display: grid; }
.ot-swap > * { grid-area: 1 / 1; text-align: right; }
.ot-swap .ot-new { opacity: 0; }
.ot-check { color: var(--ot-ios-blue); font-weight: 600; }
.ot-gfoot { font-size: 3cqw; color: var(--ot-scr-ink-2); padding: 1.6cqw 9cqw 0; line-height: 1.35; }
.ot-badge { width: 6.4cqw; height: 6.4cqw; border-radius: 1.6cqw; display: grid; place-items: center; font-size: 3.2cqw; font-weight: 700; color: #fff; background: #8e8e93; flex-shrink: 0; }
.ot-badge.ot-e { background: #c65228; }
.ot-lead { display: flex; align-items: center; gap: 3cqw; }
.ot-pulse { box-shadow: inset 0 0 0 .6cqw rgba(198, 82, 40, 0); }

.ot-tg { position: relative; width: 13cqw; height: 7.8cqw; border-radius: 99px; background: #e2e2e6; flex-shrink: 0; --ot-kx: 5.9cqw; }
.ot-tg i { position: absolute; top: .7cqw; left: .7cqw; width: 6.4cqw; height: 6.4cqw; border-radius: 50%; background: #fff; box-shadow: 0 .4cqw 1cqw rgba(0, 0, 0, .2); }
.ot-tg.ot-on { background: var(--ot-ios-green); }
.ot-tg.ot-on i { transform: translateX(var(--ot-kx)); }
.ot-and .ot-tg { --ot-kx: 5.2cqw; width: 12cqw; height: 6.8cqw; }
.ot-and .ot-tg i { width: 4.8cqw; height: 4.8cqw; top: 1cqw; left: 1cqw; }
.ot-and .ot-tg.ot-on { background: var(--ot-and-blue); }

.ot-dim { position: absolute; inset: -13cqw 0 0 0; background: var(--ot-shade); opacity: 0; }
.ot-sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--ot-scr-card); border-radius: 6cqw 6cqw 0 0; padding: 7cqw 6cqw 8cqw; display: flex; flex-direction: column; align-items: center; gap: 2.6cqw; text-align: center; transform: translateY(100%); }
.ot-sheet .ot-ic { width: 13cqw; height: 13cqw; color: var(--ot-ios-blue); }
.ot-sheet h4 { margin: 0; font-size: 6cqw; font-weight: 700; letter-spacing: -.01em; }
.ot-sheet p { margin: 0; font-size: 3.6cqw; color: var(--ot-scr-ink-2); line-height: 1.35; }
.ot-sheet .ot-kv { width: 100%; background: var(--ot-scr-ios); border-radius: 3cqw; padding: 2.6cqw 4cqw; display: flex; justify-content: space-between; font-size: 3.6cqw; }
.ot-ios-btn { position: relative; width: 100%; height: 12cqw; border-radius: 3.4cqw; background: var(--ot-ios-blue); color: #fff; font-weight: 600; font-size: 4.2cqw; display: flex; align-items: center; justify-content: center; }
.ot-status { position: relative; height: 6cqw; width: 100%; }
.ot-status > div { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 2cqw; font-size: 3.7cqw; font-weight: 500; opacity: 0; }
.ot-spin { width: 4cqw; height: 4cqw; border-radius: 50%; border: .7cqw solid #d1d1d6; border-top-color: var(--ot-scr-ink-2); }
.ot-ok { color: #1f8a4c; }
.ot-ok svg { height: 4cqw; width: auto; }

.ot-dialog { position: absolute; left: 5cqw; right: 5cqw; top: 50%; background: var(--ot-scr-card); border-radius: 7cqw; padding: 7cqw 6cqw 4cqw; display: flex; flex-direction: column; gap: 3cqw; opacity: 0; transform: translateY(-44%) scale(.94); }
.ot-dialog h4 { margin: 0; font-size: 5.6cqw; font-weight: 600; text-align: center; }
.ot-dialog p { margin: 0; font-size: 3.7cqw; color: var(--ot-scr-ink-2); text-align: center; line-height: 1.4; }
.ot-dlg-btns { display: flex; justify-content: space-around; margin-top: 2cqw; }
.ot-dlg-btns span { position: relative; font-size: 4.2cqw; font-weight: 600; color: var(--ot-and-blue); padding: 2.4cqw 5cqw; border-radius: 99px; }
.ot-bar { height: 1.2cqw; border-radius: 9px; background: #e4e6ea; overflow: hidden; width: 100%; }
.ot-bar i { display: block; height: 100%; width: 0; background: var(--ot-and-blue); }

.ot-foot-btn { margin: auto 4cqw 6cqw; }

/* Tap indicator */
.ot-finger { position: absolute; left: var(--ot-fx, 50%); top: var(--ot-fy, 50%); width: 11cqw; height: 11cqw; border-radius: 50%; background: rgba(26, 24, 20, .26); border: .6cqw solid rgba(255, 255, 255, .95); box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, .28); transform: translate(-50%, -50%); opacity: 0; pointer-events: none; z-index: 3; }
.ot-ripple { position: absolute; left: var(--ot-fx, 50%); top: var(--ot-fy, 50%); width: 14cqw; height: 14cqw; border-radius: 50%; border: .7cqw solid rgba(26, 24, 20, .35); transform: translate(-50%, -50%) scale(.3); opacity: 0; pointer-events: none; z-index: 2; }

/* Timelines run only on the active scene of a running screen. */
.ot-run .ot-is-active .ot-a-in { animation: ot-fadeIn .35s ease var(--ot-d, 0s) both; }
.ot-run .ot-is-active .ot-a-out { animation: ot-fadeOut .3s ease var(--ot-d, 0s) both; }
.ot-run .ot-is-active .ot-a-in-out { animation: ot-fadeInOut var(--ot-dur, 1.1s) ease var(--ot-d, 0s) both; }
.ot-run .ot-is-active .ot-target { animation: ot-press .38s ease var(--ot-d, 0s) both; }
.ot-run .ot-is-active .ot-finger { animation: ot-tapFinger 1.4s ease var(--ot-d, 0s) both; }
.ot-run .ot-is-active .ot-ripple { animation: ot-ripple .65s ease-out var(--ot-d, 0s) both; }
.ot-run .ot-is-active .ot-sheet { animation: ot-sheetUp .55s cubic-bezier(.2, .8, .2, 1) .25s both; }
.ot-run .ot-is-active .ot-dim { animation: ot-fadeIn .4s ease .15s both; }
.ot-run .ot-is-active .ot-dialog { animation: ot-popIn .4s cubic-bezier(.2, .8, .2, 1) .35s both; }
.ot-run .ot-is-active .ot-tg.ot-turn { animation: ot-trackIos .25s ease var(--ot-d, 0s) both; }
.ot-run .ot-is-active .ot-tg.ot-turn i { animation: ot-knob .25s ease var(--ot-d, 0s) both; }
.ot-run.ot-and .ot-is-active .ot-tg.ot-turn { animation-name: ot-trackAnd; }
.ot-run .ot-is-active .ot-bar i { animation: ot-grow 1s ease var(--ot-d, 0s) both; }
.ot-run .ot-is-active .ot-swap .ot-old { animation: ot-fadeOut .25s ease var(--ot-d, 0s) both; }
.ot-run .ot-is-active .ot-swap .ot-new { animation: ot-fadeIn .3s ease var(--ot-d, 0s) both; }
.ot-run .ot-is-active .ot-pulse { animation: ot-pulse 1.6s ease var(--ot-d, 0s) 2 both; }
.ot-run[data-ot-step="5"] .ot-sb-4g { animation: ot-fadeIn .3s ease 2.3s both; }
.ot-run[data-ot-step="5"] .ot-bars rect.ot-off { animation: ot-barOn .3s ease 2.3s both; }
[data-ot-step="4"] .ot-sb-wifi, [data-ot-step="5"] .ot-sb-wifi { display: none; }

@keyframes ot-fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ot-fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes ot-fadeInOut { 0% { opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ot-press { 0%, 100% { transform: none; filter: none; } 45% { transform: scale(.95); filter: brightness(.9); } }
@keyframes ot-tapFinger { 0% { opacity: 0; transform: translate(-50%, -50%) translate(8cqw, 10cqw) scale(1.15); } 40% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 55% { transform: translate(-50%, -50%) scale(.8); } 72% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
@keyframes ot-ripple { 0% { opacity: .7; transform: translate(-50%, -50%) scale(.3); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.9); } }
@keyframes ot-sheetUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes ot-popIn { from { opacity: 0; transform: translateY(-44%) scale(.94); } to { opacity: 1; transform: translateY(-50%) scale(1); } }
@keyframes ot-trackIos { from { background: #e2e2e6; } to { background: var(--ot-ios-green); } }
@keyframes ot-trackAnd { from { background: #e2e2e6; } to { background: var(--ot-and-blue); } }
@keyframes ot-knob { from { transform: none; } to { transform: translateX(var(--ot-kx)); } }
@keyframes ot-grow { from { width: 0; } to { width: 100%; } }
@keyframes ot-pulse { 0%, 100% { box-shadow: inset 0 0 0 .6cqw rgba(198, 82, 40, 0); } 50% { box-shadow: inset 0 0 0 .6cqw rgba(198, 82, 40, .55); } }
@keyframes ot-barOn { to { fill: var(--ot-scr-ink); } }
@keyframes ot-spin { to { transform: rotate(360deg); } }
.ot-run .ot-is-active .ot-spin { animation: ot-spin .8s linear infinite; }

.ot-a-in { opacity: 0; }

/* Reduced motion: no slides or taps — every scene shows its end state at once. */
@media (prefers-reduced-motion: reduce) {
  .ot-scene, .ot-card, .ot-dot span { transition: none; }
  .ot-run .ot-is-active *, .ot-run[data-ot-step="5"] .ot-sb * { animation-duration: .001s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  .ot-run .ot-is-active .ot-finger, .ot-run .ot-is-active .ot-ripple, .ot-run .ot-is-active .ot-a-in-out { display: none; }
  .ot-run .ot-is-active .ot-spin { animation: none !important; }
}