@font-face {
  font-family: Piazzolla;
  src: url(font/Piazzolla-cyrillic.woff2) format("woff2");
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Piazzolla;
  src: url(font/Piazzolla-latin.woff2) format("woff2");
  font-weight: 400 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2013-2014, U+2018-201E, U+2026, U+20BD;
}

:root {
  --blue: #0b63d6;
  /* светло или темно — по часу дня на странице, а не по системе: утро светлое, ночь тёмная */
  color-scheme: light;
  --bg: #f1ece0;
  --ink: #10131c;
  --soft: #4b4e58;
  --line: #10131c2b;
  --go-bg: #10131c;
  --go-ink: #f1ece0;
  --glass: #f1ece0cc;
  --sheet: #f1ece0f2;
  --mark: #f2a531;
  --mute: #c9c6bb;
  --clock: #8a5000;
  --glow: #f2a53166;
  --cast: #10131c38;
  --amber: #f2a531;
  --on-amber: #10131c;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pad: 40px;
}
:root[data-sky="night"] {
  color-scheme: dark;
  --ink: #f1ece0;
  --soft: #b4b3a8;
  --line: #f1ece033;
  --go-bg: #f2a531;
  --go-ink: #10131c;
  --glass: #10131ccc;
  --sheet: #10131cf2;
  --mark: #8a5000;
  --mute: #3a3d47;
  --clock: #f2a531;
  --glow: #f2a53130;
  --cast: #000000b3;
}
/* небо по часам дня: рассветный персик, полуденная бумага, золотой час, ночь */
:root[data-sky="morning"] {
  --bg: #f6e6d6;
}
:root[data-sky="afternoon"] {
  --bg: #f3e7cd;
}
:root[data-sky="evening"] {
  --bg: #f0d3ad;
}
:root[data-sky="night"] {
  --bg: #0a0c12;
}

* {
  box-sizing: border-box;
  margin: 0;
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}
body {
  background: var(--bg);
  color: var(--ink);
  font:
    400 18px / 28px Piazzolla,
    Georgia,
    serif;
  -webkit-font-smoothing: antialiased;
}
html,
body {
  overflow-x: clip;
}
a {
  color: inherit;
  text-underline-offset: 3px;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}
p {
  text-wrap: pretty;
}
h1,
h2,
h3,
.thesis p,
[popover] a {
  word-spacing: 0.12em;
}
h1,
h2,
h3 {
  text-wrap: balance;
  font-weight: 800;
  /* при сильном увеличении текста длинное слово переносится, а не уходит за край */
  overflow-wrap: anywhere;
}
.txt {
  min-width: 0;
}
h2 {
  font-size: 48px;
  line-height: 48px;
}
h3 {
  font-size: 30px;
  line-height: 36px;
}
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 8px;
}
.night {
  display: none;
}
:root[data-sky="night"] .day {
  display: none;
}
:root[data-sky="night"] .night {
  display: block;
}
.skip {
  position: absolute;
  left: 16px;
  top: -64px;
  z-index: 20;
  background: var(--ink);
  color: var(--bg);
  padding: 8px 16px;
  border-radius: 8px;
}
.skip:focus {
  top: 16px;
}

.btn {
  display: inline-block;
  background: var(--ink);
  color: var(--bg);
  font:
    700 18px / 28px Piazzolla,
    Georgia,
    serif;
  padding: 12px 24px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform 0.5s var(--ease),
    background-color 0.3s var(--ease);
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: scale(0.98);
}
.btn.sm {
  font-size: 16px;
  line-height: 24px;
  padding: 8px 16px;
}
.btn.go {
  background: var(--go-bg);
  color: var(--go-ink);
}
.round {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  transition:
    background-color 0.3s var(--ease),
    transform 0.5s var(--ease);
}
.round:hover {
  background: var(--line);
}
.round:active {
  transform: scale(0.94);
}
.what {
  font-weight: 700;
  font-size: 20px;
  line-height: 28px;
}

/* шапка: плавающая планка */
.bar {
  position: fixed;
  top: 12px;
  left: 50%;
  translate: -50%;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 16px;
  border-radius: 999px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 0 0 1px var(--line);
  width: max-content;
  max-width: calc(100vw - 24px);
}
.bar .logo {
  margin-right: 8px;
  flex: none;
}
.logo > img {
  height: 28px;
  width: auto;
}
.links {
  display: flex;
  gap: 4px;
  font-weight: 600;
  font-size: 16px;
  line-height: 24px;
}
.links a {
  white-space: nowrap;
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 999px;
  transition: background-color 0.3s var(--ease);
}
.links a:hover {
  background: var(--line);
}
.menu {
  display: none;
}

