/* Features (17 okt 2026): Dolly's real UI, captured by scripts/uicap and played in an iframe (assets/ui/play.html).
   The iframe is the 1440 × 900 editor, scaled to fit; on a phone a step can zoom into one part of it (its crop). */

/* ---- page head: the title inside the floating wall of Dolly videos (sections.join_wall), chapter pills under it */
/* the whole opening fits the first screen under the menu (and the launch bar while it shows) */
.jw--feat { min-height: 600px; height: calc(100svh - 66px); max-height: 940px; padding-block: 48px; }
html.promo .jw--feat { height: calc(100svh - 104px); }
.jw--feat .jw__in { max-width: 760px; }
.jw--feat .kick { margin-bottom: 14px; }
.jw--feat .ph__h { font-family: var(--display); font-size: clamp(46px, min(6vw, 9.5svh), 92px); font-weight: 600; line-height: 1; letter-spacing: -.05em; }
.jw--feat .lead { margin: 20px auto 0; }
.jw--feat .ftnav { flex-direction: column; align-items: center; gap: 8px; margin-top: 28px; }
.ftnav__r { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
/* the videos fly in once, each from its own side, out of a blur, one after the other, and then keep drifting */
@media (prefers-reduced-motion: no-preference) {
  .jw--feat .jw__f { animation: ftfly 1.7s cubic-bezier(.16, 1, .3, 1) calc(.15s + var(--i) * 75ms) both, jw-drift var(--t) ease-in-out var(--o) infinite; }
  .jw--feat .jw__in > * { animation: ftrise 1.1s cubic-bezier(.16, 1, .3, 1) both; }
  .jw--feat .jw__in > :nth-child(2) { animation-delay: .08s; } .jw--feat .jw__in > :nth-child(3) { animation-delay: .16s; } .jw--feat .jw__in > :nth-child(4) { animation-delay: .24s; }
}
@keyframes ftfly { from { opacity: 0; translate: var(--fx) var(--fy); scale: .82; filter: blur(14px); } 60% { filter: blur(0); } to { opacity: 1; translate: 0 0; scale: 1; filter: none; } }
@keyframes ftrise { from { opacity: 0; transform: translateY(14px); filter: blur(8px); } }
@media (max-width: 760px) { .jw--feat, html.promo .jw--feat { height: auto; max-height: none; padding-top: 250px; padding-bottom: 240px; } .jw--feat .ph__h { font-size: clamp(40px, 11vw, 54px); } }
/* ---- page head + chapter nav */
.fth { padding-bottom: 56px; text-align: center; }
.fth .lead { margin-inline: auto; }
.ftnav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 36px; }
.ftnav a { padding: 8px 15px; border-radius: 999px; background: var(--soft); font-size: 14px; font-weight: 500; color: var(--ink-2); transition: background .2s, color .2s; }
.ftnav a:hover { color: var(--ink); background: rgba(0, 0, 0, .08); }
[data-theme="dark"] .ftnav a:hover { background: rgba(255, 255, 255, .12); }

.ftc { padding-block: 112px; }
/* the scenes a bit smaller than the page (owner, 17 okt 2026): one narrower column for heading, scene and steps */
/* the scenes in the Droplet video's format, like every feature video on the site (owner, 17 okt 2026):
   16:9, at most 1060 px or 86% wide, 28 px corners; 92% and 18 px on phones. Heading and steps share that column. */
.ftc .ft, .ftc .ft-steps { width: min(1060px, 86%); margin-inline: auto; }
.ftc__head { width: min(1060px, 86%); margin-inline: auto; padding-inline: 0; }
.ftc__head { margin-bottom: 44px; }
.ftc__head .lead b { color: var(--ink); font-weight: 600; }

/* ---- the stage */
.ft { position: relative; border-radius: 28px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); background: var(--soft); }
.ft { background: #121110; }
.ft__fit { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
/* the composition Dolly renders: background, the window on it, its shadow. features.js moves this like Dolly's camera */
.ft__comp { position: absolute; inset: 0; transform-origin: 0 0; will-change: transform; }
.ft__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ft__win { position: absolute; left: 9.5%; top: 5%; width: 81%; height: 90%; border-radius: 1.2%/1.9%; overflow: hidden; background: #121110;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .55), 0 10px 24px -8px rgba(0, 0, 0, .3), 0 0 0 .5px rgba(0, 0, 0, .35); }
.ft__comp--bare .ft__win { left: 0; top: -5.556%; width: 100%; height: 111.111%; border-radius: 0; box-shadow: none; }
.ft__ui { position: absolute; left: 0; top: 0; width: 1440px; height: 900px; border: 0; transform-origin: 0 0; pointer-events: none; transform: scale(var(--k, 1)); }

/* ---- step chips under the stage: label + a thin bar that fills while the step plays */
.ft-steps { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 22px; margin-top: 22px; }
.ft-step { all: unset; cursor: pointer; display: grid; gap: 9px; min-width: 96px; max-width: 200px; flex: 1 1 0; padding: 4px 0; }
.ft-step span { font-size: 14px; line-height: 1.35; color: var(--ink-3); transition: color .25s; }
.ft-step:hover span, .ft-step.is-on span { color: var(--ink); }
.ft-step:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 4px; }
.ft-step__bar { display: block; height: 2px; border-radius: 2px; background: var(--line-2); overflow: hidden; }
.ft-step__bar i { display: block; height: 100%; width: 100%; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
.ft-step.is-done .ft-step__bar i { transform: scaleX(1); }
.ft-step.is-on .ft-step__bar i { animation: ftbar var(--d, 2s) linear forwards; }
.ft.is-paused + .ft-steps .ft-step.is-on .ft-step__bar i, .ft-steps.is-paused .ft-step.is-on .ft-step__bar i { animation-play-state: paused; }
@keyframes ftbar { to { transform: scaleX(1); } }
.ft-docs { margin-left: auto; align-self: center; white-space: nowrap; font-size: 14px; }
@media (max-width: 760px) {
  .ftc { padding-block: 72px; }
  .ftc__head { margin-bottom: 28px; }
  .ft { border-radius: 18px; }
  .ftc .ft, .ftc .ft-steps, .ftc__head { width: 92%; }
  .ftc .ft-steps { margin-inline: auto; padding-inline: 0; }
  .ft-steps { flex-wrap: nowrap; overflow-x: auto; gap: 16px; margin-inline: -20px; padding-inline: 20px; scrollbar-width: none; }
  .ft-steps::-webkit-scrollbar { display: none; }
  .ft-step { flex: 0 0 auto; min-width: 112px; }
  .ft-step span { font-size: 13px; }
}