/* =======================================================================
   danart — «мини рекламные ролики» в карточках возможностей
   Каждая карточка = 4-сценный ролик ~12с: монтажные склейки (flash),
   движение камеры, кинетический текст, карусель вариантов в финале.
   Полоса-скраббер снизу даёт ощущение реального видео.
   Все акценты завязаны на --accent (реагируют на Tweaks).
   ======================================================================= */

/* ---------------------- общий каркас ролика ---------------------- */
.reel { position: absolute; inset: 0; border-radius: 20px; overflow: hidden; isolation: isolate; }
.reel .scene { position: absolute; inset: 0; opacity: 0; }
.reel .layer { position: absolute; inset: 0; background-size: cover; background-position: center; }

/* единый 4-сценный тайминг (12с) — общий для всех роликов */
.reel .scene:nth-child(1) { animation: sc1 12s linear infinite; }
.reel .scene:nth-child(2) { animation: sc2 12s linear infinite; }
.reel .scene:nth-child(3) { animation: sc3 12s linear infinite; }
.reel .scene:nth-child(4) { animation: sc4 12s linear infinite; }
@keyframes sc1 { 0%{opacity:1} 24%{opacity:1} 27%{opacity:0} 96%{opacity:0} 99%{opacity:1} 100%{opacity:1} }
@keyframes sc2 { 0%,24%{opacity:0} 27%{opacity:1} 49%{opacity:1} 52%{opacity:0} 100%{opacity:0} }
@keyframes sc3 { 0%,49%{opacity:0} 52%{opacity:1} 74%{opacity:1} 77%{opacity:0} 100%{opacity:0} }
@keyframes sc4 { 0%,74%{opacity:0} 77%{opacity:1} 96%{opacity:1} 99%{opacity:0} 100%{opacity:0} }

/* белая вспышка монтажной склейки */
.reel-flash { position: absolute; inset: 0; z-index: 20; background: #fff; opacity: 0; pointer-events: none; animation: reelFlash 12s linear infinite; }
@keyframes reelFlash {
  0%,24%{opacity:0} 25%{opacity:.92} 26.5%{opacity:0}
  49%{opacity:0} 50%{opacity:.92} 51.5%{opacity:0}
  74%{opacity:0} 75%{opacity:.92} 76.5%{opacity:0}
  97.5%{opacity:0} 98.5%{opacity:.92} 100%{opacity:0}
}

/* скраббер прогресса (как у видео) */
.reel-bar { position: absolute; left: 11px; right: 11px; bottom: 11px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.3); z-index: 14; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.reel-bar i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--accent); box-shadow: 0 0 8px color-mix(in oklab, var(--accent) 70%, transparent); animation: reelBar 12s linear infinite; }
@keyframes reelBar { 0%{width:0} 99.4%{width:100%} 100%{width:0} }

