/* ==========================================================================
   s9 — SWITCHING ("Switching is the easy part")
   Layout archetype: SPLIT (prose left, two-device handoff stage right).
   Signature motion (ONE): the OLD site hands its content to the NEW site. A
   single scrubbed proxy --move (0..1) on .s9-stage drives everything:
     - source rows in the OLD site lift + fade out as --move climbs,
     - parcels travel left->right along the beam (staggered by --p),
     - destination rows in the NEW site settle in one by one (staggered by --r),
     - the OLD browser stays fully lit the whole way and only eases to a calm
       "still live" tone at the very end (it NEVER goes dark; copy: "stays live
       until the new one's ready").
   Transform / opacity only. Reduced motion / no-JS: --move forced to 1 below
   (new site fully populated, old at its calm live tone), scrub never wired.
   ========================================================================== */

#s9 .s9-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

/* ----- LEFT: prose ----- */
#s9 .s9-copy .eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: var(--sp-3);
}
#s9 .s9-copy .eyebrow::before {
  content: ""; width: 26px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft));
}
#s9 .s9-title {
  font-size: var(--fs-h2);
  font-weight: 600; line-height: 1.08; letter-spacing: -0.01em;
  color: var(--ice); text-wrap: balance;
  margin: 0 0 var(--sp-2);
  max-width: 18ch;
}
#s9 .s9-title .accent { color: var(--gold-bright); font-style: italic; font-weight: 500; }
#s9 .s9-lead {
  font-size: var(--fs-lead);
  color: var(--parchment-dim);
  line-height: 1.55;
  margin: 0 0 var(--sp-4);
  max-width: 42ch;
}
#s9 .s9-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
#s9 .s9-point {
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  color: var(--ice); font-size: var(--fs-body); line-height: 1.5;
}
#s9 .s9-point__txt b { color: var(--ice); font-weight: 600; }
#s9 .s9-point__txt { color: var(--parchment-dim); }
#s9 .s9-point__mark {
  width: 22px; height: 22px; border-radius: 50%; margin-top: 2px;
  border: 1px solid rgba(196,162,101,0.5);
  background: radial-gradient(circle at 50% 42%, rgba(196,162,101,0.22), transparent 70%);
  position: relative; flex: none;
}
#s9 .s9-point__mark::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 9px; height: 5px; margin-top: 8px;
  border-left: 1.6px solid var(--gold-bright);
  border-bottom: 1.6px solid var(--gold-bright);
  transform: rotate(-45deg);
}

/* ----- RIGHT: the two-device handoff stage ----- */
#s9 .s9-stage {
  --move: 0;
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(8px, 1.4vw, 18px);
}

#s9 .s9-old, #s9 .s9-new { position: relative; min-width: 0; }

#s9 .s9-tag {
  display: inline-block;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 1.4px;
  text-transform: uppercase; margin: 0 0 8px 2px;
}
#s9 .s9-tag--old { color: var(--steel); }
#s9 .s9-tag--new { color: var(--gold-bright); }

/* the browser frames here are a touch smaller so two fit the split column */
#s9 .s9-browser { width: 100%; }
#s9 .s9-browser .browser__viewport { aspect-ratio: 5 / 4; }

/* OLD frame: muted, low-key. Stays lit the whole time; eases to a calmer tone
   only in the last fifth of the scrub via --move (never below 0.6 opacity). */
#s9 .s9-browser--old {
  opacity: calc(1 - 0.34 * max(0, (var(--move) - 0.78)) / 0.22);
  filter: saturate(calc(1 - 0.45 * max(0, (var(--move) - 0.78)) / 0.22));
  transition: opacity .25s linear, filter .25s linear;
}
#s9 .s9-browser--old .browser__viewport { background: #0A0B0F; }

