/* Общие правила всех приглашений: мобильная сетка, появление блоков, частицы. Тема задаёт цвета и шрифты. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); line-height: 1.55; overflow-x: hidden; }
img { max-width: 100%; display: block; }
button { font: inherit; }
.wrap { width: min(100% - 40px, 440px); margin-inline: auto; }
.screen { min-height: 100svh; position: relative; }
.section { padding: 72px 0; position: relative; }
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0ms); }
[data-reveal].in { opacity: 1; transform: none; }
.fx-p { position: fixed; z-index: 99; pointer-events: none; color: var(--accent); font-size: 18px; animation: fxP 1.2s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes fxP { from { transform: translate(-50%,-50%) scale(.4); opacity: 1; } to { transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) rotate(var(--r)) scale(1); opacity: 0; } }
.fx-r { position: fixed; top: -30px; z-index: 99; pointer-events: none; color: var(--accent); animation: fxR 3.2s cubic-bezier(.3,.1,.5,1) forwards; }
@keyframes fxR { to { transform: translateY(110vh) rotate(200deg); opacity: .2; } }
.countdown { display: flex; gap: 10px; }
.countdown div { flex: 1; text-align: center; padding: 12px 0; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); }
.countdown b { display: block; font-family: var(--font-display); font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.countdown small { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
[data-final][hidden] { display: none; }
.answer-box { padding: 16px; border-radius: var(--radius); background: var(--card); border: 1px dashed var(--line); font-size: 15px; margin: 16px 0; }
.shot [data-reveal], .shot .sp-view, .shot .sp-card { transition: none !important; animation: none !important; opacity: 1; transform: none; }
.shot .section { padding-top: 56px; }
[data-date]::first-letter { text-transform: uppercase; }
.made-by { text-align: center; font-size: 11px; letter-spacing: .08em; color: var(--muted); padding: 32px 0 40px; opacity: .7; }
.made-by a { color: inherit; }
.demo-badge { position: fixed; top: 10px; right: 10px; z-index: 50; font: 600 10px/1 var(--font-body); letter-spacing: .1em; text-transform: uppercase; padding: 6px 8px; border-radius: 999px; background: var(--card); color: var(--muted); border: 1px solid var(--line); opacity: .8; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }