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

:root {
  --grot: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  --page: #efefef;
  --ink: #1d1d1f;
  --swap-out: 320ms;
}
html, body { background: var(--page); }
body { font-family: var(--grot); color: #fff; }

/* ——— верх на сером ——— */
.top {
  position: fixed; z-index: 30; top: 0; left: 0; right: 0; height: calc(60px + var(--sat));
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sat) calc(3vw + var(--sar)) 0 calc(3vw + var(--sal)); color: var(--ink);
}
.brand { font: 600 17px/1 var(--grot); letter-spacing: -.02em; color: var(--ink); }
.top-nav { display: flex; align-items: center; gap: 22px; }
.top-nav button { font: 500 14.5px/1 var(--grot); color: var(--ink); opacity: .78; }
.top-nav button:hover { opacity: 1; }
.top-nav button[aria-pressed="true"] { opacity: 1; text-decoration: underline; text-underline-offset: 5px; }
.counter { font: 500 13px/1 var(--grot); font-variant-numeric: tabular-nums; color: #7a7a80; letter-spacing: .03em; }
body.is-sky .top { opacity: 1 !important; visibility: visible !important; }
body.is-sky .top-nav button:not([data-action="sky"]), body.is-sky .counter { visibility: hidden; }

/* ——— капсула ——— */
.capsule {
  position: fixed; z-index: 1; overflow: hidden; isolation: isolate;
  top: calc(64px + var(--sat)); bottom: calc(96px + var(--sab)); left: calc(2.4vw + var(--sal)); right: calc(2.4vw + var(--sar));
  border-radius: min(32vh, 320px);
  background: #c9c2b8;
  transition: top .7s var(--ease), bottom .7s var(--ease);
}
body.is-sky .capsule { bottom: calc(24px + var(--sab)); }
.edge {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 30px 6px rgba(239, 239, 239, .18);
}
.edge::before {
  content: ""; position: absolute; inset: -18px; border-radius: inherit; padding: 46px;
  background: linear-gradient(135deg, rgba(150, 215, 90, .85) 0%, rgba(245, 214, 150, .5) 30%, rgba(250, 205, 175, .45) 60%, rgba(244, 170, 140, .9) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: blur(30px); opacity: .62;
}
.wipe { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; border-radius: inherit; }
.wipe i {
  position: absolute; top: 0; bottom: 0; left: 0; width: 260%;
  background: linear-gradient(90deg, rgba(160, 214, 60, 0) 0%, rgba(160, 214, 60, .95) 14%, rgba(230, 182, 30, .95) 28%, rgba(240, 160, 80, .95) 44%, rgba(236, 160, 168, .95) 60%, rgba(236, 160, 168, 0) 76%);
  transform: translateX(-100%);
}
.wipe.is-run i { animation: wipe 1.7s cubic-bezier(.55, .1, .35, 1) forwards; }
@keyframes wipe { from { transform: translateX(-100%); } to { transform: translateX(40%); } }
.photo .ph img.is-ready { filter: saturate(1.05); }

/* ——— экраны ——— */
.screen {
  position: fixed; z-index: 10; top: calc(64px + var(--sat)); bottom: calc(96px + var(--sab)); left: calc(2.4vw + var(--sal)); right: calc(2.4vw + var(--sar));
  display: flex; flex-direction: column; justify-content: center;
  padding: 6vh clamp(24px, 10vw, 220px);
}
.copy { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(10px, 1.6vh, 16px); max-width: 900px; width: 100%; margin: 0 auto; }
.copy::before { content: ""; position: absolute; z-index: -1; inset: -16% -10%; background: radial-gradient(closest-side, rgba(20, 16, 14, .3), rgba(20, 16, 14, 0)); pointer-events: none; }
.kick { margin: 0 0 2px; font: 500 13.5px/1.2 var(--grot); color: rgba(255, 255, 255, .86); letter-spacing: .01em; }
.head [data-fit-line] { display: block; white-space: nowrap; overflow: hidden; }
.head {
  margin: 0; width: 100%;
  font: 400 clamp(28px, 3.6vw, 60px)/1.1 var(--grot); letter-spacing: -.03em; color: #fff;
  text-wrap: balance; text-shadow: 0 1px 24px rgba(0, 0, 0, .28);
}
.sub { margin: 0; max-width: 46ch; font: 400 clamp(14px, 1.1vw, 16px)/1.5 var(--grot); color: rgba(255, 255, 255, .9); text-shadow: 0 1px 14px rgba(0, 0, 0, .3); }
.buttons { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 10px;
  font: 500 14.5px/1 var(--grot); letter-spacing: -.01em; text-decoration: none;
  transition: background .25s, color .25s, transform .2s;
}
.btn i { font-style: normal; font-size: .95em; }
.btn--solid { background: #fff; color: var(--ink); box-shadow: 0 6px 22px -10px rgba(0, 0, 0, .4); }
.btn--solid:hover { transform: translateY(-1px); }
.btn--ghost { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .06); }
.btn--ghost:hover { background: rgba(255, 255, 255, .16); }
.btn--dark { background: var(--ink); color: #fff; }
.phrase { margin: 4px 0 0; font: 400 12.5px/1.3 var(--grot); color: rgba(255, 255, 255, .75); }

/* положение текста */
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="left"] .scene .buttons { justify-content: flex-start; }
body[data-tx="right"] .scene .copy { align-items: flex-end; text-align: right; margin-right: 0; }
body[data-tx="right"] .scene .buttons { justify-content: flex-end; }

[data-swap].is-out { transform: translateY(8px); }

.credit { position: fixed; z-index: 20; right: calc(3vw + var(--sar)); bottom: calc(10px + var(--sab)); margin: 0; }
.credit button { font: 400 11px/1.2 var(--grot); color: #8a8a90; }

/* ——— таймлайн на сером ——— */
.tl { position: fixed; z-index: 20; left: 0; right: 0; bottom: calc(28px + var(--sab)); padding: 0 calc(3vw + var(--sar)) 0 calc(3vw + 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: 0 22px 0 0; color: #8a8a90; }
.tl-dot::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #cfcfd4; }
.tl-pin { position: relative; z-index: 1; flex: none; width: 9px; height: 9px; border-radius: 50%; background: #b9b9bf; box-shadow: 0 0 0 4px var(--page); transition: background .3s, transform .3s; }
.tl-label { position: relative; z-index: 1; padding-right: 8px; background: var(--page); font: 500 13px/1 var(--grot); white-space: nowrap; }
.tl-date { margin-right: 6px; color: #9a9aa0; }
.tl-dot.is-active { color: var(--ink); }
.tl-dot.is-active .tl-pin { background: linear-gradient(135deg, #a0d63c, #e6b61e, #f0a050, #eca0a8); transform: scale(1.5); }
.tl-dot:hover { color: var(--ink); }

/* ——— панели ——— */
.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: 22px; background: #fff; color: var(--ink); font: 400 15px/1.45 var(--grot);
  box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .35);
}
.panel-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; font: 300 28px/1 var(--grot); color: #555; }
.panel-close:hover { background: #f1f1f1; }
.panel-kick { margin: 0 44px 8px 0; font: 500 12.5px/1.2 var(--grot); color: #8a8a90; }
.panel-title { margin: 0 44px 8px 0; font: 500 26px/1.1 var(--grot); letter-spacing: -.03em; }
.panel-lead { margin: 0 0 4px; font-weight: 500; }
.panel-small { margin: 0 0 12px; color: #6b6b72; 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: #8a8a90; }
.panel-list dd { margin: 0; }
.panel--where { text-align: center; }
.panel--where canvas { width: min(240px, 64vw); margin: 4px auto 10px; --globe-bg: #1d1d1f; --globe-ink: rgba(255, 255, 255, .92); --globe-line: rgba(255, 255, 255, .15); --globe-accent: #e6b61e; }
.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(3vw + var(--sar)); top: calc(76px + var(--sat)); bottom: auto; width: 420px; }
  .panel--where { width: 340px; }
}

@media (max-width: 700px) {
  .capsule, .screen { left: calc(10px + var(--sal)); right: calc(10px + var(--sar)); border-radius: 46px; }
  .screen { padding: 7vh 26px; }
  .brand { font-size: 15px; }
  .top { padding-left: calc(16px + var(--sal)); padding-right: calc(16px + var(--sar)); }
  .top-nav { gap: 14px; }
  .top-nav button { font-size: 13.5px; }
  .counter { display: none; }
  .edge::before { padding: 34px; filter: blur(22px); }
  .credit { left: 16px; right: 16px; text-align: center; bottom: calc(8px + var(--sab)); }
  .tl { bottom: calc(26px + var(--sab)); }
}
@media (max-height: 520px) {
  .capsule, .screen { top: calc(48px + var(--sat)); bottom: calc(70px + var(--sab)); }
  .top { height: calc(46px + var(--sat)); }
  .screen { padding-top: 3vh; padding-bottom: 3vh; }
  .sub { font-size: 13px; }
  .btn { height: 36px; }
  .tl { bottom: calc(18px + var(--sab)); }
  .tl-dot { min-height: 32px; }
  .credit { display: none; }
}