/* live-website-lw3 (owner-approved noviera Live Website, 2026-10-14, steps 05 and 06): Freddy's stage, shared by the display (the
   website on a computer), the phone of a phone-only visitor and the admin preview. The night panel of the approved frames: the
   video fills it; while a clip is not recorded the brand mark sits in it with the script as captions at the bottom; the tag
   "Freddy · recorded for you" at the top on the leading side only while a recording plays; Sound on at the top on the trailing
   side when the browser started the video muted. While Freddy listens without a recording the mark breathes. Sizes follow the
   panel's own width (container units), so one stage works from a phone to a large screen. Logical properties: Arabic mirrors. */
.nvl-stage{--palette-fr-a:#1F2A44;--palette-fr-b:#101828;--palette-fr-c:#0A0F1C;--palette-fr-rim:#243049;--palette-fr-ink:#FFFFFF;--palette-fr-soft:#E2E8F0;
 --palette-fr-green:#22C55E;--palette-fr-glass:#0B1220;
 position:relative;container-type:inline-size;aspect-ratio:16/10;border-radius:clamp(14px,3.2cqi,24px);overflow:hidden;isolation:isolate;
 border:1px solid var(--palette-fr-rim);display:grid;place-items:center;
 background:radial-gradient(120% 90% at 50% 20%,var(--palette-fr-a) 0%,var(--palette-fr-b) 55%,var(--palette-fr-c) 100%)}
.nvl-stage>img{width:clamp(56px,18cqi,150px);height:auto;opacity:.95;transform:translateY(-8%)}
.nvl-stage__v{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--palette-fr-c);z-index:1}
.nvl-stage__tag{position:absolute;z-index:3;inset-block-start:clamp(8px,2.6cqi,18px);inset-inline-start:clamp(8px,2.8cqi,20px);margin:0;display:inline-flex;align-items:center;gap:.55em;
 font-size:clamp(11px,2.1cqi,15px);line-height:1.2;color:var(--palette-fr-soft);background:color-mix(in srgb,var(--palette-fr-glass) 62%,transparent);
 -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:999px;padding:.38em .95em .38em .8em}
.nvl-stage__tag i{flex:none;width:.6em;height:.6em;border-radius:50%;background:var(--palette-fr-green);box-shadow:0 0 0 .3em color-mix(in srgb,var(--palette-fr-green) 22%,transparent)}
.nvl-stage__sound{position:absolute;z-index:3;inset-block-start:clamp(8px,2.6cqi,18px);inset-inline-end:clamp(8px,2.8cqi,20px);min-height:36px;padding:.4em 1em;
 border:1px solid color-mix(in srgb,var(--palette-fr-ink) 30%,transparent);border-radius:999px;background:color-mix(in srgb,var(--palette-fr-glass) 62%,transparent);
 -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--palette-fr-ink);font:inherit;font-size:clamp(12px,2.1cqi,15px);cursor:pointer;
 touch-action:manipulation;transition:transform .14s cubic-bezier(.2,.8,.2,1)}
.nvl-stage__sound:active{transform:scale(.95)}
.nvl-stage__sound:focus-visible{outline:2px solid var(--palette-fr-green);outline-offset:3px}
.nvl-stage__capt{position:absolute;z-index:2;inset-inline:6%;inset-block-end:clamp(10px,4.4cqi,30px);margin:0;text-align:center;
 font-size:clamp(14px,3.1cqi,25px);line-height:1.38;font-weight:400;color:var(--palette-fr-ink);text-wrap:balance;
 text-shadow:0 1px 2px rgba(0,0,0,.55),0 2px 14px rgba(0,0,0,.6)}
.nvl-stage[data-recorded="1"] .nvl-stage__capt{inset-block-end:clamp(12px,5cqi,34px)}
.nvl-stage [hidden]{display:none!important}
@media (prefers-reduced-motion:no-preference){
 .nvl-stage__capt{animation:fr-capt .35s cubic-bezier(.2,.8,.2,1) both}
 .nvl-stage[data-phase=listening]:not([data-recorded="1"])>img{animation:fr-listen 2.6s ease-in-out infinite}
}
@keyframes fr-capt{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@keyframes fr-listen{50%{transform:translateY(-8%) scale(1.06);opacity:.8}}
[dir=rtl] .nvl-stage :is(.nvl-stage__capt,.nvl-stage__tag,.nvl-stage__sound){unicode-bidi:plaintext}