/* Вариант 9 — «Сфера». Из панели «Где это на небе», которая понравилась: молочная страница,
   большая тёмная сфера со звёздами настоящих цветов, линиями созвездий и Млечным Путём,
   «своё» созвездие и пульсирующая точка — коралловым. Снимок раскрывается из точки прямо в сфере. */

:root {
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "Nunito", system-ui, sans-serif;
  --page: #fbf6f0;
  --ink: #1f1719;
  --gray: #7d7174;
  --sf-accent: #ff7451;
  --sf-disc: #261a2c;
  --sf-disc-edge: #0f0a12;
  --sf-line: rgba(255, 246, 236, .085);
  --sf-cline: rgba(255, 246, 236, .2);
  --sf-halo: rgba(255, 140, 110, .26);
  --sf-mw: rgba(214, 196, 255, .07);
  --g: clamp(16px, 3vw, 52px);
  --top: calc(64px + var(--sat));
  --bottom: calc(92px + var(--sab));
  --S: min(calc(100svh - var(--top) - var(--bottom) + 30px), 52vw);
  --swap-out: 340ms;
}
html, body { background: var(--page); }
body { font-family: var(--sans); color: var(--ink); }
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(70% 60% at 25% 50%, color-mix(in srgb, var(--tint) 40%, transparent), transparent 70%); opacity: .55; transition: opacity .6s; }
:focus-visible { outline-color: var(--sf-accent); }

/* ——— сфера ——— */
.sphere-slot { position: fixed; left: calc(var(--g) - 2vw + var(--sal)); top: calc(var(--top) - 15px); width: var(--S); height: calc(100svh - var(--top) - var(--bottom) + 30px); pointer-events: none; }
.sphere-canvas { position: fixed; z-index: 1; display: block; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.sphere-canvas.is-explore { touch-action: none; cursor: grab; }
.sphere-canvas.is-drag { cursor: grabbing; }
.lens {
  position: fixed; inset: auto; z-index: 2; overflow: hidden; background: #120c14;
  clip-path: circle(0% at 50% 50%);
  transition: clip-path .9s var(--ease-film);
}
.lens.is-open { clip-path: circle(50% at 50% 50%); }
.lens.is-instant { transition: none; }
.lens.is-flying { transition: clip-path .7s var(--ease-film), left .7s var(--ease-film), top .7s var(--ease-film), width .7s var(--ease-film), height .7s var(--ease-film), border-radius .7s var(--ease-film); }
body.is-sky .lens { clip-path: circle(75% at 50% 50%); }
.lens .ph.is-on img.is-ready { animation: none; }
body.is-sky .sphere-canvas { opacity: 0; transition: opacity .5s; }

/* ——— верх ——— */
.top {
  position: fixed; z-index: 30; top: 0; left: 0; right: 0; height: var(--top);
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sat) calc(var(--g) + var(--sar)) 0 calc(var(--g) + var(--sal));
}
.brand { display: inline-flex; align-items: center; gap: 10px; font: 700 20px/1 var(--sans); letter-spacing: -.01em; color: var(--ink); }
.brand i { width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #4a3550, #140d16); box-shadow: inset 0 0 0 1.5px rgba(255, 116, 81, .9); position: relative; }
.brand i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px; border-radius: 50%; background: var(--sf-accent); }
.top-nav { display: flex; align-items: center; gap: 24px; }
.top-nav button { font: 600 15px/1 var(--sans); color: var(--ink); opacity: .72; transition: opacity .2s; }
.top-nav button:hover, .top-nav button[aria-pressed="true"] { opacity: 1; }
.counter { font: 600 13.5px/1 var(--sans); color: var(--gray); font-variant-numeric: tabular-nums; letter-spacing: .03em; }