#menu {
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border: 0;
  padding: 16px 24px 32px;
  background: var(--sheet);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  color: var(--ink);
  align-content: start;
  gap: 8px;
}
#menu:popover-open {
  display: grid;
}
#menu .round {
  justify-self: end;
}
#menu a:not(.btn) {
  display: flex;
  align-items: baseline;
  gap: 16px;
  font-weight: 800;
  font-size: 36px;
  line-height: 40px;
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
[popover] time {
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--soft);
  width: 48px;
  font-variant-numeric: tabular-nums;
}
#menu .btn {
  justify-self: start;
  margin-top: 24px;
}

/* первый экран */
.hero {
  position: relative;
  padding: 96px 0 48px;
  overflow: hidden;
}
.clock {
  position: relative;
  font-weight: 800;
  font-size: 29vw;
  line-height: 0.86;
  letter-spacing: -0.05em;
  color: var(--amber);
  font-variant-numeric: tabular-nums lining-nums;
  margin-left: 1.5vw;
  white-space: nowrap;
}
.hero .txt {
  position: relative;
  padding: 0 var(--pad);
  /* текст не заходит под телефон справа */
  max-width: min(820px, calc(92vw - min(280px, 20vw) - 24px));
  margin-top: 24px;
}
h1 {
  font-size: 60px;
  line-height: 60px;
  margin: 8px 0 16px;
}
.lead {
  font-size: 20px;
  line-height: 28px;
  color: var(--soft);
  max-width: 680px;
}
.cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
  margin-top: 24px;
  font-size: 16px;
  line-height: 24px;
}
/* один корпус на всю страницу: всё считается от ширины, поэтому телефоны одинаковы в любом размере.
   Снимки экрана сняты без строки состояния: часы и вырез рисует корпус, часы идут вместе с днём */
