/* Option 1, run 7: the rail, the step, the reel.
   Top to bottom: the live section's arc (outer line, white inner line, blue
   wash, live badges), progress filling the rail with a dot per step; the step
   itself, title and sentence, centred on the rail's axis; at the foot, a reel
   of the twelve pictures that slides with the scroll, the current one large in
   the middle, its neighbours smaller and dimmed at the sides. No small meta
   labels: the rail says where you are. Step 12 is the launch, a status
   change: the rail completes and the product's screens come forward.
   The stage takes one unit from the screen (16px at 1512x860) and every size
   inside is in em of it. Snapping is the browser's own (scroll-steps.js).
   Stacked by default; pinned only when width, height and motion allow it. */

.o1 { --pin: var(--lab-bar, 0px); position: relative; padding-bottom: 0; }
.o1-skip { position: absolute; left: var(--ed-gutter); top: .5em; z-index: 5; padding: .5em 1em; border-radius: var(--ed-radius-pill); background: var(--ed-ink); color: #fff; opacity: 0; pointer-events: none; }
.o1-skip:focus-visible { opacity: 1; pointer-events: auto; }
.o1-head .ed-heading { margin-bottom: 2.5em; }
.o1-frame { width: min(100% - var(--ed-gutter) * 2, 54em); margin-inline: auto; }

/* ---------- Stacked: the readable default ---------- */
.o1-pin { position: relative; padding-bottom: var(--ed-section); }
.o1-arc, .o1-reel { display: none; }
.o1-steps { list-style: none; margin: 0; padding: 0; max-width: 40em; margin-inline: auto; display: grid; gap: 3em; }
.o1-step h3 { font-size: 1.75em; line-height: 1.08; letter-spacing: -.04em; font-weight: 500; text-wrap: balance; }
.o1-step__text { margin-top: .625em; color: var(--ed-muted); line-height: 1.55; text-wrap: pretty; }
.o1-step__visual { margin: 1.25em 0 0; aspect-ratio: 16 / 10; border-radius: var(--ed-radius-lg); overflow: hidden; background: var(--ed-frame); }
.o1-pic { width: 100%; height: 100%; object-fit: cover; display: block; }
.o1-pic--bv { position: relative; display: grid; place-items: center; }
.o1-pic__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.o1-pic__phones { position: relative; width: 86%; height: auto; }
.o1-live { display: inline-flex; align-items: center; gap: .5em; margin-bottom: .75em; padding: .375em .875em; border-radius: var(--ed-radius-pill); background: #e8f6ee; color: #146c43; font-size: .875em; font-weight: 500; }
.o1-live__dot { width: .5em; height: .5em; border-radius: 50%; background: #1a9c5b; }

/* ---------- Pinned ---------- */
.o1-pin[data-mode="pinned"] { padding-bottom: 0; height: calc(100vh - var(--pin) + var(--travel, 0px)); }
.o1-pin[data-mode="pinned"] .o1-stage {
  font-size: clamp(1rem, min(1.058vw, 1.86vh), 1.75rem); line-height: 1.5;
  position: sticky; top: var(--pin); height: calc(100vh - var(--pin));
  display: flex; flex-direction: column; justify-content: center; overflow: hidden; background: var(--ed-canvas);
}

/* The rail: a fixed 5:1 box so the badges' percentages stay on the line. */
.o1-pin[data-mode="pinned"] .o1-arc { display: block; position: relative; aspect-ratio: 5 / 1; margin-top: 1.5em; }
.o1-arc__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.o1-arc__outer, .o1-arc__inner, .o1-arc__fill { fill: none; }
/* One line: the progress is the grey line itself turning blue, on the same
   path at the same weight. The white inner line is the live rail's highlight. */
.o1-arc__outer { stroke: var(--ed-line); stroke-width: 3; stroke-linecap: round; }
.o1-arc__inner { stroke: #fff; stroke-width: 1.8; }
.o1-arc__fill { stroke: var(--brand); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--fill, 0)); }
/* The dome under the rail takes the Figma AI_Bg package in the Brosam style
   (13 Oct, Galadrim: an image per step of the method): one plate per phase,
   cross-fading at the phase change. 043 open sky over a field for Cadrage, 061
   shapes forming for Design et architecture, 096 soft blue and pink clouds for
   Développement et lancement. It fades downward as the blue wash did. */
.o1-arc__wash { display: none; } /* the plates take its place */
.o1-arc__plates { position: absolute; inset: 0; clip-path: url(#o1-dome-bb); -webkit-mask-image: linear-gradient(#000 62%, transparent); mask-image: linear-gradient(#000 62%, transparent); }
/* A true cross-fade: the new plate rises on top while the old one stays solid
   underneath and only drops once it is covered, so there is no grey dip. */
.o1-arc__plate { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transition: opacity 0s linear 1.1s; }
.o1-pin:not([data-phase]) .o1-arc__plate[data-phase="0"],
.o1-pin[data-phase="0"] .o1-arc__plate[data-phase="0"],
.o1-pin[data-phase="1"] .o1-arc__plate[data-phase="1"],
.o1-pin[data-phase="2"] .o1-arc__plate[data-phase="2"] { opacity: 1; z-index: 1; transition: opacity 1.1s cubic-bezier(.4, 0, .2, 1); }
@media (prefers-reduced-motion: reduce) { .o1-arc__plate, .o1-pin[data-phase] .o1-arc__plate { transition: none; } }
/* Steps are beads on the line: grey ahead, blue behind, the current one open. */
.o1-dot { fill: #c3cad6; stroke: none; transition: fill 200ms ease-out, r 200ms ease-out; }
.o1-dot[data-state="done"] { fill: var(--brand); }
.o1-dot[data-state="current"] { fill: #fff; stroke: var(--brand); stroke-width: 2.2; r: 5; }

/* Phase badges, the live style: a square on the line, the name above. */
.o1-badge { position: absolute; translate: -50% -50%; display: grid; justify-items: center; }
.o1-badge__n {
  display: grid; place-items: center; width: 2.8em; height: 2.8em; border-radius: .6em;
  background: var(--surface, #fff); border: 1px solid var(--ed-line); box-shadow: 0 4px 12px #1826400b;
  font-size: 1.25em; font-variant-numeric: tabular-nums;
  transition: background-color 240ms ease-out, color 240ms ease-out, border-color 240ms ease-out;
}
.o1-badge__label { position: absolute; bottom: calc(100% + .625em); font-size: .875em; color: var(--ed-muted); white-space: nowrap; transition: color 240ms ease-out; }
.o1-badge[data-state="done"] .o1-badge__n { border-color: var(--brand); color: var(--brand); }
.o1-badge[data-state="current"] .o1-badge__n { background: var(--brand); border-color: var(--brand); color: #fff; }
.o1-badge[data-state="current"] .o1-badge__label { color: var(--ed-ink); }

/* The step: title and sentence, centred on the rail, set in the site's heading style. */
.o1-pin[data-mode="pinned"] .o1-steps { position: relative; display: grid; gap: 0; max-width: 36em; margin: -.5em auto 0; text-align: center; }
.o1-pin[data-mode="pinned"] .o1-step {
  grid-area: 1 / 1; align-self: start;
  opacity: 0; visibility: hidden; translate: 0 var(--from, .75em);
  transition: opacity 160ms ease-out, translate 160ms ease-in, visibility 0s 160ms;
}
.o1-pin[data-dir="back"] .o1-step { --from: -.75em; }
.o1-pin[data-mode="pinned"] .o1-step[data-state="current"] {
  opacity: 1; visibility: visible; translate: 0 0;
  transition: opacity 240ms ease-out 60ms, translate 320ms cubic-bezier(.2, .8, .2, 1) 60ms, visibility 0s;
}
.o1-pin[data-mode="pinned"] .o1-step h3 { font-size: clamp(1.75em, 2.4vw, 2.25em); }
.o1-pin[data-mode="pinned"] .o1-step__text { margin: .75em auto 0; max-width: 30em; font-size: 1.0625em; }
.o1-pin[data-mode="pinned"] .o1-step__visual { display: none; }

/* The reel: every picture in one strip, the current one in the middle. The
   track is placed by the scroll (option-1.js), so it moves with the reader;
   size and dimming follow each picture's distance from the centre. */
.o1-pin[data-mode="pinned"] .o1-reel {
  --w: 24em; --gap: 1.5em;
  display: block; position: relative; height: min(15em, 27vh); margin-top: 2.25em; overflow: visible;
}
.o1-reel__track { position: absolute; top: 0; bottom: 0; left: 50%; display: flex; gap: var(--gap); transform: translateX(calc(var(--w) / -2 - var(--reel, 0) * (var(--w) + var(--gap)))); will-change: transform; }
.o1-reel__item {
  flex: 0 0 var(--w); height: 100%; margin: 0; border-radius: var(--ed-radius-lg); overflow: hidden; background: var(--ed-frame);
  transform: scale(var(--k, .8)); opacity: var(--o, .35); transform-origin: center bottom;
}

/* ---------- The launch ---------- */
/* Step 12 shows what a launch with us produced. The rail completes, the other
   pictures fade, and the last one opens into a results panel: Book Village's
   live screens on the left, four client figures on the right, counting up. */
.o1-pin[data-launch] .o1-arc__fill { stroke-dashoffset: 0; transition: stroke-dashoffset 600ms cubic-bezier(.2, .8, .2, 1); }
.o1-pin[data-launch] .o1-badge .o1-badge__n { border-color: var(--brand); color: var(--brand); }
.o1-pin[data-launch] .o1-badge[data-state="current"] .o1-badge__n { color: #fff; }
.o1-reel__item { position: relative; transition: flex-basis 650ms cubic-bezier(.2, .8, .2, 1), opacity 400ms ease-out; }
.o1-reel__item .o1-pic__phones { width: auto; height: 88%; max-width: 92%; object-fit: contain; }
.o1-pin[data-launch] .o1-reel__item:not(:last-child) { opacity: 0 !important; }
.o1-pin[data-launch] .o1-reel__item:last-child { box-shadow: inset 0 0 0 1px var(--ed-line); --open: min(52em, 88vw); flex-basis: var(--open); transform: none; opacity: 1; }
.o1-pin[data-launch] .o1-reel__track { transform: translateX(calc(min(52em, 88vw) / -2 - 11 * (var(--w) + var(--gap)))); transition: transform 650ms cubic-bezier(.2, .8, .2, 1); }
/* The picture keeps the left part; the figures take the right. */
.o1-reel__item:last-child > .o1-pic { position: absolute; inset: 0 auto 0 0; width: 100%; transition: width 650ms cubic-bezier(.2, .8, .2, 1); }
.o1-pin[data-launch] .o1-reel__item:last-child > .o1-pic { width: 46%; }
.o1-results { position: absolute; inset: 0 0 0 46%; display: grid; align-items: center; padding: 0 2em; background: var(--surface, #fff); opacity: 0; pointer-events: none; }
.o1-results ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5em 2em; }
.o1-results li { display: grid; gap: .125em; opacity: 0; translate: 0 .5em; }
.o1-results__n { font-size: 2.5em; line-height: 1; letter-spacing: -.05em; font-weight: 500; color: var(--ed-ink); font-variant-numeric: tabular-nums; }
.o1-results__what { font-size: .875em; color: var(--ed-muted); line-height: 1.35; }
.o1-results__who { font-size: .875em; color: var(--brand); font-weight: 500; }
.o1-pin[data-launch] .o1-results { opacity: 1; transition: opacity 300ms ease-out 350ms; }
.o1-pin[data-launch] .o1-results li { opacity: 1; translate: 0 0; transition: opacity 320ms ease-out, translate 420ms cubic-bezier(.2, .8, .2, 1); transition-delay: calc(450ms + var(--r, 0) * 90ms); }
.o1-results li:nth-child(2) { --r: 1; } .o1-results li:nth-child(3) { --r: 2; } .o1-results li:nth-child(4) { --r: 3; }
.o1-pin[data-launch] .o1-live { animation: o1-live-in 320ms ease-out 200ms both; }
@keyframes o1-live-in { from { opacity: 0; } }

/* Native snapping, switched on by scroll-steps.js only inside the travel. */
html.steps-snapping { scroll-snap-type: y mandatory; }
.steps-snap { position: absolute; left: 0; width: 1px; height: 1px; scroll-snap-align: start; pointer-events: none; }

/* On the homepage the stage pins under the navbar. */
.home-editorial .o1 { --lab-bar: var(--closing-pin-top, 72px); }

/* ---------- The launch, round 2 (24 Sept) ---------- */
/* Hulusi: show that we have done this many times. At step 12 the reel
   clears and eight real projects fly up and land in a fan that follows the
   rail's curve, trailed by a few cobalt lines (the lift-off), then the
   figures count up under them: 350+ brands, then four client results.
   No confetti: the motion is the lift and the landing. */
.o1-launch { display: none; }
.o1-pin[data-mode="pinned"] .o1-launch { display: grid; grid-template-rows: 1fr auto; gap: 1.25em; position: absolute; inset: 0; pointer-events: none; }
.o1-pin[data-launch] .o1-reel__track { opacity: 0; transition: opacity 200ms ease-out; }
.o1-pin[data-launch] .o1-reel { height: min(19em, 33vh); transition: height 400ms cubic-bezier(.2, .8, .2, 1); }

.o1-launch__fan { position: relative; }
.o1-launch__card {
  --n: 8; --t: calc(var(--k) / (var(--n) - 1) - .5); /* -0.5 .. 0.5 across the fan */
  position: absolute; left: 50%; bottom: 2.25em; margin: 0; width: 13em; aspect-ratio: 16 / 10;
  border-radius: .5em; overflow: hidden; background: var(--ed-frame);
  box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 18px 36px -18px rgb(10 30 90 / .45);
  /* resting place: spread along an arc, the ends lower and turned out */
  --x: calc(var(--t) * 46em); --y: calc(var(--t) * var(--t) * 6em); --r: calc(var(--t) * 14deg);
  transform: translate(calc(-50% + var(--x)), calc(var(--y) + 140%)) rotate(0deg) scale(.86);
  opacity: 0; z-index: calc(10 - var(--k));
}
.o1-launch__card:nth-child(n + 5) { z-index: var(--k); }
.o1-launch__card img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 13 Oct: the covers now carry the client's mark, so the white label would
   say it twice. The name stays for screen readers (the image alt is empty). */
.o1-launch__card figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.o1-pin[data-launch] .o1-launch__card {
  opacity: 1; transform: translate(calc(-50% + var(--x)), var(--y)) rotate(var(--r)) scale(1);
  transition: transform 900ms cubic-bezier(.16, 1, .3, 1), opacity 300ms ease-out;
  transition-delay: calc(250ms + (var(--k) * 70ms));
}

/* Lift-off trails: thin cobalt lines that shoot up behind the fan once. */
.o1-launch__trails { position: absolute; inset: 0 0 auto; height: 100%; display: flex; justify-content: center; gap: 7em; pointer-events: none; }
.o1-launch__trails i { width: 2px; height: 100%; background: linear-gradient(to top, rgb(0 82 248 / 0), rgb(0 82 248 / .55) 60%, rgb(0 82 248 / 0)); transform: translateY(100%); opacity: 0; }
.o1-pin[data-launch] .o1-launch__trails i { animation: o1-trail 900ms cubic-bezier(.3, .6, .2, 1) both; }
.o1-launch__trails i:nth-child(2) { animation-delay: 80ms !important; } .o1-launch__trails i:nth-child(3) { animation-delay: 30ms !important; }
.o1-launch__trails i:nth-child(4) { animation-delay: 120ms !important; } .o1-launch__trails i:nth-child(5) { animation-delay: 60ms !important; }
@keyframes o1-trail { 0% { transform: translateY(100%); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-60%); opacity: 0; } }

/* The figures: one row under the fan, the first one the headline. */
.o1-launch__kpis { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); gap: 1.5em; width: min(52em, 100%); margin-inline: auto; text-align: left; }
.o1-launch__kpis li { display: grid; gap: .1em; padding-left: .875em; border-left: 1px solid var(--ed-line); opacity: 0; translate: 0 .5em; }
.o1-launch__kpis li:first-child { border-left-color: var(--brand); }
.o1-launch__n { font-size: 1.75em; line-height: 1; letter-spacing: -.04em; font-weight: 500; color: var(--ed-ink); font-variant-numeric: tabular-nums; }
.o1-launch__kpis li:first-child .o1-launch__n { font-size: 2.25em; color: var(--brand); }
.o1-launch__what { font-size: .875em; color: var(--ed-muted); line-height: 1.3; }
.o1-launch__who { font-size: .875em; color: var(--ed-ink); font-weight: 500; }
.o1-pin[data-launch] .o1-launch__kpis li { opacity: 1; translate: 0 0; transition: opacity 320ms ease-out, translate 420ms cubic-bezier(.2, .8, .2, 1); transition-delay: calc(900ms + var(--q, 0) * 80ms); }
.o1-launch__kpis li:nth-child(2) { --q: 1; } .o1-launch__kpis li:nth-child(3) { --q: 2; } .o1-launch__kpis li:nth-child(4) { --q: 3; } .o1-launch__kpis li:nth-child(5) { --q: 4; }

@media (prefers-reduced-motion: reduce) {
  .o1-pin[data-launch] .o1-launch__card, .o1-pin[data-launch] .o1-launch__kpis li { transition: none; }
  .o1-launch__trails { display: none; }
}


/* ---------- Arrows: a second way through the steps (24 Sept) ---------- */
.o1-arrow { display: none; }
.o1-pin[data-mode="pinned"] .o1-arrow {
  display: grid; place-items: center; position: absolute; top: 50%; z-index: 5; translate: 0 -50%;
  width: 3.25em; height: 3.25em; border-radius: 50%; border: 1px solid var(--ed-line); background: #fff; color: var(--ed-ink);
  box-shadow: 0 8px 20px -10px rgb(18 32 80 / .35); cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease, opacity 200ms ease;
}
.o1-arrow svg { width: 1.25em; height: 1.25em; }
.o1-arrow--prev { left: calc(50% - var(--w) / 2 - 4.5em); }
.o1-arrow--next { right: calc(50% - var(--w) / 2 - 4.5em); }
.o1-arrow:hover:not(:disabled) { background: var(--brand); border-color: var(--brand); color: #fff; }
.o1-arrow:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.o1-arrow:disabled { opacity: .35; cursor: default; }
/* Step 12, the launch: no arrows (Hulusi, 13 Oct: the lone back arrow in the
   corner looked stray). Scrolling up and the phase badges still go back. */
.o1-pin[data-launch] .o1-arrow { display: none; }

/* ---------- Launch cards react to the pointer (24 Sept) ---------- */
.o1-pin[data-launch] .o1-launch { pointer-events: none; }
.o1-pin[data-launch] .o1-launch__card { pointer-events: auto; cursor: default; }
@media (hover: hover) and (pointer: fine) {
  .o1-pin[data-launch] .o1-launch__fan:hover .o1-launch__card { opacity: .55; transition: transform 450ms cubic-bezier(.2, .8, .2, 1), opacity 250ms ease; transition-delay: 0s; }
  .o1-pin[data-launch] .o1-launch__fan .o1-launch__card:hover {
    opacity: 1; z-index: 40;
    transform: translate(calc(-50% + var(--x)), calc(var(--y) - 1.5em)) rotate(0deg) scale(1.16);
    box-shadow: 0 1px 0 rgb(255 255 255 / .6) inset, 0 28px 48px -20px rgb(10 30 90 / .55);
  }
}
@media (prefers-reduced-motion: reduce) { .o1-pin[data-launch] .o1-launch__fan .o1-launch__card:hover { transform: translate(calc(-50% + var(--x)), var(--y)) rotate(0deg); } }

/* ---------- The scene and the floating photographs (30 Sept, round 4) ----------
   Hulusi: the photos pasted onto the drawing did not work, and a building
   reads as a construction company. So the plate is a quiet surface, the
   isometric scene builds a digital product in the middle (method-iso.js v3),
   and the team photographs float around it as small cards: the four of the
   current phase, the current step's card larger. The pointer tilts the scene
   and slides the cards the other way. Stacked: photos only. */
.o1-iso, .o1-desk, .o1-float { display: none; }
.o1-pin[data-mode="pinned"] .o1-mix { position: relative; container-type: inline-size; width: min(100% - var(--ed-gutter) * 2, 62em); margin: 1em auto 0; height: min(27em, 50vh); border-radius: var(--ed-radius-lg); overflow: hidden;
  background: transparent; overflow: visible;
  transition: width 500ms cubic-bezier(.2, .8, .2, 1), background-color 300ms ease-out; --px: 0; --py: 0; }
/* The reel only serves the launch panel now. */
.o1-pin[data-mode="pinned"] .o1-mix .o1-reel { display: none; }
/* The scene, in the middle, tilting a little with the pointer. */
.o1-pin[data-mode="pinned"] .o1-iso { display: block; position: absolute; left: 20%; top: 0; width: 60%; height: 100%; z-index: 1; pointer-events: none; }
.o1-iso__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 18px 24px rgb(18 32 80 / .14));
  transform: translate(calc(var(--px) * 14px), calc(var(--py) * 10px)); transition: transform 500ms cubic-bezier(.2, .8, .2, 1); }
/* The leader: a thin cobalt line from the current photo to the piece its step adds. */
.o1-leader { display: none; }
.o1-pin[data-mode="pinned"] .o1-leader { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; overflow: visible; opacity: 0; }
.o1-pin[data-mode="pinned"] .o1-leader.on { animation: o1-leader-in 600ms ease-out 250ms both; }
@keyframes o1-leader-in { from { opacity: 0; } to { opacity: 1; } }
.o1-pin[data-launch] .o1-leader { display: none; }
/* The floating cards: two each side of the scene. */
.o1-pin[data-mode="pinned"] .o1-float { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.o1-float__card { position: absolute; width: clamp(7rem, 15cqw, 10.5rem); aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: .625rem; overflow: hidden; background: #fff; cursor: pointer;
  box-shadow: 0 0 0 1px rgb(18 20 23 / .08), 0 18px 36px -18px rgb(18 32 80 / .45);
  opacity: 0; visibility: hidden; pointer-events: none;
  --dx: 0px; --dy: 0px; --s: .82; --r: 0deg;
  transform: translate(calc(var(--dx) + var(--px) * -14px), calc(var(--dy) + var(--py) * -10px)) rotate(var(--r)) scale(var(--s));
  transition: opacity 450ms ease-out, visibility 0s linear 450ms, transform 650ms cubic-bezier(.2, .8, .2, 1), box-shadow 300ms ease-out; }
.o1-float__card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.o1-float__card .o1-float__n { position: absolute; left: .4rem; top: .4rem; min-width: 1.75rem; padding: .1rem .35rem; border-radius: .3rem; background: #fff; color: var(--ed-ink); font-size: .8125rem; line-height: 1.4; font-variant-numeric: tabular-nums; text-align: center; }
.o1-float__card[data-slot="tl"] { left: 5%; top: 9%; --r: -3deg; }
.o1-float__card[data-slot="bl"] { left: 10%; bottom: 9%; --r: 2deg; }
.o1-float__card[data-slot="tr"] { right: 10%; top: 9%; --r: 3deg; }
.o1-float__card[data-slot="br"] { right: 5%; bottom: 9%; --r: -2deg; }
.o1-float__card[data-state="near"], .o1-float__card[data-state="current"] { opacity: .62; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.o1-float__card[data-state="current"] { opacity: 1; --s: 1.12; --r: 0deg; z-index: 2; box-shadow: 0 0 0 2px var(--brand, #0052f8), 0 24px 44px -18px rgb(18 32 80 / .55); }
.o1-float__card[data-state="current"] .o1-float__n { background: var(--brand, #0052f8); color: #fff; }
.o1-float__card:focus-visible { outline: 2px solid var(--brand, #0052f8); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .o1-float__card[data-state="near"]:hover { opacity: .9; } }
/* A slow float, each card on its own beat. */
@keyframes o1-float { from { translate: 0 -3px; } to { translate: 0 3px; } }
.o1-float__card:is([data-state="near"], [data-state="current"]) { animation: o1-float 5s ease-in-out infinite alternate; }   /* hidden cards do not animate */
.o1-float__card[data-slot="bl"] { animation-delay: -1.2s; } .o1-float__card[data-slot="tr"] { animation-delay: -2.4s; } .o1-float__card[data-slot="br"] { animation-delay: -3.6s; }
/* The arrows sit on the plate's edges. */
.o1-pin[data-mode="pinned"] .o1-mix .o1-arrow { z-index: 4; }
.o1-pin[data-mode="pinned"] .o1-mix .o1-arrow--prev { left: 1em; }
.o1-pin[data-mode="pinned"] .o1-mix .o1-arrow--next { right: 1em; }
/* The real-time scene (method-3d.js): the canvas fills the plate; the
   drawing is only the fallback. Photos, line and controls sit above it. */
.o1-3d { display: none; }
.o1-pin[data-mode="pinned"] .o1-3d { display: block; position: absolute; inset: 0 -4%; z-index: 1; }
.o1-3d__canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.o1-mix[data-three] .o1-iso { display: none !important; }
/* Zone names on the ground's front edge (the current one in ink), and the
   step numbers of the overview. Positioned by method-3d.js each frame. */
.o1-zone { position: absolute; left: 0; top: 0; margin-top: -.4375rem; transform-origin: 0 50%; font-size: .8125rem; letter-spacing: -.005em; line-height: 1; white-space: nowrap; color: #8a929d; pointer-events: none; transition: color 300ms ease; }
.o1-zone b { font-weight: 500; font-variant-numeric: tabular-nums; margin-right: .25rem; }
.o1-zone[data-on] { color: var(--ed-ink, #121417); }
.o1-zone[data-on] b { color: var(--brand, #0052f8); }
.o1-tip { position: absolute; left: 0; top: 0; z-index: 6; max-width: 20rem; padding: .375rem .625rem; border-radius: .5rem; background: var(--ed-ink, #121417); color: #fff;
  font-size: .875rem; line-height: 1.35; pointer-events: none; opacity: 0; transition: opacity 160ms ease-out; white-space: nowrap; }
.o1-tip[data-on] { opacity: 1; }
.o1-tools { display: none; }
.o1-pin[data-mode="pinned"] .o1-mix[data-three] .o1-tools { display: flex; position: absolute; left: 50%; bottom: -.25rem; z-index: 5; translate: -50% 0; gap: .5rem; align-items: center; }
.o1-kind { display: flex; padding: .1875rem; border: 1px solid var(--ed-line, #d8dce1); border-radius: 999px; background: #fff; }
.o1-kind button, .o1-inside { font: inherit; font-size: .875rem; line-height: 1; padding: .5rem .875rem; border: 0; border-radius: 999px; background: transparent; color: var(--ed-muted, #51565e); cursor: pointer; transition: background-color 180ms ease, color 180ms ease; }
.o1-kind button[aria-checked="true"] { background: var(--ed-ink, #121417); color: #fff; }
.o1-inside { border: 1px solid var(--ed-line, #d8dce1); background: #fff; padding: .6875rem .875rem; }
.o1-inside[aria-pressed="true"] { background: var(--brand, #0052f8); border-color: var(--brand, #0052f8); color: #fff; }
.o1-kind button:focus-visible, .o1-inside:focus-visible { outline: 2px solid var(--brand, #0052f8); outline-offset: 2px; }
.o1-pin[data-launch] .o1-tools, .o1-pin[data-launch] .o1-3d, .o1-pin[data-launch] .o1-tip { opacity: 0; pointer-events: none; transition: opacity 300ms ease-out; }
/* A piece hovered in the scene lights its card. */
.o1-float__card[data-hot] { opacity: 1; box-shadow: 0 0 0 2px var(--brand, #0052f8), 0 24px 44px -18px rgb(18 32 80 / .55); }
/* Cards of other phases wait off to the side, and slide in. */
.o1-float__card:not([data-state="near"]):not([data-state="current"])[data-slot$="l"] { --dx: -2.5rem; }
.o1-float__card:not([data-state="near"]):not([data-state="current"])[data-slot$="r"] { --dx: 2.5rem; }
/* The launch: the plate opens to the stage's full width, the reel's fan flies over everything. */
.o1-pin[data-launch] .o1-mix { width: 100%; background: transparent; height: min(20em, 38vh); margin-top: .5em; }
/* The launch sits right under its text: no empty plate above the fan (30 Sept). */
.o1-pin[data-launch] .o1-mix .o1-reel { display: block; position: absolute; inset: 0; width: auto; height: auto; margin: 0; clip-path: none; overflow: visible; z-index: 5; }
.o1-pin[data-launch] .o1-mix .o1-reel__track { transform: none; }
.o1-pin[data-launch] :is(.o1-iso, .o1-float) { opacity: 0; pointer-events: none; transition: opacity 300ms ease-out; }
/* Scene pieces: hidden until their step, rising into place; leaving upward. */
.o1-iso__svg g[data-s] { opacity: 0; transform: translateY(16px); transition: opacity 500ms cubic-bezier(.2, .8, .2, 1), transform 700ms cubic-bezier(.2, .8, .2, 1); }
.o1-iso__svg g[data-s].on { opacity: 1; transform: none; }
.o1-iso__svg g[data-s].gone { opacity: 0; transform: translateY(-12px); }
.o1-iso__svg .pulse { animation: o1-iso-pulse 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes o1-iso-pulse { from { opacity: .6; transform: scale(.5); } to { opacity: 0; transform: scale(1.4); } }
.o1-iso__svg .beam { opacity: 0; transition: opacity 800ms ease; }
.o1-iso__svg.launched .beam { opacity: 1; }
.o1-iso__svg .dash { stroke-dasharray: 6 6; animation: o1-iso-dash 1.4s linear infinite; }
@keyframes o1-iso-dash { to { stroke-dashoffset: -24; } }
@media (prefers-reduced-motion: reduce) {
  .o1-iso__svg, .o1-float__card { transition: none; animation: none; }
  .o1-pin[data-mode="pinned"] .o1-leader.on { animation: none; opacity: 1; }
  .o1-iso__svg g[data-s] { transition: none; }
  .o1-iso__svg .pulse, .o1-iso__svg .dash { animation: none; }
}
.o1-iso__svg .bubble { animation: o1-iso-rise 2.8s ease-in-out infinite; }
@keyframes o1-iso-rise { 0% { opacity: 0; transform: translateY(14px); } 25%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-10px); } }
@media (prefers-reduced-motion: reduce) { .o1-iso__svg .bubble { animation: none; } }

/* ---------- Phones (20 Oct 2026) ----------
   Hulusi rejected the swipe row of cards ("looks really bad") and picked a
   rail timeline from the Mobbin references (ShopBack, MacroFactor, Samara):
   one vertical rail, a numbered square per step, the three phases as sticky
   headers, a picture under every other step that alternates the isometric
   scene and a product screen. Nothing scrolls sideways (method-mobile.js). */
.o1-mphase, .o1-step__iso { display: none; }
.o1-pin[data-mobile] .o1-steps { --rail: 1.75rem; max-width: 34rem; margin: 0 auto; padding: 0; counter-reset: o1m; }
.o1-pin[data-mobile] .o1-mphase {
  display: flex; align-items: baseline; gap: .625rem; position: sticky; top: var(--o1-nav, 4.5rem); z-index: 2;
  margin: 0 calc(var(--ed-gutter, 1rem) * -1); padding: .875rem var(--ed-gutter, 1rem) .75rem;
  background: color-mix(in srgb, var(--ed-bg, #f6f7f8) 92%, transparent); backdrop-filter: blur(8px);
  font-size: 1.125rem; font-weight: 500; letter-spacing: -.02em; color: var(--ed-ink);
}
.o1-pin[data-mobile] .o1-mphase:not(:first-child) { margin-top: .5rem; }
.o1-pin[data-mobile] .o1-step:last-child { padding-bottom: 0; }
.o1-pin[data-mobile] .o1-mphase span { font-size: .875rem; font-weight: 400; letter-spacing: 0; color: var(--ed-muted); font-variant-numeric: tabular-nums; }
.o1-pin[data-mobile] .o1-step {
  counter-increment: o1m; position: relative; display: flex; flex-direction: column;
  padding: .25rem 0 1.75rem calc(var(--rail) + .875rem);
}
/* The rail: a line from each square down to the next one, cobalt once read. */
.o1-pin[data-mobile] .o1-step::before {
  content: ""; position: absolute; left: calc(var(--rail) / 2 - .5px); top: 2rem; bottom: .25rem; width: 1px; background: var(--ed-line);
}
.o1-pin[data-mobile] .o1-step:is(:last-child, :has(+ .o1-mphase))::before { display: none; }
.o1-pin[data-mobile] .o1-step h3 { position: static; font-size: 1.375rem; line-height: 1.15; }
.o1-pin[data-mobile] .o1-step h3::before {
  content: counter(o1m, decimal-leading-zero); position: absolute; left: 0; top: .25rem;
  display: grid; place-items: center; width: var(--rail); height: var(--rail);
  background: var(--ed-ink); color: #fff; font-size: .8125rem; font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums;
  transition: background-color 300ms ease;
}
.o1-pin[data-mobile] .o1-step[data-seen] h3::before { background: var(--brand); }
.o1-pin[data-mobile] .o1-step__text { margin-top: .5rem; font-size: 1rem; line-height: 1.5; }
.o1-pin[data-mobile] .o1-live { align-self: flex-start; margin-bottom: .5rem; }
/* Pictures: every other step, alternating the scene and a product screen. */
.o1-pin[data-mobile] .o1-step__visual { display: none; }
.o1-pin[data-mobile] .o1-step[data-pic="screen"] .o1-step__visual { display: block; margin: 1rem 0 0; border-radius: 0; border: 1px solid var(--ed-line); }
.o1-pin[data-mobile] .o1-step[data-pic="iso"] .o1-step__iso {
  display: block; position: relative; margin: 1rem 0 0; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--ed-line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--ed-blue-wash, #e3e8f0) 70%, #fff), var(--ed-blue-wash, #e3e8f0));
}
.o1-pin[data-mobile] .o1-step__iso .o1-iso__svg { inset: 3% -6% -12%; width: 112%; height: 109%; }
@media (prefers-reduced-motion: reduce) { .o1-pin[data-mobile] .o1-step h3::before { transition: none; } }