/* «Свет» — по сайту Delphi: одноцветный тёплый зал, сверху огромное овальное световое окно с толщиной края,
   изгиб пола и светящийся дверной проём по центру (здесь в проёме — небо этого дня), белый заголовок слева,
   широкая белая кнопка справа, сверху мелкое меню, логотип по центру и полупрозрачная таблетка,
   слева внизу «Наши дни» — затухающий список, по центру кнопка-стрелка, справа короткий текст. */

@property --h { syntax: "<number>"; inherits: true; initial-value: 18; }
:root {
  --font: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --g: clamp(18px, 3vw, 40px);
  --hz: 72vh;          /* линия горизонта */
  --dw: clamp(84px, 9.4vw, 150px);
  --dh: calc(var(--dw) * 1.82);
  --swap-out: 360ms;
  transition: --h 1.4s var(--ease);
  --p-font: var(--font); --p-radius: 14px; --p-bg: hsl(var(--h) 60% 12%); --p-ink: #fff; --p-dim: rgba(255, 255, 255, .62); --p-line: rgba(255, 255, 255, .1);
  --p-accent: hsl(var(--h) 100% 70%); --p-btn-bg: #fff; --p-btn-ink: #111; --p-top: calc(70px + var(--sat)); --p-right: var(--g);
  --g-bg: hsl(var(--h) 60% 8%); --g-accent: hsl(var(--h) 100% 62%);
}
html, body { background: hsl(var(--h) 80% 30%); }
body { font-family: var(--font); color: #fff; }

/* ——— зал ——— */
.room { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background:
    radial-gradient(70% 55% at 50% 42%, hsl(var(--h) 92% 50%) 0%, hsl(var(--h) 90% 42%) 45%, hsl(var(--h) 86% 30%) 80%, hsl(var(--h) 80% 22%) 100%); }
.skylight { position: absolute; left: 50%; top: calc(-1 * clamp(40px, 7vw, 130px)); width: clamp(420px, 66vw, 1200px); aspect-ratio: 2.45; transform: translateX(-50%); }
.sl-band { position: absolute; inset: 0; border-radius: 50%; background: linear-gradient(180deg, hsl(var(--h) 96% 52%), hsl(var(--h) 100% 48%)); box-shadow: 0 0 120px 30px hsl(calc(var(--h) + 8) 100% 55% / .45); }
.sl-glow { position: absolute; left: 1.4%; right: 1.4%; top: 0; bottom: 9%; border-radius: 50%; background: radial-gradient(60% 70% at 50% 45%, hsl(calc(var(--h) + 30) 100% 72%) 0%, hsl(calc(var(--h) + 20) 100% 62%) 40%, hsl(calc(var(--h) + 8) 100% 54%) 75%, hsl(var(--h) 100% 50%) 100%); }
.floor { position: absolute; left: -25vw; right: -25vw; top: var(--hz); height: 90vh; border-radius: 50% 50% 0 0 / 14% 14% 0 0; background: linear-gradient(180deg, hsl(var(--h) 92% 40%) 0%, hsl(var(--h) 88% 28%) 40%, hsl(var(--h) 80% 18%) 100%); box-shadow: inset 0 1px 0 hsl(calc(var(--h) + 20) 100% 72% / .55), 0 -30px 60px -30px hsl(var(--h) 100% 60% / .5); }
.door-ref { position: absolute; left: 50%; top: var(--hz); width: var(--dw); height: calc(var(--dh) * .7); transform: translateX(-50%); background: linear-gradient(180deg, hsl(calc(var(--h) + 20) 100% 66% / .55), hsl(var(--h) 100% 55% / 0)); filter: blur(2px); }
.door {
  position: fixed; z-index: 1; overflow: hidden; isolation: isolate;
  left: calc(50% - var(--dw) / 2); top: calc(var(--hz) - var(--dh)); width: var(--dw); height: var(--dh);
  border-radius: 6px; background: hsl(calc(var(--h) + 20) 100% 64%);
  box-shadow: 0 0 0 1px hsl(calc(var(--h) + 25) 100% 75% / .7), 0 0 70px 14px hsl(calc(var(--h) + 15) 100% 60% / .55);
  transition: left .8s var(--ease-film), top .8s var(--ease-film), width .8s var(--ease-film), height .8s var(--ease-film), border-radius .8s var(--ease-film);
}
.door .ph.is-on img.is-ready { animation: none; }
body.is-sky .door { left: 0; top: 0; width: 100vw; height: 100vh; height: 100svh; border-radius: 0; }

/* ——— верх ——— */
.top { position: fixed; z-index: 30; top: 0; left: 0; right: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: calc(var(--g) * .8 + var(--sat)) var(--g) 0; }
.top-l { display: flex; gap: 26px; }
.top-l button { font: 500 14px/1 var(--font); color: #fff; opacity: .92; }
.top-l button:hover, .top-l button[aria-pressed="true"] { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.logo { justify-self: center; display: inline-flex; align-items: center; gap: 6px; font: 600 15px/1 var(--font); color: #fff; letter-spacing: -.01em; }
.logo i { font-style: normal; font-weight: 400; }
.pill { justify-self: end; display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 16px 0 12px; border-radius: 8px; background: rgba(255, 255, 255, .18); font: 500 13.5px/1 var(--font); color: #fff; }
.pill i { width: 14px; height: 10px; border-radius: 2px; background: linear-gradient(180deg, #fff 0 33%, hsl(var(--h) 100% 70%) 33% 66%, hsl(var(--h) 90% 45%) 66%); }

/* ——— тексты ——— */
.screen { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.screen > * { pointer-events: auto; }
.head { position: absolute; left: var(--g); top: 46vh; transform: translateY(-50%); width: min(37vw, 560px); margin: 0; font: 400 clamp(32px, 4.4vw, 66px)/1.04 var(--font); letter-spacing: -.035em; color: #fff; text-wrap: balance; text-shadow: 0 2px 30px hsl(var(--h) 80% 25% / .35); }
.cta { position: absolute; right: var(--g); top: 46vh; transform: translateY(-50%); width: min(27vw, 330px); height: 46px; border-radius: 10px; background: #fff; color: #111; font: 600 15.5px/1 var(--font); letter-spacing: -.01em; transition: transform .2s var(--ease); }
.cta:hover { transform: translateY(calc(-50% - 1px)); }
.info { position: absolute; right: var(--g); bottom: calc(var(--g) + var(--sab)); width: min(32vw, 420px); text-align: right; display: flex; flex-direction: column; gap: 8px; }
.info b { font: 600 15px/1.3 var(--font); color: #fff; }
.info span { font: 400 13.5px/1.45 var(--font); color: rgba(255, 255, 255, .72); }
[data-swap].is-out { opacity: 0; filter: blur(6px); }

/* ——— «Наши дни» и стрелка ——— */
.days { position: fixed; z-index: 20; left: var(--g); bottom: calc(var(--g) + var(--sab)); max-width: 46vw; }
.days-label { margin: 0 0 10px; font: 600 14px/1 var(--font); color: #fff; }
.tl-line { display: none; }
.tl-track { gap: 22px; }
.tl-dot { display: flex; align-items: center; color: #fff; opacity: .5; transition: opacity .4s; }
.tl-pin { display: none; }
.tl-label { font: 500 13.5px/1 var(--font); white-space: nowrap; }
.tl-num { display: none; }
.tl-dot.is-active { opacity: 1; }
.tl-dot.is-active + .tl-dot { opacity: .62; }
.tl-dot.is-active + .tl-dot + .tl-dot { opacity: .42; }
.tl-dot.is-active + .tl-dot + .tl-dot + .tl-dot ~ .tl-dot { opacity: .26; }
.tl-dot:hover { opacity: 1; }
body[data-mode="intro"] .tl { visibility: visible; opacity: 1; pointer-events: auto; }
.chev { position: fixed; z-index: 20; left: 50%; bottom: calc(var(--g) + var(--sab)); width: 38px; height: 38px; margin-left: -19px; border-radius: 8px; background: rgba(255, 255, 255, .18); color: #fff; display: grid; place-items: center; }
.chev svg { width: 16px; height: 16px; }
body[data-mode="finale"] .chev { opacity: .3; pointer-events: none; }

/* ——— телефон ——— */
@media (max-width: 760px) {
  :root { --hz: 66svh; --dw: 34vw; --dh: 46vw; }
  .skylight { width: 150vw; top: -12vw; }
  .top { grid-template-columns: auto 1fr auto; }
  .logo { grid-column: 1; grid-row: 1; justify-self: start; }
  .top-l { grid-column: 1 / -1; grid-row: 2; gap: 18px; margin-top: 12px; }
  .top-l button { font-size: 13px; }
  .pill { grid-column: 3; grid-row: 1; }
  .head { top: 24svh; transform: none; width: auto; right: var(--g); font-size: 32px; }
  .cta { top: auto; bottom: calc(var(--g) + 92px + var(--sab)); transform: none; left: var(--g); right: var(--g); width: auto; }
  .cta:hover { transform: none; }
  .info { display: none; }
  .days { max-width: calc(100vw - 2 * var(--g) - 50px); }
  .chev { left: auto; right: var(--g); margin: 0; }
  .door { top: calc(var(--hz) - var(--dh)); }
}
@media (max-height: 520px) {
  :root { --hz: 74vh; --dw: 9vw; }
  .info { display: none; }
  .head { top: 50vh; }
}