/* #engine: a scenic stage between the dawn hero and the dusk Focus band.
   Five real iPhone screens stand on a shallow arc over the cloud sea.
   With motion allowed (.is-scroll) the stage pins and page scroll turns the
   arc: each phone slides one slot left, the one arriving at the front
   straightens and lifts its key card. Without motion (or without JS) it is
   the static fan, and the pills select instantly. */
@property --veil { syntax: '<number>'; inherits: true; initial-value: 0; }

.engine {
  --engine-ink: #f7f5f0;
  --engine-soft: #e2ded6;
  --engine-dim: #bdb8af;
  --engine-spring: cubic-bezier(.2, 1.18, .32, 1);
  --engine-ease: cubic-bezier(.2, .7, .2, 1);
  position: relative;
  isolation: isolate;
  overflow: clip;
  color: var(--engine-ink);
  background: #121417;
  padding: clamp(84px, 8.4vw, 124px) 0 34px;
  scroll-margin-top: 0;
}
@supports (transition-timing-function: linear(0, 1)) {
  .engine { --engine-spring: linear(0, .028, .098, .194, .303, .415, .524, .625, .715, .793, .858, .911, .952, .983, 1.006, 1.022, 1.032, 1.037, 1.038, 1.038, 1.035, 1.031, 1.027, 1.023, 1.019, 1.015, 1.011, 1.008, 1.006, 1.004, 1.002, 1.001, 1); }
}

/* Backdrop: one viewport of scenery that stays put while the section scrolls
   over it, so the cloud sea never leaves while the stage is pinned. The top
   shade lives in section coordinates: it scrolls away with the heading, so
   the heading always sits on its darkest band. The end shade meets the Focus
   band; the script fades it in with scroll. */