.phone {
  --w: 300px;
  position: relative;
  flex: none;
  width: var(--w);
  border: calc(var(--w) * 0.022) solid #0a0c12;
  border-radius: calc(var(--w) * 0.16);
  box-shadow:
    0 0 0 1px #ffffff26,
    0 40px 80px -24px #000a;
}
.phone picture {
  position: relative;
  display: block;
  overflow: clip;
  border-radius: calc(var(--w) * 0.138);
}
.phone img {
  width: 100%;
}
.phone::before {
  content: var(--now, "11:20");
  position: absolute;
  z-index: 1;
  left: 13%;
  top: 2.6%;
  font:
    600 calc(var(--w) * 0.048) / 1 -apple-system,
    system-ui,
    sans-serif;
  color: #000;
}
.phone::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 37%;
  top: 1.7%;
  width: 26%;
  aspect-ratio: 3.4;
  border-radius: 999px;
  background: #000;
}
/* экран, обрезанный посреди кнопки, уходит в свой фон */
.cut::after {
  content: "";
  position: absolute;
  inset: 84% 0 0;
  background: linear-gradient(#f0eff400, #f0eff4 55%);
}
.hero .phone {
  position: absolute;
  right: 8vw;
  top: calc(96px + 5vw);
  --w: min(280px, 20vw);
}

/* час дня */
.hour {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  column-gap: 64px;
  align-items: start;
  max-width: 1280px;
  margin: 0 auto;
  padding: 96px var(--pad);
}
.hour.flip {
  grid-template-columns: 300px minmax(0, 1fr);
}
.time {
  grid-column: 1 / -1;
  grid-row: 1;
  font-weight: 800;
  font-size: min(22vw, 340px);
  line-height: 0.86;
  white-space: nowrap;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--amber);
}
.hour .txt {
  grid-column: 1;
  grid-row: 2;
  display: grid;
  gap: 16px;
  max-width: 600px;
  margin-top: 40px;
}
.hour.flip .txt {
  grid-column: 2;
}
.flip .time {
  text-align: right;
}
.hour .txt p:not(.what) {
  color: var(--soft);
  font-size: 20px;
  line-height: 28px;
}
.hour .phone {
  grid-column: 2;
  grid-row: 1 / 3;
  z-index: 1;
  margin-top: 5vw;
}
.hour.flip .phone {
  grid-column: 1;
}
/* переписка с Artelo — по виду чата приложения: мои слова справа, ответы слева, карточка с кнопкой */
.talk {
  list-style: none;
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  border-radius: 28px;
  background: linear-gradient(160deg, #b7c3ee, #cfd3f3 60%, #d9cdee);
  color: #10131c;
  font:
    400 15px / 1.35 -apple-system,
    system-ui,
    sans-serif;
}
.talk li {
  max-width: 86%;
  padding: 8px 12px;
  border-radius: 18px;
  background: #fff;
}
.talk .me {
  align-self: flex-end;
  background: var(--blue);
  color: #fff;
}
.talk .card {
  align-self: stretch;
  max-width: none;
  display: grid;
  gap: 2px;
  padding: 12px;
  font-size: 0.87em;
}
:where(.talk .card) b {
  font-size: 1.15em;
}
:where(.talk .card) span {
  margin-top: 8px;
  padding: 0.6em;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-weight: 600;
  text-align: center;
}
/* вне сцены у переписки подписан её чат */
.talk[data-chat]::before {
  content: attr(data-chat);
  align-self: center;
  padding: 0.3em 0.9em;
  border-radius: 999px;
  background: #ffffffd9;
  font-weight: 600;
  font-size: 0.87em;
}
.talk time {
  margin-right: 0.5em;
  font-size: 0.8em;
  font-variant-numeric: tabular-nums;
  opacity: 0.6;
}
.hour .talk {
  grid-column: 2;
  grid-row: 1 / 3;
  z-index: 1;
  margin-top: 5vw;
}
/* где есть экран приложения, вне сцены показывает он; переписка — в телефоне сцены */
.phone ~ .talk {
  display: none;
}

.call {
  max-width: none;
  margin: 0 16px;
  padding: 96px max(24px, calc((100vw - 1232px) / 2));
  background: var(--amber);
  color: var(--on-amber);
  border-radius: 48px;
}
.call .time,
.call .txt p:not(.what) {
  color: var(--on-amber);
}

/* тезис: слова загораются по одному */
.thesis {
  padding: 160px var(--pad);
  max-width: 1280px;
  margin: 0 auto;
}
.thesis p {
  font-weight: 800;
  font-size: 72px;
  line-height: 72px;
  text-wrap: balance;
}

/* как начать */
.start {
  max-width: 1280px;
  margin: 0 auto;
  padding: 96px var(--pad);
}
.start h2 {
  margin: 8px 0 48px;
}
.start ol {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  counter-reset: n;
}
.start li {
  counter-increment: n;
  display: grid;
  gap: 8px;
  align-content: start;
  border-top: 2px solid var(--ink);
  padding-top: 16px;
}
.start li::before {
  content: counter(n);
  font-weight: 800;
  font-size: 96px;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--amber);
}
.start b {
  font-size: 24px;
  line-height: 32px;
  font-weight: 800;
}
.start span {
  color: var(--soft);
}

.doubt {
  margin: 48px 16px;
  padding: 96px max(24px, calc((100vw - 1232px) / 2));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 40px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 48px;
}
.doubt h2 {
  grid-column: 1 / -1;
  font-size: 96px;
  line-height: 1;
  color: var(--mark);
}
.doubt div {
  display: grid;
  gap: 12px;
  align-content: start;
}
.doubt p {
  color: var(--mute);
}

.faq {
  max-width: 880px;
  margin: 0 auto;
  padding: 96px var(--pad);
}
.faq h2 {
  margin-bottom: 32px;
}
.faq details {
  border-top: 1px solid var(--line);
}
.faq details:last-child {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  font-weight: 700;
  font-size: 24px;
  line-height: 32px;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  font-weight: 400;
  font-size: 30px;
  line-height: 32px;
  color: var(--amber);
  transition: rotate 0.5s var(--ease);
}
.faq details[open] summary::after {
  rotate: 45deg;
}
.faq details p {
  padding: 0 48px 24px 0;
  color: var(--soft);
}

.end {
  padding: 96px var(--pad) 128px;
  text-align: center;
  overflow: hidden;
}
.end .clock {
  font-size: min(21vw, 400px);
  line-height: 1;
  margin: 0 0 48px;
  letter-spacing: -0.05em;
}
.end .cta {
  justify-content: center;
}
.end h2 {
  margin-bottom: 8px;
}

footer {
  border-top: 1px solid var(--line);
  padding: 40px var(--pad) 48px;
  display: grid;
  gap: 8px;
  font-size: 14px;
  line-height: 20px;
  color: var(--soft);
}

