/* The home page: Orbilla, the maker, at the centre, and each app one of its roles (S22, D016). Six places, no camera
   flight: the painted morning (dusk in dark mode) stands still in the first screen and the close, paper between.
   Built to grow: one door (.hm-door), one chapter (.hm-chapter) and one look (.hm-role-look) per app; at three and more
   the doors wrap into rows. Tokens only; every class starts with hm-. */

/* ---------- 1. First screen: Orbilla, the line, the doors ---------- */
.hm-first { padding-top: calc(var(--nav-h) + clamp(24px, 4vw, 56px)); padding-bottom: clamp(72px, 8vw, 128px); }
.hm-hello { position: relative; display: grid; justify-items: center; gap: 18px; text-align: center; }
.hm-hello-orbi { position: relative; z-index: 1; width: clamp(168px, 17vw, 248px); margin-bottom: clamp(2px, .6vw, 8px); }
.hm-hello h1 { max-width: 14ch; font-size: clamp(44px, 6vw, 90px); letter-spacing: -.038em; line-height: .96; }
.hm-hello .lede { max-width: 44ch; }
/* Orbilla's own ring, written large across the morning sky: one orbit path (the scene's one), its near half in gold and
   its far half passing behind Orbilla into the light. It draws outward from Orbilla once, as the page arrives, and turns
   a few degrees as the scene passes (rings may turn with scroll, section 6b). Behind everything; never over words. */
.hm-orbit { left: 50%; top: 56%; z-index: -1; width: min(1180px, 96vw); height: clamp(84px, 11vw, 168px); translate: -50% -50%; rotate: -7deg;
  border-width: 1.3px; -webkit-mask: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, .3) 50%, #000 80%), linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); -webkit-mask-composite: source-in;
  mask: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, .3) 50%, #000 80%), linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask-composite: intersect; }
@media (prefers-reduced-motion: no-preference) {
  .js .hm-orbit { animation: hm-orbit-draw 2.2s var(--ease) 420ms backwards; }
  @media (min-width: 701px) { .hm-orbit { rotate: calc(-7deg + var(--cam, 0) * 2.5deg); } }
}
@keyframes hm-orbit-draw { from { clip-path: inset(0 50% 0 50%); opacity: 0; } 30% { opacity: 1; } to { clip-path: inset(0 0 0 0); } }

/* The doors: one per role, all the same shape. Two sit side by side; a third and more wrap into rows. */
.hm-doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: clamp(20px, 2.4vw, 32px); margin-top: calc(clamp(48px, 6vw, 88px) + clamp(44px, 5vw, 80px)); scroll-margin-top: calc(var(--nav-h) + 24px); }
.hm-door { position: relative; display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); gap: clamp(20px, 2.4vw, 36px); align-items: center; padding: clamp(24px, 2.6vw, 40px); border-radius: 28px;
  transition: box-shadow .7s var(--ease), translate .7s var(--ease); }
/* The door's iPhone stands in front of the pane, not inside it: it rises out of the glass's top edge, so the pane reads
   as a surface in the light and the phone as an object standing at it. */
.hm-door-pics { position: relative; align-self: start; padding-left: 18%; margin-top: calc(-1 * clamp(44px, 5vw, 80px)); }
.hm-door-phone { transition: translate .8s var(--ease); }
.hm-door-orbi { transition: translate 1s var(--ease); }
@media (hover: hover) {
  .hm-door:hover { translate: 0 -2px; box-shadow: inset 0 1px 0 var(--pane-hi), 0 1px 1px rgba(var(--shade), .1), 0 18px 40px -16px rgba(var(--shade), .34), 0 48px 100px -36px rgba(var(--shade), .42); }
  .hm-door:hover .hm-door-phone { translate: 0 -8px; }
  .hm-door:hover .hm-door-orbi { translate: -4px -6px; }
}
.hm-door-orbi { position: absolute; z-index: 2; left: -8%; top: -2%; width: 42%; }
.hm-door-phone { width: 100%; }
.hm-door-phone .dev-body { display: block; color: inherit; }
.hm-door-phone video { display: block; }
.hm-door-copy { display: grid; justify-items: start; gap: 12px; }
.hm-role { font: 600 12px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-text); }
.hm-name { display: flex; align-items: center; gap: .3em; font-size: clamp(32px, 3vw, 46px); line-height: 1; letter-spacing: -.03em; }
.hm-name img { flex: none; width: .9em; height: .9em; border-radius: 22%; box-shadow: 0 6px 14px -6px rgba(var(--shade), .5); }
.hm-door-copy > p:not(.hm-role) { max-width: 34ch; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.5; }
.hm-door-copy .actions { align-items: center; margin-top: 6px; }
.hm-door-copy .link-arrow { white-space: nowrap; }

