/* Minimal overlay pack — scene styles. All sizes are stage pixels (1920x1080 or 1080x1920).
   Text sizes are multiplied by --ov-s (text size) and --ov-ts (title size); padding is in em so it grows with the text. */
.ov-stage{
  --ov-s:1; --ov-ts:1;
  position:relative; overflow:hidden; width:1920px; height:1080px;
  font-family:var(--ov-font2, "Readex Pro"),"IBM Plex Sans Arabic",system-ui,sans-serif;
  color:var(--ov-fg); -webkit-font-smoothing:antialiased;
}
.ov-stage[data-format="v"]{width:1080px; height:1920px}
.ov-stage *{box-sizing:border-box}
.ov-title,.ov-count,.ov-name,.ov-tag,.ov-pill .h{font-family:var(--ov-font, "Readex Pro"),"IBM Plex Sans Arabic",system-ui,sans-serif}

/* Full-screen scenes */
.ov-full{position:absolute; inset:0; background:var(--ov-bg)}
.ov-full::before{content:""; position:absolute; inset:0;
  background-image:radial-gradient(var(--ov-dot) 1.6px, transparent 1.8px); background-size:48px 48px}
.ov-center{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(26px * var(--ov-s)); text-align:center; padding:0 80px}
.ov-full[data-spos="top"] .ov-center{padding-top:120px}
.ov-stage[data-format="v"] .ov-full[data-spos="top"] .ov-center{padding-top:200px}
.ov-top{position:absolute; top:64px; inset-inline:80px; display:flex; justify-content:space-between; align-items:center; gap:24px; z-index:1}
.ov-pair{display:flex; align-items:center; gap:24px; flex:none}
.ov-top.has-soc .ov-socials{justify-content:flex-end}
.ov-top:not(.has-soc) .ov-pair{flex:1; justify-content:space-between}
.ov-bottom{position:absolute; bottom:72px; inset-inline:80px; display:flex; justify-content:space-between; align-items:center; gap:24px; z-index:1}
.ov-stage[data-format="v"] .ov-top{top:140px; inset-inline:64px}
.ov-stage[data-format="v"] .ov-top.has-soc{flex-direction:column; align-items:stretch; gap:32px}
.ov-stage[data-format="v"] .ov-top.has-soc .ov-pair{justify-content:space-between}
.ov-stage[data-format="v"] .ov-top.has-soc .ov-socials{justify-content:center}
.ov-stage[data-format="v"] .ov-bottom{bottom:180px; inset-inline:64px; flex-direction:column; gap:28px}
.ov-stage[data-format="v"] .ov-foot{flex-direction:column}

.ov-chip{display:inline-flex; align-items:center; gap:.5em; padding:.43em .86em; border:2px solid var(--ov-line); border-radius:999px; font-size:calc(28px * var(--ov-s)); font-weight:500; letter-spacing:.04em; background:var(--ov-panel)}
.ov-pulse{width:.57em; height:.57em; border-radius:50%; background:var(--ov-accent); animation:ovPulse 1.6s ease-in-out infinite}
@keyframes ovPulse{0%,100%{opacity:1; transform:scale(1)}50%{opacity:.35; transform:scale(.8)}}

.ov-title{font-size:calc(124px * var(--ov-ts)); font-weight:600; line-height:1.08; letter-spacing:-.01em; margin:0; max-width:100%; text-wrap:balance}
.ov-sub{font-size:calc(40px * var(--ov-s)); color:var(--ov-muted); font-weight:400; letter-spacing:.02em; margin:0}
.ov-stage[data-format="v"] .ov-title{font-size:calc(112px * var(--ov-ts))}
.ov-count{font-size:calc(210px * var(--ov-ts)); font-weight:300; line-height:1; direction:ltr; font-variant-numeric:tabular-nums; color:var(--ov-ink); letter-spacing:.02em}
.ov-stage[data-format="v"] .ov-count{font-size:calc(230px * var(--ov-ts))}
.ov-count.done{font-size:calc(140px * var(--ov-ts)); font-weight:500}
.ov-stage[data-format="v"] .ov-count.done{font-size:calc(150px * var(--ov-ts))}
.ov-line{width:120px; height:6px; border-radius:6px; background:var(--ov-accent)}
.ov-note{font-size:calc(38px * var(--ov-s)); font-weight:500; padding:.47em .9em; border-radius:20px; background:var(--ov-panel); border:2px solid var(--ov-line)}
.ov-note span{color:var(--ov-ink)}

