/* ReadyView scene (assets/templates/readyview-scene.html): site infrastructure converges in a
   shared management plane. Shared by network-builds.html and readyview.html. */
/* Architectural scene: real product imagery and software, with a staged reveal. */
.rv-cinema { position:relative; aspect-ratio: 1.65; isolation:isolate; overflow:hidden; background:#fff; }
.rv-cinema-caption { position:absolute; z-index:4; top:0; left:0; right:0; text-align:center; }
.rv-cinema-caption strong { display:block; font-size:26px; letter-spacing:-.04em; color:#153e54; }
.rv-cinema-caption>span { display:block; font-size:10px; letter-spacing:.16em; color:#667b89; margin-top:6px; }
.rv-city-filters { position:absolute; pointer-events:none; }
.rv-city { position:absolute; inset:0; width:100%; height:100%; opacity:.85; transform:scale(1); pointer-events:none;
    /* Distant rooftops dissolve into white; nearby facades retain their depth. */
    -webkit-mask-image:linear-gradient(to bottom, #0003 5%, #0006 24%, #000b 43%, #000 65%);
    mask-image:linear-gradient(to bottom, #0003 5%, #0006 24%, #000b 43%, #000 65%);
}
.rv-city>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 65%; }
.rv-city-gold { filter:url(#rv-city-gold); opacity:1; }
.rv-cinema [data-medium=fiber] { --rv-medium:#22aab9; }.rv-cinema [data-medium=ethernet] { --rv-medium:#347bd9; }.rv-cinema [data-medium=pair] { --rv-medium:#b49a61; }.rv-cinema [data-medium=coax] { --rv-medium:#697785; }
.rv-property { position:absolute; width:8%; z-index:6; text-align:center; --launch-delay:2.3s; }
.rv-property-visual { position:relative; width:100%; aspect-ratio:910 / 1858; }
.rv-property-rack { display:block; width:100%; height:auto; opacity:0; filter:drop-shadow(0 8px 9px #17314e30); }
.rv-property-logo { position:absolute; top:50%; left:0; width:100%; aspect-ratio:1.5; padding:0; background:transparent; border:0; border-radius:0; box-shadow:none; transform:translateY(-50%); }
.rv-property-logo img { display:block; width:100%; height:100%; object-fit:contain; }
.rv-property--ethernet { --launch-delay:2.52s; }.rv-property--pair { --launch-delay:2.74s; }.rv-property--coax { --launch-delay:2.96s; }
.rv-property>span { position:absolute; top:70%; left:0; }
.rv-property>span { display:inline-flex; align-items:center; justify-content:center; gap:5px; background:#ffffffed; color:#244454; padding:4px 9px; border-radius:4px; white-space:nowrap; font-size:11px; transform:translateX(-50%); margin-left:50%; box-shadow:0 3px 12px #15384a12; }
.rv-property>span:before { content:''; width:6px; height:6px; background:var(--rv-medium); border-radius:50%; }
.rv-property--fiber { left:3.8%; top:47%; }.rv-property--ethernet { left:14%; top:14%; width:7%; }.rv-property--pair { right:14%; top:14%; width:7%; }.rv-property--coax { right:3.5%; top:47%; }
.rv-display { position:absolute; z-index:5; left:22%; width:56%; top:35%; margin:0; padding:6px 6px 0; border:1px solid #253747; border-radius:7px; background:#172532; box-shadow:0 18px 25px -14px #183c4e80; }
.rv-display a { display:block; background:#fff; border-radius:2px; overflow:hidden; }
.rv-display img { display:block; width:100%; height:auto; aspect-ratio:1.632; object-fit:contain; }
.rv-display figcaption { color:#e7ecef; display:flex; align-items:center; justify-content:space-between; padding:6px 9px; font-size:10px; line-height:1.3; }
.rv-display figcaption span { color:#b8c9d3; font-size:9px; }
.rv-cinema.is-playing .rv-city { animation:rv-city-in 1.8s ease-out both; }
.rv-cinema.is-playing .rv-city-gold { animation:rv-city-warm 2s ease-in-out 2.3s both; }
/* Launch from measured organization-card centers, then resolve into brand markers. */
.rv-cinema.is-playing .rv-property { animation:rv-rack-flight 1.35s cubic-bezier(.22,.65,.25,1) var(--launch-delay) both; }
.rv-cinema.is-playing .rv-property-rack { animation:rv-rack-to-logo .55s ease-in-out calc(var(--launch-delay) + 1.25s) both; }
.rv-cinema.is-playing .rv-property-logo { animation:rv-logo-in .55s cubic-bezier(.2,.8,.3,1) calc(var(--launch-delay) + 1.25s) both, rv-logo-bounce 3s ease-in-out calc(var(--launch-delay) + 1.8s) infinite; }
.rv-cinema.is-playing .rv-property>span { animation:rv-label-in .4s ease-out calc(var(--launch-delay) + 1.6s) both; }
.rv-cinema.is-playing .rv-display { animation:rv-screen-in 1.3s cubic-bezier(.2,.7,.2,1) .45s both; }
@keyframes rv-city-warm { from { opacity:0; } to { opacity:1; } }
@keyframes rv-city-in { from { opacity:0; transform:scale(1.08); } to { opacity:.85; transform:scale(1); } }
@keyframes rv-rack-flight {
    0% { opacity:0; transform:translate(var(--org-x, 0px),var(--org-y, 0px)) scale(.08); }
    15% { opacity:1; }
    100% { opacity:1; transform:translate(0,0) scale(1); }
}
@keyframes rv-rack-to-logo { from { opacity:1; transform:scale(1); } to { opacity:0; transform:scale(.35); } }
@keyframes rv-logo-in { from { opacity:0; transform:translateY(-50%) scale(.35); } to { opacity:1; transform:translateY(-50%) scale(1); } }
@keyframes rv-logo-bounce { 0%,100% { transform:translateY(-50%); } 50% { transform:translateY(calc(-50% - 4px)); } }
@keyframes rv-label-in { from { opacity:0; } to { opacity:1; } }
@keyframes rv-screen-in { from { opacity:0; transform:translateY(35px) scale(.93); } to { opacity:1; transform:none; } }
@media(max-width:1000px) { .rv-property>span { font-size:10px; padding:3px 6px; }.rv-display figcaption { font-size:9px; padding:4px 5px; } }
@media(max-width:600px) { .rv-cinema { aspect-ratio:.9; margin-inline:-12px; }.rv-city>img { object-position:center; }.rv-cinema-caption { top:1%; }.rv-cinema-caption strong { font-size:22px; }.rv-cinema-caption>span { font-size:8px; }.rv-property--fiber,.rv-property--coax { top:22%; width:8.5%; }.rv-property--ethernet,.rv-property--pair { top:16%; width:8%; }.rv-property--ethernet { left:29%; }.rv-property--pair { right:29%; }.rv-property>span { font-size:9px; padding:2px 5px; }.rv-display { left:5%; width:90%; top:44%; padding:4px 4px 0; }.rv-display figcaption { font-size:9px; }.rv-display figcaption span { font-size:8px; } }
@media(prefers-reduced-motion:reduce) { .rv-cinema *, .rv-cinema.is-playing * { animation:none!important; transition:none!important; } }

/* Reveal crops of the actual site cards without changing the underlying screenshot. */
.rv-display a { position:relative; }
.rv-site-reveal { position:absolute; inset:0; display:none; pointer-events:none; }
.rv-cinema.is-playing .rv-site-reveal { display:block; }
.rv-site-mask { position:absolute; left:22.4%; top:31.6%; right:17.5%; bottom:4.85%; background:#fff; }
.rv-site-tile { position:absolute; background-image:url('/assets/images/network-builds/readyview-multi-site.webp'); background-repeat:no-repeat; border-radius:3px; transform-origin:center; }
.rv-cinema.is-playing .rv-site-tile { animation:rv-site-arrive .7s cubic-bezier(.16,1,.3,1) var(--site-delay) both; }
@keyframes rv-site-arrive {
    from { opacity:0; transform:translate(var(--site-drift),18px) scale(1.08); box-shadow:0 12px 24px #173c4e25; }
    65% { opacity:1; }
    to { opacity:1; transform:none; box-shadow:0 0 0 transparent; }
}
@media(prefers-reduced-motion:reduce) { .rv-cinema.is-playing .rv-site-reveal { display:none; } }

/* ---- Dark theme ---- */
/* The scene's city render dissolves into white, so on dark it sits on a
   deliberate rounded light plate rather than being recoloured. */
html[data-theme="dark"] .rv-cinema { border-radius: 20px; box-shadow: 0 0 0 1px var(--rl-line); }