/* ---------- 2 and 3. One chapter per role: the same shape and height, the role's own light ---------- */
/* Each chapter is a pool of its world's light, not a box: the key light falls from the upper left onto the phones, and
   the colour feathers in from the scene above and out into the page below, so no edge is drawn between two places.
   (Transparent shows the page's own colour beneath, which is where the chapter above ended, in either mode.) */
.hm-chapter { --hm-tint: color-mix(in srgb, var(--accent) 11%, var(--bg)); padding-block: clamp(104px, 12vw, 190px);
  background:
    radial-gradient(48% 62% at 70% 46%, rgba(var(--key), calc(var(--pool) * .75)), rgba(var(--key), 0) 72%),
    linear-gradient(180deg, transparent 0, var(--hm-tint) 30%, var(--hm-tint) 72%, transparent 100%); }
.hm-ch-desk { --hm-tint: color-mix(in srgb, var(--accent) 10%, var(--bg));
  background:
    radial-gradient(48% 62% at 70% 50%, rgba(var(--key), calc(var(--pool) * .75)), rgba(var(--key), 0) 72%),
    linear-gradient(180deg, transparent 0, var(--hm-tint) 28%, var(--hm-tint) 72%, transparent 100%); }
.hm-ch-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 88px); align-items: center; }
.hm-ch-copy { display: grid; justify-items: start; gap: 18px; }
.hm-ch-copy h2 { max-width: 15ch; font-size: clamp(34px, 3.8vw, 56px); }
.hm-ch-desk .hm-ch-copy h2 { max-width: 19ch; font-size: clamp(30px, 3.2vw, 46px); }
.hm-ch-copy .lede { max-width: 34ch; }
.hm-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 28px); align-items: start; }
.hm-trio li { display: grid; gap: 16px; justify-items: center; text-align: center; }
.hm-trio li:nth-child(2) { margin-top: clamp(24px, 4vw, 64px); }
.hm-trio .dev { transition: translate .8s var(--ease); }
@media (hover: hover) { .hm-trio li:hover .dev { translate: 0 -8px; } }
/* The chapter composes itself as it comes on screen: the words, then the three phones one after another, as steps. */
@media (prefers-reduced-motion: no-preference) {
  .hm-js .hm-chapter :is(.hm-ch-copy > *, .hm-trio > li) { opacity: 0; translate: 0 28px; transition: opacity 1s var(--ease), translate 1.2s var(--ease); }
  .hm-js .hm-chapter .hm-trio > li { translate: 0 56px; }
  .hm-js .hm-chapter .hm-ch-copy > :nth-child(2) { transition-delay: 90ms; }
  .hm-js .hm-chapter .hm-ch-copy > :nth-child(3) { transition-delay: 180ms; }
  .hm-js .hm-chapter .hm-ch-copy > :nth-child(4) { transition-delay: 270ms; }
  .hm-js .hm-chapter .hm-trio > li:nth-child(1) { transition-delay: 160ms; }
  .hm-js .hm-chapter .hm-trio > li:nth-child(2) { transition-delay: 300ms; }
  .hm-js .hm-chapter .hm-trio > li:nth-child(3) { transition-delay: 440ms; }
  .hm-js .hm-chapter.hm-in :is(.hm-ch-copy > *, .hm-trio > li) { opacity: 1; translate: none; }
}
.hm-trio p { font: 460 clamp(16px, 1.3vw, 19px)/1.25 var(--serif); letter-spacing: -.01em; font-variation-settings: "SOFT" 40, "WONK" 0; }
.hm-trio video { display: block; }
.hm-ch-note { grid-column: 2; text-align: center; color: var(--muted); }

