/* Selected composition: C's large 5 and E's full film + vertical benefits. */
#vidLayer.device-cinema{position:absolute;inset:0;z-index:7;display:grid;grid-template-rows:auto minmax(0,1fr);gap:clamp(22px,3vh,34px);padding:86px max(24px,6vw) 46px;background:#050706;color:#F4F6F4;opacity:0;pointer-events:none;overflow:hidden}
.device-cinema-heading{width:100%;max-width:1240px;justify-self:center;display:flex;align-items:center;justify-content:space-between;gap:48px;margin:0}
.device-title{margin:0;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.device-prelude{display:block;color:#B7C5BC;font-size:20px;font-weight:500;letter-spacing:-.02em;margin-bottom:7px}
.device-time{display:flex;align-items:center;gap:22px}
.device-time>strong{font-size:clamp(128px,17vh,158px);font-weight:600;line-height:1.02;letter-spacing:0;padding-inline:.025em;flex:0 0 auto;color:#A1C9B6}
.device-time>span{font-size:clamp(38px,4.8vh,46px);line-height:1.05;font-weight:650;letter-spacing:-.04em}
.device-support{max-width:28ch;margin:18px 0 0;color:#BAC5BE;font-size:clamp(19px,1.7vw,25px);line-height:1.45;font-weight:450;letter-spacing:-.015em;text-wrap:pretty}
.device-cinema-content{width:100%;height:100%;min-height:0;max-width:1240px;justify-self:center;display:grid;grid-template-columns:minmax(0,1fr) 236px;gap:clamp(32px,4.4vw,68px);align-items:center}
.device-cinema-stage{position:relative;container-type:size;width:100%;height:100%;min-height:0;justify-self:center}
.device-cinema-window{position:absolute;left:50%;top:50%;width:min(100cqw,calc(100cqh * 16 / 9));height:min(100cqh,calc(100cqw * 9 / 16));aspect-ratio:16/9;overflow:hidden;transform:translate(-50%,-50%) scale(var(--device-scale,.9));clip-path:inset(0 var(--device-inset,21.875%) round var(--media-radius,24px));border-radius:var(--media-radius,24px);background:#E4E6E3;will-change:transform,clip-path}
#rotVideo{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:contain;display:block}
#deviceFilmToggle{position:absolute;right:calc(var(--device-inset,21.875%) + 15px);bottom:15px;width:44px;height:44px;border:1px solid #ffffff66;border-radius:50%;background:#15352ac7;color:#fff;display:grid;place-items:center;font:15px system-ui,sans-serif;cursor:pointer;touch-action:manipulation}
#deviceFilmToggle:focus-visible{outline:2px solid #68CDB2;outline-offset:4px}
.device-cinema-points{display:grid;gap:clamp(24px,3.5vh,38px);margin:0;padding:0;width:100%;background:none;border:0}
.device-cinema-point{display:grid;grid-template-columns:23px minmax(0,1fr);gap:15px;min-width:0;padding:0;border:0;opacity:0;transform:translate3d(0,12px,0);transition:opacity .6s ease,transform .8s cubic-bezier(.22,.7,.2,1)}
.device-cinema-point[data-shown]{opacity:1;transform:none}
.device-cinema-number{font:600 11px/1.4 Archivo,system-ui,sans-serif;letter-spacing:.08em;color:#A1C9B6;padding-top:6px}
.device-cinema-point h3{font-size:clamp(24px,2.1vw,31px);font-weight:580;line-height:1.1;letter-spacing:-.025em;margin:0}
@media(min-width:761px) and (max-width:1050px){.device-cinema-content{grid-template-columns:minmax(0,1fr) 200px;gap:28px}.device-cinema-point h3{font-size:25px}.device-support{font-size:20px;max-width:25ch}}
@media(max-width:760px){
 #vidLayer.device-cinema{padding:76px 24px 84px;gap:24px;grid-template-rows:auto auto;align-content:center}
 .device-cinema-heading{display:block;max-width:none}
 .device-prelude{font-size:18px;margin-bottom:6px}
 .device-time{gap:18px}.device-time>strong{font-size:128px}.device-time>span{font-size:35px}
 .device-support{font-size:18px;line-height:1.42;margin:17px 0 0;max-width:34ch}
 .device-cinema-content{display:grid;height:auto;grid-template-columns:1fr;gap:24px}
 .device-cinema-stage{height:auto;aspect-ratio:16/9}
 .device-cinema-points{gap:14px}
 .device-cinema-point{grid-template-columns:23px minmax(0,1fr);gap:13px}
 .device-cinema-number{font-size:11px;padding-top:3px}
 .device-cinema-point h3{font-size:21px;line-height:1.2}
 .device-cinema-point h3 br{display:none}
 #deviceFilmToggle{right:calc(var(--device-inset,21.875%) + 10px);bottom:10px}
}
@media(max-width:760px) and (max-height:720px){
 #vidLayer.device-cinema{padding:62px 20px 38px;gap:15px}
 .device-prelude{font-size:16px;margin-bottom:5px}
 .device-time{gap:15px}.device-time>strong{font-size:76px}.device-time>span{font-size:29px}
 .device-support{font-size:16px;line-height:1.38;margin-top:12px}
 .device-cinema-content{gap:17px}.device-cinema-points{gap:10px}
 .device-cinema-point h3{font-size:19px}.device-cinema-number{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
 #vidLayer.device-cinema{position:relative!important;opacity:1!important;pointer-events:auto!important;transform:none!important;min-height:calc(var(--a5-vh,1vh)*100);grid-template-rows:auto auto;margin-top:35px}
 .device-cinema-content{height:auto}.device-cinema-stage{height:auto;aspect-ratio:16/9}
 .device-cinema-point{opacity:1!important;transform:none!important;transition:none}
 .device-cinema-window{clip-path:inset(0 round var(--media-radius,24px))!important;transform:translate(-50%,-50%);will-change:auto}
 #deviceFilmToggle{right:15px}
}

/* Slow mint currents inside the numeral, active only while the banner is visible. */
@supports (background-clip:text) or (-webkit-background-clip:text){
 .device-time>strong{background:linear-gradient(115deg,#5BAF8D 0%,#A1C9B6 25%,#DEF9E8 40%,#66B897 52%,#A1C9B6 70%,#5BAF8D 100%);background-size:300% 200%;background-clip:text;-webkit-background-clip:text;color:transparent;animation:five-current 6s ease-in-out infinite alternate;animation-play-state:paused}
 #vidLayer[data-flow-active="true"] .device-time>strong{animation-play-state:running}
}
@keyframes five-current{from{background-position:0% 35%}to{background-position:100% 65%}}
#ringWidget[data-complete="true"]{background:#183E2C!important;box-shadow:inset 0 0 0 1px #A5DFBC66,0 0 22px #68CDB22B!important;animation:ring-arrival 1.1s ease-out 1}
#ringWidget[data-complete="true"] #ringTime{display:flex;flex-direction:column;align-items:center;gap:3px;font:600 8px/1 system-ui,sans-serif!important;letter-spacing:.1em!important}
#ringTime .completion-check{width:21px;height:17px;overflow:visible}
#ringTime .completion-check path{fill:none;stroke:#CDF6DD;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:0;animation:completion-draw .55s ease-out both}
@keyframes completion-draw{from{stroke-dashoffset:30}to{stroke-dashoffset:0}}
@keyframes ring-arrival{0%{filter:drop-shadow(0 0 0 #93E4BB00);transform:scale(.92)}40%{filter:drop-shadow(0 0 14px #93E4BB99);transform:scale(1.09)}100%{filter:drop-shadow(0 0 24px #93E4BB00);transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.device-time>strong,#ringWidget[data-complete="true"],#ringTime .completion-check path{animation:none!important}.device-time>strong{background:none;color:#A1C9B6}}

/* Keep numeral paint inside its own box and columns within narrow viewports. */
.device-cinema-heading,.device-title,.device-time,.device-time>span,.device-support{min-width:0}
@media(max-width:760px){
 #vidLayer.device-cinema{box-sizing:border-box}
 .device-time{gap:clamp(12px,4vw,18px)}
 .device-time>strong{font-size:clamp(100px,32.8vw,128px)}
 .device-time>span{font-size:clamp(29px,8.97vw,35px)}
 .device-cinema-point{transition:opacity .18s ease,transform .22s ease}
}
@media(max-width:760px) and (max-height:720px){.device-time>strong{font-size:76px}.device-time>span{font-size:29px}}