/* NEW frame: crisp, gold-edged, gently "arrives" as content lands. */
#s9 .s9-browser--new .browser__chrome { border-color: rgba(196,162,101,0.28); }
#s9 .s9-browser--new .browser__viewport {
  border-color: rgba(196,162,101,0.28);
  background: linear-gradient(180deg, #0C0D12, var(--bg-deep));
  box-shadow: 0 30px 64px -22px rgba(0,0,0,0.75),
              0 0 0 1px rgba(196,162,101, calc(0.10 + 0.20 * var(--move))) inset;
}
#s9 .s9-browser--new .browser__bar { color: var(--gold-soft); }

/* ----- mini-site content inside each frame ----- */
#s9 .s9-mini {
  height: 100%; padding: clamp(9px, 2.2cqw, 16px);
  display: flex; flex-direction: column; gap: 10px;
  container-type: inline-size; position: relative;
}
#s9 .s9-mini__topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 9px; border-bottom: 1px solid var(--hairline-soft);
}
#s9 .s9-mini__logo {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.6px;
  color: var(--steel); font-weight: 600;
}
#s9 .s9-mini__logo--new {
  font-family: var(--font-serif); font-weight: 600; font-size: 14px;
  letter-spacing: 0.2px; color: var(--ice); text-transform: none;
}
#s9 .s9-mini__nav { display: flex; gap: 6px; }
#s9 .s9-mini__nav i { width: 16px; height: 4px; border-radius: 2px; background: rgba(168,200,224,0.18); display: block; }
#s9 .s9-mini--new .s9-mini__nav i { background: rgba(196,162,101,0.4); }

#s9 .s9-mini__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; flex: 1; align-content: start; }
#s9 .s9-row {
  display: grid; grid-template-columns: 26px 1fr; gap: 9px; align-items: center;
}
#s9 .s9-row__ico { width: 26px; height: 26px; border-radius: 7px; background: rgba(168,200,224,0.12); }
#s9 .s9-row__bar {
  height: 9px; border-radius: 999px;
  background: linear-gradient(90deg, rgba(168,200,224,0.22), rgba(168,200,224,0.08));
}
#s9 .s9-row:nth-child(2) .s9-row__bar { width: 86%; }
#s9 .s9-row:nth-child(3) .s9-row__bar { width: 72%; }
#s9 .s9-row:nth-child(4) .s9-row__bar { width: 64%; }

/* NEW-site rows take the gold treatment when they land */
#s9 .s9-row--dst .s9-row__ico {
  background: linear-gradient(135deg, rgba(196,162,101,0.38), rgba(196,162,101,0.12));
}
#s9 .s9-row--dst .s9-row__bar {
  background: linear-gradient(90deg, var(--gold-soft), rgba(196,162,101,0.22));
}

/* SOURCE rows: present at rest, lift away one by one as --move passes each
   row's staged window (each row owns 0.16 of the 0..0.7 transfer span). */
#s9 .s9-mini__rows--src .s9-row {
  --start: calc(var(--r) * 0.16);
  --local: clamp(0, calc((var(--move) - var(--start)) / 0.16), 1);
  opacity: calc(1 - var(--local));
  transform: translateX(calc(var(--local) * 16px)) scale(calc(1 - var(--local) * 0.06));
  transform-origin: right center;
  transition: opacity .12s linear, transform .12s linear;
}

/* DEST rows: empty at rest, settle in just after their parcel lands. They
   start a touch later than the source leaves, so it reads as a hand-off. */
#s9 .s9-mini__rows--dst .s9-row {
  --start: calc(0.1 + var(--r) * 0.16);
  --local: clamp(0, calc((var(--move) - var(--start)) / 0.16), 1);
  opacity: var(--local);
  transform: translateX(calc((1 - var(--local)) * -14px)) translateY(calc((1 - var(--local)) * 6px));
  transition: opacity .12s linear, transform .12s linear;
}

