/* قالب «المشهد الأول» — شاشة سينما: أشرطة سوداء، عدّ تنازلي، وعنوان فيلم */
body.tpl-cinema { --q-bg: #121214; --q-soft: #1C1C20; --q-ink: #F2F2F2; --q-muted: #ABABB3; --q-accent: #E8C26A; --q-line: rgba(232,194,106,.3); --q-btn: #E8C26A; --q-btn-ink: #121214; --q-display: 'Reem Kufi', sans-serif; background: #121214; }
.cn-cover { position: absolute; inset: 0; background: #08080A; overflow: hidden; color: #F2F2F2; transition: opacity .9s ease; }
.cn-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: cn-bg 9s ease 2.8s forwards; filter: brightness(.45) saturate(.9); }
@keyframes cn-bg { 0% { opacity: 0; transform: scale(1.15); } 20% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }
.cn-bars { position: absolute; left: 0; right: 0; height: 12%; background: #000; z-index: 2; }
.cn-bars.top { top: 0; } .cn-bars.bottom { bottom: 0; }
.cn-leader { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1; }
.cn-leader span { position: absolute; width: 170px; height: 170px; border-radius: 50%; border: 3px solid rgba(242,242,242,.75); display: flex; align-items: center; justify-content: center; font: 700 80px 'Reem Kufi', sans-serif; opacity: 0; background: conic-gradient(rgba(242,242,242,.12) 0 25%, transparent 0); }
.cn-leader .n3 { animation: cn-n .8s ease 0s both; } .cn-leader .n2 { animation: cn-n .8s ease .85s both; } .cn-leader .n1 { animation: cn-n .8s ease 1.7s both; }
@keyframes cn-n { 0% { opacity: 0; transform: scale(.9); } 20%, 80% { opacity: 1; } 100% { opacity: 0; transform: scale(1.05); } }
.cn-title { position: absolute; inset: 12% 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; animation: cn-in 1.2s ease 2.6s both; }
@keyframes cn-in { from { opacity: 0; letter-spacing: .3em; } to { opacity: 1; letter-spacing: normal; } }
.cn-pre { font-size: 14px; letter-spacing: .25em; color: #E8C26A; }
.cn-cn { font: 700 46px/1.3 'Reem Kufi', sans-serif; text-shadow: 0 4px 24px rgba(0,0,0,.6); }
.cn-cn i { font-style: normal; font-size: 26px; color: #E8C26A; margin: 0 6px; }
.cn-title .q-guest { font-size: 14px; color: #ABABB3; }
.cn-title .q-guest strong { font: 500 20px 'Reem Kufi', sans-serif; color: #F2F2F2; }
.cn-open { min-height: 52px; padding: 0 30px; border-radius: 999px; border: 1.5px solid #E8C26A; background: rgba(0,0,0,.35); color: #E8C26A; font: 600 16px 'Plex Arabic', sans-serif; cursor: pointer; }
.is-opening .cn-cover { opacity: 0; }
.cn-hero { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; padding: 44px 24px 14px; }
.cn-orn { width: 120px; height: 10px; background: repeating-linear-gradient(90deg, #E8C26A 0 10px, transparent 10px 18px); opacity: .6; }
.cn-host { font-size: 15px; color: #ABABB3; max-width: 30ch; }
.cn-names { display: flex; flex-direction: column; font: 700 50px/1.3 'Reem Kufi', sans-serif; color: #F2F2F2; outline: none; }
.cn-and { font-size: 24px; color: #E8C26A; }
.cn-tag { font-size: 16px; color: #ABABB3; }
.cn-when { display: flex; flex-direction: column; gap: 2px; }
.cn-when strong { font-size: 18px; }
.cn-when span { font-size: 14px; color: #ABABB3; }
@media (prefers-reduced-motion: reduce) { .cn-leader { display: none; } .cn-bg, .cn-title { animation: none; opacity: 1; } .cn-cover { transition: none; } }