/* Entrances for the inside page: three ways a block arrives, cycled block by block down the page (Q, Oct 7).
   entrances.js tags each block with data-ent="a" | "b" | "c" in page order (the commercial at the top, the How it works hub and the close keep
   their own entrances; the tour (#top) is first in the cycle); this file is every look. Add ?ent=focus to the address to swap C for the optional focus pull.

     A  Sides      the text comes in from off screen on its side, the visual from off screen on the other side, and they
                   meet in their places (chapters follow .chapter / .chapter.flip). On phones the same, as a rise.
     B  Sequence   the pieces arrive one after another, the way the app's day strip does (tracker src/desk/views/schedule.css:
                   .desk-daystrip > li: fade up from translateY(6px), staggered 18 ms a piece, the app's own step).
     C  Meet in the middle   the top part (kicker, heading) comes down from above and the bottom part (copy, cards, visual)
                   comes up from below, fading in, until they meet in their places.
     focus (off)   scale .94 and soft (blur on text only), racked into focus: the 3D film's lens pull.

   TRIGGERED, never scrubbed (Q, Oct 7: "nothing ever rests half on screen"). A block waits fully hidden (off screen to its side, or faded
   and displaced) until its top crosses 80% of the viewport height (entrances.js adds .ent-in); then every piece plays its entrance as a
   timed transition (760 ms, the page's spring --mo-ease: motion.css) and settles. Scrolling back up past that line (plus a little
   hysteresis, so a jittery scroll never flickers) plays the same moves out, a little quicker, back to the hidden state. A block already
   behind the visitor when the page opens (a link, a reload) is simply in place.

   How it is built: the finished layout is the default CSS. The hidden state lives only under html.ent-on, which entrances.js adds when
   motion is welcome (Reduce Motion: no class, so everything is visible and still), and only while a block does not have .ent-in. The
   moving is a transition on opacity and transform, declared only while the block wears .ent-run (the 1.5 s around a change), so a settled
   piece keeps its own hover and press transitions. Only transform and opacity move (blur only on the focus pull's text). Sections never
   move: pieces inside them do, so the page's color-by-section, the nav highlight and the sticky header keep their geometry. A glass card
   ("backdrop-filter", .mul) must not sit inside a faded parent (an ancestor with opacity below 1 hides the page from it), so containers
   only move and the glass cards and words inside them fade on the same trigger.
   No animation-timeline is used any more, so there is nothing to fall back from: every browser plays the same thing. */

:root {
  --ent-ms: 760ms;            /* a piece arriving (opacity runs a little shorter, below) */
  --ent-out-ms: 460ms;        /* a piece leaving: quicker */
  --ent-step-ms: 18ms;        /* the app's stagger between day-strip pieces (B) */
  --ent-far: min(70vw, 1100px);   /* A: farther than any piece's distance to the screen's edge */
  --ent-rise-y: 0px;          /* A on phones: a rise instead of side travel */
  --ent-meet: var(--mo-dist-far);   /* C: how far the top and bottom start from where they meet */
  --ent-lift: 28px;           /* extras and big visuals that simply fade up */
  --ent-y: 6px;               /* B: the day strip's own 6px */
}
@media (max-width: 899px) { :root { --ent-far: 100vw; } }
@media (max-width: 699px) { :root { --ent-far: 0px; --ent-rise-y: 40px; --ent-meet: 64px; --ent-lift: 20px; } }

/* sideways travel never makes the page scroll sideways (sections only clip across: the halos fade out well before the edge) */
[data-ent] { overflow-x: clip; }
/* the table card clipped its rows with overflow: hidden (a scroll container); overflow: clip cuts the same corners and is not a scroller. */
[data-ent] .table-card { overflow: clip; }

