.manifesto-scene { position: relative; background: var(--bg-deep); color: var(--text); }
.manifesto-scene__pin { position: relative; display: grid; align-items: center; padding-block: var(--section-y); overflow: hidden; overflow: clip; }
.js .manifesto-scene:not(.is-static) { height: 250vh; }
.js .manifesto-scene:not(.is-static) .manifesto-scene__pin { position: sticky; top: 0; height: 100vh; height: 100svh; padding-block: calc(var(--header-h) + 24px) 32px; }

.manifesto-scene__aura { position: absolute; inset: -20% -10%; pointer-events: none; opacity: calc(.25 + .75 * var(--p, 1));
  background:
    radial-gradient(38% 46% at 24% 50%, rgb(27 161 226 / calc(.10 + .16 * var(--p, 1))), transparent 70%),
    radial-gradient(30% 40% at 26% 54%, rgb(255 209 42 / calc(.04 + .10 * var(--glow, 1))), transparent 70%); }

.manifesto-scene .manifesto-grid { position: relative; }
.manifesto-scene .manifesto-mark { position: relative; max-width: 320px; width: 100%; justify-self: center; perspective: 900px; }
.manifesto-scene .manifesto-mark::before { display: none; }

.manifesto-scene .click-mark { position: relative; z-index: 1; transform: rotateY(calc((1 - var(--ring, 1)) * -38deg)) rotateX(calc((1 - var(--ring, 1)) * 14deg)); transform-style: preserve-3d; will-change: transform; }
.js .manifesto-scene .click-mark.is-in .cc-ring,
.js .manifesto-scene .click-mark.is-in .cc-arc,
.js .manifesto-scene .click-mark.is-in .cc-cursor { animation: none; }
.manifesto-scene .click-mark .cc-ring { opacity: calc(.06 + .94 * var(--ring, 1)); transform: rotate(calc((1 - var(--ring, 1)) * -150deg)) scale(calc(.74 + .26 * var(--ring, 1))); }
.manifesto-scene .click-mark .cc-arc { opacity: var(--arc, 1); transform: rotate(calc((1 - var(--arc, 1)) * 200deg)) scale(calc(.5 + .5 * var(--arc, 1))); }
.manifesto-scene .click-mark .cc-cursor { opacity: var(--cur, 1); transform: translate(calc((1 - var(--cur, 1)) * 85%), calc((1 - var(--cur, 1)) * 95%)) rotate(calc((1 - var(--cur, 1)) * 24deg)); }
.js .manifesto-scene.is-clicked .click-mark.is-in .cc-cursor { animation: mf-press .55s var(--ease-out); }
.js .manifesto-scene.is-clicked .click-mark.is-in .cc-ring { animation: mf-ring-kick .9s var(--ease-out); }
@keyframes mf-press { 0% { transform: none; } 35% { transform: scale(.82); } 100% { transform: none; } }
@keyframes mf-ring-kick { 0% { transform: none; } 30% { transform: scale(1.045); } 100% { transform: none; } }

.manifesto-mark__halo { position: absolute; inset: -26%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgb(27 161 226 / .32), rgb(27 161 226 / .08) 45%, transparent 66%);
  opacity: calc(.15 + .85 * var(--arc, 1)); transform: scale(calc(.7 + .3 * var(--arc, 1))); filter: blur(6px); }
.manifesto-scene.is-clicked .manifesto-mark__halo { animation: mf-halo 1.6s var(--ease-out); }
@keyframes mf-halo { 0% { filter: blur(6px) brightness(1); } 25% { filter: blur(4px) brightness(1.8); } 100% { filter: blur(6px) brightness(1); } }
.manifesto-mark__wave { position: absolute; left: 50%; top: 50%; width: 100%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; opacity: 0; box-shadow: 0 0 0 2px rgb(255 209 42 / .75); }
.manifesto-mark__wave--2 { box-shadow: 0 0 0 1.5px rgb(76 195 245 / .7); }
.manifesto-scene.is-clicked .manifesto-mark__wave { animation: mf-wave 1.5s var(--ease-out) .05s; }
.manifesto-scene.is-clicked .manifesto-mark__wave--2 { animation-delay: .22s; }
@keyframes mf-wave { 0% { opacity: .9; transform: scale(.55); } 100% { opacity: 0; transform: scale(1.75); } }

