/* Общая механика для всех вариантов: экран без прокрутки, слои снимка, режимы, «Только небо», панели. Внешний вид — в стиле варианта. */
@property --tint { syntax: "<color>"; inherits: true; initial-value: #f6e9e2; }
@property --tint-strong { syntax: "<color>"; inherits: true; initial-value: #f0a99a; }
@property --glow { syntax: "<color>"; inherits: true; initial-value: #f2b39b; }
@property --accent { syntax: "<color>"; inherits: true; initial-value: #9b4d4b; }
@property --accent-deep { syntax: "<color>"; inherits: true; initial-value: #3d1b1d; }
@property --deep { syntax: "<color>"; inherits: true; initial-value: #120d10; }
@property --comp { syntax: "<color>"; inherits: true; initial-value: #8fe3f0; }
@property --comp2 { syntax: "<color>"; inherits: true; initial-value: #b7f5c4; }
@property --warm { syntax: "<color>"; inherits: true; initial-value: #ffc58f; }
@property --cta { syntax: "<color>"; inherits: true; initial-value: #d9614a; }
@property --cta-deep { syntax: "<color>"; inherits: true; initial-value: #6e2a22; }
@property --duo-light { syntax: "<color>"; inherits: true; initial-value: #ff5a3c; }
@property --duo-dark { syntax: "<color>"; inherits: true; initial-value: #1d3f86; }
@property --c1 { syntax: "<color>"; inherits: true; initial-value: #f2b39b; }
@property --c2 { syntax: "<color>"; inherits: true; initial-value: #e6a3c0; }
@property --c3 { syntax: "<color>"; inherits: true; initial-value: #a9c4ee; }
@property --c4 { syntax: "<color>"; inherits: true; initial-value: #f09a92; }
@property --c5 { syntax: "<color>"; inherits: true; initial-value: #f3d38c; }
@property --c6 { syntax: "<color>"; inherits: true; initial-value: #c5b3f0; }

:root {
  --milk: #fff7ef;
  --swap-out: 360ms;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-film: cubic-bezier(.65, 0, .35, 1);
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  transition: --tint .95s var(--ease), --tint-strong .95s var(--ease), --glow .95s var(--ease), --accent .95s var(--ease),
    --accent-deep .95s var(--ease), --deep .95s var(--ease), --comp .95s var(--ease), --comp2 .95s var(--ease), --warm .95s var(--ease),
    --cta .95s, --cta-deep .95s, --duo-light .95s, --duo-dark .95s, --c1 .95s, --c2 .95s, --c3 .95s, --c4 .95s, --c5 .95s, --c6 .95s;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--deep); }
body {
  position: fixed; inset: 0; overflow: hidden;
  background: var(--deep); color: var(--milk);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none; touch-action: pan-y;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-user-select: none; user-select: none; }
a { color: inherit; }
[hidden] { display: none !important; }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--tint); outline-offset: 3px; border-radius: 4px; }
[data-panel-focus]:focus, [data-panel-focus]:focus-visible { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ——— снимок ——— */
[data-stage] { position: absolute; inset: 0; z-index: 0; isolation: isolate; overflow: hidden; background: var(--deep); }
.ph { position: absolute; inset: 0; opacity: 0; transition: opacity var(--fade, 950ms) var(--ease-film); will-change: opacity; }
.ph.is-on { opacity: 1; }
.ph-tiny, .ph img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: var(--pos, 50% 50%);
}
.ph-tiny { background-size: cover; background-position: var(--pos, 50% 50%); filter: blur(18px) saturate(1.1); transform: scale(1.12); }
.ph img { opacity: 0; transition: opacity .7s var(--ease); -webkit-user-select: none; user-select: none; pointer-events: none; }
.ph img.is-ready { opacity: 1; }
.ph.is-on img.is-ready { animation: nebo-drift 38s ease-in-out infinite alternate; }
@keyframes nebo-drift { from { transform: scale(1.002); } to { transform: scale(1.055) translate3d(-.6%, -.4%, 0); } }

/* ——— режимы: вступление / сцена / финал ——— */
[data-section] { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .8s var(--ease), visibility 0s linear .8s; }
body[data-mode="intro"] [data-section="intro"],
body[data-mode="scene"] [data-section="scene"],
body[data-mode="finale"] [data-section="finale"] { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .9s var(--ease) .15s, visibility 0s; }
body:not([data-mode="scene"]) [data-scene-only] { opacity: 0; visibility: hidden; pointer-events: none; }
[data-scene-only] { transition: opacity .8s var(--ease), visibility 0s linear .8s; }
body[data-mode="scene"] [data-scene-only] { transition: opacity .9s var(--ease) .2s, visibility 0s; }

/* начало «фильма»: вступление растворяется, потом приходит первое небо */
body.is-opening [data-section="intro"] { opacity: 0 !important; filter: blur(8px); transform: scale(1.015); transition: opacity 1s var(--ease-film), filter 1s var(--ease-film), transform 1.4s var(--ease-film), visibility 0s linear 1s !important; }
body.is-opening[data-mode="scene"] [data-section="scene"],
body.is-opening[data-mode="scene"] [data-scene-only] { transition: opacity 1.3s var(--ease) .65s, visibility 0s !important; }

/* смена текста между сценами */
[data-swap] { transition: opacity var(--swap-out) var(--ease), transform var(--swap-out) var(--ease), filter var(--swap-out) var(--ease); }
[data-swap].is-out { opacity: 0; }

/* ——— «Только небо» ——— */
[data-ui], [data-section] { transition-property: opacity, visibility, transform, filter; }
body.is-sky [data-ui], body.is-sky [data-section] { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity .6s var(--ease), visibility 0s linear .6s !important; }
.sky-return {
  position: fixed; z-index: 60; left: 50%; bottom: calc(18px + var(--sab));
  transform: translate(-50%, 8px); opacity: 0; visibility: hidden;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 999px;
  font: 500 13px/1 system-ui, sans-serif; letter-spacing: .01em;
  color: var(--milk); background: rgba(0, 0, 0, .28);
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility 0s linear .5s, background .3s;
}
.sky-return-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--tint); box-shadow: 0 0 0 4px rgba(255, 255, 255, .12); }
body.is-sky .sky-return { opacity: .85; visibility: visible; transform: translate(-50%, 0); transition: opacity .6s var(--ease) .4s, transform .6s var(--ease) .4s, visibility 0s; }
.sky-return:hover { background: rgba(0, 0, 0, .45); }
.sky-hint {
  position: fixed; z-index: 59; left: 50%; top: 50%; transform: translate(-50%, -50%);
  max-width: min(80vw, 360px); text-align: center; pointer-events: none;
  font: 500 15px/1.35 system-ui, sans-serif; color: var(--milk);
  text-shadow: 0 1px 14px rgba(0, 0, 0, .7);
  opacity: 0; transition: opacity .6s var(--ease);
}
.sky-hint.is-shown { opacity: .95; }

/* ——— таймлайн: механика ——— */
[data-timeline] { position: relative; }
.tl-track { position: relative; display: flex; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.tl-track::-webkit-scrollbar { display: none; }
.tl-dot { position: relative; flex: 0 0 auto; touch-action: pan-x; }
body[data-mode="intro"] [data-timeline] { opacity: 0; visibility: hidden; pointer-events: none; }
[data-timeline] { transition: opacity .8s var(--ease), visibility 0s; }

/* ——— панели ——— */
[data-panel] { position: fixed; z-index: 70; opacity: 0; transform: translateY(14px); transition: opacity .32s var(--ease), transform .32s var(--ease); }
[data-panel].is-open { opacity: 1; transform: none; }
[data-panel] a { text-underline-offset: 3px; }
[data-globe] { display: block; width: 100%; aspect-ratio: 1; }

body:not(.is-ready) [data-section] { opacity: 0 !important; }

@media (prefers-reduced-motion: reduce) {
  :root { --swap-out: 120ms; }
  .ph { transition-duration: .26s !important; }
  .ph.is-on img.is-ready { animation: none !important; }
  [data-swap] { transform: none !important; filter: none !important; }
  body.is-opening [data-section="intro"] { filter: none; transform: none; transition-duration: .2s !important; }
  [data-section], [data-scene-only] { transition-duration: .25s !important; transition-delay: 0s !important; }
}
.tl-num { display: none; }