@media (prefers-reduced-motion: no-preference) {

/* ---------------- the moving: only while a block wears .ent-run, and by where it is going ---------------- */
html.ent-on [data-ent].ent-run.ent-in :where(.problem-copy, .chapter-copy, .compare-copy, .faq-head, .pb-wrap, .chapter-demo, .faq-list, .table-card,
  .wrap > :is(.problem-end, .switch, .footnote), .eyebrow, .kicker, h2, .body, .note, .drv, .feats, .formats, .feats li, .formats li,
  .pb, .qa, .win, .drv-chip, .cmp tbody tr, .hero-copy, .hero-stage, .picker-wrap, .hero-copy > *, .hero-win),
html.ent-on [data-ent].ent-run.ent-in :is(.chapter-demo, .hero-stage)::before {
  transition: opacity calc(var(--ent-ms) * .62) var(--mo-ease-soft), transform var(--ent-ms) var(--mo-ease);
  transition-delay: calc(min(var(--ent-i, 0) + var(--ent-base, 0), 12) * var(--ent-delay-on, 0) * var(--ent-step-ms));
}
html.ent-on [data-ent].ent-run:not(.ent-in) :where(.problem-copy, .chapter-copy, .compare-copy, .faq-head, .pb-wrap, .chapter-demo, .faq-list, .table-card,
  .wrap > :is(.problem-end, .switch, .footnote), .eyebrow, .kicker, h2, .body, .note, .drv, .feats, .formats, .feats li, .formats li,
  .pb, .qa, .win, .drv-chip, .cmp tbody tr, .hero-copy, .hero-stage, .picker-wrap, .hero-copy > *, .hero-win),
html.ent-on [data-ent].ent-run:not(.ent-in) :is(.chapter-demo, .hero-stage)::before {
  transition: opacity calc(var(--ent-out-ms) * .8) ease, transform var(--ent-out-ms) cubic-bezier(.4, 0, .6, 1);
  transition-delay: 0s;
}
[data-ent="b"] { --ent-delay-on: 1; }
[data-ent] :is(.feats, .formats) { --ent-base: 3; }
[data-ent] .drv-chips { --ent-base: 4; }

/* ---------------- B's stagger order ---------------- */
[data-ent] :is(.problem-copy, .chapter-copy, .compare-copy, .faq-head, .hero-copy) > :nth-child(1) { --ent-i: 0; }
[data-ent] :is(.problem-copy, .chapter-copy, .compare-copy, .faq-head, .hero-copy) > :nth-child(2) { --ent-i: 1; }
[data-ent] :is(.problem-copy, .chapter-copy, .compare-copy, .faq-head, .hero-copy) > :nth-child(3) { --ent-i: 2; }
[data-ent] :is(.problem-copy, .chapter-copy, .compare-copy, .faq-head, .hero-copy) > :nth-child(4) { --ent-i: 3; }
[data-ent] :is(.problem-copy, .chapter-copy, .compare-copy, .faq-head, .hero-copy) > :nth-child(5) { --ent-i: 4; }
[data-ent] :is(.problem-copy, .chapter-copy, .compare-copy, .faq-head, .hero-copy) > :nth-child(6) { --ent-i: 5; }
[data-ent] :is(.feats, .formats, .faq-list, .cmp tbody) > :nth-child(1) { --ent-i: 0; }
[data-ent] :is(.feats, .formats, .faq-list, .cmp tbody) > :nth-child(2) { --ent-i: 1; }
[data-ent] :is(.feats, .formats, .faq-list, .cmp tbody) > :nth-child(3) { --ent-i: 2; }
[data-ent] :is(.feats, .formats, .faq-list, .cmp tbody) > :nth-child(4) { --ent-i: 3; }
[data-ent] :is(.feats, .formats, .faq-list, .cmp tbody) > :nth-child(5) { --ent-i: 4; }
[data-ent] :is(.feats, .formats, .faq-list, .cmp tbody) > :nth-child(6) { --ent-i: 5; }
[data-ent] :is(.feats, .formats, .faq-list, .cmp tbody) > :nth-child(7) { --ent-i: 6; }
[data-ent] :is(.feats, .formats, .faq-list, .cmp tbody) > :nth-child(8) { --ent-i: 7; }
[data-ent] :is(.feats, .formats, .faq-list, .cmp tbody) > :nth-child(9) { --ent-i: 8; }
[data-ent] :is(.feats, .formats, .faq-list, .cmp tbody) > :nth-child(10) { --ent-i: 9; }
[data-ent] :is(.feats, .formats, .faq-list, .cmp tbody) > :nth-child(11) { --ent-i: 10; }
[data-ent] :is(.feats, .formats, .faq-list, .cmp tbody) > :nth-child(12) { --ent-i: 11; }
[data-ent] :is(.chapter-demo, .hero-stage) { --ent-i: 1; }
[data-ent] .pb-wrap { --ent-i: 3; }
[data-ent] .picker-wrap { --ent-i: 4; }
[data-ent] .drv-chip { --ent-i: var(--i, 0); }

/* ---------------- the hidden states (what a piece is before its block is in, and goes back to) ----------------
   Written once per move; "H" below is html.ent-on and a block without .ent-in. */

/* ================= A: Sides ================= */
[data-ent="a"] :is(.problem-copy, .chapter-copy, .compare-copy, .faq-head) { --ent-dir: -1; }
[data-ent="a"] :is(.pb-wrap, .chapter-demo, .faq-list, .table-card, .hero-stage) { --ent-dir: 1; }
[data-ent="a"].flip .chapter-copy { --ent-dir: 1; }
[data-ent="a"].flip .chapter-demo { --ent-dir: -1; }
[data-ent="a"] .hero-copy { --ent-dir: -1; }
html.ent-on [data-ent="a"]:not(.ent-in) :is(.problem-copy, .chapter-copy, .compare-copy, .faq-head, .pb-wrap, .chapter-demo, .faq-list, .hero-copy, .hero-stage) { transform: translate(calc(var(--ent-dir, -1) * var(--ent-far)), var(--ent-rise-y)); }
html.ent-on [data-ent="a"]:not(.ent-in) .table-card { transform: translate(calc(var(--ent-dir, -1) * var(--ent-far)), var(--ent-rise-y)); opacity: 0; }
html.ent-on [data-ent="a"]:not(.ent-in) :is(.eyebrow, .kicker, h2, .body, .note, .drv, .feats li, .formats li, .pb, .qa, .win, .hero-copy > *, .hero-win), html.ent-on [data-ent="a"]:not(.ent-in) :is(.chapter-demo, .hero-stage)::before { opacity: 0; }
html.ent-on [data-ent="a"]:not(.ent-in) .wrap > :is(.problem-end, .switch, .footnote) { opacity: 0; transform: translateY(var(--ent-lift)); }
html.ent-on [data-ent="a"]:not(.ent-in) .picker-wrap { transform: translateY(var(--ent-lift)); }

/* ================= B: Sequence (the app's day strip) ================= */
html.ent-on [data-ent="b"]:not(.ent-in) :is(.problem-copy > *, .chapter-copy > :is(.kicker, h2, .body, .note, .drv), .compare-copy > *, .faq-head > *,
  .feats li, .formats li, .drv-chips .drv-chip:not(.just), .cmp tbody tr, .faq-list .qa, .table-card, .wrap > :is(.problem-end, .switch, .footnote), .hero-copy > *) { opacity: 0; transform: translateY(var(--ent-y)); }
html.ent-on [data-ent="b"]:not(.ent-in) :is(.pb-wrap, .chapter-demo, .hero-stage, .picker-wrap) { --ent-lift: 24px; transform: translateY(var(--ent-lift)); }
html.ent-on [data-ent="b"]:not(.ent-in) :is(.pb, .win, .hero-win), html.ent-on [data-ent="b"]:not(.ent-in) :is(.chapter-demo, .hero-stage)::before { opacity: 0; }

/* ================= C: Meet in the middle ================= */
html.ent-on [data-ent="c"]:not(.ent-in) :is(.problem-copy > :is(.eyebrow, h2), .chapter-copy > :is(.kicker, h2), .compare-copy > :is(.eyebrow, h2), .faq-head, .hero-copy > :is(.eyebrow, .pill, h1)) { opacity: 0; transform: translateY(calc(var(--ent-meet) * -1)); }
html.ent-on [data-ent="c"]:not(.ent-in) :is(.problem-copy > .body, .chapter-copy > :is(.body, .note, .drv), .compare-copy > .body, .table-card,
  .wrap > :is(.problem-end, .switch, .footnote), .hero-copy > :is(.lead, .cta-row)) { opacity: 0; transform: translateY(var(--ent-meet)); }
html.ent-on [data-ent="c"]:not(.ent-in) :is(.chapter-copy > :is(.feats, .formats), .pb-wrap, .chapter-demo, .faq-list, .hero-stage, .picker-wrap) { transform: translateY(var(--ent-meet)); }
html.ent-on [data-ent="c"]:not(.ent-in) :is(.feats li, .formats li, .pb, .qa, .win, .hero-win), html.ent-on [data-ent="c"]:not(.ent-in) :is(.chapter-demo, .hero-stage)::before { opacity: 0; }

/* ================= focus pull (optional; ?ent=focus swaps it in for C) ================= */
html.ent-on [data-ent="focus"]:not(.ent-in) :is(.problem-copy, .chapter-copy, .compare-copy, .faq-head, .pb-wrap, .chapter-demo, .faq-list, .hero-copy, .hero-stage) { transform: scale(.94); }
html.ent-on [data-ent="focus"]:not(.ent-in) :is(.eyebrow, .kicker, h2, .body, .note, .wrap > :is(.problem-end, .footnote), .hero-copy > *) { opacity: 0; transform: scale(.94); filter: blur(6px); }
html.ent-on [data-ent="focus"]:not(.ent-in) :is(.drv, .feats li, .formats li, .pb, .qa, .win, .wrap > .switch, .hero-win), html.ent-on [data-ent="focus"]:not(.ent-in) :is(.chapter-demo, .hero-stage)::before { opacity: 0; }
html.ent-on [data-ent="focus"]:not(.ent-in) .table-card { opacity: 0; transform: scale(.94); }
html.ent-on [data-ent="focus"]:not(.ent-in) .picker-wrap { transform: translateY(var(--ent-lift)); }
}