/* moopi.uz — the dark room: one green-black ground, lit things in it. */

:root {
  --ground: #061210;
  --stage: #0b221d;
  --panel: #0e211c;
  --ink: #e8fff7;
  --soft: #9dbdb3;
  --accent: #00f5c3;
  --accent-hover: #8affe4;
  --on-accent: #04241d;

  --f-display: "Montserrat", system-ui, sans-serif;
  --f-text: "Inter", system-ui, sans-serif;

  --s-name: clamp(84px, 17vw, 320px);
  --s-big: clamp(32px, 4vw, 60px);
  --s-head: clamp(22px, 2.1vw, 30px);
  --s-statement: clamp(24px, 2.6vw, 36px);
  --s-body: clamp(17px, 0.95rem + 0.15vw, 18px);
  --s-small: 15px;

  --margin: clamp(20px, 2.2vw, 32px);
  --gutter: clamp(16px, 2vw, 28px);
  --section: clamp(120px, 13vw, 200px);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ground); color-scheme: dark; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 var(--s-body)/1.6 var(--f-text);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
}
h1, h2, h3, p, figure, dl, dd, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--on-accent); }
:target { scroll-margin-top: 24px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 500; text-wrap: balance; }
p { text-wrap: pretty; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.head { font-size: var(--s-big); line-height: 1.04; letter-spacing: -0.025em; }

/* ---------- controls ---------- */
.button {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px;
  background: var(--accent); color: var(--on-accent); font: 600 var(--s-small)/1 var(--f-text); letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease;
}
.button:active { transform: scale(0.97); }
.link {
  text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.25em;
  text-decoration-thickness: 1.5px; transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease;
}
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--accent-hover); }
  .link:hover { text-decoration-color: currentColor; }
}

/* ---------- hero: the lit glass on its stage, the name crossing it ---------- */
.hero { position: relative; display: grid; grid-template-columns: 47vw 1fr; }
.hero__stage {
  grid-column: 1; grid-row: 1 / 3; align-self: start; position: sticky; top: 20px; z-index: 1;
  height: calc(100svh - 40px); min-height: 580px; margin: 20px 0 20px 20px;
  background: var(--stage); display: grid; place-items: center; overflow: hidden;
}
.hero__settle { width: 84%; }
.hero__mark { width: 100%; }
.hero__first { grid-column: 1 / -1; grid-row: 1; position: relative; height: 100svh; min-height: 620px; }
.nav {
  position: absolute; top: 32px; right: var(--margin); z-index: 3;
  display: flex; align-items: center; gap: 28px; font-size: var(--s-small);
}
.nav__link { text-decoration-color: transparent; }
.hero__lead-wrap {
  position: absolute; left: 47vw; right: 0; top: 44%; transform: translateY(-50%);
  display: flex; justify-content: center; padding: 0 var(--margin);
}
.hero__lead { font-size: var(--s-head); line-height: 1.35; max-width: 24ch; }
.hero__name {
  position: absolute; right: var(--margin); bottom: 40px; z-index: 2;
  font-size: var(--s-name); line-height: 0.74; letter-spacing: -0.045em; color: var(--ink);
  transform-origin: 100% 100%;
}
.hero__name-in { display: block; padding-bottom: 0.02em; }

/* the name decoded: M O O P I down the right half while the glass stays */
.name {
  grid-column: 2; grid-row: 2; align-self: start;
  padding: var(--section) var(--margin) var(--section) clamp(32px, 6vw, 112px);
}
.name .head { margin-bottom: 48px; max-width: 12ch; }
.name__row {
  display: grid; grid-template-columns: calc(var(--s-big) * 1.15) auto 1fr; align-items: baseline;
  column-gap: 20px; padding-block: 2px;
}
.name__letter { font: 500 var(--s-big)/1.2 var(--f-display); letter-spacing: -0.02em; }
.name__en { grid-column: 3; color: var(--soft); }
.name__local { grid-column: 2; grid-row: 1; font: 400 var(--s-head)/1.2 var(--f-display); }
.name__text { margin-top: 48px; max-width: 46ch; }