.engine-backdrop { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.engine-backdrop-pin { position: sticky; top: 0; height: 100lvh; overflow: hidden; }
.engine-scenery, .engine-shade { position: absolute; inset: 0; }
.engine-scenery { background: url('/assets/ambient/OrdoHeroCloudSea.jpg') 50% 62% / cover; }
.engine-scenery video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.engine-shade {
  background:
    radial-gradient(120% 75% at 50% 54%, #0000 32%, #0c0f1259 100%),
    linear-gradient(180deg, #1517196b 0%, #15171926 16%, #0000 30%, #0000 58%, #0f121459 76%, #0e1113a8 100%);
}
.engine-shade--top { inset: 0 0 auto; height: 1000px; background: linear-gradient(180deg, #171717 0, #171717eb 110px, #171717c2 300px, #171717a8 430px, #17171766 640px, #17171724 840px, #0000 1000px); }
.engine-shade--end { background: linear-gradient(180deg, #0000 48%, #1215184d 64%, #0f1214c7 82%, #0e1113 100%); }
.engine:not(.is-scroll) .engine-backdrop-pin { position: absolute; inset: 0; height: auto; }

/* Heading */
.engine-heading { max-width: 1000px; margin: 0 auto; text-align: center; }
.engine-kicker { margin-bottom: 18px; color: var(--engine-soft); font-size: 13px; letter-spacing: .01em; }
.engine h2 {
  color: #faf8f2;
  font-family: "Ordo Hero", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(58px, 7.1vw, 106px);
  font-weight: 800;
  letter-spacing: -.052em;
  line-height: .9;
  text-shadow: 0 2px 34px #0003;
}
.engine h2 > span, .engine-lede-break { display: block; }
.engine-lede {
  max-width: 740px;
  margin: 22px auto 0;
  color: var(--engine-soft);
  font-size: clamp(16px, 1.35vw, 19px);
  line-height: 1.55;
  text-shadow: 0 1px 14px #0008;
}

/* The show: sources, stage, copy. Static sizing fits all three in one
   viewport; scroll mode re-sizes the phone from the stage's own height. */
.engine-show {
  --pw: min(clamp(236px, calc((100svh - 296px) * .489), 330px), calc((100vw - 48px) / 3.3));
  --ph: calc(var(--pw) * 2.0444);
  --s1: calc(var(--pw) * .86);
  --s2: calc(var(--pw) * 1.62);
  --z1: calc(var(--pw) * -.6);
  --z2: calc(var(--pw) * -1.25);
  margin-top: clamp(40px, 4.6vw, 64px);
}
.engine-sources { display: flex; justify-content: center; gap: 8px; }
.engine-source {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 19px 0 15px;
  border: 1px solid #ffffff33;
  border-radius: 999px;
  background: #1013165c;
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
  backdrop-filter: blur(16px) saturate(1.25);
  color: var(--engine-ink);
  font-size: 14px;
  font-weight: 560;
  letter-spacing: -.005em;
  overflow: hidden;
  /* The ink flips in one step at the moment the fill crosses mid-luminance,
     so the label never fades into a grey pill: late on the way out, early on
     the way in. */
  transition: background .24s linear, border-color .24s linear, color 0s .15s, transform .2s;
}
.engine-source:hover { background: #ffffff21; border-color: #ffffff66; }
.engine-source:active { transform: scale(.97); }
.engine-source[aria-selected="true"] { background: #f7f4ee; border-color: #f7f4ee; color: #191816; transition: background .24s linear, border-color .24s linear, color 0s .09s, transform .2s; }
.engine-source svg { width: 18px; height: 18px; }
.engine-source .engine-mark { fill: currentColor; stroke: none; width: 17px; height: 17px; }
.engine-source:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.engine-source-label { white-space: nowrap; }

/* Stage: one perspective camera, five phones */
.engine-stage {
  --spread: 1;
  position: relative;
  height: calc(var(--ph) + 44px);
  margin-top: clamp(26px, 3vw, 40px);
  perspective: 1700px;
  perspective-origin: 50% 44%;
}
.engine-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(1180px, 100%);
  height: 86%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, #fff6e826, #fff6e80d 55%, #0000);
  pointer-events: none;
  transition: background .8s;
}
.engine-show[data-active="ordo"] .engine-stage::before { background: radial-gradient(closest-side, #ffd8b040, #ffd8b012 55%, #0000); }
.engine-ring {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform 1.2s var(--engine-ease);
}
/* Each phone carries transparent padding (--room-y, --room-x) so its soft
   shadow stays inside its own 3D layer instead of being cut off at the
   frame's edge. On phones the side padding is narrower so the front layer
   never reaches into its neighbour's (Chromium cut the shadow there). */
.engine-phone {
  --room-y: 90px;
  --room-x: 90px;
  position: absolute;
  top: calc(22px - var(--room-y));
  left: 50%;
  width: calc(var(--pw) + var(--room-x) * 2);
  margin: 0 0 0 calc(var(--pw) / -2 - var(--room-x));
  padding: var(--room-y) var(--room-x);
  pointer-events: none;
  -webkit-tap-highlight-color: transparent;
}
.engine-phone .iphone-device { pointer-events: auto; cursor: pointer; }
.engine-phone.is-front .iphone-device { cursor: default; }
.engine-phone .iphone-device::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1.2% 2.4% 1.6%;
  border-radius: 15% / 7.2%;
  box-shadow: 0 30px 60px #000000a6, 0 8px 18px #00000059;
  pointer-events: none;
}
/* The screen dims as a phone turns away; --dim is written by the scroll
   loop, --veil eases in under a lifted card. */
.engine-phone .iphone-device::after {
  content: "";
  position: absolute;
  left: 5.333%;
  top: 2.5%;
  width: 89.333%;
  height: 95%;
  border-radius: 12.5% / 5.75%;
  background: #070a0d;
  opacity: calc(var(--dim, 0) + var(--veil) + var(--fog, 0));
  pointer-events: none;
}
/* Past slot 2 the bezel goes dark too, so a leaving phone is a dark shape,
   never a see-through one. --fog is written by the scroll loop. */
.engine.is-scroll .engine-phone::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: var(--room-y) var(--room-x);
  background: #0e1113;
  opacity: var(--fog, 0);
  -webkit-mask: url('/assets/devices/iphone-17-pro-silver.png') 0 0 / 100% 100%;
  mask: url('/assets/devices/iphone-17-pro-silver.png') 0 0 / 100% 100%;
  pointer-events: none;
}

/* Static fan: no JS, or reduced motion */
.engine:not(.is-scroll) .engine-phone[data-pos="1"] { transform: translate3d(var(--s1), 0, var(--z1)) rotateY(-18deg); }
.engine:not(.is-scroll) .engine-phone[data-pos="-1"] { transform: translate3d(calc(var(--s1) * -1), 0, var(--z1)) rotateY(18deg); }
.engine:not(.is-scroll) .engine-phone[data-pos="2"] { transform: translate3d(var(--s2), 0, var(--z2)) rotateY(-26deg); }
.engine:not(.is-scroll) .engine-phone[data-pos="-2"] { transform: translate3d(calc(var(--s2) * -1), 0, var(--z2)) rotateY(26deg); }
.engine:not(.is-scroll) .engine-phone[data-pos="1"], .engine:not(.is-scroll) .engine-phone[data-pos="-1"] { --dim: .38; }
.engine:not(.is-scroll) .engine-phone[data-pos="2"], .engine:not(.is-scroll) .engine-phone[data-pos="-2"] { --dim: .6; }

/* Scroll mode: the stage pins for --travel and the script places phones */
.engine.is-scroll .engine-track { --travel: 360svh; height: calc(100svh + var(--travel)); margin-top: clamp(14px, 2.2vw, 30px); }
.engine.is-scroll .engine-show {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  height: 100svh;
  margin-top: 0;
  padding: clamp(16px, 3.6svh, 34px) 0 clamp(14px, 3.2svh, 30px);
}
.engine.is-scroll .engine-stage { flex: 1 1 0; min-height: 0; height: auto; margin-top: clamp(6px, 1.4svh, 16px); container-type: size; }
.engine.is-scroll .engine-ring { --pw: min(330px, calc((100cqh - 30px) * .4891), calc(100cqw / 3)); }
.engine.is-scroll .engine-phone { top: calc(50% - var(--pw) * 1.0222 - var(--room-y)); will-change: transform, opacity; transition: --veil .45s var(--engine-ease); }
.engine.is-scroll .engine-phone.is-front:has(.engine-lift) { --veil: .42; transition: --veil .7s .1s var(--engine-ease); }
.engine-show[data-active="ordo"] .engine-phone:not(.is-front) { --veil: .12; }
.engine.is-scroll .engine-panels { margin-top: 4px; }
/* A far jump (reload, back/forward, a scrollbar drag) lands without the
   crossfades, so the first frame already shows the new source. The script
   sets .is-jump for two frames. */
.engine.is-jump .engine-panel, .engine.is-jump .engine-source, .engine.is-jump .engine-source-label, .engine.is-jump .engine-dots > span,
.engine.is-jump .engine-lift, .engine.is-jump .engine-review, .engine.is-jump .engine-phone, .engine.is-jump .engine-stage::before { transition: none !important; }

/* The payoff: the real Review changes sheet slides out beside Ordo */
.engine-review {
  position: absolute;
  left: calc(var(--room-x) + var(--pw) * .86);
  bottom: calc(var(--room-y) + var(--pw) * .16);
  width: calc(var(--pw) * .84);
  border-radius: calc(var(--pw) * .08);
  background: #101010;
  overflow: hidden;
  box-shadow: 0 0 0 1px #ffffff1f, 0 34px 70px #000000b3, 0 8px 18px #0006;
  opacity: 0;
  transform: translate(-22px, 26px) scale(.94);
  transform-origin: 0 100%;
  pointer-events: none;
  transition: opacity .3s, transform .45s var(--engine-ease);
}
.engine-review img { display: block; width: 100%; height: auto; }
.engine-review-apply { border-top: 1px solid #ffffff14; }
.engine-phone.is-front .engine-review { opacity: 1; transform: none; transition: opacity .4s .15s, transform .95s .15s var(--engine-spring); }

/* Every other source lifts its key card out of the real screen, from the
   exact spot it occupies in the app, while the screen behind it dims. */
.engine-lift {
  position: absolute;
  z-index: 2;
  left: var(--lx);
  top: var(--ly);
  width: var(--lw);
  height: auto;
  border-radius: calc(var(--pw) * .045);
  box-shadow: 0 0 0 1px #ffffff1c, 0 30px 64px #000000b8, 0 8px 18px #0007;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .45s var(--engine-ease);
}
.engine-phone.is-front .engine-lift { opacity: 1; transform: translateY(var(--lt, 0)) scale(1.16); transition: opacity .3s .1s, transform .95s .1s var(--engine-spring); }
.engine:not(.is-scroll) .engine-phone.is-front:has(.engine-lift) { --veil: .42; }

.engine-dots { display: none; }

/* Copy for the chosen source; panels share one cell so height never jumps */
/* The copy and dots sit above the phones' 3D layers so no shadow crosses them */
.engine-panels { position: relative; z-index: 1; display: grid; margin-top: 10px; text-align: center; }
.engine-panel {
  grid-area: 1 / 1;
  max-width: 680px;
  margin: 0 auto;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .3s, transform .5s var(--engine-ease), visibility 0s .3s;
}
.engine-panel.is-active { opacity: 1; visibility: visible; transform: none; transition: opacity .5s .12s, transform .7s .12s var(--engine-ease), visibility 0s; }
.engine-panel:focus-visible { outline: 3px solid #fff; outline-offset: 8px; border-radius: 8px; }
.engine-panel h3 { font-size: clamp(26px, 2.5vw, 34px); font-weight: 650; letter-spacing: -.032em; line-height: 1.12; text-shadow: 0 1px 18px #0008; }
.engine-panel p { text-wrap: balance; max-width: 560px; margin: 11px auto 0; color: var(--engine-soft); font-size: 16px; line-height: 1.6; text-shadow: 0 1px 12px #0009; }
.engine-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.engine-chips li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 6px 14px;
  border: 1px solid #ffffff26;
  border-radius: 999px;
  background: #0b0e1180;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: var(--engine-ink);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.engine-chips li > span { color: var(--engine-dim); }
.engine-chips li > span::after { content: "·"; margin-left: 7px; color: #ffffff59; }

/* Foot */
.engine-foot { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: clamp(44px, 5vw, 64px); padding-top: 14px; border-top: 1px solid #ffffff1a; }
.engine.is-scroll .engine-foot { margin-top: clamp(20px, 3vw, 40px); }
.engine-foot > p { color: var(--engine-dim); font-size: 12px; }
.engine-foot-actions { display: flex; align-items: center; gap: 22px; }
.engine-foot .light-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--engine-ink); font-size: 13px; }
.engine-foot .light-link:focus-visible, .engine-motion:focus-visible { outline-color: #fff; }
.engine-motion { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 7px 8px; border: 0; background: none; color: var(--engine-soft); font-size: 12px; }
.engine-motion svg { width: 12px; height: 12px; }
.engine-motion:hover { color: #fff; }

@media (max-width: 1000px) {
  .engine-show { --pw: min(clamp(214px, calc((100svh - 330px) * .489), 290px), calc((100vw - 48px) / 3.25)); --s1: calc(var(--pw) * .82); --s2: calc(var(--pw) * 1.5); }
  .engine-stage { --spread: .94; }
  .engine.is-scroll .engine-ring { --pw: min(310px, calc((100cqh - 30px) * .4891), calc(100cqw / 2.35)); }
  .engine-source { padding: 0 15px 0 12px; font-size: 13px; gap: 7px; }
}

/* Phone: the same arc, closer camera; neighbours peek in from the edges */
@media (max-width: 700px) {
  .engine-phone.is-front .engine-lift { transform: translateY(var(--lt, 0)) scale(1.08); }

  .engine { padding: 76px 0 26px; }
  .engine-kicker { margin-bottom: 14px; font-size: 12px; }
  .engine h2 { font-size: clamp(44px, 12.6vw, 66px); letter-spacing: -.058em; line-height: .94; }
  .engine-lede-break { display: inline; }
  .engine-lede { max-width: 380px; margin-top: 18px; font-size: 15px; line-height: 1.5; }
  .engine-show { --pw: min(54vw, 236px); --s1: calc(var(--pw) * .8); --s2: calc(var(--pw) * 1.42); margin-top: 32px; }
  .engine-sources { gap: 6px; }
  .engine-source { gap: 0; padding: 0 12px; }
  .engine-source-label { max-width: 0; opacity: 0; overflow: hidden; transition: max-width .45s var(--engine-ease), opacity .3s, margin .45s var(--engine-ease); }
  .engine-source[aria-selected="true"] { padding: 0 15px 0 13px; }
  .engine-source[aria-selected="true"] .engine-source-label { max-width: 8em; margin-left: 7px; opacity: 1; }
  .engine-stage { --spread: .9; margin: 14px -18px 0; perspective: 1000px; }
  .engine-stage::before { width: 140%; height: 80%; }
  .engine-phone { --room-x: 50px; }
  .engine-review { left: calc(var(--room-x) + var(--pw) * .05); bottom: calc(var(--room-y) + var(--pw) * .15); width: calc(var(--pw) * .9); border-radius: calc(var(--pw) * .07); transform: translateY(16px) scale(.96); transform-origin: 50% 100%; }
  .engine-review .engine-review-top { display: none; }
  .engine-review-apply { border-top: 0; }
  .engine-dots { position: relative; z-index: 1; display: flex; justify-content: center; gap: 7px; margin-top: 2px; pointer-events: none; }
  .engine-dots > span { width: 7px; height: 7px; border-radius: 4px; background: #ffffff59; transition: width .4s var(--engine-ease), background .4s; }
  .engine-dots > span.is-active { width: 24px; background: #fff; }
  .engine-panels { margin-top: 22px; }
  .engine-panel h3 { font-size: 26px; }
  .engine-panel p { max-width: 360px; font-size: 15px; line-height: 1.55; }
  .engine-chips { gap: 6px; margin-top: 16px; }
  .engine-chips li { min-height: 32px; padding: 5px 12px; font-size: 12px; }
  .engine-foot { flex-direction: column; align-items: center; gap: 4px; margin-top: 40px; padding-top: 16px; text-align: center; }
  .engine-foot > p { font-size: 11px; }
  .engine-foot-actions { gap: 12px; }

  .engine.is-scroll .engine-track { --travel: 340svh; margin-top: 14px; }
  .engine.is-scroll .engine-show { padding: clamp(12px, 2.4svh, 22px) 0 clamp(12px, 2.4svh, 22px); }
  .engine.is-scroll .engine-stage { margin-top: 4px; }
  .engine.is-scroll .engine-ring { --pw: min(250px, calc((100cqh - 20px) * .4891), calc(100cqw * .6)); }
  .engine.is-scroll .engine-dots { margin-top: 0; }
  .engine.is-scroll .engine-panels { margin-top: clamp(8px, 1.8svh, 16px); }
}
/* Short phones (Safari with its bars): tighter copy so the phone keeps room.
   The copy fills the lower third here, so the shade under it starts higher,
   and the end shade reaches further up for when the copy rides up after the
   pin releases. */
@media (max-width: 700px) and (max-height: 760px) {
  .engine.is-scroll .engine-shade:not(.engine-shade--top, .engine-shade--end) {
    background:
      radial-gradient(120% 75% at 50% 54%, #0000 32%, #0c0f1259 100%),
      linear-gradient(180deg, #1517196b 0%, #15171926 16%, #0000 30%, #0000 50%, #0f121473 68%, #0e1113b8 100%);
  }
  .engine.is-scroll .engine-shade--end { background: linear-gradient(180deg, #0000 28%, #12151866 44%, #0f1214b3 64%, #0e1113 100%); }
  .engine.is-scroll .engine-panel h3 { font-size: 22px; }
  .engine.is-scroll .engine-panel p { margin-top: 7px; font-size: 14px; line-height: 1.48; }
  .engine.is-scroll .engine-chips { gap: 5px; margin-top: 10px; }
  .engine.is-scroll .engine-chips li { min-height: 28px; padding: 3px 10px; font-size: 11.5px; }
}
@media (max-width: 360px) {
  .engine-stage { margin-inline: -14px; }
  .engine-sources { gap: 4px; }
  .engine-chips li { white-space: normal; }
}
@media (hover: none) {
  .engine-source:hover { background: #1013165c; border-color: #ffffff33; }
  .engine-source[aria-selected="true"]:hover { background: #f7f4ee; border-color: #f7f4ee; }
}
@media (prefers-reduced-motion: reduce) {
  .engine-scenery video { visibility: hidden; }
  .engine-ring, .engine-phone, .engine-review, .engine-phone.is-front .engine-review, .engine-lift, .engine-phone.is-front .engine-lift,
  .engine-panel, .engine-panel.is-active, .engine-source, .engine-source[aria-selected="true"], .engine-source-label, .engine-dots > span, .engine-stage::before { transition: none; }
  .engine-motion { display: none !important; }
}
@media (prefers-reduced-transparency: reduce) {
  .engine-source, .engine-chips li { -webkit-backdrop-filter: none; backdrop-filter: none; background: #15181b; }
}
@media (forced-colors: active) {
  .engine-backdrop, .engine-stage::before { display: none; }
  .engine { background: Canvas; color: CanvasText; }
  .engine-source { border: 1px solid ButtonText; color: ButtonText; background: ButtonFace; }
  .engine-source[aria-selected="true"] { border: 2px solid Highlight; }
  .engine-chips li { border: 1px solid CanvasText; }
}