/* подпись-чип сцены (label ролика) */
.cap-chip {
  position: absolute; left: 12px; top: 12px; z-index: 12;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 600; letter-spacing: -0.01em;
  padding: 6px 11px; border-radius: 999px;
  background: rgba(10,10,16,.6); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  white-space: nowrap;
}
.cap-chip.done { background: rgba(8,16,24,.82); color: var(--ink); box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.cap-chip .n { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 color-mix(in oklab, var(--accent) 55%, transparent); animation: pulseDot 1.1s ease-in-out infinite; }
.cap-chip .ok { width: 13px; height: 13px; color: var(--on-green); }
@keyframes pulseDot { 0%,100%{box-shadow:0 0 0 0 color-mix(in oklab,var(--accent) 55%,transparent)} 50%{box-shadow:0 0 0 6px color-mix(in oklab,var(--accent) 0%,transparent)} }
.cap-chip .dots i { display:inline-block; width:3px; height:3px; border-radius:50%; background:currentColor; margin-left:2px; opacity:.4; animation: typing 1.1s infinite; }
.cap-chip .dots i:nth-child(2){animation-delay:.15s} .cap-chip .dots i:nth-child(3){animation-delay:.3s}
@keyframes typing { 0%,100%{opacity:.3;transform:translateY(0)} 50%{opacity:1;transform:translateY(-2px)} }

/* вход подписи внутри своей сцены */
.reel .scene:nth-child(1) .cap-chip { animation: capw1 12s ease-out infinite; }
.reel .scene:nth-child(2) .cap-chip { animation: capw2 12s ease-out infinite; }
.reel .scene:nth-child(3) .cap-chip { animation: capw3 12s ease-out infinite; }
.reel .scene:nth-child(4) .cap-chip { animation: capw4 12s ease-out infinite; }
@keyframes capw1 { 0%,2%{opacity:0;transform:translateY(8px)} 7%{opacity:1;transform:translateY(0)} 100%{opacity:1;transform:translateY(0)} }
@keyframes capw2 { 0%,27%{opacity:0;transform:translateY(8px)} 32%{opacity:1;transform:translateY(0)} 100%{opacity:1} }
@keyframes capw3 { 0%,52%{opacity:0;transform:translateY(8px)} 57%{opacity:1;transform:translateY(0)} 100%{opacity:1} }
@keyframes capw4 { 0%,77%{opacity:0;transform:translateY(8px)} 82%{opacity:1;transform:translateY(0)} 100%{opacity:1} }

/* бегущая сканирующая линия + сетка-меш (используют несколько роликов) */
.scan-line { position: absolute; left: -4%; right: -4%; height: 3px; z-index: 10;
  background: linear-gradient(90deg, transparent, var(--accent) 20%, #fff 50%, var(--accent) 80%, transparent);
  box-shadow: 0 0 22px 5px color-mix(in oklab, var(--accent) 70%, transparent); }
.mesh { position: absolute; inset: 0; z-index: 9; pointer-events: none;
  background-image:
    linear-gradient(color-mix(in oklab, var(--accent) 55%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in oklab, var(--accent) 55%, transparent) 1px, transparent 1px);
  background-size: 24px 24px; }
.light-sweep { position: absolute; top: 0; bottom: 0; width: 55%; left: -55%; z-index: 8;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.34) 50%, transparent);
  transform: skewX(-12deg); }

/* финальная плашка-результат */
.result-badge {
  position: absolute; bottom: 24px; right: 12px; z-index: 12;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif; font-weight: 600; font-size: 10px; letter-spacing: .06em; text-transform: uppercase;
  padding: 6px 11px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent);
  box-shadow: 0 8px 20px -6px color-mix(in oklab, var(--accent) 70%, transparent);
}
[data-palette="lime"] .result-badge { color: var(--ink); }