/* строка меню целиком помещается от 1100 px; уже — кнопка меню */
@media (max-width: 1099px) {
  .links {
    display: none;
  }
  .menu {
    display: grid;
  }
}
@media (max-width: 1023px) {
  h2 {
    font-size: 36px;
    line-height: 40px;
  }
  .thesis p {
    font-size: 48px;
    line-height: 48px;
  }
  .hour {
    column-gap: 32px;
  }
  .start ol,
  .doubt {
    grid-template-columns: 1fr;
  }
  .start li::before {
    font-size: 72px;
  }
  .doubt h2 {
    font-size: 72px;
  }
}
@media (max-width: 767px) {
  /* под шапкой-капсулой текст уходит в фон, а не читается сквозь неё */
  body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    z-index: 9;
    height: 80px;
    background: linear-gradient(var(--bg) 60%, #0000);
    pointer-events: none;
  }
  .what {
    font-size: 16px;
    line-height: 24px;
  }
  :root {
    --pad: 16px;
  }
  html {
    scroll-padding-top: 80px;
  }
  body {
    font-size: 16px;
    line-height: 24px;
  }
  .bar .btn {
    display: none;
  }
  .hero {
    padding: 88px 0 0;
  }
  .clock {
    font-size: 38vw;
  }
  .hero .txt {
    max-width: none;
    margin-top: 16px;
  }
  h1 {
    font-size: 36px;
    line-height: 40px;
    margin: 8px 0 12px;
  }
  .lead {
    font-size: 16px;
    line-height: 24px;
  }
  .cta {
    margin-top: 16px;
    font-size: 14px;
    line-height: 20px;
  }
  .hero .phone {
    position: relative;
    right: auto;
    top: auto;
    --w: 240px;
    margin: 32px auto -330px;
  }
  .hour,
  .hour.flip {
    grid-template-columns: minmax(0, 1fr);
    padding: 64px var(--pad);
  }
  .time {
    font-size: 31vw;
  }
  .flip .time {
    text-align: left;
  }
  .hour .txt,
  .hour.flip .txt {
    grid-column: 1;
    margin-top: 16px;
  }
  .hour .txt p:not(.what) {
    font-size: 16px;
    line-height: 24px;
  }
  .doubt {
    margin: 24px 8px;
    border-radius: 32px;
    padding: 64px 16px;
  }
  .hour .phone,
  .hour.flip .phone {
    grid-column: 1;
    grid-row: 3;
    --w: 240px;
    margin: 40px auto 0;
  }
  .hour .talk {
    grid-column: 1;
    grid-row: 3;
    margin-top: 32px;
  }
  .call {
    margin: 0 8px;
    border-radius: 32px;
    padding: 64px 16px;
  }
  .thesis {
    padding: 96px var(--pad);
  }
  .thesis p {
    font-size: 36px;
    line-height: 40px;
  }
  .start,
  .faq {
    padding: 64px var(--pad);
  }
  .faq summary {
    font-size: 20px;
    line-height: 28px;
  }
  .faq details p {
    padding-right: 0;
  }
  .end {
    padding: 64px var(--pad) 96px;
  }
  .end .clock {
    font-size: 23vw;
  }
}
@media (max-width: 359px) {
  h1 {
    font-size: 30px;
    line-height: 36px;
  }
  h2 {
    font-size: 30px;
    line-height: 36px;
  }
  .thesis p {
    font-size: 30px;
    line-height: 36px;
  }
  .btn {
    font-size: 16px;
    line-height: 24px;
    padding: 12px 16px;
  }
}