/* ---------- intro: one sentence descending like stairs, beside Tashkent at night ---------- */
.intro {
  padding: var(--section) var(--margin);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto auto 1fr;
  column-gap: var(--gutter); align-items: start;
}
.intro__stairs {
  grid-column: 1 / 8; grid-row: 1; margin-top: -0.12em;
  font-size: var(--s-big); line-height: 1.04; letter-spacing: -0.025em;
}
.intro__line { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.intro__line > span { display: block; }
.intro__line:nth-child(2) { padding-left: 6vw; }
.intro__text { grid-column: 1 / 8; grid-row: 2; margin-top: 48px; max-width: 40ch; font: 400 var(--s-statement)/1.3 var(--f-display); letter-spacing: -0.01em; color: var(--soft); }
.intro__photos { grid-column: 8 / 13; grid-row: 1 / 5; display: grid; gap: 16px; }
.intro__photos figure { aspect-ratio: 3 / 2; overflow: hidden; background: var(--panel); }
.intro__photos img { width: 100%; height: 100%; object-fit: cover; }
.intro__note {
  grid-column: 1 / 5; grid-row: 3; max-width: 34ch; margin-top: 32px;
  font-size: var(--s-small); line-height: 1.5; color: var(--soft);
}

/* ---------- how it works: each sentence beside what you give and what comes back ---------- */
.how { padding: var(--section) var(--margin) 0; }
.how__h { margin-bottom: 56px; }
.ex { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.ex + .ex { margin-top: 96px; }
.ex__say { grid-column: 1 / 5; grid-row: 1 / 3; font: 400 var(--s-head)/1.3 var(--f-display); letter-spacing: -0.01em; max-width: 22ch; }
.ex__call { grid-column: 5 / 11; }
.ex__resp { grid-column: 5 / 11; margin-top: 16px; margin-left: 56px; }
.ex--wide .ex__resp { grid-column: 5 / 13; max-width: 820px; }

/* ---------- interface fragments: MOOPI's own dark theme (Inter, 12px corners, hairline borders) ---------- */
[data-ui] { font: 400 15px/1.5 var(--f-text); color: #e8fff7; }
[data-ui] p { text-wrap: pretty; }
[data-ui] .ui-card { background: #10221d; border: 0.5px solid rgba(58, 106, 94, 0.6); border-radius: 12px; padding: 16px 18px 14px; }
[data-ui] .ui-tile {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; flex: none;
  font: 700 12px/1 var(--f-text); color: #fff;
}
[data-ui] .ui-tile svg { width: 15px; height: 15px; fill: #fff; }
[data-ui] .ui-tile--blue { background: #007aff; }
[data-ui] .ui-tile--green { background: #1d6f42; }
[data-ui] .ui-ask { background: #10221d; border: 0.5px solid rgba(58, 106, 94, 0.6); border-radius: 12px; padding: 14px 16px 16px; }
[data-ui] .ui-ask__q { font-weight: 600; margin-bottom: 10px; }
[data-ui] .ui-field {
  min-height: 48px; padding: 12px 14px; border-radius: 10px; background: #0a1714;
  border: 1px solid #00c8a4; color: #e8fff7;
}
[data-ui] .ui-file__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
[data-ui] .ui-file__title { font-weight: 600; }
[data-ui] .ui-file__path { margin-left: auto; color: #6f8f86; font-size: 13px; }
[data-ui] .ui-kv { display: grid; gap: 0; }
[data-ui] .ui-kv__row { display: grid; grid-template-columns: 9.5rem 1fr; gap: 12px; padding: 7px 0; border-top: 0.5px solid rgba(58, 106, 94, 0.45); }
[data-ui] .ui-kv dt { color: #9dbdb3; }
[data-ui] .ui-file__note { margin-top: 10px; color: #6f8f86; font-size: 13px; }
[data-ui] .ui-composer {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
  background: #10221d; border: 0.5px solid rgba(58, 106, 94, 0.7); border-radius: 22px; padding: 10px 10px 10px 18px;
}
[data-ui] .ui-composer__text { flex: 1 1 260px; padding: 5px 0; min-height: 32px; }
[data-ui] .ui-send { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #00c8a4; flex: none; margin-left: auto; }
[data-ui] .ui-send svg { width: 18px; height: 18px; fill: #04241d; }
[data-ui] .ui-chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 5px; border-radius: 10px;
  background: rgba(168, 255, 230, 0.08); font-size: 14px;
}
[data-ui] .ui-chip__size { color: #6f8f86; font-size: 13px; }
[data-ui] .ui-chip--out { margin-top: 14px; }
[data-ui] .ui-chip__dl { width: 16px; height: 16px; fill: #00c8a4; margin-left: 4px; }
[data-ui] .ui-composer--file .ui-chip { flex-basis: 100%; max-width: max-content; }
[data-ui] .ui-answer { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
[data-ui] .ui-avatar { width: 40px; height: 40px; object-fit: contain; padding: 6px 3px; border-radius: 10px; background: #0a2e26; }
[data-ui] .ui-answer__text p + p { margin-top: 10px; }
[data-ui] .ui-table { width: 100%; margin-top: 14px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
[data-ui] .ui-table th { text-align: left; font-weight: 500; color: #9dbdb3; font-size: 13px; padding: 0 12px 8px 0; }
[data-ui] .ui-table td { padding: 9px 12px 9px 0; border-top: 0.5px solid rgba(58, 106, 94, 0.5); vertical-align: middle; }
[data-ui] .ui-table th:last-child, [data-ui] .ui-table td:last-child { text-align: right; padding-right: 0; }
[data-ui] .ui-table td:last-child { display: flex; align-items: center; justify-content: flex-end; gap: 12px; white-space: nowrap; }
[data-ui] .ui-table tfoot td { font-weight: 600; }
[data-ui] .ui-bar { display: block; width: calc(var(--w) * 1.5px); height: 8px; border-radius: 4px; background: #00c8a4; transform-origin: left; }

/* ---------- showcase: one task in three states ---------- */
.show { padding: var(--section) var(--margin) 0; }
.show__h { margin: 0 0 72px; }
.show__grid {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gutter); row-gap: 40px; align-items: center;
}
.show__state { padding-right: 16px; text-align: right; font: 400 var(--s-statement)/1.2 var(--f-display); letter-spacing: -0.015em; }
.show__state:nth-of-type(2), .show__state:nth-of-type(3) { color: var(--soft); }
.show__copy { max-width: 640px; }
[data-ui] .ui-task {
  display: grid; grid-template-columns: 40px 1fr; gap: 6px; padding: 12px 18px 12px 10px;
  background: #10221d; border: 0.5px solid rgba(58, 106, 94, 0.6); border-radius: 12px;
}
[data-ui] .ui-task__check {
  width: 28px; height: 28px; margin: 6px 0 0 4px; border-radius: 50%; border: 2px solid #6f8f86;
  display: grid; place-items: center; transition: border-color var(--t-hover) ease, background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
[data-ui] .ui-task__check svg { width: 20px; height: 20px; fill: #04241d; opacity: 0; transform: scale(0.6); transition: opacity var(--t-ui) ease, transform var(--t-ui) var(--ease-out); }
[data-ui] button.ui-task__check { border-color: #00c8a4; box-shadow: 0 0 0 4px rgba(0, 200, 164, 0.18); }
[data-ui] button.ui-task__check:active { transform: scale(0.92); }
[data-ui] .ui-task__title { font-weight: 500; padding-top: 7px; }
[data-ui] .ui-task__notes { color: #9dbdb3; font-size: 14px; }
[data-ui] .ui-task__from { color: #6f8f86; font-size: 13px; margin-top: 2px; }
[data-ui] .ui-task__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; color: #9dbdb3; font-size: 13px; font-variant-numeric: tabular-nums; }
[data-ui] .ui-task__meta span { display: inline-flex; align-items: center; gap: 5px; }
[data-ui] .ui-task__meta svg { width: 13px; height: 13px; fill: currentColor; }
[data-ui] .ui-task__ping { color: #00c8a4; font-weight: 500; }
[data-ui] .ui-task.is-done .ui-task__check { border-color: #00c8a4; background: #00c8a4; box-shadow: none; }
[data-ui] .ui-task.is-done .ui-task__check svg { opacity: 1; transform: none; }
[data-ui] .ui-task.is-done .ui-task__title { color: #9dbdb3; text-decoration: line-through; }
[data-ui] .ui-task.is-done .ui-task__ping { color: #9dbdb3; font-weight: 400; }

/* ---------- features: the command menu, scaled up ---------- */
.features { padding: var(--section) var(--margin) 0; }
[data-ui].cmd { font-family: var(--f-display); }
[data-ui] .cmd__input {
  display: block; width: calc(100% * 10 / 12); height: 1.9em; padding: 0 0.6em; margin-bottom: 28px;
  font: 400 clamp(28px, 3vw, 44px)/1 var(--f-display); letter-spacing: -0.01em;
  background: var(--panel); border: 0; border-radius: 12px; color: var(--ink); outline-offset: 4px;
}
[data-ui] .cmd__input::placeholder { color: var(--soft); opacity: 1; }
[data-ui] .cmd__input::-webkit-search-cancel-button { filter: invert(1); }
[data-ui] .cmd__row { transition: background-color var(--t-ui) ease, color var(--t-ui) ease; }
[data-ui] .cmd__btn {
  display: flex; justify-content: space-between; align-items: baseline; gap: 24px; width: 100%; text-align: left;
  padding: 0.06em 0.25em 0.08em; font: 400 clamp(32px, 4.4vw, 68px)/1.1 var(--f-display); letter-spacing: -0.025em;
}
[data-ui] .cmd__fact { flex: none; font: 400 17px/1 var(--f-text); letter-spacing: 0; color: var(--soft); transition: color var(--t-ui) ease; }
[data-ui] .cmd__more { display: grid; grid-template-rows: 1fr; }
[data-ui] .cmd__more > div { overflow: hidden; }
[data-ui] .cmd__more p { max-width: 60ch; padding: 0 0.6rem 1.1rem 0.6rem; font: 400 17px/1.55 var(--f-text); }
[data-ui] .cmd__row.is-on { background: var(--accent); color: var(--on-accent); }
[data-ui] .cmd__row.is-on .cmd__fact { color: var(--on-accent); }
[data-ui] .cmd__row[hidden] { display: none; }
[data-ui] .cmd__empty { font: 400 clamp(24px, 3vw, 40px)/1.2 var(--f-display); color: var(--soft); padding: 0.2em 0.25em; }
.js [data-ui] .cmd__more { grid-template-rows: 0fr; transition: grid-template-rows 320ms var(--ease-out); }
.js [data-ui] .cmd__row.is-on .cmd__more { grid-template-rows: 1fr; }

/* ---------- the day: a timetable at one size ---------- */
.day { padding: var(--section) var(--margin) 0; }
.day__h { margin-bottom: 32px; }
.day__now { font: 500 var(--s-head)/1.35 var(--f-display); color: var(--accent); max-width: 44ch; margin-bottom: 8px; }
.day__table {
  width: 100%; border-collapse: collapse; table-layout: fixed;
  font: 400 var(--s-head)/1.5 var(--f-display); letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
}
.day__table td { padding: 0; vertical-align: baseline; }
.day__c1 { width: 40%; }
.day__c2 { width: 20%; }
.day__c3 { width: 26%; }
.day__c4 { width: 14%; }
.day__time { text-align: right; }
.day__part th {
  position: sticky; top: 0; z-index: 1; background: var(--ground);
  padding: 56px 0 16px; text-align: left; font-weight: 400; color: var(--soft);
}
.day__mark { margin-left: 0.6em; color: var(--accent); }
.day__group.is-now .day__part th { color: var(--accent); }

/* ---------- questions: large on the left, answers beside ---------- */
.faq { padding: var(--section) var(--margin) 0; display: grid; row-gap: 56px; }
.faq__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: baseline; }
.faq__q { grid-column: 1 / 7; font-size: var(--s-head); line-height: 1.15; letter-spacing: -0.01em; }
.faq__q--head { color: var(--soft); }
.faq__a { grid-column: 7 / 13; max-width: 46ch; }

/* ---------- the ending: one sentence, one action ---------- */
.cta { padding: 22svh var(--margin) 14svh; }
.closing {
  margin: 0 0 8svh; font: 500 var(--s-name)/0.74 var(--f-display); letter-spacing: -0.045em;
  transform-origin: 0 100%; color: var(--ink);
}
.cta__text { max-width: 30ch; margin-bottom: 28px; font: 400 var(--s-head)/1.35 var(--f-display); letter-spacing: -0.01em; }
.foot {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 12px 24px;
  padding: 0 var(--margin) 30px; font-size: var(--s-small); line-height: 1.5;
}
.foot__what { color: var(--soft); }
.foot__links { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.foot__end { display: flex; justify-content: flex-end; gap: 24px; color: var(--soft); }
.foot__end a { color: var(--ink); }
.foot__credits { grid-column: 1 / -1; color: var(--soft); margin-top: 16px; }
.foot__credits a { color: var(--soft); text-decoration-color: rgba(157, 189, 179, 0.4); }

/* ---------- tablet and phone ---------- */
@media (max-width: 899px) {
  .only-wide { display: none; }
  .hero { display: block; }
  .hero__stage { position: relative; top: auto; height: 58svh; min-height: 380px; margin: 12px; }
  .hero__first { position: static; height: auto; min-height: 0; display: flex; flex-direction: column; }
  .nav { top: 24px; right: 24px; gap: 20px; }
  .hero__name { position: relative; right: auto; bottom: auto; order: 1; margin: -3.4vw 0 0 12px; font-size: 21vw; }
  .hero__lead-wrap { position: static; order: 2; transform: none; display: block; padding: 20px 20px 0; }
  .hero__lead { font-size: 17px; max-width: 30ch; }
  .name { padding: 96px 20px 0; }
  .name__row { grid-template-columns: calc(var(--s-big) * 1.2) 1fr; }
  .name__en { grid-column: 2; grid-row: 1; }
  .name__local { grid-column: 2; grid-row: 2; margin-top: -6px; padding-bottom: 8px; }

  .intro { display: block; padding: var(--section) 20px; }
  .intro__stairs { font-size: 7.2vw; }
  .intro__line:nth-child(2) { padding-left: 5vw; }
  .intro__text { margin-top: 28px; font-size: 22px; }
  .intro__photos { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 40px; }
  .intro__note { margin-top: 32px; }

  .ex { display: block; }
  .ex__say { max-width: none; }
  .ex__call { margin-top: 16px; }
  .ex__resp { margin-left: 0; margin-top: 24px; }
  [data-ui] .ui-bar { display: none; }
  [data-ui] .ex--wide .ui-answer, .ex--wide [data-ui] .ui-answer { grid-template-columns: 1fr; gap: 10px; }
  [data-ui] .ui-table { font-size: 14px; }
  [data-ui] .ui-table td:not(:first-child), [data-ui] .ui-table th:not(:first-child) { white-space: nowrap; }

  .show__h { margin: 0 0 40px; }
  .show__grid { grid-template-columns: 1fr; row-gap: 10px; }
  .show__state { order: 2; text-align: left; padding: 0 0 38px; font: 400 17px/1.5 var(--f-text); color: var(--soft); }
  .show__copy { order: 1; }
  .show__grid > :nth-child(1) { order: 2; } .show__grid > :nth-child(2) { order: 1; }
  .show__grid > :nth-child(3) { order: 4; } .show__grid > :nth-child(4) { order: 3; }
  .show__grid > :nth-child(5) { order: 6; } .show__grid > :nth-child(6) { order: 5; }

  [data-ui] .cmd__input { width: 100%; height: 56px; font-size: 20px; }
  [data-ui] .cmd__btn { font-size: 8.5vw; }
  [data-ui] .cmd__fact { display: none; }

  .day__table, .day__table tbody, .day__table tr, .day__table td, .day__table th { display: block; width: auto; }
  .day__table colgroup { display: none; }
  .day__table { font-size: 22px; }
  .day__part th { padding: 48px 0 12px; }
  .day__row { display: grid !important; grid-template-columns: auto auto 1fr; column-gap: 12px; padding-bottom: 18px; line-height: 1.3; }
  .day__what { grid-column: 1 / -1; }
  .day__where, .day__when, .day__time { font: 400 var(--s-small)/1.5 var(--f-text); color: var(--soft); }
  .day__time { text-align: right; }

  .faq { row-gap: 56px; }
  .faq__q, .faq__a { grid-column: 1 / -1; }
  .faq__q { font-size: 24px; }
  .faq__a { margin-top: 12px; }
  .cta { padding: 20svh 20px 10svh; }
  .cta__text { font-size: 22px; }
  .closing { margin-bottom: 40px; font-size: 21vw; }
  .foot { display: block; padding: 0 20px 24px; }
  .foot > p + p { margin-top: 8px; }
  .foot__end { justify-content: flex-start; }
}

/* ---------- motion: transform and opacity only; reduced motion keeps the finished state ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* load: the glass settles, the name rises from its baseline, the sentence and the bar follow */
  .js .hero__settle { opacity: 0; transform: scale(1.06); animation: settle 1400ms var(--ease-soft) 80ms forwards; }
  .js .hero__name { overflow: hidden; padding-top: 0.04em; }
  .js .hero__name-in { transform: translateY(105%); animation: line-up 1000ms var(--ease-out) 260ms forwards; }
  .js .hero__lead { opacity: 0; transform: translateY(18px); animation: rise 800ms var(--ease-out) 520ms forwards; }
  .js .nav { opacity: 0; animation: fade 700ms ease 700ms forwards; }

  /* the moving picture: the glass hangs in the air and drifts */
  .hero__mark { animation: drift 11s var(--ease-in-out) infinite alternate; }
  .hero__stage.is-paused .hero__mark { animation-play-state: paused; }

  /* entrances, once, in reading order */
  .js [data-reveal] {
    opacity: 0; transform: translateY(24px);
    transition: opacity 700ms var(--ease-out) var(--d, 0ms), transform 900ms var(--ease-out) var(--d, 0ms);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .intro__stairs [data-line] { transform: translateY(108%); transition: transform 1000ms var(--ease-out); transition-delay: calc(var(--i) * 110ms); }
  .js .intro__stairs.is-in [data-line] { transform: none; }
  /* a fully clipped element never counts as visible, so the unclipped group is what gets watched */
  .js [data-shutters] .shutter { clip-path: inset(0 0 100% 0); transition: clip-path 1100ms var(--ease-in-out) var(--d, 0ms); }
  .js [data-shutters] .shutter img { transform: scale(1.12); transition: transform 1600ms var(--ease-soft) var(--d, 0ms); }
  .js [data-shutters].is-in .shutter { clip-path: inset(0); }
  .js [data-shutters].is-in .shutter img { transform: none; }
  .js .ex__resp .ui-bar { transform: scaleX(0); transition: transform 900ms var(--ease-out) 700ms; }
  .js .ex__resp.is-in .ui-bar { transform: none; }
  [data-type].is-typing::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 2px; vertical-align: -0.2em; background: #00c8a4; }
  .js .day__now:not([hidden]) { animation: rise 800ms var(--ease-out) both; }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    /* the signature: the name gets heavier and smaller as the first screen leaves */
    .hero__name { animation: name-out linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
    /* and returns at the end, growing into place as it arrives */
    .closing { animation: name-in linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
  }
}

@keyframes settle { to { opacity: 1; transform: none; } }
@keyframes line-up { to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes fade { to { opacity: 1; } }
@keyframes drift { from { transform: translateY(-1.4%) rotate(-0.8deg); } to { transform: translateY(1.4%) rotate(0.8deg); } }
@keyframes name-out { to { scale: 0.92; } }
@keyframes name-in { from { scale: 0.94; } to { scale: 1; } }