:root .sig--film-spot { background: radial-gradient(70% 60% at 50% 40%, rgba(161, 0, 255, .22), transparent 70%), #141217; }
:root .sig--film-spot .sp { position: absolute; inset: 0; container-type: size; display: grid; place-items: center; color: #fff; }
:root .sig--film-spot .sp__dev { position: relative; margin-top: -34px; transition: width .9s var(--ease-out), height .9s var(--ease-out), border-radius .9s var(--ease-out); padding: 0; border-radius: 16px; background: #0b0a0d; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 0 0 7px #222027, 0 0 0 8px rgba(255, 255, 255, .08), 0 50px 80px -30px rgba(0, 0, 0, .9); }
:root .sig--film-spot .sp__dev.is-tv { width: min(82cqw, 126cqh); height: min(46.1cqw, 70.9cqh); }
:root .sig--film-spot .sp__dev.is-phone { width: 39.9cqh; height: 70.9cqh; border-radius: 26px; }
:root .sig--film-spot .sp__stand { position: absolute; left: 50%; top: calc(100% + 8px); width: 26%; height: 22px; translate: -50% 0; background: linear-gradient(180deg, #2a2730, #18161c); clip-path: polygon(38% 0, 62% 0, 70% 70%, 100% 80%, 100% 100%, 0 100%, 0 80%, 30% 70%); transition: opacity .5s; }
:root .sig--film-spot .is-phone .sp__stand { opacity: 0; }
:root .sig--film-spot .sp__scr { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; container-type: size; }
:root .sig--film-spot .sp__layers, :root .sig--film-spot .sp__sc { position: absolute; inset: 0; }
:root .sig--film-spot .sp__sc { z-index: 0; display: grid; place-items: center; text-align: center; }
:root .sig--film-spot .sp__big { position: relative; z-index: 2; padding: 0 8%; font: 600 min(11cqw, 22cqh)/1 var(--f-display); letter-spacing: -.045em; text-wrap: balance; }
:root .sig--film-spot .sp__sc--type .sp__big { font-size: min(8cqw, 16cqh); }
:root .sig--film-spot .sp__sc--count .sp__big { font-size: min(40cqw, 50cqh); color: var(--lilac); }
:root .sig--film-spot .sp__cl { position: absolute; inset: 6%; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 2cqh 3cqw; }
:root .sig--film-spot .sp__cl span { font: 600 min(4.4cqw, 8cqh)/1 var(--f-display); color: rgba(255, 255, 255, .8); opacity: 0; transform: translateY(8px); transition: opacity .25s calc(var(--i) * 60ms), transform .4s calc(var(--i) * 60ms) var(--ease-out), color .3s; }
:root .sig--film-spot .sp__sc--clutter.on .sp__cl span { opacity: 1; transform: none; }
:root .sig--film-spot .sp__sc--clutter.cut .sp__cl span { color: rgba(255, 255, 255, .14); text-decoration: line-through; text-decoration-color: var(--v); }
:root .sig--film-spot .sp__sc--clutter .sp__big { opacity: 0; transform: scale(1.4); transition: opacity .3s, transform .5s var(--ease-out); }
:root .sig--film-spot .sp__sc--clutter.cut .sp__big { opacity: 1; transform: none; }
:root .sig--film-spot .sp__sc--spot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 70cqh; height: 70cqh; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(227, 184, 255, .35), rgba(161, 0, 255, .12) 60%, transparent); transform: scale(.2); opacity: 0; transition: transform 1.2s var(--ease-out), opacity .6s; }
:root .sig--film-spot .sp__sc--spot.on::before { transform: none; opacity: 1; }
:root .sig--film-spot .sp__sc--end { background: radial-gradient(80% 90% at 50% 40%, #3a1a5c, #120c18 75%); }
:root .sig--film-spot .sp__end { display: grid; justify-items: center; gap: min(2.2cqh, 2cqw); }
:root .sig--film-spot .sp__mark { width: min(12cqw, 16cqh); aspect-ratio: 1; opacity: 0; transform: scale(.4) rotate(-40deg); transition: opacity .4s, transform .8s var(--ease-back); }
:root .sig--film-spot .sp__mark svg { width: 100%; height: 100%; fill: none; stroke: var(--lilac); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
:root .sig--film-spot .sp__claim { font: 600 min(10cqw, 15cqh)/1 var(--f-display); letter-spacing: -.05em; opacity: 0; transform: translateY(14px); transition: opacity .6s .25s, transform .9s .25s var(--ease-out); }
:root .sig--film-spot .sp__sub { font: 500 min(3cqw, 5cqh)/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--lilac); opacity: 0; transition: opacity .6s .6s; }
:root .sig--film-spot .sp__cta { margin-top: min(1.6cqh, 1.6cqw); padding: min(1.6cqh, 1.4cqw) min(4cqh, 3.4cqw); border-radius: 999px; background: var(--v); font: 600 min(2.8cqw, 4.6cqh)/1 var(--f-display); opacity: 0; transform: scale(.8); transition: opacity .4s .9s, transform .6s .9s var(--ease-back); }
:root .sig--film-spot .sp__sc--end.on .sp__mark, :root .sig--film-spot .sp__sc--end.on .sp__claim, :root .sig--film-spot .sp__sc--end.on .sp__sub, :root .sig--film-spot .sp__sc--end.on .sp__cta { opacity: 1; transform: none; }
:root .sig--film-spot .sp__ad { position: absolute; left: 3.5%; top: 4.5%; z-index: 3; padding: 4px 8px; border-radius: 4px; background: rgba(0, 0, 0, .55); font: 600 11px/1 var(--f-body); letter-spacing: .04em; color: #fff; }
:root .sig--film-spot .sp__ring { position: absolute; right: 3%; top: 3%; z-index: 3; width: clamp(32px, 9cqh, 46px); aspect-ratio: 1; display: grid; place-items: center; }
:root .sig--film-spot .sp__ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
:root .sig--film-spot .sp__ring circle { fill: rgba(0, 0, 0, .5); stroke: rgba(255, 255, 255, .2); stroke-width: 3; }
:root .sig--film-spot .sp__ring .sp__arc { fill: none; stroke: var(--lilac); stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linecap: round; }
:root .sig--film-spot .sp__ring b { position: relative; font: 600 clamp(11px, 3.4cqh, 15px)/1 var(--f-display); font-variant-numeric: tabular-nums; }
:root .sig--film-spot .sp__skip { position: absolute; right: 0; bottom: 12%; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px 9px 14px; background: rgba(0, 0, 0, .7); border: 1px solid rgba(255, 255, 255, .25); border-right: 0; font: 500 12px/1 var(--f-body); color: rgba(255, 255, 255, .9); transform: translateX(105%); transition: transform .5s var(--ease-out), background .3s; }
:root .sig--film-spot .sp__skip.on { transform: none; }
:root .sig--film-spot .sp__skip.go { background: rgba(255, 255, 255, .92); color: #111; }
:root .sig--film-spot .sp__skip em { font-style: normal; white-space: nowrap; }
:root .sig--film-spot .sp__skip svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
:root .sig--film-spot .is-phone .sp__skip { display: none; }
:root .sig--film-spot .sp__prog { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; height: 4px; background: rgba(255, 255, 255, .15); }
:root .sig--film-spot .sp__prog i { position: absolute; inset: 0; background: #c98cff; transform-origin: left; transform: scaleX(0); }
:root .sig--film-spot .sp__fmts { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 0 12px; }
:root .sig--film-spot .sp__fmts li { padding: 6px 11px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .7); font: 500 12px/1 var(--f-body); transition: all .5s var(--ease-out); }
:root .sig--film-spot .sp__fmts li.on { border-color: var(--v); background: rgba(161, 0, 255, .25); color: #fff; }
@container (max-width: 520px){:root .sig--film-spot .sp__dev.is-tv { width: 88cqw; height: 49.5cqw; }
:root .sig--film-spot .sp__fmts li { font-size: 11px; padding: 5px 8px; }
:root .sig--film-spot .sp__skip { font-size: 10px; padding: 6px 8px; }

}