/* «Восход» — по минималистичному сайту с жёлтым солнцем: белая страница, снизу поднимается мягкое
   цветное солнце-градиент, крошечный контурный логотип слева вверху, тонкие значки и строки
   «9:00 Fair Opens» слева внизу — здесь это таймлайн дней. Почти ничего лишнего. */

@property --sun-h { syntax: "<number>"; inherits: true; initial-value: 46; }
@property --rise { syntax: "<number>"; inherits: true; initial-value: 0; }
:root {
  --font: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --ink: #1a1a1a;
  --g: clamp(20px, 3.4vw, 46px);
  --sun: hsl(var(--sun-h) 96% 52%);
  --swap-out: 420ms;
  transition: --sun-h 1.6s var(--ease), --rise 1.6s var(--ease-film);
  --p-font: var(--font); --p-radius: 4px; --p-accent: #8a8a8a; --p-btn-bg: var(--ink); --p-top: 70px; --p-right: var(--g);
  --g-bg: #f6f3ea; --g-ink: rgba(26, 26, 26, .55); --g-line: rgba(26, 26, 26, .1); --g-accent: hsl(var(--sun-h) 96% 48%);
}
html, body { background: #fff; }
body { font-family: var(--font); color: var(--ink); }

/* ——— солнце ——— */
.sun { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sun-core, .sun-halo { position: absolute; left: 50%; border-radius: 50%; transform: translateX(-50%); }
.sun-core {
  width: max(150vw, 1100px); aspect-ratio: 1.55; bottom: calc(-1 * max(150vw, 1100px) / 1.55 * (.62 - var(--rise) * .16));
  background: radial-gradient(closest-side, var(--sun) 0%, hsl(var(--sun-h) 96% 56% / .92) 34%, hsl(var(--sun-h) 96% 66% / .55) 58%, hsl(var(--sun-h) 100% 80% / .18) 80%, hsl(var(--sun-h) 100% 92% / 0) 100%);
  animation: breathe 9s ease-in-out infinite;
}
.sun-halo {
  width: max(190vw, 1400px); aspect-ratio: 1.6; bottom: calc(-1 * max(190vw, 1400px) / 1.6 * (.55 - var(--rise) * .14));
  background: radial-gradient(closest-side, hsl(var(--sun-h) 100% 70% / .22), hsl(var(--sun-h) 100% 90% / 0) 100%);
}
@keyframes breathe { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.035); } }
@media (prefers-reduced-motion: reduce) { .sun-core { animation: none; } }
.sky-full { position: fixed; inset: 0; z-index: 50; opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility 0s linear .6s; }
body.is-sky .sky-full { opacity: 1; visibility: visible; transition: opacity .6s var(--ease), visibility 0s; }

/* ——— логотип ——— */
.top { position: fixed; z-index: 30; top: calc(var(--g) + var(--sat)); left: var(--g); }
.logo { width: 34px; height: 22px; color: var(--ink); display: block; }
.logo svg { width: 100%; height: 100%; display: block; }

/* ——— текст ——— */
.screen { position: fixed; z-index: 10; left: var(--g); right: var(--g); top: calc(var(--g) + 64px + var(--sat)); display: flex; }
.copy { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 560px; }
.title { margin: 0; font: 400 clamp(26px, 2.6vw, 38px)/1.15 var(--font); letter-spacing: -.025em; color: var(--ink); text-wrap: balance; }
.note { margin: 0; max-width: 40ch; font: 400 15px/1.5 var(--font); color: #7a7a7a; text-wrap: pretty; }
.go { margin-top: 4px; font: 400 15px/1 var(--font); color: var(--ink); padding: 6px 0; border-bottom: 1px solid var(--ink); }
.go:hover { border-bottom-color: transparent; }
[data-swap].is-out { transform: translateY(6px); }

/* ——— левый нижний угол: значки и таймлайн ——— */
.corner { position: fixed; z-index: 20; left: var(--g); bottom: calc(var(--g) + var(--sab)); display: flex; flex-direction: column; gap: 22px; max-width: calc(100vw - 2 * var(--g)); }
.icons { display: flex; gap: 18px; }
.icons button { width: 16px; height: 16px; color: var(--ink); }
.icons button svg { width: 100%; height: 100%; display: block; }
.icons button[aria-pressed="true"] { color: hsl(var(--sun-h) 90% 40%); }
.tl-line { display: none; }
.tl-track { flex-direction: column; gap: 9px; overflow: visible; }
.tl-dot { display: flex; align-items: baseline; color: rgba(26, 26, 26, .4); text-align: left; }
.tl-pin { display: none; }
.tl-label { display: flex; gap: 14px; font: 400 15px/1.2 var(--font); white-space: nowrap; }
.tl-num { display: inline; min-width: 2.6ch; font-variant-numeric: tabular-nums; }
.tl-dot.is-active { color: var(--ink); }
.tl-dot:hover { color: #555; }
body[data-mode="intro"] .tl { visibility: visible; opacity: 1; pointer-events: auto; }
.credit { position: fixed; z-index: 20; right: var(--g); bottom: calc(var(--g) + var(--sab)); margin: 0; }
.credit button { font: 400 11px/1.3 var(--font); color: rgba(26, 26, 26, .5); }

@media (max-width: 600px) {
  .title { font-size: 26px; }
  .credit { left: var(--g); right: auto; bottom: calc(8px + var(--sab)); }
  .corner { bottom: calc(var(--g) + 18px + var(--sab)); }
  .tl-track { flex-direction: row; gap: 18px; overflow-x: auto; }
  .tl-dot { flex-direction: column; }
  .tl-label { flex-direction: column; gap: 4px; font-size: 14px; }
}
@media (max-height: 520px) {
  .screen { top: calc(var(--g) + 40px); }
  .tl-track { flex-direction: row; gap: 18px; }
  .corner { gap: 12px; }
}