/* Relay Motion: кадр 1920×1080 для видеоуроков Amazon Relay.
   Все анимации сцены подчинены времени озвучки (js/relay-motion.js),
   поэтому перемотка, пауза и скорость воспроизведения показывают ровно тот же кадр. */

.rm-canvas { position:absolute; left:0; top:0; width:1920px; height:1080px; transform-origin:0 0; overflow:hidden;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; color:#fff; line-height:1.25;
  background:#060a14; --ease:cubic-bezier(.2,.8,.25,1); --cy:#22d3ee; --am:#ff9900; --gr:#10b981; --rd:#ef4444; --vi:#a78bfa; --yl:#fbbf24;
  --tx:#e2e8f0; --mu:#94a3b8; --dim:#64748b; --line:rgba(255,255,255,.10); }
.rm-canvas * { box-sizing:border-box; }
.rm-canvas svg { overflow:visible; }

/* ── фон: живёт поверх всех сцен, не сбрасывается при смене сцены ── */
.rm-bg { position:absolute; inset:0; z-index:0; pointer-events:none; }
/* Пятна света — радиальный градиент, а не круг с filter:blur(90px): размытие такого размера
   держало в памяти огромную поверхность и на телефоне во весь экран роняло страницу.
   Цвет пятна плавно меняется со сменой сцены через зарегистрированные --acc1/--acc2. */
@property --acc1 { syntax:'<color>'; inherits:true; initial-value:rgba(34,211,238,.35); }
@property --acc2 { syntax:'<color>'; inherits:true; initial-value:rgba(255,153,0,.22); }
.rm-bg .glow { position:absolute; opacity:.55; }
.rm-bg .g1 { width:1440px; height:1240px; left:-530px; top:-570px; transition:--acc1 1.2s; animation:rmDrift1 26s ease-in-out infinite alternate;
  background:radial-gradient(closest-side, var(--acc1) 30%, transparent 90%);
  background:radial-gradient(closest-side, var(--acc1) 34%, color-mix(in srgb, var(--acc1) 50%, transparent) 62%, transparent 92%); }
.rm-bg .g2 { width:1440px; height:1240px; right:-570px; bottom:-590px; transition:--acc2 1.2s; animation:rmDrift2 30s ease-in-out infinite alternate;
  background:radial-gradient(closest-side, var(--acc2) 30%, transparent 90%);
  background:radial-gradient(closest-side, var(--acc2) 34%, color-mix(in srgb, var(--acc2) 50%, transparent) 62%, transparent 92%); }
.rm-bg .grid { position:absolute; inset:-60px; opacity:.55;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:60px 60px; -webkit-mask-image:radial-gradient(70% 60% at 50% 45%,#000 25%,transparent 85%); mask-image:radial-gradient(70% 60% at 50% 45%,#000 25%,transparent 85%);
  animation:rmGrid 60s linear infinite; }
.rm-bg .noise { position:absolute; inset:0; opacity:.05; background-image:radial-gradient(rgba(255,255,255,.6) 1px, transparent 1px); background-size:3px 3px; }
.rm-bg .vign { position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.55)); }
@keyframes rmDrift1 { to { transform:translate(180px,120px) scale(1.15); } }
@keyframes rmDrift2 { to { transform:translate(-160px,-100px) scale(1.1); } }
@keyframes rmGrid { to { transform:translate(60px,60px); } }
/* Телефон: фон стоит. Каждое плывущее пятно 1440×1240 и сетка — отдельный слой
   в памяти поверх кадра 1920×1080; на iPhone вкладка с ними падала. */
@media (hover:none) and (pointer:coarse) { .rm-bg .glow, .rm-bg .grid { animation:none; } }

/* ── шапка кадра: глава и тема сцены ── */
.rm-hud { position:absolute; left:80px; right:80px; top:44px; height:56px; z-index:20; display:flex; align-items:center; gap:22px; pointer-events:none; }
.rm-hud .ch { display:flex; align-items:center; gap:14px; padding:10px 20px 10px 14px; border-radius:99px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12);
  font-size:20px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--hacc,#22d3ee); white-space:nowrap; }