.manifesto-scene .manifesto .w { color: var(--text); opacity: var(--o, 1); transition: none; }
.manifesto-scene .manifesto .w--accent { color: var(--yellow); }
.manifesto-eyebrow { opacity: var(--eyebrow, 1); transform: translateY(calc((1 - var(--eyebrow, 1)) * 14px)); }
.manifesto-scene .manifesto-sub { margin-top: 32px; max-width: 52ch; opacity: var(--sub, 1); transform: translateY(calc((1 - var(--sub, 1)) * 22px)); }

@media (max-width: 860px) {
  .js .manifesto-scene:not(.is-static) { height: 210vh; }
  .manifesto-scene .manifesto-grid { gap: 28px; align-content: center; }
  .manifesto-scene .manifesto-mark { max-width: 150px; justify-self: start; }
  .manifesto-scene .manifesto-sub { margin-top: 22px; }
  .manifesto-scene__aura { background: radial-gradient(60% 34% at 20% 28%, rgb(27 161 226 / calc(.10 + .16 * var(--p, 1))), transparent 70%); }
}

@media (max-width: 860px) {
  .js .manifesto-scene:not(.is-static) .manifesto-scene__pin { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}

@media (max-width: 860px) and (max-height: 760px) {
  .js .manifesto-scene:not(.is-static) .manifesto-scene__pin { padding-top: calc(var(--header-h) + 8px); }
  .manifesto-scene .manifesto-mark { max-width: 84px; }
  .manifesto-scene .manifesto-grid { gap: 18px; }
  .manifesto-scene .manifesto { font-size: 1.6rem; }
  .manifesto-scene .manifesto-sub { margin-top: 14px; font-size: 1rem; }
}
@media (max-width: 380px) {
  .manifesto-scene .manifesto-mark { max-width: 116px; }
  .manifesto-scene .manifesto { font-size: 1.75rem; }
}

@media (max-height: 600px) {
  .js .manifesto-scene:not(.is-static) { height: auto; }
  .js .manifesto-scene:not(.is-static) .manifesto-scene__pin { position: relative; height: auto; padding-block: var(--section-y); }
}

.steps__media .screen { transition: opacity .2s var(--ease-out), transform .3s var(--ease-out), visibility 0s linear .2s; transform: translateY(12px) scale(.985); }
.steps__media .phone[data-step="1"] [data-s="1"], .steps__media .phone[data-step="2"] [data-s="2"],
.steps__media .phone[data-step="3"] [data-s="3"], .steps__media .phone[data-step="4"] [data-s="4"] {
  transform: none; transition: opacity .42s var(--ease-out) .1s, transform .55s var(--ease-out) .1s, visibility 0s; }

@media (min-width: 961px) { .steps__list { padding-bottom: 14vh; } }

.scr-range::before { inset: 0 calc(100% - var(--fill, 62%)) 0 0; }
.scr-range::after { left: var(--fill, 62%); }
.screen.is-playing .scr-range::after { animation: scr-thumb 2.4s ease-in-out 1.8s infinite; }
@keyframes scr-thumb { 0%, 100% { box-shadow: 0 2px 8px rgb(0 0 0 / .4), 0 0 0 0 rgb(76 195 245 / .45); } 50% { box-shadow: 0 2px 8px rgb(0 0 0 / .4), 0 0 0 .55em rgb(76 195 245 / 0); } }
.screen.is-armed .scr-chips span { transition: background-color .25s var(--ease-out), color .25s var(--ease-out), transform .25s var(--ease-out); }
.screen.is-armed .scr-chips span.is-on { transform: scale(1.06); }
.screen.is-armed .scr-big, .screen.is-armed [data-v] { font-variant-numeric: tabular-nums; }
.scr-btn { position: relative; overflow: hidden; transition: transform .2s var(--ease-out), filter .2s; }
.scr-btn::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3em; height: 3em; margin: -1.5em 0 0 -1.5em; border-radius: 50%; background: rgb(255 255 255 / .7); opacity: 0; pointer-events: none; }
.scr-btn.is-tap { transform: scale(.95); filter: brightness(1.08); }
.scr-btn.is-tap::after { animation: scr-tap .7s var(--ease-out); }
@keyframes scr-tap { 0% { opacity: .75; transform: scale(.2); } 100% { opacity: 0; transform: scale(4.5); } }

