/* Showreel v3 (2026-10-11): the edit bay. Showreel 25 as an After Effects comp.
   Five layers in the order the studio sells them, each bar at its real in/out in the reel; keyframes are the shots.
   Premiere lives in the program monitor (transport, J K L, VU). Blender and C4D only on the 3D layer:
   the monitor turns viewport (wireframe, ground grid, XYZ gizmo) and renders in buckets when you stop.
   Click the monitor and the real reel plays from the playhead (studio.js reads data-start). Editor chrome is LTR in both languages. */
.rv{--ws:#0d0c12;--ws2:#14121b;--ws3:#1b1824;--wsl:#2a2636;--rv-mute:#9c96ae;--ae:#4c9cff;--rv-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;padding-block:30px 110px}
.rv .reel-heading{margin-bottom:clamp(28px,3.4vw,48px)}
.rv .reel-heading h2{font-size:clamp(40px,5.4vw,84px);line-height:1.02}
/* Desktop: the headline runs the full width of the comp below it, one line per thought, and the line sits under it at reading width. */
@media(min-width:821px){
 html .rv .reel-heading{display:grid;grid-template-columns:minmax(0,1fr);row-gap:clamp(16px,1.8vw,26px);align-items:start}
 html .rv .reel-heading>div{min-width:0}
 html .rv .reel-heading h2{margin:0;font-size:clamp(46px,5.3vw,88px);text-wrap:balance}
 html .rv .reel-heading h2 em{white-space:nowrap}
 html .rv .reel-heading>p{max-width:64ch;justify-self:start;margin:0;padding:0;font-size:clamp(17px,1.25vw,19px);line-height:1.75}
 html[dir=rtl] .rv .reel-heading>p{max-width:62ch!important;justify-self:start;line-height:1.95}
}
.rv .reel-heading h2 em{font-style:normal;color:#8d8794}
html[dir=rtl] .rv .reel-heading h2{line-height:1.2}
.rv .reel-heading kbd{font:600 12px var(--rv-mono);border:1px solid var(--wsl);border-bottom-width:2px;border-radius:5px;padding:1px 6px;background:var(--ws3);color:#f2eef8}

/* workspace */
.rv-ws{container-type:inline-size;direction:ltr;padding:0!important;border:1px solid var(--wsl)!important;border-radius:16px!important;overflow:hidden;background:var(--ws)!important;box-shadow:0 40px 120px -40px #000!important;font-family:Inter,Alexandria,sans-serif;outline:none}
.rv-ws:focus-visible{box-shadow:0 0 0 2px var(--amber,#ffb829)!important}
.rv-tabs{display:flex;align-items:center;gap:14px;padding:0 12px;height:30px;background:var(--ws2);border-bottom:1px solid var(--wsl);font:500 11px var(--rv-mono);color:var(--rv-mute);white-space:nowrap;overflow:hidden}
.rv-t{color:#f2eef8;display:flex;align-items:center;gap:7px;height:100%;border-bottom:2px solid var(--violet,#8052ff)}
.rv-t i{width:9px;height:9px;border-radius:2px;background:var(--violet,#8052ff)}
.rv-sp{flex:1}
.rv-q{border:1px solid var(--wsl);border-radius:4px;padding:1px 6px}

/* program monitor */
.rv-mon{display:grid;grid-template-columns:minmax(0,1fr) auto;background:#000}
.rv-scr{position:relative;aspect-ratio:16/9;min-height:0;border-radius:0!important;overflow:hidden;background:#000 0 0/1600% 1000% no-repeat}
.rv-scr iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.rv-cover{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;background:none;color:#fff;cursor:pointer;overflow:hidden;text-align:start;font:inherit}
.rv-cover[hidden]{display:none}
.rv-cover::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(5,4,8,.9));pointer-events:none;z-index:2}
.rv-hi,.rv-wire{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .3s;pointer-events:none}
.rv-hi.on,.rv-wire.on{opacity:1}
.rv-buckets{position:absolute;inset:0;display:grid;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(5,1fr);pointer-events:none}
.rv-buckets i{opacity:0;background-repeat:no-repeat;background-size:800% 500%;position:relative}
.rv-buckets i.on{opacity:1}
.rv-buckets i.b::after{content:"";position:absolute;inset:2px;border:1px solid #ffffffd9;border-radius:1px}
.rv-vp{position:absolute;z-index:3;top:10px;left:10px;display:grid;gap:3px;padding:6px 9px;border-radius:7px;background:rgba(12,12,16,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);text-shadow:0 1px 2px #0008;font:500 10.5px var(--rv-mono);color:#ffffffbf;opacity:0;transition:opacity .35s}
.rv-l1{display:flex;gap:8px}.rv-obj{color:#e6e6e6}.rv-st{color:#ffffff99;font-size:10px}
.rv-vp b{font-weight:600;color:#fff}.rv-vp .rs{color:#ffb547}
.rv-giz{position:absolute;z-index:3;top:10px;right:12px;width:54px;height:54px;opacity:0;transition:opacity .35s}
.rv-scr.rv-td .rv-vp,.rv-scr.rv-td .rv-giz{opacity:.92}
.rv-lt{position:absolute;z-index:3;left:clamp(14px,3cqi,26px);right:clamp(14px,3cqi,26px);bottom:clamp(12px,2.4cqi,22px);display:grid;gap:2px;max-width:60%;font-family:Inter,Alexandria,sans-serif}
html[dir=rtl] .rv-lt{direction:rtl;left:auto;font-family:Alexandria,sans-serif}
.rv-lt small{font:600 11.5px Inter,sans-serif;color:var(--c,#ffb829);display:flex;align-items:center;gap:8px;letter-spacing:.02em}
.rv-lt small::before{content:"";width:8px;height:8px;background:currentColor;transform:rotate(45deg)}
.rv-lt b{font-size:clamp(19px,3.4cqi,36px);font-weight:700;line-height:1.15}
.rv-lt em{font-style:normal;color:#d6d0e4;font-size:clamp(13px,1.6cqi,16px)}
.rv-big{position:absolute;z-index:4;right:clamp(14px,3cqi,26px);bottom:clamp(14px,2.6cqi,24px);background:var(--violet,#8052ff);color:#fff;font:600 13px Inter,Alexandria,sans-serif;padding:8px 14px;border-radius:999px;white-space:nowrap;transition:background-color .2s,translate .25s}
html[dir=rtl] .rv-big{right:auto;left:clamp(14px,3cqi,26px);font-family:Alexandria,sans-serif}
.rv-cover:hover .rv-big,.rv-cover:focus-visible .rv-big{background:#9069ff;translate:0 -2px}
.rv-cover:focus-visible{outline:2px solid var(--amber,#ffb829);outline-offset:-2px}
.rv-vu{width:14px;display:flex;gap:2px;padding:6px 2px;background:var(--ws2);border-left:1px solid var(--wsl)}
.rv-vu i{flex:1;background:linear-gradient(0deg,#3ddc84 0 70%,#ffd23f 70% 88%,#ff5a4f 88%);-webkit-mask:linear-gradient(0deg,#000 var(--h,0%),transparent var(--h,0%));mask:linear-gradient(0deg,#000 var(--h,0%),transparent var(--h,0%));opacity:.9}

/* transport (Premiere) */
.rv-tr{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:6px 12px;background:var(--ws2);border-top:1px solid var(--wsl);font:500 11px var(--rv-mono);color:var(--rv-mute)}
.rv-tcp{color:var(--ae);font-weight:700;font-size:12.5px}
.rv-btns{display:flex;gap:2px}
.rv-btns button{display:grid;place-items:center;width:34px;height:30px;padding:0;border:0;border-radius:5px;background:none;color:#d9d4e6;cursor:pointer}
.rv-btns button:hover{background:var(--ws3)}
.rv-btns .rv-pp{color:#fff;background:var(--ws3)}
.rv-btns button:focus-visible{outline:2px solid var(--amber,#ffb829)}
.rv-keys{justify-self:end;white-space:nowrap}

/* timeline (After Effects) */
.rv-tl{display:grid;grid-template-columns:var(--lw,250px) minmax(0,1fr);grid-template-rows:44px repeat(5,40px);border-top:1px solid var(--wsl);user-select:none;-webkit-user-select:none}
.rv-corner{grid-column:1;grid-row:1;background:var(--ws2);border-bottom:1px solid var(--wsl);border-right:1px solid var(--wsl);padding:6px 10px;display:grid;align-content:center}
.rv-corner b{font:700 15px var(--rv-mono);color:var(--ae);letter-spacing:.02em}
.rv-corner span{font:500 9.5px var(--rv-mono);color:var(--rv-mute)}
.rv-track{position:relative;grid-column:2;grid-row:1/7;display:grid;grid-template-rows:44px}
.rv-top{position:relative;background:var(--ws2);border-bottom:1px solid var(--wsl);height:44px;cursor:ew-resize;touch-action:none}
.rv-wa{position:absolute;left:0;right:0;top:6px;height:7px;background:#3a3550;border-radius:2px}
.rv-cache{position:absolute;left:0;top:0;height:2px;background:#3ddc84;width:0}
.rv-ruler{position:absolute;left:0;right:0;bottom:0;height:24px;font:500 9.5px var(--rv-mono);color:var(--rv-mute)}
.rv-ruler span{position:absolute;bottom:3px;translate:-50% 0}
.rv-ruler span::before{content:"";position:absolute;left:50%;bottom:13px;width:1px;height:6px;background:#4a4560}
.rv-ruler span:first-child{translate:0}.rv-ruler span:first-child::before{left:0}
.rv-ln{grid-column:1;display:flex;align-items:center;gap:8px;padding:0 10px;height:40px;border-bottom:1px solid #1d1a26;border-right:1px solid var(--wsl);background:var(--ws);font:600 12.5px Inter,sans-serif;color:#c9c3d8;cursor:pointer;transition:background-color .2s,color .2s;min-width:0}
.rv-ln .rv-no{font:500 10px var(--rv-mono);color:var(--rv-mute);width:12px}
.rv-ln .rv-lab{width:10px;height:10px;border-radius:2px;flex:none}
.rv-ln svg{flex:none;opacity:.55}
.rv-ln .rv-3d{opacity:.35}.rv-ln.on .rv-3d{opacity:1}
.rv-ln .rv-nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rv-ln .rv-short{display:none}
.rv-ln.on{background:var(--ws3);color:#fff}
.rv-ln:focus-visible{outline:2px solid var(--amber,#ffb829);outline-offset:-2px}
.rv-row{position:relative;height:40px;border-bottom:1px solid #1d1a26;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),#15131c calc(10% - 1px) 10%);cursor:ew-resize;touch-action:none}
.rv-row.on{background-color:#121019}
.rv-bar{position:absolute;top:7px;bottom:7px;border-radius:3px;background:color-mix(in srgb,var(--c) 55%,#1b1824);border:1px solid color-mix(in srgb,var(--c) 85%,#fff);transition:filter .25s}
.rv-bar::before,.rv-bar::after{content:"";position:absolute;top:0;bottom:0;width:4px;background:color-mix(in srgb,var(--c) 85%,#000)}
.rv-bar::before{left:0;border-radius:3px 0 0 3px}.rv-bar::after{right:0;border-radius:0 3px 3px 0}
.rv-row:not(.on) .rv-bar{filter:saturate(.45) brightness(.6)}
.rv-kf{position:absolute;top:50%;width:9px;height:9px;padding:0;translate:-50% -50%;rotate:45deg;background:#e9e5f3;border:1px solid #000;z-index:2;cursor:pointer}
.rv-kf:hover,.rv-kf.on{background:var(--amber,#ffb829)}
.rv-kf:focus-visible{outline:2px solid var(--amber,#ffb829)}
.rv-cti{position:absolute;top:0;bottom:0;width:0;pointer-events:none;z-index:5}
.rv-cti::before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:var(--amber,#ffb829)}
.rv-cti::after{content:"";position:absolute;top:13px;left:-7px;width:14px;height:12px;background:var(--amber,#ffb829);clip-path:polygon(0 0,100% 0,100% 55%,50% 100%,0 55%)}
.rv-tip{position:absolute;z-index:6;width:168px;translate:-50% calc(-100% - 10px);background:var(--ws2);border:1px solid var(--wsl);border-radius:6px;padding:4px;pointer-events:none;opacity:0;transition:opacity .15s;font:600 11px Inter,Alexandria,sans-serif;color:#fff}
.rv-tip i{display:block;aspect-ratio:16/9;background:#000 0 0/1600% 1000% no-repeat;border-radius:3px;margin-bottom:4px}
.rv-tip span{display:flex;justify-content:space-between;gap:6px;padding:0 2px}.rv-tip code{font:500 10px var(--rv-mono);color:var(--ae)}
.rv-tip.on{opacity:1}
@media(hover:none){.rv-tip{display:none}}
.rv-base{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;background:var(--ws2);border-top:1px solid var(--wsl);font:500 11px Inter,Alexandria,sans-serif;color:#b8b2bf}
.rv-base a{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:#e8e3ee}.rv-base a span{color:var(--amber,#ffb829)}
.rv-base button[hidden]{display:none!important}
.rv-base button{border:1px solid var(--wsl);border-radius:999px;background:var(--ws3);color:#fff;padding:6px 12px;font:inherit;cursor:pointer}

/* CTA: the timecode is the brief */
.rv-cta{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-top:34px;padding:26px 0 0;border-top:1px solid #ffffff14}
.rv-cta p{margin:0;max-width:60ch;font-size:clamp(18px,1.6vw,24px);line-height:1.4;color:#fff}
.rv-cta p b{font-weight:600}.rv-cta p span{color:#a9a2b4;font-weight:300}
html[lang=ar] .rv-cta p{line-height:1.7}
.rv-pill{flex:none;gap:14px!important}
.rv-pill code{font:500 13px var(--rv-mono);background:#ffffff29;padding:3px 8px;border-radius:6px;direction:ltr}
html[dir=rtl] .rv-pill>span:last-child{scale:-1 1}

@container (max-width:620px){
 .rv-vu,.rv-keys,.rv-opt,.rv-q,.rv-vp,.rv-corner span,.rv-ruler span:not(.rv-k){display:none}
 .rv-mon{grid-template-columns:1fr}
 .rv-tl{--lw:112px}
 .rv-corner b{font-size:11.5px}
 .rv-ln{gap:6px;padding:0 7px;font-size:11.5px}.rv-ln svg,.rv-ln .rv-no{display:none}.rv-ln .rv-full{display:none}.rv-ln .rv-short{display:inline}
 .rv-lt{max-width:none}
 .rv-big,html[dir=rtl] .rv-big{top:10px;bottom:auto;left:10px;right:auto;font-size:12px;padding:6px 12px}
 .rv-giz{width:40px;height:40px;top:8px}
}
@media(max-width:640px){.rv-cta{flex-direction:column;align-items:flex-start;gap:18px;margin-top:24px;padding-top:20px}.rv-cta p{font-size:18px}}
@media(prefers-reduced-motion:reduce){.rv-hi,.rv-wire,.rv-vp,.rv-giz,.rv-tip{transition:none}}

/* Credits on the titles layer: Opening Titles · Ramadan year, the series, then who made it. */
.rv-lt.rv-cr{max-width:72%;isolation:isolate}
.rv-lt.rv-cr::before{content:"";position:absolute;z-index:-1;inset:-56px -100vw -40px;background:linear-gradient(to top,#08070ce6,#08070c99 62%,#08070c00);pointer-events:none}
.rv-lt.rv-cr em{color:#ece6f4;line-height:1.45}
@container (max-width:620px){.rv-lt.rv-cr{max-width:none}.rv-lt.rv-cr em{font-size:12px}}

/* The whole reel, full screen. */
/* The play button: a keyframe diamond that pings like a key being set, inside a turning stamp; on hover the key eases into a circle. */
.rv-fullbtn{position:absolute;z-index:5;left:50%;top:47%;translate:-50% -50%;width:clamp(110px,16cqi,190px);aspect-ratio:1;display:grid;place-items:center;padding:0;border:0;background:none;color:#fff;cursor:pointer}
.rv-fullbtn::before{content:"";position:absolute;inset:15%;border-radius:50%;background:#0b0912a6;backdrop-filter:blur(8px)}
.rv-fullbtn:focus-visible{outline:2px solid var(--amber,#ffb829);outline-offset:4px;border-radius:50%}
.rv-fb-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;direction:ltr;animation:rv-spin 14s linear infinite}
.rv-fb-ring text{font-family:var(--rv-mono,monospace);font-size:9.4px;font-weight:600;letter-spacing:1.6px;fill:#fff}
.rv-fb-kf{position:relative;width:44%;aspect-ratio:1;display:grid;place-items:center}
.rv-fb-kf i,.rv-fb-kf s{position:absolute;inset:12%;rotate:45deg;border-radius:16%}
.rv-fb-kf i{background:linear-gradient(135deg,#9a78ff,#6a3df0);box-shadow:0 0 0 1px #ffffff40 inset,0 14px 34px -10px #000;transition:border-radius .45s cubic-bezier(.6,0,.2,1),rotate .45s cubic-bezier(.6,0,.2,1)}
.rv-fb-kf s{border:1.5px solid #9a78ff;text-decoration:none;animation:rv-ping 2.4s cubic-bezier(.2,.6,.3,1) infinite}
.rv-fb-kf s+s{animation-delay:1.2s}
.rv-fb-kf svg{position:relative;width:34%;height:34%;margin-left:6%}
.rv-fullbtn:hover .rv-fb-kf i,.rv-fullbtn:focus-visible .rv-fb-kf i{border-radius:50%;rotate:135deg}
.rv-fullbtn:hover .rv-fb-ring{animation-duration:4s}
@keyframes rv-spin{to{rotate:360deg}}
@keyframes rv-ping{from{scale:1;opacity:.9}to{scale:1.9;opacity:0}}
.reel.is-playing .rv-fullbtn{display:none}
@container (max-width:620px){.rv-fullbtn{top:8px;translate:-50% 0;width:86px}.rv-cover .rv-big{display:none}}
@media(prefers-reduced-motion:reduce){.rv-fb-ring,.rv-fb-kf s{animation:none}.rv-fb-kf s{opacity:0}}
.rv-fs{position:fixed;inset:0;z-index:9999;background:#000;display:grid;place-items:center}
.rv-fs iframe{width:min(100vw,calc(100dvh*16/9));aspect-ratio:16/9;height:auto;max-height:100dvh;border:0}
.rv-fs-x{position:absolute;top:max(12px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));width:48px;height:48px;border-radius:50%;border:1px solid #ffffff3d;background:#14111acc;color:#fff;font:300 28px/1 Inter,sans-serif;cursor:pointer}
.rv-fs-x:hover,.rv-fs-x:focus-visible{background:#8052ff}
html.rv-fs-open,html.rv-fs-open body{overflow:hidden}