/* карусель вариантов в финальной сцене (3 кадра) */
.car { animation-duration: 12s; animation-timing-function: ease; animation-iteration-count: infinite; }
.car-a { animation-name: carA; } .car-b { animation-name: carB; } .car-c { animation-name: carC; }
@keyframes carA { 0%,77%{opacity:0} 78%{opacity:1} 84%{opacity:1} 85.5%{opacity:0} 100%{opacity:0} }
@keyframes carB { 0%,85%{opacity:0} 86.5%{opacity:1} 90%{opacity:1} 91.5%{opacity:0} 100%{opacity:0} }
@keyframes carC { 0%,91%{opacity:0} 92.5%{opacity:1} 96%{opacity:1} 99%{opacity:0} 100%{opacity:0} }
/* формат-чип, меняющийся в финале */
.fmt-chip { position: absolute; top: 12px; right: 12px; z-index: 12;
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif; font-weight: 600; font-size: 10px; letter-spacing: .05em;
  padding: 5px 9px; border-radius: 8px; background: rgba(8,16,24,.82); color: var(--ink); border: 1px solid color-mix(in oklab, var(--ink) 14%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }

/* =======================================================================
   1 · ФОТО — телефон → AI-обработка → студийный свет → варианты
   ======================================================================= */
.reel-photo { background: #DCD8D1; }
.reel-photo .pl-raw {
  background-image: url('https://images.unsplash.com/photo-1556228720-195a672e8a03?w=1000&q=80');
  filter: grayscale(.5) brightness(.82) saturate(.5) contrast(.9);
  background-color: #D6D2CB; background-blend-mode: luminosity;
  animation: handheld 2.6s ease-in-out infinite;
}
@keyframes handheld {
  0%{transform:scale(1.05) translate(0,0)} 25%{transform:scale(1.05) translate(.6%,-.5%)}
  50%{transform:scale(1.05) translate(-.4%,.6%)} 75%{transform:scale(1.05) translate(.5%,.4%)}
  100%{transform:scale(1.05) translate(0,0)}
}
/* сцена 2: тот же кадр, скан проявляет цвет/градацию */
.reel-photo .pl-dull {
  background-image: url('https://images.unsplash.com/photo-1556228720-195a672e8a03?w=1000&q=80');
  filter: grayscale(.55) brightness(.8) saturate(.45) contrast(.9);
}
.reel-photo .pl-graded {
  background-image: url('https://images.unsplash.com/photo-1556228720-195a672e8a03?w=1000&q=80');
  filter: saturate(1.12) contrast(1.06) brightness(1.04);
  clip-path: inset(0 100% 0 0); animation: photoGrade 12s ease-in-out infinite;
}
@keyframes photoGrade { 0%,28%{clip-path:inset(0 100% 0 0)} 46%{clip-path:inset(0 0 0 0)} 49%{clip-path:inset(0 0 0 0)} 100%{clip-path:inset(0 0 0 0)} }
.reel-photo .scene:nth-child(2) .mesh { opacity: 0; animation: photoMesh 12s ease-in-out infinite; }
@keyframes photoMesh { 0%,27%{opacity:0} 29%{opacity:.8} 44%{opacity:.25} 49%{opacity:0} 100%{opacity:0} }
.reel-photo .scene:nth-child(2) .scan-line { opacity: 0; top: 0; animation: photoScanV 12s ease-in-out infinite; }
@keyframes photoScanV {
  /* вертикальная линия (узкая полоса по горизонтали) */
  0%,27%{left:0;opacity:0} 30%{opacity:1} 46%{left:calc(100% - 3px);opacity:1} 50%{opacity:0} 100%{opacity:0}
}
.reel-photo .scene:nth-child(2) .scan-line { left:0; right:auto; top:-4%; bottom:-4%; height:auto; width:3px;
  background: linear-gradient(180deg, transparent, var(--accent) 18%, #fff 50%, var(--accent) 82%, transparent); }
/* сцена 3: студия с зумом и засветкой */
.reel-photo .pl-studio {
  background-image: url('https://images.unsplash.com/photo-1612817288484-6f916006741a?w=1000&q=80');
  filter: saturate(1.06) contrast(1.04);
  animation: photoZoom 12s ease-in-out infinite;
}
@keyframes photoZoom { 0%,52%{transform:scale(1.02)} 74%{transform:scale(1.12)} 100%{transform:scale(1.12)} }
.reel-photo .scene:nth-child(3) .light-sweep { animation: photoSweep 12s ease-in-out infinite; }
@keyframes photoSweep { 0%,53%{left:-55%} 66%{left:120%} 100%{left:120%} }
/* сцена 4: карусель форматов/сцен */
.reel-photo .pl-v1 { background-image: url('https://images.unsplash.com/photo-1612817288484-6f916006741a?w=1000&q=80'); }
.reel-photo .pl-v2 { background-image: url('https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=1000&q=80'); }
.reel-photo .pl-v3 { background-image: url('https://images.unsplash.com/photo-1571781926291-c477ebfd024b?w=1000&q=80'); }
.reel-photo .fmt-chip { animation: photoFmt 12s steps(1) infinite; min-width: 30px; min-height: 12px; }
@keyframes photoFmt { 0%,77%{opacity:0} 78%{opacity:1} 96%{opacity:1} 99%{opacity:0} 100%{opacity:0} }
.reel-photo .fmt-chip span { position: absolute; left: 9px; top: 5px; }
.reel-photo .fmt-chip .f1 { animation: carA 12s ease infinite; }
.reel-photo .fmt-chip .f2 { animation: carB 12s ease infinite; }
.reel-photo .fmt-chip .f3 { animation: carC 12s ease infinite; }
.reel-photo .scene:nth-child(4) .result-badge { animation: badgePop 12s ease infinite; }
@keyframes badgePop { 0%,80%{opacity:0;transform:scale(.6)} 84%{opacity:1;transform:scale(1.08)} 88%{transform:scale(1)} 96%{opacity:1} 99%{opacity:0} 100%{opacity:0} }

/* =======================================================================
   2 · ВИДЕО — стоп-кадр → оживает → склейка сцен → энд-кард
   ======================================================================= */
.reel-video { background: #0b0b11; }
.reel-video .vl-1 { background-image: url('https://images.unsplash.com/photo-1612817288484-6f916006741a?w=1000&q=80'); filter: saturate(.7) brightness(.9); }
.reel-video .vl-2 { background-image: url('https://images.unsplash.com/photo-1612817288484-6f916006741a?w=1000&q=80'); filter: saturate(1.1) contrast(1.06); animation: vKen2 12s ease-in-out infinite; }
@keyframes vKen2 { 0%,27%{transform:scale(1) translate(0,0)} 49%{transform:scale(1.14) translate(-3%,-3%)} 100%{transform:scale(1.14) translate(-3%,-3%)} }
.reel-video .vl-3 { background-image: url('https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=1000&q=80'); filter: saturate(1.08) contrast(1.05); animation: vKen3 12s ease-in-out infinite; }
@keyframes vKen3 { 0%,52%{transform:scale(1.12) translate(3%,2%)} 74%{transform:scale(1) translate(0,0)} 100%{transform:scale(1) translate(0,0)} }
.reel-video .vl-4 { background-image: url('https://images.unsplash.com/photo-1582719478250-c89cae4dc85b?w=1000&q=80'); filter: saturate(1.05) brightness(.96); animation: vKen4 12s ease-in-out infinite; }
@keyframes vKen4 { 0%,77%{transform:scale(1.1)} 100%{transform:scale(1.18)} }
.reel-video .v-grade { position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 0%, transparent 38%, rgba(0,0,0,.4) 100%), linear-gradient(0deg, rgba(0,0,0,.55), transparent 42%); }
/* play на 1-й сцене */
.reel-video .v-play { position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; margin: -26px; z-index: 12;
  display: grid; place-items: center; background: rgba(255,255,255,.96); color: var(--ink); border-radius: 50%; box-shadow: 0 10px 28px rgba(0,0,0,.35);
  animation: vPlay 12s ease-in-out infinite; }
@keyframes vPlay { 0%{opacity:1;transform:scale(1)} 18%{opacity:1;transform:scale(.9)} 24%{opacity:0;transform:scale(.5)} 100%{opacity:0} }
.reel-video .light-sweep { animation: vSweep 12s ease-in-out infinite; }
@keyframes vSweep { 0%,28%{left:-55%} 38%{left:120%} 60%,63%{left:-55%} 70%{left:120%} 100%{left:120%} }
/* кинетический текст */
.kt { position: absolute; z-index: 11; font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif; font-weight: 600; color: #fff; text-shadow: 0 4px 18px rgba(0,0,0,.45); letter-spacing: -0.02em; }
.kt-1 { left: 16px; bottom: 34px; font-size: 30px; animation: kt1 12s cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes kt1 { 0%,28%{opacity:0;transform:translateY(20px)} 33%{opacity:1;transform:translateY(0)} 46%{opacity:1;transform:translateY(0)} 49%{opacity:0;transform:translateY(-12px)} 100%{opacity:0} }
.kt-2 { right: 16px; top: 30px; font-size: 18px; background: var(--accent); color: var(--on-accent); padding: 4px 11px; border-radius: 8px; transform: rotate(-4deg); animation: kt2 12s cubic-bezier(.2,.8,.2,1) infinite; }
[data-palette="lime"] .kt-2 { color: var(--ink); }
@keyframes kt2 { 0%,53%{opacity:0;transform:rotate(-4deg) scale(.5)} 58%{opacity:1;transform:rotate(-4deg) scale(1.1)} 62%{transform:rotate(-4deg) scale(1)} 74%{opacity:1} 77%{opacity:0} 100%{opacity:0} }
/* энд-кард: лого danart */
.v-end { position: absolute; inset: 0; z-index: 11; display: grid; place-items: center; }
.v-end .logo-lg { font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif; font-weight: 600; font-size: 34px; letter-spacing: -0.04em; color: #fff; animation: vEnd 12s ease infinite; }
.v-end .logo-lg span { color: var(--accent); }
@keyframes vEnd { 0%,82%{opacity:0;transform:scale(.85)} 87%{opacity:1;transform:scale(1)} 96%{opacity:1} 99%{opacity:0} 100%{opacity:0} }
/* HUD: тайм-код + эквалайзер (поверх всего ролика, вне сцен) */
.v-hud { position: absolute; left: 12px; bottom: 26px; right: 12px; z-index: 13; display: flex; align-items: center; gap: 9px; }
.v-time { color: #fff; font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; text-shadow: 0 1px 4px rgba(0,0,0,.5); }
.v-eq { display: flex; align-items: flex-end; gap: 2px; height: 13px; margin-left: auto; }
.v-eq span { width: 3px; border-radius: 2px; background: #fff; animation: eq .85s ease-in-out infinite; }
.v-eq span:nth-child(1){animation-delay:-.2s} .v-eq span:nth-child(2){animation-delay:-.5s} .v-eq span:nth-child(3){animation-delay:-.1s} .v-eq span:nth-child(4){animation-delay:-.7s}
@keyframes eq { 0%,100%{height:3px} 50%{height:13px} }
.v-rec { display:inline-flex; align-items:center; gap:5px; color:#fff; font-size:10px; font-weight: 600; letter-spacing:.08em; text-shadow:0 1px 4px rgba(0,0,0,.5); }
.v-rec::before { content:""; width:7px; height:7px; border-radius:50%; background:#FF3B3B; animation: pulseDot 1.1s ease-in-out infinite; }

/* =======================================================================
   3 · МОДЕЛИ — товар → каркас → проявление модели → лукбук + реклама
   ======================================================================= */
.reel-model { background: #14141c; }
.reel-model .ml-prod { background-image: url('https://images.unsplash.com/photo-1556228720-195a672e8a03?w=1000&q=80'); filter: brightness(.96); animation: handheld 3s ease-in-out infinite; }
/* сцена 2: тёмный каркас, меш строится, скан идёт вниз */
.reel-model .ml-dark { position: absolute; inset: 0; background:
  radial-gradient(70% 90% at 50% 35%, #2a2a38, #101018);
}
.reel-model .ml-silhouette { position: absolute; inset: 0; z-index: 7;
  background: url('https://images.unsplash.com/photo-1517677208171-0bc6725a3e60?w=1000&q=80') center top/cover;
  -webkit-mask-image: radial-gradient(60% 80% at 50% 38%, #000 55%, transparent 75%);
  mask-image: radial-gradient(60% 80% at 50% 38%, #000 55%, transparent 75%);
  filter: brightness(.4) contrast(1.2) grayscale(1);
  opacity: 0; animation: mlSil 12s ease-in-out infinite; }
@keyframes mlSil { 0%,27%{opacity:0} 32%{opacity:.55} 49%{opacity:.7} 52%{opacity:0} 100%{opacity:0} }
.reel-model .scene:nth-child(2) .mesh { opacity: 0; animation: mlMesh 12s ease-in-out infinite; }
@keyframes mlMesh { 0%,27%{opacity:0} 30%{opacity:.85} 49%{opacity:.4} 52%{opacity:0} 100%{opacity:0} }
.reel-model .scene:nth-child(2) .scan-line { opacity: 0; top: 0; animation: mlScan 12s ease-in-out infinite; }
@keyframes mlScan { 0%,28%{top:0;opacity:0} 31%{opacity:1} 49%{top:calc(100% - 3px);opacity:1} 52%{opacity:0} 100%{opacity:0} }
/* сцена 3: модель проявляется из размытия */
.reel-model .ml-portrait { background: url('https://images.unsplash.com/photo-1517677208171-0bc6725a3e60?w=1000&q=80') center top/cover;
  filter: blur(16px) brightness(.6); animation: mlReveal 12s cubic-bezier(.6,0,.2,1) infinite; }
@keyframes mlReveal { 0%,52%{filter:blur(16px) brightness(.6);transform:scale(1.08)} 70%{filter:blur(0) brightness(1);transform:scale(1)} 74%{filter:blur(0) brightness(1)} 100%{filter:blur(0) brightness(1);transform:scale(1)} }
/* сцена 4: лукбук — смена поз + чип товара + AD */
.reel-model .ml-pose1 { background: url('https://images.unsplash.com/photo-1517677208171-0bc6725a3e60?w=1000&q=80') center top/cover; }
.reel-model .ml-pose2 { background: url('https://images.unsplash.com/photo-1492447166138-50c3889fccb1?w=1000&q=80') center top/cover; }
.reel-model .ml-pose3 { background: url('https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?w=1000&q=80') center top/cover; }
.reel-model .scene:nth-child(4) .ml-grade { position:absolute; inset:0; z-index:6; background: linear-gradient(0deg, rgba(0,0,0,.5), transparent 45%); }
.reel-model .md-product {
  position: absolute; left: 12px; bottom: 26px; z-index: 12;
  display: flex; align-items: center; gap: 9px;
  background: rgba(8,16,24,.86); border-radius: 13px; padding: 6px 13px 6px 6px; box-shadow: 0 8px 22px rgba(0,0,0,.4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  animation: mdProd 12s cubic-bezier(.5,1.4,.4,1) infinite; }
.reel-model .md-product .mp-thumb { width: 32px; height: 32px; border-radius: 8px; flex: none; background: url('https://images.unsplash.com/photo-1556228720-195a672e8a03?w=200&q=80') center/cover; }
.reel-model .md-product .mp-txt { font-size: 12px; font-weight: 600; color: var(--ink); line-height: 1.1; }
.reel-model .md-product .mp-txt small { display: block; font-size: 10px; font-weight: 500; color: var(--on-green); }
@keyframes mdProd { 0%,80%{transform:translateY(22px);opacity:0} 85%,96%{transform:translateY(0);opacity:1} 99%{opacity:0} 100%{opacity:0} }
.reel-model .kt-ad { position: absolute; right: 14px; top: 28px; z-index: 12; font-family:'Instrument Sans', ui-sans-serif, system-ui, sans-serif; font-weight: 600; font-size:16px; color:var(--on-accent); background: var(--accent); padding: 4px 11px; border-radius: 8px; transform: rotate(4deg); animation: ktAd 12s ease infinite; }
[data-palette="lime"] .reel-model .kt-ad { color: var(--ink); }
@keyframes ktAd { 0%,79%{opacity:0;transform:rotate(4deg) scale(.5)} 84%{opacity:1;transform:rotate(4deg) scale(1.12)} 88%{transform:rotate(4deg) scale(1)} 96%{opacity:1} 99%{opacity:0} 100%{opacity:0} }

/* =======================================================================
   4 · ФИРМЕННЫЙ СТИЛЬ — исходник → палитра → лого/шрифт → шаблоны
   ======================================================================= */
.reel-brand { background: #ECE9E3; }
.reel-brand .bl-photo { background-image: url('https://images.unsplash.com/photo-1556228720-195a672e8a03?w=1000&q=80'); animation: handheld 3.4s ease-in-out infinite; }
/* сцена 2: recolor + штамп свотчей */
.reel-brand .bl-base2 { background-image: url('https://images.unsplash.com/photo-1556228720-195a672e8a03?w=1000&q=80'); }
.reel-brand .br-tint { position: absolute; inset: 0; z-index: 4; mix-blend-mode: color;
  background: linear-gradient(135deg, color-mix(in oklab,var(--accent) 75%,transparent), color-mix(in oklab,var(--accent-deep) 60%,transparent));
  opacity: 0; animation: brTint 12s ease-in-out infinite; }
@keyframes brTint { 0%,27%{opacity:0} 36%{opacity:.9} 49%{opacity:.9} 52%{opacity:0} 100%{opacity:0} }
.reel-brand .br-swatches { position: absolute; left: 14px; bottom: 26px; z-index: 11; display: flex; gap: 6px; }
.reel-brand .br-swatches i { width: 26px; height: 26px; border-radius: 7px; box-shadow: 0 4px 12px rgba(0,0,0,.25); opacity: 0; transform: translateY(14px) scale(.5); }
.reel-brand .br-swatches i:nth-child(1){ background: var(--accent); animation: swStamp 12s ease infinite; }
.reel-brand .br-swatches i:nth-child(2){ background: var(--accent-deep); animation: swStamp 12s ease infinite .12s; }
.reel-brand .br-swatches i:nth-child(3){ background: var(--accent-soft); animation: swStamp 12s ease infinite .24s; }
.reel-brand .br-swatches i:nth-child(4){ background: #1E1E27; animation: swStamp 12s ease infinite .36s; }
@keyframes swStamp { 0%,30%{opacity:0;transform:translateY(14px) scale(.5)} 36%{opacity:1;transform:translateY(0) scale(1)} 49%{opacity:1} 52%{opacity:0} 100%{opacity:0} }
/* сцена 3: лого + Aa на фирменном фоне */
.reel-brand .bl-bg3, .reel-brand .bl-prod3 { position: absolute; inset: 0; }
.reel-brand .bl-bg3 { background: linear-gradient(135deg, var(--accent-soft), var(--paper-2)); }
.reel-brand .bl-prod3 { background: url('https://images.unsplash.com/photo-1556228720-195a672e8a03?w=1000&q=80') center/cover;
  -webkit-mask-image: radial-gradient(58% 70% at 50% 50%, #000 60%, transparent 78%);
  mask-image: radial-gradient(58% 70% at 50% 50%, #000 60%, transparent 78%);
  animation: photoZoom 12s ease-in-out infinite; }
.reel-brand .br-logo { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); z-index: 11;
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif; font-weight: 600; font-size: 22px; letter-spacing: -0.04em; color: var(--ink); animation: brLogo 12s ease infinite; }
.reel-brand .br-logo span { color: var(--accent); }
@keyframes brLogo { 0%,53%{opacity:0;transform:translateX(-50%) translateY(-10px)} 60%{opacity:1;transform:translateX(-50%) translateY(0)} 74%{opacity:1} 77%{opacity:0} 100%{opacity:0} }
.reel-brand .br-aa { position: absolute; right: 16px; bottom: 26px; z-index: 11; text-align: right; animation: brAa 12s ease infinite; }
.reel-brand .br-aa b { display: block; font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif; font-weight: 600; font-size: 40px; line-height: .9; letter-spacing: -0.04em; color: var(--ink); }
.reel-brand .br-aa small { font-size: 10px; color: var(--mute); }
@keyframes brAa { 0%,57%{opacity:0;transform:translateY(12px)} 63%{opacity:1;transform:translateY(0)} 74%{opacity:1} 77%{opacity:0} 100%{opacity:0} }
/* сцена 4: карусель фирменных шаблонов */
.reel-brand .scene:nth-child(4) { background: #1b1b24; }
.reel-brand .tpl { position: absolute; inset: 0; display: grid; place-items: center; }
.reel-brand .tpl .frame { position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,.4); background-size: cover; background-position: center; }
.reel-brand .tpl-story .frame { width: 38%; height: 82%; background-image: url('https://images.unsplash.com/photo-1556228720-195a672e8a03?w=600&q=80'); }
.reel-brand .tpl-card .frame { width: 70%; height: 70%; background-image: url('https://images.unsplash.com/photo-1556909114-f6e7ad7d3136?w=800&q=80'); }
.reel-brand .tpl-banner .frame { width: 88%; height: 46%; background-image: url('https://images.unsplash.com/photo-1571781926291-c477ebfd024b?w=900&q=80'); }
.reel-brand .tpl .frame::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 2px color-mix(in oklab,var(--accent) 80%,transparent); border-radius: 12px;
  background: linear-gradient(0deg, color-mix(in oklab,var(--accent) 35%,transparent), transparent 55%); }
.reel-brand .tpl .frame b { position: absolute; left: 10px; bottom: 8px; z-index: 2; font-family:'Instrument Sans', ui-sans-serif, system-ui, sans-serif; font-weight: 600; font-size:11px; color:#fff; letter-spacing:-0.02em; }

/* =======================================================================
   STEPS · «Как это работает» — каскады появления + бегущее выделение
   ======================================================================= */
.upz .up-tile { opacity: 0; transform: scale(.6) translateY(8px); animation: tilePop 6s cubic-bezier(.5,1.3,.4,1) infinite; }
.upz .up-tile:nth-child(1){ animation-delay: -.0s; }
.upz .up-tile:nth-child(2){ animation-delay: -.22s; }
.upz .up-tile:nth-child(3){ animation-delay: -.44s; }
.upz .up-tile:nth-child(4){ animation-delay: -.66s; }
@keyframes tilePop {
  0%,4%    { opacity: 0; transform: scale(.6) translateY(8px); }
  14%      { opacity: 1; transform: scale(1)  translateY(0); }
  86%      { opacity: 1; transform: scale(1)  translateY(0); }
  94%,100% { opacity: 0; transform: scale(.6) translateY(8px); }
}
.up-name-row { opacity: 0; animation: rowIn 6s ease-in-out infinite; }
@keyframes rowIn { 0%,28%{opacity:0; transform:translateY(6px)} 38%,90%{opacity:1; transform:translateY(0)} 96%,100%{opacity:0; transform:translateY(6px)} }
.up-ai { animation: aiPulse 1.3s ease-in-out infinite; }
@keyframes aiPulse { 0%,100%{box-shadow:0 0 0 0 color-mix(in oklab,var(--accent) 50%,transparent)} 50%{box-shadow:0 0 0 5px color-mix(in oklab,var(--accent) 0%,transparent)} }
.ps { transition: background .3s ease, color .3s ease, border-color .3s ease; }
.rg > div { position: relative; opacity: 0; transform: scale(.6); animation: tilePop 6s cubic-bezier(.5,1.3,.4,1) infinite; overflow: hidden; }
.rg > div:nth-child(1){ animation-delay: -.0s; }
.rg > div:nth-child(2){ animation-delay: -.3s; }
.rg > div:nth-child(3){ animation-delay: -.6s; }
.rg > div:nth-child(4){ animation-delay: -.9s; }
.rg > div::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-120%); animation: shimmer 6s ease-in-out infinite; }
.rg > div:nth-child(2)::after { animation-delay: -.3s; }
.rg > div:nth-child(3)::after { animation-delay: -.6s; }
.rg > div:nth-child(4)::after { animation-delay: -.9s; }
@keyframes shimmer { 0%,10%{transform:translateX(-120%)} 22%{transform:translateX(120%)} 100%{transform:translateX(120%)} }

/* HERO — лёгкое оживление результата */
.st-pro { position: relative; }
.st-pro::after { content: ""; position: absolute; inset: 0; border-radius: 12px; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.5) 50%, transparent 65%); transform: translateX(-130%); animation: shimmer 6s ease-in-out infinite; }

/* =======================================================================
   reduced motion — статичные финальные кадры
   ======================================================================= */
@media (prefers-reduced-motion: reduce) {
  .reel *, .upz .up-tile, .up-name-row, .rg > div, .rg > div::after, .st-pro::after { animation: none !important; }
  .reel .scene:nth-child(4) { opacity: 1 !important; }
  .reel .scene:nth-child(1), .reel .scene:nth-child(2), .reel .scene:nth-child(3) { opacity: 0 !important; }
  .reel .car-a { opacity: 1 !important; }
  .reel .car-b, .reel .car-c { opacity: 0 !important; }
  .reel-flash, .reel-bar i { opacity: 0 !important; }
  .reel-model .md-product, .reel-model .kt-ad, .reel-photo .result-badge, .reel-photo .fmt-chip { opacity: 1 !important; transform: none !important; }
  .upz .up-tile, .up-name-row, .rg > div { opacity: 1 !important; transform: none !important; }
}