.scr-chat { position: relative; }
.screen.is-armed .scr-msg { opacity: 0; transform: translateY(.7em) scale(.94); transform-origin: 0 100%; transition: opacity .35s var(--ease-out), transform .45s var(--ease-out); }
.screen.is-armed .scr-msg--me { transform-origin: 100% 100%; }
.screen.is-armed .scr-msg.on { opacity: 1; transform: none; }
.scr-typing { position: absolute; left: 0; display: inline-flex; gap: .3em; padding: .8em .95em; border-radius: 1.1em 1.1em 1.1em .3em; background: rgb(255 255 255 / .08); opacity: 0; transform: scale(.9); transform-origin: 0 100%; transition: opacity .25s, transform .3s var(--ease-out); }
.scr-typing.on { opacity: 1; transform: none; }
.scr-typing i { width: .45em; height: .45em; border-radius: 50%; background: var(--text-2); }
.scr-typing.on i { animation: scr-dot 1s ease-in-out infinite; }
.scr-typing i:nth-child(2) { animation-delay: .15s; }
.scr-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes scr-dot { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-.25em); } }
.scr-avatar b { position: relative; }
.screen.is-armed .scr-avatar b::after { content: ""; position: absolute; right: -.05em; bottom: -.05em; width: .7em; height: .7em; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 .18em #0E1530; }
.screen.is-playing .scr-avatar b::after { animation: scr-online 2s ease-in-out infinite; }
@keyframes scr-online { 50% { box-shadow: 0 0 0 .18em #0E1530, 0 0 0 .45em rgb(52 211 153 / .25); } }

.scr-summary { position: relative; display: grid; gap: .7em; overflow: hidden; }
.screen.is-armed .scr-summary .scr-row { opacity: 0; transform: translateX(-.7em); transition: opacity .35s var(--ease-out), transform .45s var(--ease-out); }
.screen.is-armed .scr-summary .scr-row.on { opacity: 1; transform: none; }
.scr-summary .scr-row strong { transition: color .3s; }
.scr-summary .scr-row.is-hl strong { color: var(--yellow); }
.scr-summary::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / .09) 50%, transparent 70%); transform: translateX(-120%); }
.scr-summary.is-shine::after { animation: scr-shine 1.1s var(--ease-out); }
@keyframes scr-shine { to { transform: translateX(120%); } }

.scr-progress { position: relative; }
.scr-progress::before, .scr-progress::after { content: ""; position: absolute; left: calc(.7em - 1px); top: .7em; width: 2px; border-radius: 2px; }
.scr-progress::before { bottom: .7em; background: rgb(255 255 255 / .1); }
.scr-progress::after { height: calc((100% - 1.4em) * var(--prog, .667)); background: var(--success); transition: height .5s var(--ease-out); }
.scr-progress i { position: relative; z-index: 1; }
.screen.is-armed .scr-progress div i { background: #1D2540; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .18); transition: background-color .3s, box-shadow .3s; }
.screen.is-armed .scr-progress div i::after { opacity: 0; transform: scale(.4); transition: opacity .25s, transform .35s var(--ease-out); }
.screen.is-armed .scr-progress div { color: var(--text-3); transition: color .3s; }
.screen.is-armed .scr-progress div.on { color: var(--text-2); }
.screen.is-armed .scr-progress div.on i { background: var(--success); box-shadow: none; animation: scr-pop .45s var(--ease-out); }
.screen.is-armed .scr-progress div.on i::after { display: block; opacity: 1; transform: none; }
@keyframes scr-pop { 50% { transform: scale(1.25); } }
.screen.is-armed .scr-success { opacity: 0; transform: translateY(.8em) scale(.96); transition: opacity .45s var(--ease-out), transform .55s var(--ease-out); }
.screen.is-armed .scr-success.on { opacity: 1; transform: none; }
.screen.is-playing .scr-success.on .ring { animation: scr-ring 2.6s ease-in-out .5s infinite; }
@keyframes scr-ring { 50% { box-shadow: inset 0 0 0 2px var(--success), 0 0 0 .7em rgb(52 211 153 / .12); } }

@media (prefers-reduced-motion: reduce) {
  .js .manifesto-scene:not(.is-static) { height: auto; }
  .js .manifesto-scene:not(.is-static) .manifesto-scene__pin { position: relative; height: auto; padding-block: var(--section-y); }
}