/* ---------- 4. One Orbilla, a role in each app ---------- */
/* This scene and the close stand on the page's own colour, and this one rises out of it (.from-bg), so the vows between
   them and the footer after the close sit in one continuous light: no edge is drawn where one place ends. */
.hm-one, .hm-close { --floor: var(--bg); --floor-shade: 0; }
.hm-one-in { display: grid; justify-items: center; gap: clamp(28px, 3vw, 44px); text-align: center; }
.hm-one h2 { max-width: 16ch; font-size: clamp(34px, 4vw, 60px); }
.hm-roles { --hm-gap: clamp(32px, 8vw, 140px); display: flex; flex-wrap: wrap; justify-content: center; gap: var(--hm-gap); }
/* One Orbilla becomes two roles: as the scene arrives the two looks come apart from where they stood together in the
   middle, and are in their places, whole, before the scene is in full view. Tied to the scroll by the browser (linear is
   the scroll's own curve). Phones, Reduce Motion and browsers without scroll timelines show them in place. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 701px) {
    .hm-roles .lit { animation: linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    .hm-roles > li:first-child .lit { animation-name: hm-part-l; }
    .hm-roles > li:last-child .lit { animation-name: hm-part-r; }
    .hm-role-look p { animation: hm-name-in linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
  }
}
@keyframes hm-part-l { from { translate: calc(40% + var(--hm-gap) / 2) 0; } }
@keyframes hm-part-r { from { translate: calc(-40% - var(--hm-gap) / 2) 0; } }
@keyframes hm-name-in { from { opacity: 0; translate: 0 12px; } }
.hm-role-look { display: grid; justify-items: center; gap: 18px; width: clamp(150px, 17vw, 240px); }
.hm-role-look .lit { width: 100%; }
.hm-role-look p { display: grid; gap: 4px; }
.hm-role-look b { font: 460 clamp(20px, 1.8vw, 26px)/1.15 var(--serif); letter-spacing: -.015em; font-variation-settings: "SOFT" 40, "WONK" 0; }
.hm-role-look span { font-size: 15px; color: var(--muted); }

/* ---------- 5. What we keep to: three vows in very large type ---------- */
.hm-keep h2 { max-width: none; font: 600 13px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-text); }
.hm-vows { display: grid; gap: clamp(44px, 6vw, 96px); margin: clamp(36px, 5vw, 72px) 0 clamp(40px, 5vw, 72px); }
.hm-vows li { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(24px, 4vw, 72px); align-items: end; padding-bottom: clamp(18px, 2vw, 28px); }
.hm-vow { display: grid; gap: 14px; justify-items: start; }
/* The vows' graphics (S36): drawn in motion.css's palette; these are the parts only they draw. */
.hm-vows .mg-pic { background: rgba(var(--pane), .5); }
.hm-wave { transform-origin: center; }
[data-mo] svg .hm-aa { font-size: 54px; }
.hm-edge { fill: none; stroke: var(--text); stroke-width: 5; }
.hm-no { opacity: .7; }   /* struck out, and quieter: the last frame */
.hm-open { fill: none; stroke: var(--muted); stroke-width: 2.5; }
.hm-later { fill: none; stroke: var(--rule); stroke-width: 2; stroke-dasharray: 4 5; }
.hm-vows li::after { content: ""; position: absolute; inset: auto 0 0; height: 1px; background: linear-gradient(90deg, rgba(var(--horizon), .95), rgba(var(--horizon), .25)); transform-origin: 0 50%; }
.hm-vows h3 { font-size: clamp(46px, 7.4vw, 124px); line-height: .94; letter-spacing: -.035em; word-spacing: .06em; font-weight: 420; }
.hm-vows h3 .w { display: inline-block; }
.hm-vows h3 .hm-key { color: var(--gold-text); }
.hm-vows p { max-width: 36ch; padding-bottom: .5em; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; color: var(--muted); }
.hm-small a { color: var(--accent); }
/* Words rise in, the line draws, the sentence follows: only with the script, never with Reduce Motion. */
@media (prefers-reduced-motion: no-preference) {
  .hm-js .hm-vows h3 .w { opacity: 0; translate: 0 .55em; transition: opacity .9s var(--ease), translate 1.1s var(--ease); }
  .hm-js .hm-vows h3 .w:nth-child(2) { transition-delay: 130ms; }
  .hm-js .hm-vows h3 .w:nth-child(3) { transition-delay: 260ms; }
  .hm-js .hm-vows p { opacity: 0; translate: 0 18px; transition: opacity .9s var(--ease) .55s, translate .9s var(--ease) .55s; }
  .hm-js .hm-vows li::after { scale: 0 1; transition: scale 1.4s var(--ease) .25s; }
  .hm-js .hm-vows .hm-in :is(.w, p) { opacity: 1; translate: none; }
  .hm-js .hm-vows .hm-in::after { scale: 1 1; }
}

