/* Вариант 7 — «Воздух». Референс: Lassie — тёплая светлая страница, сверху меню в одной капсуле
   (белая плитка-логотип, белые кнопки и одна без подложки), большая карточка со скруглёнными углами
   и мягким снимком, по центру белый значок, спокойная антиква и полупрозрачное поле с белой кнопкой. */

:root {
  --serif: "Literata", Georgia, serif;
  --sans: "Manrope", system-ui, sans-serif;
  --page: #f6f4ef;
  --ink: #23201d;
  --card-top: calc(78px + var(--sat));
  --card-bottom: calc(92px + var(--sab));
  --side: clamp(10px, 2.2vw, 36px);
  --swap-out: 360ms;
}
html, body { background: var(--page); }
body { font-family: var(--sans); color: #fff; }

/* ——— меню-капсула ——— */
.top { position: fixed; z-index: 30; top: calc(14px + var(--sat)); left: 0; right: 0; display: flex; justify-content: center; pointer-events: none; }
.seg { pointer-events: auto; display: flex; align-items: center; gap: 4px; padding: 5px; border-radius: 16px; background: #ebe8e1; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .03); }
.seg-logo { width: 46px; height: 42px; display: grid; place-items: center; border-radius: 11px; background: #fff; color: var(--ink); }
.seg-logo svg { width: 24px; height: 17px; }
.seg-item { height: 42px; padding: 0 15px; border-radius: 11px; font: 500 15px/1 var(--sans); color: var(--ink); letter-spacing: -.01em; transition: background .2s; }
.seg-item--on { background: #fff; }
.seg-item:hover { background: #fff; }
.seg-item[aria-pressed="true"] { background: var(--ink); color: #fff; }
body[data-mode="intro"] .seg-item, body[data-mode="finale"] .seg-item:not([data-action="about"]) { display: none; }
body.is-sky .top { opacity: 1 !important; visibility: visible !important; pointer-events: none !important; }
body.is-sky .seg { pointer-events: auto; }
body.is-sky .seg-item:not([data-action="sky"]) { display: none; }

/* ——— карточка ——— */
.card {
  position: fixed; z-index: 1; overflow: hidden; isolation: isolate;
  top: var(--card-top); bottom: var(--card-bottom); left: calc(var(--side) + var(--sal)); right: calc(var(--side) + var(--sar));
  border-radius: clamp(28px, 3.4vw, 56px); background: #d7cfc2;
  transition: bottom .7s var(--ease);
}
body.is-sky .card { bottom: calc(var(--side) + var(--sab)); }
.soft { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, rgba(0, 0, 0, 0) 40%, rgba(20, 14, 10, .28) 100%); transition: opacity .6s; }
body.is-sky .soft { opacity: 0; }

/* ——— экраны ——— */
.screen {
  position: fixed; z-index: 10; top: var(--card-top); bottom: var(--card-bottom); left: calc(var(--side) + var(--sal)); right: calc(var(--side) + var(--sar));
  display: flex; flex-direction: column; justify-content: center;
  padding: 6vh clamp(20px, 8vw, 160px);
}
.copy { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(12px, 2vh, 22px); width: 100%; max-width: 1000px; margin: 0 auto; }
.copy::before { content: ""; position: absolute; z-index: -1; inset: -14% -10%; background: radial-gradient(closest-side, rgba(25, 16, 12, .32), rgba(25, 16, 12, 0)); pointer-events: none; }
.mark { width: clamp(70px, 7vw, 116px); height: auto; aspect-ratio: 64 / 44; color: #fff; filter: drop-shadow(0 6px 24px rgba(0, 0, 0, .18)); }
.mark--small { width: clamp(46px, 4.4vw, 70px); }
.head {
  margin: 0; width: 100%;
  font: 400 clamp(32px, 4.6vw, 80px)/1.06 var(--serif); letter-spacing: -.025em; color: #fff;
  font-optical-sizing: auto; text-wrap: balance; text-shadow: 0 2px 30px rgba(0, 0, 0, .25);
}
.head [data-fit-line] { display: block; white-space: nowrap; overflow: hidden; }
.field {
  display: flex; align-items: center; gap: 10px; padding: 5px 5px 5px 20px; border-radius: 13px;
  background: rgba(250, 244, 236, .26); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
  max-width: 100%;
}
.field-text { min-width: 0; font: 500 15px/1.2 var(--sans); color: rgba(255, 255, 255, .9); text-align: left; padding-right: 8px; }
.field-dim { opacity: .7; }
.field-btn { flex: none; height: 44px; padding: 0 18px; border-radius: 10px; background: #fff; color: var(--ink); font: 600 15px/1 var(--sans); letter-spacing: -.01em; transition: transform .2s; }
.field-btn:hover { transform: translateY(-1px); }
.note { margin: 0; max-width: 40ch; font: 400 clamp(15px, 1.2vw, 18px)/1.5 var(--sans); color: rgba(255, 255, 255, .92); text-shadow: 0 1px 16px rgba(0, 0, 0, .3); }

/* положение текста */
body[data-ty="top"] .scene { justify-content: flex-start; }
body[data-ty="bottom"] .scene { justify-content: flex-end; }
body[data-tx="left"] .scene .copy { align-items: flex-start; text-align: left; margin-left: 0; }
body[data-tx="right"] .scene .copy { align-items: flex-end; text-align: right; margin-right: 0; }

[data-swap].is-out { transform: translateY(10px); filter: blur(4px); }

/* ——— таймлайн и подпись на светлом ——— */
.tl { position: fixed; z-index: 20; left: 0; right: 0; bottom: calc(30px + var(--sab)); padding: 0 calc(var(--side) + 12px + var(--sar)) 0 calc(var(--side) + 12px + var(--sal)); color: var(--ink); }
.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: 9px; min-height: 40px; padding-right: 24px; color: #8e877d; }
.tl-dot::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #dcd7ce; }
.tl-pin { position: relative; z-index: 1; flex: none; width: 9px; height: 9px; border-radius: 50%; background: #c9c2b6; box-shadow: 0 0 0 4px var(--page); transition: transform .3s, background .3s; }
.tl-label { position: relative; z-index: 1; padding-right: 8px; background: var(--page); font: 500 13.5px/1 var(--sans); white-space: nowrap; }
.tl-date { margin-right: 6px; color: #a59d92; }
.tl-dot.is-active { color: var(--ink); }
.tl-dot.is-active .tl-pin { background: var(--ink); transform: scale(1.35); }
.tl-dot:hover { color: var(--ink); }
.credit { position: fixed; z-index: 20; left: calc(var(--side) + 14px + var(--sal)); right: calc(var(--side) + 14px + var(--sar)); bottom: calc(8px + var(--sab)); margin: 0; text-align: center; font: 400 11.5px/1.2 var(--sans); color: #8e877d; }
.credit button { font: inherit; color: inherit; }
body[data-mode="intro"] .credit > span:first-child, body[data-mode="finale"] .credit > span:first-child { display: none; }

/* ——— панели ——— */
.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: 26px; background: #fffdf9; color: var(--ink); font: 400 15px/1.45 var(--sans);
  box-shadow: 0 30px 80px -24px rgba(60, 40, 20, .35);
}
.panel-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 12px; font: 300 26px/1 var(--sans); color: #6d665d; background: #f1eee8; }
.panel-kick { margin: 0 50px 8px 0; font: 500 12.5px/1.2 var(--sans); color: #8e877d; }
.panel-title { margin: 0 50px 8px 0; font: 400 28px/1.08 var(--serif); letter-spacing: -.02em; }
.panel-lead { margin: 0 0 4px; font-weight: 600; }
.panel-small { margin: 0 0 12px; color: #6d665d; 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: #8e877d; }
.panel-list dd { margin: 0; }
.panel-link { display: inline-flex; align-items: center; height: 44px; padding: 0 18px; border-radius: 11px; background: var(--ink); color: #fff; text-decoration: none; font-weight: 600; }
.panel--where { text-align: center; }
.panel--where canvas { width: min(240px, 64vw); margin: 4px auto 10px; --globe-bg: #2a2521; --globe-ink: rgba(255, 250, 242, .92); --globe-line: rgba(255, 250, 242, .15); --globe-accent: #ffb27a; }
.panel--where .panel-title { margin: 8px 0 4px; }
.panel-coords { font-size: 12.5px; margin-bottom: 0; }
@media (min-width: 760px) {
  .panel { left: auto; right: calc(var(--side) + 18px + var(--sar)); top: calc(var(--card-top) + 18px); bottom: auto; width: 420px; }
  .panel--where { width: 340px; }
}

@media (max-width: 600px) {
  .seg { gap: 3px; padding: 4px; border-radius: 14px; }
  .seg-logo { width: 40px; height: 38px; }
  .seg-item { height: 38px; padding: 0 11px; font-size: 13.5px; }
  .screen { padding: 5vh 22px; }
  .field { flex-direction: column; align-items: stretch; padding: 12px 6px 6px; gap: 10px; text-align: center; width: min(100%, 320px); }
  .field-text { text-align: center; padding: 0 8px; }
  body[data-tx="left"] .scene .field-text { text-align: left; }
  .tl { bottom: calc(26px + var(--sab)); }
  .credit > span:first-child { display: none; }
}
@media (max-height: 520px) {
  :root { --card-top: calc(58px + var(--sat)); --card-bottom: calc(64px + var(--sab)); }
  .top { top: calc(8px + var(--sat)); }
  .seg-logo, .seg-item { height: 34px; }
  .mark { display: none; }
  .screen { padding-top: 3vh; padding-bottom: 3vh; }
  .note { font-size: 13.5px; }
  .field-btn { height: 36px; }
  .tl { bottom: calc(18px + var(--sab)); }
  .tl-dot { min-height: 32px; }
  .credit { display: none; }
}