/* "Live" badges. Old stays lit the whole time. New lights once content lands. */
#s9 .s9-mini__live {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.2px;
  text-transform: uppercase; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 999px;
}
#s9 .s9-mini__live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; display: block;
}
#s9 .s9-mini__live--old { color: var(--green-live); border: 1px solid rgba(59,208,122,0.35); }
#s9 .s9-mini__live--old::before { background: var(--green-live); box-shadow: 0 0 7px rgba(59,208,122,0.85); }
#s9 .s9-mini__live--new {
  color: var(--green-live); border: 1px solid rgba(59,208,122,0.35);
  /* only reads as "live" once the new site is populated */
  opacity: clamp(0, calc((var(--move) - 0.6) / 0.3), 1);
  transition: opacity .15s linear;
}
#s9 .s9-mini__live--new::before { background: var(--green-live); box-shadow: 0 0 7px rgba(59,208,122,0.85); }

/* ----- the transfer beam between the two devices ----- */
#s9 .s9-beam {
  position: relative; align-self: center;
  width: clamp(40px, 6vw, 84px); height: 60px;
}
#s9 .s9-beam__svg { width: 100%; height: 16px; position: absolute; top: 50%; left: 0; transform: translateY(-50%); overflow: visible; }
#s9 .s9-beam__track {
  stroke: rgba(168,200,224,0.14); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 3 6;
}
#s9 .s9-beam { --beam-w: clamp(40px, 6vw, 84px); }
#s9 .s9-parcel {
  position: absolute; top: 50%; left: 0;
  width: 10px; height: 10px; border-radius: 3px;
  margin: -5px 0 0 0;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold-soft));
  box-shadow: 0 0 10px rgba(196,162,101,0.6);
  /* each parcel runs its own 0.16 window across the 0..0.7 transfer span,
     fading in at the old side and out at the new side as it travels. */
  --start: calc(var(--p) * 0.16);
  --local: clamp(0, calc((var(--move) - var(--start)) / 0.16), 1);
  transform: translateX(calc(var(--local) * (var(--beam-w) - 10px)))
             scale(calc(0.6 + var(--local) * 0.4));
  opacity: calc(4 * var(--local) * (1 - var(--local)));
}

/* ==========================================================================
   RESPONSIVE — stack the split on narrow viewports; devices sit side by side
   with a vertical beam between them when very tight.
   ========================================================================== */
@media (max-width: 880px) {
  #s9 .s9-grid { grid-template-columns: 1fr; gap: clamp(26px, 6vw, 40px); }
  #s9 .s9-copy { order: 1; }
  #s9 .s9-stage { order: 2; }
  #s9 .s9-title { max-width: none; }
  #s9 .s9-lead { max-width: 56ch; }
}

@media (max-width: 520px) {
  /* devices stack vertically; beam becomes a short vertical run */
  #s9 .s9-stage { grid-template-columns: 1fr; gap: 10px; justify-items: center; }
  #s9 .s9-old, #s9 .s9-new { width: 100%; max-width: 360px; }
  /* shorter frames on a stacked phone so neither feels cavernous */
  #s9 .s9-browser .browser__viewport { aspect-ratio: 16 / 11; }
  #s9 .s9-beam {
    width: 60px; height: clamp(28px, 9vw, 40px); transform: rotate(90deg);
    margin: -4px 0;
  }
  #s9 .s9-mini__live--old, #s9 .s9-mini__live--new { font-size: 8.5px; }
}

/* ==========================================================================
   REDUCED MOTION / NO-JS — resting state is the FINISHED handoff:
   new site fully populated and live, old site at its calm "still live" tone.
   The scrub is never wired in either case.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  #s9 .s9-stage { --move: 1; }
  #s9 .s9-browser--old, #s9 .s9-mini__rows--src .s9-row,
  #s9 .s9-mini__rows--dst .s9-row, #s9 .s9-parcel, #s9 .s9-mini__live--new {
    transition: none !important;
  }
  #s9 .s9-parcel { opacity: 0 !important; }
}