/* ——— тексты справа ——— */
.screen {
  position: fixed; z-index: 10; top: var(--top); bottom: var(--bottom);
  left: calc(var(--g) * 1.4 + var(--S) + var(--sal)); right: calc(var(--g) + var(--sar));
  display: flex; flex-direction: column; justify-content: center;
}
.copy { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(10px, 1.7vh, 18px); max-width: 640px; }
.kick { margin: 0; font: 700 12.5px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gray); }
.title { margin: 0; width: 100%; font: 500 clamp(34px, 4.6vw, 76px)/1.02 var(--serif); letter-spacing: -.03em; color: var(--ink); font-optical-sizing: auto; text-wrap: balance; }
.sub { margin: 0; max-width: 38ch; font: 500 clamp(16px, 1.3vw, 19px)/1.5 var(--sans); color: #4c4245; text-wrap: pretty; }
.place { margin: 4px 0 2px; padding-left: 16px; border-left: 2px solid var(--sf-accent); }
.place p { margin: 0; }
.place-name { font: 500 clamp(22px, 2vw, 30px)/1.1 var(--serif); letter-spacing: -.02em; color: var(--ink); }
.place-small { margin-top: 3px !important; font: 500 15px/1.35 var(--sans); color: var(--gray); }
.place-coords { font: 500 13px/1.4 var(--sans); color: #a0959a; }
.buttons { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.btn { display: inline-flex; align-items: center; gap: 10px; height: 50px; padding: 0 24px; border-radius: 999px; font: 700 16px/1 var(--sans); letter-spacing: -.005em; text-decoration: none; transition: transform .2s var(--ease), background .25s, box-shadow .25s; }
.btn i { font-style: normal; }
.btn--dark { background: var(--ink); color: #fff; box-shadow: 0 12px 30px -14px rgba(31, 23, 25, .6); }
.btn--dark:hover { transform: translateY(-1px); }
.btn--light { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 1.5px #e6dcd4; }
.btn--light:hover { box-shadow: inset 0 0 0 1.5px var(--sf-accent); }
.btn--light[aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px var(--sf-accent); color: #c2462a; }
.phrase { margin: 0; font: 500 13.5px/1.4 var(--sans); color: var(--gray); }
.hint { margin: 6px 0 0; display: flex; align-items: center; gap: 10px; font: 600 13.5px/1.3 var(--sans); color: var(--gray); }
.hint i { width: 9px; height: 9px; border-radius: 50%; background: var(--sf-accent); box-shadow: 0 0 0 0 rgba(255, 116, 81, .5); animation: ping 1.8s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 10px rgba(255, 116, 81, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 116, 81, 0); } }
.intro .title { font-size: clamp(42px, 6.4vw, 108px); }

[data-swap].is-out { transform: translateX(12px); }
body[data-dir="prev"] [data-swap].is-out { transform: translateX(-12px); }

/* ——— таймлайн ——— */
.tl { position: fixed; z-index: 20; left: 0; right: 0; bottom: calc(26px + var(--sab)); padding: 0 calc(var(--g) + var(--sar)) 0 calc(var(--g) + var(--sal)); }
.tl-line { display: none; }
.tl-track { gap: 0; }
.tl-track::before, .tl-track::after { content: ""; flex: 1 0 0px; }
.tl-dot { display: flex; align-items: center; gap: 10px; min-height: 42px; padding-right: 26px; color: #9a8f93; }
.tl-dot::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #e4dad2; }
.tl-pin { position: relative; z-index: 1; flex: none; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #4a3550, #140d16); box-shadow: 0 0 0 4px var(--page); transition: transform .35s var(--ease), box-shadow .35s; }
.tl-label { position: relative; z-index: 1; padding-right: 8px; background: var(--page); font: 600 14px/1 var(--sans); white-space: nowrap; }
.tl-date { margin-right: 6px; color: #b0a5a9; }
.tl-dot.is-active { color: var(--ink); }
.tl-dot.is-active .tl-pin { transform: scale(1.3); box-shadow: 0 0 0 3px var(--page), 0 0 0 5px var(--sf-accent); }
.tl-dot:hover { color: var(--ink); }
.credit { position: fixed; z-index: 20; right: calc(var(--g) + var(--sar)); bottom: calc(6px + var(--sab)); margin: 0; }
.credit button { font: 500 11px/1.2 var(--sans); color: #a0959a; }

/* «Только небо»: подсказка и кнопка возврата — на тёмном снимке */
.sky-return { background: rgba(0, 0, 0, .35); }

/* ——— панель ——— */
.panel {
  left: 8px; right: 8px; bottom: calc(8px + var(--sab));
  max-height: calc(100svh - 80px - var(--sat)); overflow: auto; overscroll-behavior: contain;
  padding: 22px 22px 20px; border-radius: 28px; background: #fffaf6; color: var(--ink); font: 500 15px/1.45 var(--sans);
  box-shadow: 0 34px 90px -24px rgba(40, 20, 20, .4), inset 0 0 0 1px #efe5dd;
}
.panel-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; font: 400 26px/1 var(--sans); color: #6d6266; }
.panel-close:hover { background: #f2e9e4; }
.panel-kick { margin: 0 44px 6px 0; font: 700 12px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--gray); }
.panel-title { margin: 0 44px 8px 0; font: 500 28px/1.04 var(--serif); letter-spacing: -.025em; }
.panel-lead { margin: 0 0 4px; font-weight: 700; }
.panel-small { margin: 0 0 12px; color: #6f6368; font-size: 14px; }
.panel-list { display: grid; grid-template-columns: 112px 1fr; gap: 7px 12px; margin: 12px 0 16px; font-size: 14px; }
.panel-list dt { color: #8f8287; }
.panel-list dd { margin: 0; }
@media (min-width: 760px) { .panel { left: auto; right: calc(var(--g) + var(--sar)); top: calc(var(--top) + 10px); bottom: auto; width: 420px; } }

/* ——— телефон и узкие экраны: сфера сверху, текст под ней ——— */
@media (max-aspect-ratio: 1/1) {
  :root { --top: calc(58px + var(--sat)); --bottom: calc(76px + var(--sab)); --S: min(calc(100vw - 2 * var(--g) + 40px), 50svh); }
  .sphere-slot { left: 0; right: 0; width: auto; top: calc(var(--top) - 16px); height: var(--S); }
  .screen { left: calc(var(--g) + var(--sal)); right: calc(var(--g) + var(--sar)); top: calc(var(--top) + var(--S) - 22px); justify-content: flex-start; }
  .intro .screen, .screen.intro { justify-content: flex-start; }
  .copy { max-width: none; gap: 9px; }
  .title { font-size: 32px; }
  .intro .title { font-size: 44px; }
  .sub { font-size: 15.5px; }
  .place { margin: 0; padding-left: 12px; }
  .place-name { font-size: 21px; }
  .place-small { font-size: 13.5px; }
  .place-coords { display: none; }
  .btn { height: 46px; padding: 0 20px; font-size: 15px; }
  .phrase { display: none; }
  .hint { display: none; }
  .top-nav { gap: 16px; }
  .top-nav button { font-size: 14px; }
  .counter { display: none; }
  .tl { bottom: calc(18px + var(--sab)); }
  .credit { left: var(--g); right: var(--g); text-align: center; bottom: calc(4px + var(--sab)); }
  .credit button { font-size: 10.5px; }
  body::before { background: radial-gradient(90% 40% at 50% 28%, color-mix(in srgb, var(--tint) 40%, transparent), transparent 70%); }
}
@media (max-aspect-ratio: 1/1) and (max-height: 700px) {
  .sub { display: none; }
}
@media (max-aspect-ratio: 1/1) and (min-height: 760px) {
  .phrase { display: block; }
}
/* телефон боком */
@media (max-height: 520px) {
  :root { --top: calc(46px + var(--sat)); --bottom: calc(52px + var(--sab)); --S: calc(100svh - var(--top) - var(--bottom) + 30px); }
  .brand { font-size: 17px; }
  .title { font-size: 26px; }
  .intro .title { font-size: 34px; }
  .copy { gap: 7px; }
  .sub { font-size: 13.5px; }
  .place-coords, .phrase, .hint { display: none; }
  .btn { height: 38px; font-size: 14px; }
  .tl { bottom: calc(8px + var(--sab)); }
  .tl-dot { min-height: 34px; }
  .credit { display: none; }
}