.ov-name{font-size:calc(42px * var(--ov-s)); font-weight:600; display:flex; align-items:center; gap:.38em}
.ov-name i{width:.33em; height:.33em; border-radius:.1em; background:var(--ov-accent); display:block}

/* Social accounts: logo, platform name, or both, then the handle, all at the same size */
.ov-socials{display:flex; gap:14px; flex-wrap:wrap; justify-content:center}
.ov-soc{display:inline-flex; gap:.4em; align-items:center; font-size:calc(30px * var(--ov-s)); padding:.33em .67em; border-radius:14px; background:var(--ov-panel); border:1.5px solid var(--ov-line); direction:ltr}
.ov-soc b{font-weight:600; color:var(--ov-ink)}
.ov-soc .h{font-weight:500}
.ov-soc-i{display:inline-flex; width:1.05em; height:1.05em; color:var(--ov-ink)}
.ov-socials[data-ic="text"] .ov-soc-i,.ov-socials[data-ic="text"] .ov-soc b{color:var(--ov-fg)}
.ov-soc-i svg,.ov-pill .k svg{width:100%; height:100%; fill:currentColor; display:block}

.ov-progress{position:absolute; inset-inline:0; bottom:0; height:8px; background:var(--ov-line)}
.ov-progress i{display:block; height:100%; width:0; background:var(--ov-accent); transition:width 1s linear}

/* Layout scene: background with transparent holes for camera and chat */
.ov-mask{position:absolute; inset:0; width:100%; height:100%}
.ov-slot-label{position:absolute; font-size:calc(26px * var(--ov-s)); font-weight:500; color:var(--ov-muted); display:flex; align-items:center; gap:12px; letter-spacing:.04em}
.ov-slot-label i{width:10px; height:10px; border-radius:3px; background:var(--ov-accent); display:block}

/* Camera frame (transparent source) */
.ov-frame{position:absolute; inset:24px; border:6px solid var(--ov-fg); border-radius:36px}
.ov-frame::before{content:""; position:absolute; top:-6px; inset-inline-start:72px; width:160px; height:6px; background:var(--ov-accent)}
.ov-tag{position:absolute; bottom:56px; inset-inline-start:56px; display:flex; align-items:center; gap:.35em; padding:.35em .65em; border-radius:18px; background:var(--ov-bg); font-size:calc(46px * var(--ov-s)); font-weight:600}
.ov-tag i{width:.35em; height:.35em; border-radius:50%; background:var(--ov-accent); display:block}

/* Socials bar (transparent source) */
.ov-pill{position:absolute; bottom:64px; inset-inline-start:64px; display:flex; align-items:center; gap:.55em; padding:.4em .85em .4em .4em; background:var(--ov-bg); border:2px solid var(--ov-line); border-radius:24px; font-size:calc(40px * var(--ov-s))}
[dir="rtl"] .ov-pill{padding:.4em .4em .4em .85em}
.ov-pill .k{display:inline-flex; align-items:center; justify-content:center; gap:.35em; background:var(--ov-accent); color:var(--ov-on); font-weight:700; font-size:.6em; height:2.2em; min-width:2.2em; padding:0 .55em; border-radius:.5em; letter-spacing:.04em; direction:ltr; transition:opacity .35s ease}
.ov-pill[data-mark="logo"] .k{padding:0}
.ov-pill .k svg{width:1.25em; height:1.25em; flex:none}
.ov-pill[data-mark="both"] .k svg{width:1em; height:1em}
.ov-pill .k b{font-weight:700}
.ov-pill .f{color:var(--ov-muted); font-weight:400}
.ov-pill .h{direction:ltr; font-weight:600; transition:opacity .35s ease}
.ov-pill.fade .h,.ov-pill.fade .k{opacity:0}

/* Corner placement for the socials bar and camera tag: b/t = bottom/top, s/e = start/end (start is right in Arabic) */
.ov-pill[data-pos^="t"]{top:64px; bottom:auto}
.ov-tag[data-pos^="t"]{top:56px; bottom:auto}
.ov-pill[data-pos$="e"]{inset-inline-start:auto; inset-inline-end:64px}
.ov-tag[data-pos$="e"]{inset-inline-start:auto; inset-inline-end:56px}

@media (prefers-reduced-motion:reduce){.ov-pulse{animation:none}.ov-progress i,.ov-pill .h,.ov-pill .k{transition:none}}