/* ---------- 6. The close: both apps, each with its Orbilla ---------- */
.hm-close { padding-bottom: clamp(128px, 15vw, 220px); }
.hm-close-in { display: grid; justify-items: center; gap: clamp(32px, 4vw, 56px); text-align: center; }
.hm-close h2 { max-width: 14ch; font-size: clamp(40px, 5vw, 72px); }
.hm-close-apps { position: relative; isolation: isolate; display: flex; flex-wrap: wrap; justify-content: center; gap: 40px clamp(48px, 9vw, 160px); }
.hm-close-apps li { display: grid; justify-items: center; align-content: start; gap: 14px; }
.hm-close-orbi { width: clamp(120px, 13vw, 184px); margin-bottom: 8px; }
/* The close's one orbit joins the two Orbillas: a long flat ellipse through both, its far half fading behind them. */
.hm-close-apps::before { content: ""; position: absolute; left: 50%; top: calc(clamp(120px, 13vw, 184px) * .54); z-index: -1; width: min(760px, 120%); height: clamp(60px, 7vw, 104px); translate: -50% -50%; rotate: -5deg; pointer-events: none;
  border-radius: 50%; border: 1.3px solid rgba(var(--horizon), .75);
  -webkit-mask: linear-gradient(180deg, transparent 38%, rgba(0, 0, 0, .35) 52%, #000 78%); mask: linear-gradient(180deg, transparent 38%, rgba(0, 0, 0, .35) 52%, #000 78%); }
@media (max-width: 560px) { .hm-close-apps::before { display: none; } }
.hm-close-name { display: flex; align-items: center; gap: 10px; font: 460 24px/1.1 var(--serif); letter-spacing: -.015em; font-variation-settings: "SOFT" 40, "WONK" 0; }
.hm-close-name img { width: 36px; height: 36px; border-radius: 22%; box-shadow: 0 6px 14px -6px rgba(var(--shade), .5); }
.hm-close-apps .pill { margin-block: 13px; }

/* ---------- Tablets and phones ---------- */
@media (max-width: 1000px) {
  .hm-ch-in { grid-template-columns: minmax(0, 1fr); }
  .hm-ch-note { grid-column: 1; }
  .hm-trio { max-width: 640px; }
}
/* On a phone the morning's hills are a strip along the bottom of the first screen; here they settle into the floor
   before the scene ends, so the chapter below rises out of the same colour. */
@media (max-width: 700px) { .stage.hm-first { --land-hold: 74%; --land-end: 96%; } }
@media (max-width: 560px) {
  .hm-door { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 18px; padding: 20px 18px; border-radius: 22px; }
  .hm-door-orbi { left: -10%; width: 48%; }
  .hm-door-pics { margin-top: 0; }
  .hm-doors { margin-top: 48px; }
  .hm-name { font-size: 28px; }
  .hm-door-copy .actions { gap: 10px; }
  .hm-door-copy .appstore img { height: 44px; width: auto; }
  /* Three phones become a row you swipe, the next one peeking in. */
  .hm-trio { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 12px var(--gutter) 20px; scroll-padding-inline: var(--gutter); }
  .hm-trio::-webkit-scrollbar { display: none; }
  .hm-trio li { flex: 0 0 56%; scroll-snap-align: start; }
  .hm-trio li:nth-child(2) { margin-top: 0; }
  .hm-vows li { grid-template-columns: minmax(0, 1fr); }
  .hm-vows h3 { font-size: clamp(44px, 13.4vw, 58px); }
  .hm-vows p { margin-top: 14px; padding-bottom: 0; font-size: 16px; }
}