.rm-hud .ch i { width:12px; height:12px; border-radius:50%; background:var(--hacc,#22d3ee); box-shadow:0 0 16px var(--hacc,#22d3ee); animation:rmBlink 2s ease-in-out infinite; }
.rm-hud .tt { font-size:26px; font-weight:600; color:var(--tx); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rm-hud .sp { flex:1; }
.rm-hud .no { font:700 20px ui-monospace,Menlo,Consolas,monospace; color:var(--mu); letter-spacing:.08em; }
.rm-hud .no b { color:#fff; }
.rm-hud .brand { font-size:18px; font-weight:900; letter-spacing:.18em; color:rgba(255,255,255,.35); }
.rm-hud.swap .tt, .rm-hud.swap .ch { animation:rmHudIn .6s var(--ease) both; }
@keyframes rmHudIn { from { opacity:0; transform:translateY(-14px); } }
@keyframes rmBlink { 50% { opacity:.35; } }
.rm-canvas.nohud .rm-hud { display:none; }

/* ── сцены ── */
.rm-scene { position:absolute; inset:0; z-index:5; display:none; }
.rm-scene.live { display:block; }
.rm-cam { position:absolute; inset:0; transform-origin:50% 50%; }
.rm-scene .ab { position:absolute; }
.beat { position:absolute; left:80px; right:80px; top:140px; bottom:170px; }

/* субтитры, вшитые в кадр (только при записи ролика) */
.rm-subs { position:absolute; left:0; right:0; bottom:44px; z-index:30; display:flex; justify-content:center; pointer-events:none; }
.rm-subs span { max-width:1500px; padding:14px 28px; border-radius:14px; background:var(--lt-c-040810b8, rgba(4,8,16,.72)); font-size:34px; line-height:1.35; font-weight:500; text-align:center; text-wrap:balance; }
.rm-subs span:empty { display:none; }

/* ── типографика ── */
.h0 { font-size:150px; font-weight:900; letter-spacing:-.035em; line-height:.95; }
.h1 { font-size:92px; font-weight:900; letter-spacing:-.03em; line-height:1.02; }
.h2 { font-size:64px; font-weight:800; letter-spacing:-.02em; line-height:1.08; }
.h3 { font-size:44px; font-weight:800; letter-spacing:-.01em; line-height:1.12; }
.h4 { font-size:34px; font-weight:700; line-height:1.2; }
.p { font-size:30px; color:var(--tx); line-height:1.4; }
.ps { font-size:25px; color:var(--mu); line-height:1.4; }
.kick { font-size:24px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--cy); }
.mono { font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace; }
.grad { background:linear-gradient(100deg,#22d3ee,#60a5fa 40%,#ff9900); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.grad-am { background:linear-gradient(100deg,#ffd27a,#ff9900 60%,#ff6a00); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.c-cy { color:var(--cy); } .c-am { color:var(--am); } .c-gr { color:#34d399; } .c-rd { color:#f87171; } .c-vi { color:var(--vi); } .c-mu { color:var(--mu); } .c-yl { color:var(--yl); }
.center { text-align:center; }
.row { display:flex; align-items:center; } .col { display:flex; flex-direction:column; }
.gap8 { gap:8px; } .gap12 { gap:12px; } .gap16 { gap:16px; } .gap24 { gap:24px; } .gap32 { gap:32px; } .gap48 { gap:48px; }
.fill { flex:1; min-width:0; }
.strike { position:relative; } .strike::after { content:''; position:absolute; left:-4%; right:-4%; top:52%; height:6px; border-radius:3px; background:#ef4444; transform-origin:left; animation:rmStrike .5s var(--ease) both; animation-delay:calc(var(--dl,0s) + .5s); }
@keyframes rmStrike { from { transform:scaleX(0); } }

/* ── карточки ── */
.card { position:relative; border-radius:28px; padding:32px 36px; background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.025)), rgba(8,12,24,.78); border:1.5px solid rgba(255,255,255,.12);
  box-shadow:0 30px 60px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08); }
.card.sm { padding:22px 26px; border-radius:22px; }
.card.cy { border-color:rgba(34,211,238,.45); background:linear-gradient(180deg,rgba(34,211,238,.14),rgba(34,211,238,.03)), rgba(8,12,24,.8); }
.card.am { border-color:rgba(255,153,0,.5); background:linear-gradient(180deg,rgba(255,153,0,.15),rgba(255,153,0,.03)), rgba(8,12,24,.8); }
.card.gr { border-color:rgba(16,185,129,.5); background:linear-gradient(180deg,rgba(16,185,129,.15),rgba(16,185,129,.03)), rgba(8,12,24,.8); }
.card.rd { border-color:rgba(239,68,68,.55); background:linear-gradient(180deg,rgba(239,68,68,.16),rgba(239,68,68,.03)), rgba(8,12,24,.8); }
.card.vi { border-color:rgba(167,139,250,.5); background:linear-gradient(180deg,rgba(167,139,250,.15),rgba(167,139,250,.03)), rgba(8,12,24,.8); }
.card.dim { opacity:.55; filter:saturate(.4); }
.card .lab { font-size:20px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--mu); margin-bottom:10px; }
.pill { display:inline-flex; align-items:center; gap:10px; padding:10px 20px; border-radius:99px; font-size:24px; font-weight:700; background:rgba(255,255,255,.07); border:1.5px solid rgba(255,255,255,.14); white-space:nowrap; }
.pill.cy { color:#67e8f9; border-color:rgba(34,211,238,.5); background:rgba(34,211,238,.12); }
.pill.am { color:#ffb648; border-color:rgba(255,153,0,.55); background:rgba(255,153,0,.13); }
.pill.gr { color:#6ee7b7; border-color:rgba(16,185,129,.55); background:rgba(16,185,129,.13); }
.pill.rd { color:#fca5a5; border-color:rgba(239,68,68,.6); background:rgba(239,68,68,.14); }
.pill.vi { color:#c4b5fd; border-color:rgba(167,139,250,.55); background:rgba(167,139,250,.13); }
.pill .i { width:26px; height:26px; }
.num { font-weight:900; letter-spacing:-.03em; font-variant-numeric:tabular-nums; }

/* иконки: общий спрайт, штрих */
.i { width:48px; height:48px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; }
.ibox { display:flex; align-items:center; justify-content:center; width:84px; height:84px; border-radius:22px; background:rgba(255,255,255,.07); border:1.5px solid rgba(255,255,255,.12); flex:0 0 auto; }
.ibox .i { width:46px; height:46px; }
.ibox.cy { color:#67e8f9; background:rgba(34,211,238,.13); border-color:rgba(34,211,238,.4); }
.ibox.am { color:#ffb648; background:rgba(255,153,0,.13); border-color:rgba(255,153,0,.45); }
.ibox.gr { color:#6ee7b7; background:rgba(16,185,129,.13); border-color:rgba(16,185,129,.45); }
.ibox.rd { color:#fca5a5; background:rgba(239,68,68,.14); border-color:rgba(239,68,68,.5); }
.ibox.vi { color:#c4b5fd; background:rgba(167,139,250,.13); border-color:rgba(167,139,250,.45); }
.ibox.lg { width:120px; height:120px; border-radius:30px; } .ibox.lg .i { width:64px; height:64px; }
.ibox.sm { width:60px; height:60px; border-radius:16px; } .ibox.sm .i { width:32px; height:32px; }

/* список-строки */
.li { display:flex; align-items:center; gap:22px; padding:20px 26px; border-radius:20px; background:rgba(255,255,255,.045); border:1.5px solid rgba(255,255,255,.09); font-size:30px; }
.li .ibox { width:64px; height:64px; border-radius:18px; } .li .ibox .i { width:34px; height:34px; }
.li b { font-weight:800; }
.li .sub { display:block; font-size:22px; color:var(--mu); font-weight:500; margin-top:4px; }
.li.ok { border-color:rgba(16,185,129,.4); background:rgba(16,185,129,.07); }
.li.bad { border-color:rgba(239,68,68,.45); background:rgba(239,68,68,.08); }
.li.hot { border-color:rgba(255,153,0,.55); background:rgba(255,153,0,.09); }

/* знак «галочка/крест» */
.mark { width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.mark.ok { background:#10b981; box-shadow:0 0 30px rgba(16,185,129,.5); } .mark.no { background:#ef4444; box-shadow:0 0 30px rgba(239,68,68,.5); }
.mark .i { width:32px; height:32px; stroke:#fff; stroke-width:3; }

/* печать поверх */
.stamp { display:inline-block; padding:14px 30px; border:5px solid currentColor; border-radius:14px; font-size:44px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; transform:rotate(-8deg); }
.stamp.rd { color:#f87171; background:rgba(239,68,68,.1); } .stamp.gr { color:#34d399; background:rgba(16,185,129,.1); }

/* окно браузера */
.win { border-radius:22px; overflow:hidden; background:#0d1424; border:1.5px solid rgba(255,255,255,.14); box-shadow:0 40px 90px rgba(0,0,0,.55); }
.win .bar { height:52px; display:flex; align-items:center; gap:10px; padding:0 18px; background:#141d31; border-bottom:1px solid rgba(255,255,255,.08); }
.win .bar i { width:14px; height:14px; border-radius:50%; background:#ef4444; } .win .bar i:nth-child(2) { background:#f59e0b; } .win .bar i:nth-child(3) { background:#10b981; }
.win .url { margin-left:18px; flex:1; height:32px; border-radius:10px; background:rgba(255,255,255,.06); display:flex; align-items:center; padding:0 16px; font-size:18px; color:var(--mu); }
.win .url b { color:#fff; font-weight:600; }
.win .body { position:relative; padding:26px; }
.win img { display:block; width:100%; }

/* телефон */
.phone { position:relative; width:340px; height:700px; border-radius:54px; padding:14px; background:linear-gradient(160deg,#2a3346,#0c111c); border:2px solid rgba(255,255,255,.18); box-shadow:0 40px 90px rgba(0,0,0,.6); }
.phone .scr { position:relative; width:100%; height:100%; border-radius:42px; overflow:hidden; background:#0b1222; }
.phone .scr::before { content:''; position:absolute; top:12px; left:50%; width:110px; height:30px; margin-left:-55px; border-radius:20px; background:#000; z-index:5; }
.phone .scr img { width:100%; height:100%; object-fit:cover; object-position:top; }
.phone .app { position:absolute; inset:0; padding:62px 22px 22px; display:flex; flex-direction:column; gap:14px; font-size:20px; }
.phone .apph { font-size:24px; font-weight:800; }
.phone .row2 { display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); }
.btnx { display:flex; align-items:center; justify-content:center; gap:10px; height:64px; border-radius:16px; font-size:24px; font-weight:800; background:linear-gradient(135deg,#ff9900,#ff7a00); color:#1a0f00; }
.btnx.cy { background:linear-gradient(135deg,#22d3ee,#0ea5e9); color:#01212a; }
.btnx.gr { background:linear-gradient(135deg,#34d399,#059669); color:#022c1f; }
.btnx.off { background:rgba(255,255,255,.08); color:rgba(255,255,255,.35); border:1.5px dashed rgba(255,255,255,.2); }

/* курсор */
.cursor { position:absolute; width:46px; height:46px; z-index:40; filter:drop-shadow(0 6px 10px rgba(0,0,0,.6)); pointer-events:none; }
.cursor .ring { position:absolute; left:-22px; top:-22px; width:44px; height:44px; border-radius:50%; border:3px solid #fff; opacity:0; }

/* переключатель */
.tgl { display:inline-block; width:84px; height:46px; border-radius:99px; background:rgba(255,255,255,.14); position:relative; flex:0 0 auto; }
.tgl::after { content:''; position:absolute; top:5px; left:5px; width:36px; height:36px; border-radius:50%; background:#fff; box-shadow:0 3px 8px rgba(0,0,0,.4); }

/* шкалы */
.meter { height:22px; border-radius:99px; background:rgba(255,255,255,.08); overflow:hidden; position:relative; }
.meter > i { position:absolute; inset:0 auto 0 0; border-radius:99px; background:linear-gradient(90deg,#22d3ee,#ff9900); }

/* карта США */
.usmap { position:absolute; width:1000px; height:621px; transform-origin:0 0; }
.usmap svg.m { position:absolute; inset:0; width:1000px; height:621px; }
.usmap .st { fill:rgba(148,163,184,.08); stroke:rgba(148,163,184,.35); stroke-width:1; vector-effect:non-scaling-stroke; }
.usmap .st.hl { fill:rgba(255,153,0,.22); stroke:#ff9900; }
.usmap .node { position:absolute; width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%; background:#ff9900; box-shadow:0 0 0 4px rgba(255,153,0,.2), 0 0 18px rgba(255,153,0,.8); }
.usmap .node.cy { background:#22d3ee; box-shadow:0 0 0 4px rgba(34,211,238,.2), 0 0 18px rgba(34,211,238,.8); }
.usmap .rt { fill:none; stroke:rgba(34,211,238,.75); stroke-width:2.5; vector-effect:non-scaling-stroke; }
.usmap .rt.am { stroke:rgba(255,153,0,.85); }
.usmap .mover { position:absolute; left:0; top:0; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:#fff; box-shadow:0 0 14px #fff, 0 0 30px #22d3ee; offset-rotate:0deg; }

/* ── движения, которые запускает время сцены ── */
.spin { animation:rmSpin 6s linear infinite; }
.spin-fast { animation:rmSpin 1.6s linear infinite; }
@keyframes rmSpin { to { transform:rotate(360deg); } }
.pulse { animation:rmPulse 1.8s ease-in-out infinite; }
@keyframes rmPulse { 50% { transform:scale(1.08); } }
.ping { position:relative; }
.ping::after { content:''; position:absolute; inset:-6px; border-radius:inherit; border:3px solid currentColor; opacity:0; animation:rmPing 1.8s ease-out infinite; animation-delay:var(--dl,0s); }
@keyframes rmPing { 0% { opacity:.8; transform:scale(.9); } 100% { opacity:0; transform:scale(1.5); } }
.bob { animation:rmBob 3s ease-in-out infinite; }
@keyframes rmBob { 50% { transform:translateY(-10px); } }
.glowpulse { animation:rmGlow 2.2s ease-in-out infinite; }
@keyframes rmGlow { 50% { box-shadow:0 0 0 10px rgba(255,153,0,.12), 0 0 60px rgba(255,153,0,.35); } }
.glowpulse.rd { animation-name:rmGlowR; } @keyframes rmGlowR { 50% { box-shadow:0 0 0 10px rgba(239,68,68,.14), 0 0 60px rgba(239,68,68,.4); } }
.dash { stroke-dasharray:10 12; animation:rmDash 1s linear infinite; }
@keyframes rmDash { to { stroke-dashoffset:-22; } }
.shake { animation:rmShake .5s ease-in-out 2; animation-delay:calc(var(--dl,0s) + .6s); }
@keyframes rmShake { 20%,60% { transform:translateX(-10px); } 40%,80% { transform:translateX(10px); } }
.tgl.on { background:#10b981; } .tgl.on::after { left:43px; }
.road-lines { animation:rmRoad .6s linear infinite; }
@keyframes rmRoad { to { transform:translateX(-80px); } }

@media (prefers-reduced-motion:reduce) { .rm-bg * { animation:none !important; } }