/* Відео й рух сторінки за референсом. Без .anim (без JS, ?qa=1, зменшений рух) усе стоїть у фінальному стані. */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); }

/* ---------- Ролики: постер під відео, відео проявляється, коли реально грає ---------- */
.frame { position: relative; aspect-ratio: 9 / 16; border-radius: 10px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px #ffffff2e, 0 26px 44px -24px #000; }
.frame img, .frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame video { opacity: 0; transition: opacity .25s; }
.is-playing .frame video { opacity: 1; }
.tgl { position: absolute; right: 8px; bottom: 8px; z-index: 2; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: var(--paper); color: var(--ink); display: grid; place-items: center; box-shadow: 0 4px 12px -4px #0009; }
.tgl::after { content: ''; position: absolute; inset: -6px; }
.tgl svg { width: 12px; height: 12px; }
.tgl .i-pause, .is-playing .tgl .i-play { display: none; }
.is-playing .tgl .i-pause { display: block; }
.tgl:focus-visible, .vbtn:focus-visible, .bgbtn:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.comparison article, .effects article, .trial-real { min-width: 0; }
.comparison .frame + h3, .trial-real .frame + h3 { margin-top: 12px; }
.effects .frame + h4 { margin-top: 14px; }

/* ---------- Hero: телефон із роликом, звук, пауза, прогрес ---------- */
.phone video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 33px; cursor: pointer; }
.prog { position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; background: #f4ede038; pointer-events: none; }
.prog i { display: block; height: 100%; width: 0; background: var(--orange); }
.vbtn { position: absolute; bottom: 16px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 34px; padding: 0; border: 0; border-radius: 99px; cursor: pointer; background: var(--paper); color: var(--ink); font: 600 10px/1 monospace; letter-spacing: .05em; text-transform: uppercase; }
.vbtn::after { content: ''; position: absolute; inset: -8px; }
.vbtn svg { width: 13px; height: 13px; flex: 0 0 auto; }
.vbtn--sound { left: 14px; padding: 0 12px; }
.vbtn--play { right: 14px; width: 34px; }
.vbtn .i-on, .vbtn[aria-pressed="true"] .i-off, .vbtn--play .i-pause, .vbtn--play[aria-pressed="true"] .i-play { display: none; }
.vbtn[aria-pressed="true"] .i-on, .vbtn--play[aria-pressed="true"] .i-pause { display: block; }

/* ---------- Живий фон першого екрана ---------- */
.plate { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.plate video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s; }
.plate video.on { opacity: .85; }
.plate::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #080808b8 0%, #0b0b0b4a 60%, #0b0b0b66); }
.hero-inner, .film-strip { z-index: 2; }
.gate { position: absolute; left: 0; right: 0; height: 50.5%; background: #090909; z-index: 6; pointer-events: none; transform: scaleY(0); }
.gate-t { top: 0; transform-origin: 50% 0; }
.gate-b { bottom: 0; transform-origin: 50% 100%; }
.film-strip { align-items: center; }
.film-strip .tc-l { display: inline-flex; align-items: center; gap: 10px; }
.film-strip .tc-l span, .film-strip .tc-l .tc { display: inline; }
.film-strip b#tc { color: #f1ecdf; font-weight: 500; font-variant-numeric: tabular-nums; }
.bgbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; background: transparent; border: 1px solid #f4ede04d; border-radius: 50%; color: var(--paper); cursor: pointer; }
.bgbtn::after { content: ''; position: absolute; inset: -15px -12px -6px -14px; }
.bgbtn svg { width: 8px; height: 8px; }
.bgbtn .i-on, .bgbtn[aria-pressed="true"] .i-off { display: none; }
.bgbtn[aria-pressed="true"] .i-on { display: block; }
@media (max-width: 760px) { .film-strip .tc-k { display: none; } .vbtn--sound span { display: none; } .vbtn--sound { width: 34px; padding: 0; } }

/* ---------- Хлопушка сцени ---------- */
.scene .clapper { position: relative; font-size: 0; width: 47px; height: 22px; background: none; flex-shrink: 0; }
.scene .clapper::after, .scene .clapper i { content: ''; position: absolute; left: 0; width: 47px; height: 8px; border-radius: 1.5px; }
.scene .clapper::after { bottom: 0; background: repeating-linear-gradient(58deg, var(--paper) 0 6px, transparent 6px 12px); }
.scene .clapper i { bottom: 10px; background: repeating-linear-gradient(-58deg, var(--paper) 0 6px, transparent 6px 12px); transform-origin: 2px 100%; transition: transform .13s cubic-bezier(.6, 0, 1, .7); }
.scene.armed .clapper i { transform: rotate(-24deg); transition: none; }
@keyframes clapline { 0% { background: var(--orange); box-shadow: 0 0 10px var(--orange); } 100% { background: #d97a453b; box-shadow: none; } }
.scene.clapped::after { animation: clapline .9s ease-out both; }
@keyframes clapword { 0% { color: var(--orange); } 100% { color: inherit; } }
.scene.clapped > span:last-child { animation: clapword .9s ease-out both; }

/* ---------- Фокусування кадрів ---------- */
.rack { transition: filter 1s var(--ease-out), opacity 1s var(--ease-out), transform 1.3s var(--ease-out); }
.rack.soft { filter: blur(14px) saturate(.6); opacity: .45; transform: scale(1.04); }

/* ---------- Вхід першого екрана: затвор відкривається, заголовок наводиться на фокус ---------- */
@keyframes gate { 0% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
@keyframes rackin { 0% { filter: blur(20px); opacity: 0; transform: scale(1.05); } 100% { filter: blur(0); opacity: 1; transform: none; } }
@keyframes settle { 0% { filter: blur(10px); opacity: 0; } 100% { filter: blur(0); opacity: 1; } }
@keyframes tally { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.title span { display: inline-block; }
.anim .gate { animation: gate .85s cubic-bezier(.76, 0, .18, 1) .05s both; }
.anim .title span { animation: rackin 1.05s var(--ease-out) both; transform-origin: 0 60%; }
.anim .title span:nth-of-type(1) { animation-delay: .3s; }
.anim .title span:nth-of-type(2) { animation-delay: .4s; }
.anim .hero header, .anim .hero-copy > h2, .anim .hero-copy > p, .anim .hero-offer, .anim .hero-screen, .anim .hero-copy .reference-cta { animation: settle .7s var(--ease-out) both; }
.anim .hero header { animation-delay: .25s; }
.anim .hero-copy .reference-cta { animation-delay: .4s; }
.anim .hero-copy > h2, .anim .hero-copy > p, .anim .hero-offer { animation-delay: .5s; }
.anim .hero-screen { animation-delay: .55s; }
.anim .status-bar .dot, .anim .hero-screen .dot { animation: tally 2.2s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .frame video, .plate video, .rack { transition: none; }
}

/* ---------- Карусель із ролика: 7 слайдів у ряд, гортаються пальцем ---------- */
.reel-carousel-head { margin: 8px 0 22px; max-width: 760px; }
.reel-carousel-head h3 { font: 500 34px/1.1 var(--head); text-transform: uppercase; margin: 8px 0 10px; }
.reel-carousel-head p { color: var(--muted); }
.reel-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: 300px; gap: 16px; overflow-x: auto; padding: 4px 0 18px; scroll-snap-type: x mandatory; scrollbar-color: #4a4338 transparent; }
.reel-carousel img, .reel-carousel video { display: block; background: #111; width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 8px; scroll-snap-align: start; box-shadow: 0 0 0 1px #ffffff1f, 0 20px 40px -24px #000; }
.reel-carousel:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; }
@media (max-width: 760px) { .reel-carousel { grid-auto-columns: 78%; } .reel-carousel-head h3 { font-size: 27px; } }