.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.stars {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, #f1ece0 99%, #0000),
    radial-gradient(1px 1px at 27% 62%, #f1ece0 99%, #0000), radial-gradient(2px 2px at 41% 31%, #f1ece0 99%, #0000),
    radial-gradient(1px 1px at 56% 78%, #f1ece0 99%, #0000),
    radial-gradient(1.5px 1.5px at 68% 22%, #f1ece0 99%, #0000),
    radial-gradient(1px 1px at 79% 55%, #f1ece0 99%, #0000), radial-gradient(2px 2px at 88% 12%, #f1ece0 99%, #0000),
    radial-gradient(1px 1px at 93% 84%, #f1ece0 99%, #0000), radial-gradient(1px 1px at 6% 71%, #f1ece0 99%, #0000),
    radial-gradient(1.5px 1.5px at 34% 91%, #f1ece0 99%, #0000), radial-gradient(1px 1px at 49% 8%, #f1ece0 99%, #0000),
    radial-gradient(1px 1px at 73% 93%, #f1ece0 99%, #0000);
}
:root[data-sky="night"] .stars {
  opacity: 0.8;
}
.now {
  font-weight: 800;
  font-size: 16px;
  line-height: 24px;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--clock);
  margin-right: 8px;
}

/* движение: только там, где его не просили убрать */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .btn,
  .round,
  .links a,
  .faq summary::after {
    transition: none;
  }
}
@media (prefers-reduced-motion: no-preference) {
  body {
    transition:
      background-color 1.4s var(--ease),
      color 1.4s var(--ease);
  }
  .stars {
    transition: opacity 2s var(--ease);
  }
  [popover] a,
  #menu .btn {
    transition:
      opacity 0.5s var(--ease),
      translate 0.5s var(--ease);
  }
  [popover] a:nth-of-type(2) {
    transition-delay: 60ms;
  }
  [popover] a:nth-of-type(3) {
    transition-delay: 0.12s;
  }
  [popover] a:nth-of-type(4) {
    transition-delay: 0.18s;
  }
  [popover] a:nth-of-type(5) {
    transition-delay: 0.24s;
  }
  [popover] a:nth-of-type(6) {
    transition-delay: 0.3s;
  }
  @starting-style {
    #menu:popover-open a {
      opacity: 0;
      translate: 0 24px;
    }
  }

  /* первый экран собирается на глазах: цифры встают, телефон поднимается */
  .hero .clock {
    animation: stand 1.1s var(--ease) both;
  }
  @keyframes stand {
    from {
      clip-path: inset(0 0 100% 0);
      translate: 0 12%;
    }
    to {
      clip-path: inset(-10% 0 -10% 0);
    }
  }
  .hero .lead,
  .hero .cta {
    animation: fade 0.9s var(--ease) 0.5s both;
  }
  .hero .cta {
    animation-delay: 0.65s;
  }
  .hero .phone {
    animation: lift 1.2s var(--ease) 0.35s both;
  }
  @keyframes fade {
    from {
      opacity: 0;
      translate: 0 24px;
    }
  }
  @keyframes lift {
    from {
      opacity: 0;
      translate: 0 96px;
      rotate: 4deg;
    }
  }

  /* разделы после дня входят сценой */
  .motion [data-in] {
    transition:
      opacity 0.9s var(--ease),
      translate 0.9s var(--ease),
      rotate 0.9s var(--ease),
      scale 0.9s var(--ease),
      clip-path 1.1s var(--ease);
  }
  /* строки одной группы входят по очереди */
  .motion [data-stagger] > * {
    transition:
      opacity 0.9s var(--ease),
      translate 0.9s var(--ease);
  }
  .motion [data-stagger] > :nth-child(2) {
    transition-delay: 0.1s;
  }
  .motion [data-stagger] > :nth-child(3) {
    transition-delay: 0.2s;
  }
  .motion [data-stagger] > :nth-child(4) {
    transition-delay: 0.3s;
  }
  .motion [data-stagger] > :nth-child(5) {
    transition-delay: 0.4s;
  }
  .motion [data-stagger] > :nth-child(6) {
    transition-delay: 0.5s;
  }
  .motion [data-stagger] > :nth-child(7) {
    transition-delay: 0.8s;
  }
  .motion [data-stagger]:not(.in) > * {
    opacity: 0;
    translate: 0 32px;
  }
  .motion .doubt[data-in]:not(.in) {
    clip-path: inset(38% 12% 38% 12% round 48px);
    opacity: 0;
  }
  .motion .doubt[data-in] {
    clip-path: inset(0 round 48px);
  }
  .motion .end .clock[data-in]:not(.in) {
    scale: 0.6;
    opacity: 0;
  }

  @supports (animation-timeline: view()) {
    /* первый экран уходит в глубину, пока его пролистывают */
    .hero .txt {
      animation: sink linear both;
      animation-timeline: scroll(root);
      animation-range: 0 90vh;
    }
    @keyframes sink {
      to {
        translate: 0 14vh;
        opacity: 0;
      }
    }
  }
}

/* день — одна закреплённая сцена: прокрутка двигает время вперёд и назад, цифры стоят на полу и отбрасывают тень по свету */
.staged .reel {
  height: 965vh;
}
.staged .stage {
  --edge: max(var(--pad), calc((100vw - 1280px) / 2 + var(--pad)));
  --phone: min(340px, 33svh, 26vw);
  /* цифры — по окну и так, чтобы ряд из пяти знаков (2,35 кегля) не дошёл до телефона справа */
  --dial: min(24vw, 34svh, calc(100svh - 540px), calc((100vw - var(--edge) * 2 - var(--phone) - 64px) / 2.4));
  --top: max(88px, calc((100svh - var(--dial) - 420px) / 2));
  --h: -0.56;
  --flood: 0;
  --up: 0;
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: clip;
}
.staged .stage::before,
.staged .stage::after {
  content: "";
  position: absolute;
  inset: 0;
}
/* свет дня — готовая картинка, которая только едет: её двигает композитор, перерисовки нет */
.staged .stage::before {
  inset: -90svh -20vw auto;
  height: 180svh;
  background: radial-gradient(closest-side, var(--glow), #0000 70%);
  translate: calc(var(--h) * 60vw) calc(var(--h) * var(--h) * 60svh);
  will-change: translate;
}
/* 11:20: из телефона расходится волна */
.staged .stage::after {
  background: var(--amber);
  clip-path: circle(calc(var(--flood) * 130vmax) at 80% 56%);
}
.dial {
  position: absolute;
  z-index: 1;
  left: var(--edge);
  top: var(--top);
  display: flex;
  font-weight: 800;
  font-size: var(--dial);
  line-height: 1;
  letter-spacing: -0.05em;
  font-variant-numeric: tabular-nums lining-nums;
  color: color-mix(in srgb, var(--amber), #10131c calc(var(--flood) * 100%));
}
.dial span {
  height: 1lh;
  overflow-y: clip;
}
.dial i {
  display: block;
  white-space: pre;
  font-style: normal;
  transition: translate 0.6s var(--ease);
}
.dial.cast {
  color: var(--cast);
  opacity: calc(1 - var(--h) * var(--h) * var(--h) * var(--h));
  transform-origin: 50% calc(var(--base, 0.8) * 100%);
  transform: skewX(calc(var(--h) * -58deg)) scaleY(calc(-0.42 - 0.8 * var(--h) * var(--h)));
  mask-image: linear-gradient(#0000, #000 85%);
  filter: blur(3px);
  will-change: transform;
}
/* короткий вариант слов первого экрана — только для сцены на телефоне */
.brief {
  display: none;
}
.staged .time,
.staged .hero .clock,
.staged .hero .phone {
  display: none;
}
/* первый экран — первая сцена: его держит прокрутка, а не анимация загрузки */
.staged .hero .txt,
.staged .hero .txt > * {
  animation: none;
}
.staged .stage > section {
  --q: -1;
  --e: clamp(0, 1 - var(--q) / 0.18, 1);
  --x: clamp(0, (var(--q) - 0.82) / 0.18, 1);
  --p: clamp(0, 1 - (var(--q) - 0.3) / 0.18, 1);
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
}
.staged .stage .txt {
  position: absolute;
  left: var(--edge);
  top: calc(var(--top) + var(--dial) + 24px);
  width: min(960px, calc(100vw - var(--edge) * 2 - var(--phone) - 48px));
  max-width: none;
  margin: 0;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto 1fr;
  gap: 12px 48px;
}
.staged .stage .txt > *,
.staged .stage .thesis p {
  opacity: calc(1 - var(--e) - var(--x));
  translate: 0 calc((var(--e) - var(--x)) * var(--d, 32px));
}
.staged .stage h2 {
  --d: 64px;
  grid-area: 2 / 1 / 4;
}
.staged .stage .txt p:not(.what) {
  --d: 96px;
  grid-column: 2;
}
.staged .stage .txt p:nth-child(3) {
  grid-row: 1 / 3;
}
.staged .stage .hero .txt {
  display: block;
  padding: 0;
  width: min(820px, calc(100vw - var(--edge) * 2 - var(--phone) - 48px));
}
/* один телефон на всю сцену: корпуса совпадают, экраны сменяются внутри */
.staged .stage .phone {
  position: absolute;
  right: var(--edge);
  top: 54%;
  --w: var(--phone);
  margin: 0;
  box-shadow: none;
  translate: 0 calc(-50% + (1 - var(--up)) * 110svh);
}
/* в телефоне — список чатов фирмы с папками; чат задачи открывается поверх него и уходит обратно в список */
.feed {
  z-index: 1;
  box-shadow:
    0 0 0 1px #ffffff26,
    calc(var(--h) * -64px) 40px 80px -24px #000a;
}
.feed .screen {
  position: relative;
  aspect-ratio: 640 / 1392;
  overflow: clip;
  border-radius: calc(var(--w) * 0.138);
  background: #fff;
  font:
    400 calc(var(--w) * 0.043) / 1.3 -apple-system,
    system-ui,
    sans-serif;
  color: #10131c;
}
.feed .list {
  position: absolute;
  inset: 0;
  padding: 16% 5% 0;
  display: grid;
  align-content: start;
  gap: 0.8em;
}
.feed .list > b {
  display: flex;
  justify-content: space-between;
  font-size: 1.5em;
}
.feed .list > b i {
  color: var(--blue);
  font-style: normal;
}
.feed .list small {
  padding: 0.5em 1em;
  font-size: inherit;
  border-radius: 999px;
  background: #10131c0f;
  color: #10131c80;
}
.feed .list div {
  display: flex;
  gap: 0.4em;
  font-size: 0.85em;
}
.feed .list div span,
.feed .list div i {
  padding: 0.35em 0.8em;
  border-radius: 999px;
  background: #10131c0f;
  font-style: normal;
}
.feed .list div i {
  background: var(--blue);
  color: #fff;
}
.feed .list ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.feed .list li {
  display: grid;
  grid-template-columns: 2.6em 1fr;
  column-gap: 0.7em;
  padding: 0.6em 0;
  border-bottom: 1px solid #10131c14;
}
.feed .list li[hidden] {
  display: none;
}
/* реплики других чатов уходят из ленты, но остаются читалке и поиску по странице */
.feed .talk .away {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.feed .list li::before {
  content: "";
  grid-row: 1 / 3;
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(160deg, #b7c3ee, #d9cdee);
}
.feed .list li span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  opacity: 0.6;
}
.feed .chat {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, #b7c3ee, #cfd3f3 60%, #d9cdee);
  box-shadow: 0 0 2em #0004;
  translate: calc((1 - var(--open, 1)) * 105%) 0;
}
.feed .chat::before,
.feed .chat::after {
  position: absolute;
  padding: 0.55em 1em;
  border-radius: 999px;
  background: #ffffffd9;
}
.feed .chat::before {
  content: "‹  " attr(data-title);
  white-space: nowrap;
  left: 50%;
  top: 8.5%;
  translate: -50% 0;
  font-weight: 600;
}
.feed .chat::after {
  content: "Спросите или поручите";
  inset: auto 4% 2.5%;
  color: #10131c80;
}
.feed .pane {
  position: absolute;
  inset: 15% 0 10.5%;
  overflow: clip;
  mask-image: linear-gradient(#0000, #000 12%);
}
.feed .talk {
  position: absolute;
  inset: auto 0 0;
  padding: 0 4% 3%;
  gap: 0.5em;
  border-radius: 0;
  background: none;
  font: inherit;
  translate: 0 var(--y, 0);
  transition: translate 0.5s var(--ease);
}
.feed .talk li {
  padding: 0.5em 0.8em;
  border-radius: 1.2em;
  transition:
    opacity 0.4s var(--ease),
    translate 0.4s var(--ease);
}
.feed .talk li:not(.on) {
  opacity: 0;
  translate: 0 1em;
}
/* экран приложения открывается из переписки: наезжает справа поверх ленты и уезжает обратно */
.staged .stage section .phone {
  border-color: #0000;
}
.staged .stage section .phone img,
.staged .stage .cut::after {
  translate: calc((var(--p) + var(--x)) * 100%) 0;
}
.staged .stage .thesis p {
  position: absolute;
  left: var(--edge);
  right: var(--edge);
  top: calc(var(--top) + var(--dial) + 32px);
  font-size: min(6vw, 11svh, calc((100vw - var(--edge) * 2) * 0.072));
  line-height: 1;
  opacity: calc(1 - var(--e));
}
.staged .stage .thesis span {
  opacity: clamp(0.42, 0.42 + (var(--q) - 0.15) * 20 - var(--i), 1);
}
@media (max-width: 1099px) {
  .staged .stage .txt {
    grid-template: none;
  }
  .staged .stage .txt > * {
    grid-area: auto;
  }
  .staged .stage .txt p:not(.what) {
    grid-area: auto;
    font-size: 18px;
    line-height: 24px;
  }
  .staged .stage h1 {
    font-size: 36px;
    line-height: 40px;
  }
  .staged .stage .lead {
    font-size: 18px;
    line-height: 24px;
  }
  /* на узкой сцене приписка у кнопки не помещается; она же стоит в конце страницы */
  .staged .stage .cta span {
    display: none;
  }
}
/* сцена вне кадра: текст остаётся читалке и поиску по странице, с экрана уходят только картинки и ссылки */
.staged .stage > .off {
  pointer-events: none;
}
.staged .stage > .off .txt > *,
.staged .stage > .off.thesis p {
  opacity: 0;
}
.staged .stage > .off .phone,
.staged .stage > .off a {
  visibility: hidden;
}

/* сцена на телефоне: сверху час и подпись сцены в одну строку; ниже слева заголовок и абзац, справа телефон с чатом */
@media (max-width: 899px) {
  .staged body::before {
    content: none;
  }
  .staged .stage {
    --edge: 16px;
    --dial: min(15vw, 9svh);
    /* сцена стоит по середине высоты: телефон справа задаёт её рост */
    --top: max(80px, calc((100svh - var(--phone) * 2.2 - var(--dial) - 16px) / 2 + 20px));
    --phone: min(50vw, 300px);
  }
  .staged .stage::after {
    clip-path: circle(calc(var(--flood) * 130vmax) at 76% 60%);
  }
  .staged .dial.cast {
    display: none;
  }
  .staged .stage .txt,
  .staged .stage .hero .txt {
    top: var(--top);
    right: var(--edge);
    display: block;
    width: auto;
  }
  .staged .stage .what {
    display: flex;
    align-items: end;
    min-height: var(--dial);
    margin: 0 0 12px calc(var(--dial) * 2.5 + 12px);
    font-size: 15px;
    line-height: 20px;
  }
  .staged .stage h1,
  .staged .stage h2 {
    margin: 0 0 8px;
    font-size: 22px;
    line-height: 26px;
  }
  .staged .stage h1 {
    font-size: 20px;
    line-height: 24px;
  }
  .staged .stage h1,
  .staged .stage h2,
  .staged .stage .txt p:not(.what) {
    max-width: calc(100% - var(--phone) - 12px);
  }
  .staged .stage .txt p:not(.what, .cta) {
    margin: 0;
    font-size: 14px;
    line-height: 20px;
  }
  .staged .full {
    display: none;
  }
  .staged .brief {
    display: inline;
  }
  /* в шапке вместо часов — кнопка: час показывают цифры сцены, а действие нужно в каждой сцене */
  .staged .bar .now {
    display: none;
  }
  .staged .bar .btn {
    display: inline-flex;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 20px;
  }
  .staged .stage .cta {
    margin-top: 12px;
  }
  .staged .stage .cta .btn {
    padding: 10px 14px;
    font-size: 15px;
    line-height: 20px;
    text-align: center;
    white-space: normal;
  }
  .staged .stage .phone {
    top: calc(var(--top) + var(--dial) + 16px);
    translate: 0 calc((1 - var(--up)) * 110svh);
  }
  /* экран узкий: реплики набраны крупнее, чем в масштабе телефона */
  .staged .feed .screen {
    font-size: calc(var(--w) * 0.06);
  }
  .staged .stage .thesis p {
    top: calc(var(--top) + var(--dial) + 24px);
    font-size: min(10vw, 7svh);
    line-height: 1.05;
  }
}
@media (max-width: 599px) {
  /* на узком телефоне на экране один абзац сцены; второй остаётся читалке и поиску */
  .staged .stage .txt p:not(.what) ~ p:not(.what, .cta) {
    position: absolute;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
  }
}
/* планшет в портрете: та же сцена, текст крупнее */
@media (min-width: 600px) and (max-width: 899px) {
  .staged .stage {
    --edge: 32px;
    --dial: 72px;
    --top: 96px;
  }
  .staged .stage .what {
    font-size: 18px;
    line-height: 24px;
  }
  .staged .stage h1,
  .staged .stage h2 {
    font-size: 36px;
    line-height: 40px;
  }
  .staged .stage .txt p:not(.what, .cta) {
    margin-bottom: 12px;
    font-size: 19px;
    line-height: 27px;
  }
  .staged .feed .screen {
    font-size: calc(var(--w) * 0.043);
  }
}
@media (max-width: 379px) {
  .staged .bar .btn {
    padding: 6px 10px;
    font-size: 13px;
  }
  .staged .bar .logo {
    margin-right: 0;
  }
}
/* приписка у кнопки возвращается, когда под кнопкой есть место */
@media (max-width: 899px) and (min-height: 640px) {
  .staged .stage .cta span {
    display: block;
    font-size: 12px;
    line-height: 16px;
  }
}