/* =====================================================================
   قصة الصفحة الرئيسية السينمائية (نهاري/ليلي) - الشركة العامة للنقل السريع
   مشهد sticky واحد تقوده نسبة التمرير (home-cinema.js). الحركة كلها transform/opacity
   على طبقات GPU، والنهار/الليل عبر المتغير --night (0 نهار .. 1 ليل) فينتقل بسلاسة.
   ===================================================================== */
.cine { --n: 4; --per: 88vh; --nav-h: 72px; --night: 1; --stars: 1; --gold: #e5c14a; --gold-d: #c9a227; --green: #1f6b4a; --deep: #0c2118;
    --sky-top: #050f0a; --sky-bot: #0f3326; --pb: .6; --lbf: 1; --lbm: 1; --lbn: 1; --road-a: #14201a; --road-b: #0a120e; --beam: 1; --spin: 0;
    position: relative; height: calc(var(--stage-h) * 2 + var(--n) * var(--per)); direction: rtl; font-family: 'Cairo', sans-serif; color: #fff; background: var(--sky-bot); isolation: isolate; }
.cine * { box-sizing: border-box; }
/* overflow-x:hidden على html/body (من التصميم العام) يُفقد sticky فعاليته؛ clip يمنع التمرير الأفقي دون إنشاء حاوية تمرير */
html, body { overflow-x: clip !important; }

:root { --stage-h: calc(100vh - var(--nav-h, 72px)); --stage-h: calc(100svh - var(--nav-h, 72px)); }
.cine-stage { position: sticky; top: var(--nav-h); height: var(--stage-h); overflow: hidden; background: var(--sky-bot); contain: layout paint; }

/* ---------- السماء والضوء ---------- */
.c-sky { position: absolute; inset: 0; background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bot) 100%); }
.c-stars { position: absolute; inset: 0; opacity: var(--stars); pointer-events: none;
    background-image: radial-gradient(1.6px 1.6px at 12% 18%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 26% 42%, #fff 50%, transparent 52%), radial-gradient(1.8px 1.8px at 41% 12%, #fff 50%, transparent 52%),
        radial-gradient(1.2px 1.2px at 58% 30%, #fff 50%, transparent 52%), radial-gradient(1.6px 1.6px at 73% 16%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 88% 38%, #fff 50%, transparent 52%),
        radial-gradient(1.2px 1.2px at 7% 58%, #fff 50%, transparent 52%), radial-gradient(1.4px 1.4px at 66% 52%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 94% 8%, #fff 50%, transparent 52%), radial-gradient(1.2px 1.2px at 34% 66%, #fff 50%, transparent 52%);
}
.c-stars::after { content: ''; position: absolute; inset: 0; background-image: inherit; animation: cTwinkle 5s ease-in-out infinite alternate; will-change: opacity; }
@keyframes cTwinkle { from { opacity: 0; } to { opacity: 1; } }
.c-moon { position: absolute; left: 14%; top: 13%; width: clamp(46px, 7vw, 84px); aspect-ratio: 1; opacity: calc(var(--night) * var(--moon-o, 1)); transform: translate3d(0, var(--moon-y, 0px), 0); pointer-events: none; will-change: transform, opacity; }
.c-moon i { display: block; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fffbe8, #e9e3c6 55%, #b9b497 100%); box-shadow: 0 0 40px 10px rgba(255,248,200,.35), 0 0 120px 40px rgba(255,248,200,.12); }
.c-sun { position: absolute; left: var(--sun-x, 50%); bottom: 0; width: min(70vw, 620px); aspect-ratio: 1; margin-left: calc(min(70vw, 620px) / -2); transform: translate3d(0, var(--sun-y, 130%), 0); opacity: var(--sun-o, 0); pointer-events: none; will-change: transform, opacity; }
.c-sun i { display: block; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle, #fffbe0 0%, #fff0a0 20%, #f6d760 36%, rgba(246,215,96,.4) 52%, rgba(246,215,96,0) 70%); }
.c-clouds { position: absolute; inset: 0; opacity: calc(1 - var(--night)); pointer-events: none; overflow: hidden; }
.c-clouds i { position: absolute; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='110' viewBox='0 0 320 110'%3E%3Cg fill='%23ffffff'%3E%3Cellipse cx='90' cy='74' rx='80' ry='30'/%3E%3Cellipse cx='150' cy='54' rx='62' ry='38'/%3E%3Cellipse cx='215' cy='70' rx='72' ry='32'/%3E%3Cellipse cx='120' cy='80' rx='100' ry='24'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat; opacity: .8; will-change: transform; }
.c-clouds .cl1 { width: 300px; height: 104px; top: 16%; left: 6%; animation: cCloud 80s linear infinite; } .c-clouds .cl2 { width: 220px; height: 76px; top: 30%; left: 56%; opacity: .6; animation: cCloud 110s linear -40s infinite; } .c-clouds .cl3 { width: 260px; height: 90px; top: 10%; left: 80%; opacity: .7; animation: cCloud 95s linear -70s infinite; }
@keyframes cCloud { from { transform: translate3d(-30vw, 0, 0); } to { transform: translate3d(130vw, 0, 0); } }
.c-emblem { position: absolute; left: 50%; top: 46%; width: min(64vw, 560px); transform: translate3d(-50%, calc(-50% + var(--em-y, 0px)), 0) rotate(var(--em-r, 0deg)) scale(var(--em-s, 1)); opacity: var(--em-o, .06); filter: brightness(0) invert(1); pointer-events: none; will-change: transform, opacity; }

/* ---------- طبقات سينمائية فوق الكل ---------- */
.c-vignette { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(120% 90% at 50% 50%, transparent 58%, rgba(0,0,0,calc(.28 + var(--night) * .3)) 100%); }
.c-scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(4,20,24,calc(.5 - var(--night) * .1)) 0%, rgba(4,20,24,0) 40%); }
.c-grain { position: absolute; inset: -80px; z-index: 3; pointer-events: none; opacity: .1; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E"); animation: cGrain .8s steps(5) infinite; }
@keyframes cGrain { 0% { transform: translate3d(0,0,0); } 20% { transform: translate3d(-24px,12px,0); } 40% { transform: translate3d(18px,-20px,0); } 60% { transform: translate3d(-12px,-14px,0); } 80% { transform: translate3d(22px,16px,0); } 100% { transform: translate3d(0,0,0); } }
.c-motes { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; opacity: calc(.35 + var(--night) * .5); }
.c-motes i { position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%; background: rgba(255,244,200,.85); box-shadow: 0 0 8px 2px rgba(255,236,160,.5); animation: cMote 11s linear infinite; will-change: transform, opacity; }
.c-motes i:nth-child(1) { left: 8%; animation-delay: 0s; } .c-motes i:nth-child(2) { left: 22%; animation-delay: -3s; width: 3px; height: 3px; } .c-motes i:nth-child(3) { left: 36%; animation-delay: -6s; }
.c-motes i:nth-child(4) { left: 49%; animation-delay: -8s; width: 5px; height: 5px; } .c-motes i:nth-child(5) { left: 63%; animation-delay: -2s; width: 3px; height: 3px; } .c-motes i:nth-child(6) { left: 76%; animation-delay: -5s; }
.c-motes i:nth-child(7) { left: 88%; animation-delay: -9s; width: 3px; height: 3px; } .c-motes i:nth-child(8) { left: 95%; animation-delay: -4s; }
@keyframes cMote { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate3d(40px, -78vh, 0); opacity: 0; } }

/* ---------- المشاهد ---------- */
.c-scene { position: absolute; inset: 0; z-index: 2; opacity: 0; visibility: hidden; will-change: opacity; pointer-events: none; }
.c-scene.on { visibility: visible; }
.c-scene a, .c-scene button, .c-scene form, .c-scene input, .c-scene select, .c-scene label, .c-scene .ct-track { pointer-events: auto; }
.c-center { position: absolute; left: 50%; top: 50%; width: min(94vw, 900px); transform: translate3d(-50%, -50%, 0); text-align: center; z-index: 6; }
.c-center.top { top: clamp(50px, 8.5vh, 82px); transform: translate3d(-50%, 0, 0); }
.c-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 4px 16px; border-radius: 50px; background: rgba(229,193,74,.18); border: 1px solid rgba(229,193,74,.5); color: #f6e3a1; font-weight: 800; font-size: clamp(.74rem, 1.6vw, .9rem); margin-bottom: 10px; }
.c-title, .c-h2 { margin: 0 0 8px; font-weight: 900; line-height: 1.22; text-shadow: 0 6px 30px rgba(0,0,0,.55); }
.c-title { font-size: clamp(1.9rem, 5.6vw, 3.8rem); } .c-h2 { font-size: clamp(1.45rem, 4.2vw, 2.7rem); }
.c-title span { display: inline-block; } .gold { background: linear-gradient(135deg, #fff1b0, #e5c14a 55%, #c9a227); -webkit-background-clip: text; background-clip: text; color: transparent; }
.c-lead { margin: 0 auto; max-width: 660px; color: #e2efe8; font-weight: 600; font-size: clamp(.86rem, 2.1vw, 1.1rem); line-height: 1.75; text-shadow: 0 2px 14px rgba(0,0,0,.6); }
.c-partner { margin: 10px 0 0; font-weight: 700; font-size: clamp(.74rem, 1.7vw, .92rem); color: #f6e3a1; text-shadow: 0 2px 10px rgba(0,0,0,.6); } .c-partner i { margin-inline-end: 6px; } .c-partner b { color: #fff; }
.c-brandrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.c-brandrow .c-kicker { margin: 0; }
.c-logo { width: clamp(46px, 6vw, 64px); aspect-ratio: 1; border-radius: 18px; background: linear-gradient(145deg, #fffdf4, #efe6c8); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 3px rgba(229,193,74,.8), 0 12px 34px rgba(0,0,0,.45); position: relative; animation: cLogoIn 1s cubic-bezier(.2,.8,.2,1) both; }
.c-logo::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 5px rgba(229,193,74,.95), 0 12px 44px rgba(229,193,74,.4); opacity: 0; pointer-events: none; animation: cLogoGlow 4s ease-in-out 1s infinite alternate; will-change: opacity; }
.c-logo img { width: 72%; }
@keyframes cLogoIn { from { opacity: 0; transform: scale(.5) rotate(-12deg); } to { opacity: 1; transform: none; } }
@keyframes cLogoGlow { from { opacity: 0; } to { opacity: 1; } }
.cine-live .s0-copy .c-brandrow, .cine-live .s0-copy .c-lead, .cine-live .s0-copy .c-trips, .cine-live .s0-copy .ct-links, .cine-live .s0-copy .c-partner { animation: cRise .9s cubic-bezier(.2,.8,.2,1) .3s both; }
.cine-live .s0-copy .c-title span:nth-child(1) { animation: cRise .9s cubic-bezier(.2,.8,.2,1) .45s both; } .cine-live .s0-copy .c-title span:nth-child(2) { animation: cRise .9s cubic-bezier(.2,.8,.2,1) .62s both; }
.cine-live .s0-copy .c-lead { animation-delay: .8s; } .cine-live .s0-copy .c-trips { animation-delay: .98s; } .cine-live .s0-copy .ct-links { animation-delay: 1.15s; } .cine-live .s0-copy .c-partner { animation-delay: 1.3s; }
@keyframes cRise { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } }

/* ---------- شريط الرحلات المتاحة (أول ما يراه الزائر) ---------- */
.c-trips { position: relative; max-width: 980px; margin: 12px auto 0; }
.ct-track { position: relative; display: flex; gap: 14px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding: 10px calc(50% - 150px) 26px; margin-bottom: -14px; scrollbar-width: none; -webkit-overflow-scrolling: touch; text-align: right; outline: 0; }
.ct-track::-webkit-scrollbar { display: none; }
.ct-card { flex: 0 0 300px; scroll-snap-align: center; display: flex; flex-direction: column; gap: 10px; padding: 13px 15px 14px; border-radius: 20px; color: #fff; background: linear-gradient(160deg, rgba(10,40,29,.9), rgba(5,26,20,.84)); border: 1px solid rgba(255,255,255,.2); box-shadow: 0 10px 22px rgba(0,0,0,.38); opacity: .66; transform: scale(.94); transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s, border-color .3s; }
.ct-card.on { opacity: 1; transform: none; border-color: rgba(229,193,74,.7); }
.ct-card.vip { background: linear-gradient(160deg, rgba(44,34,8,.92), rgba(8,28,20,.86)); }
.ct-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ct-badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 11px; border-radius: 50px; background: rgba(229,193,74,.16); border: 1px solid rgba(229,193,74,.45); color: #f6e3a1; font-weight: 800; font-size: .7rem; white-space: nowrap; }
.ct-when { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: .78rem; color: #cfe3d8; white-space: nowrap; } .ct-when i { color: var(--gold); } .ct-when b { color: #fff; font-weight: 900; }
.ct-route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; font-size: 1.22rem; font-weight: 900; line-height: 1.25; }
.ct-route b { min-width: 0; overflow-wrap: anywhere; } .ct-route b:last-child { text-align: left; }
.ct-line { position: relative; width: clamp(54px, 18vw, 90px); height: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--gold); font-size: .95rem; }
.ct-line::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed rgba(229,193,74,.55); } .ct-line i { position: relative; padding: 0 6px; background: #0a281d; border-radius: 50px; }
.ct-meta { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.ct-seats { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: .8rem; color: #9fe3bf; } .ct-seats.low { color: #fca5a5; }
.ct-price { font-weight: 900; font-size: 1.55rem; line-height: 1; color: #f6dc78; } .ct-price small { font-size: .78rem; font-weight: 800; color: #e2efe8; margin-inline-start: 4px; }
.ct-book { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 14px; border: 0; border-radius: 14px; background: linear-gradient(135deg, #f6dc78, #c9a227); color: #1a1405; font-family: inherit; font-weight: 900; font-size: .95rem; text-decoration: none; cursor: pointer; box-shadow: 0 8px 22px rgba(201,162,39,.4); transition: filter .2s, transform .2s; }
.ct-book:hover { filter: brightness(1.08); transform: translateY(-1px); color: #1a1405; } .ct-book.off { background: rgba(255,255,255,.12); color: #cbd5d0; box-shadow: none; cursor: default; }
.ct-nav { position: absolute; top: 50%; margin-top: -26px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.35); background: rgba(5,26,20,.78); color: #fff; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s, color .2s; }
.ct-nav:hover { background: var(--gold); color: #1a1405; border-color: transparent; } .ct-nav.prev { right: -52px; } .ct-nav.next { left: -52px; }
.ct-dots { display: flex; justify-content: center; gap: 6px; margin-top: 2px; }
.ct-dots i { width: 7px; height: 7px; border-radius: 50px; background: rgba(255,255,255,.35); transition: all .3s; } .ct-dots i.on { width: 22px; background: var(--gold); }
.ct-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 18px; border-radius: 20px; background: rgba(5,26,20,.72); border: 1px solid rgba(255,255,255,.22); } .ct-empty i { font-size: 1.6rem; color: var(--gold); } .ct-empty span { color: #cfe3d8; font-weight: 600; font-size: .85rem; }
.ct-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }
.ct-links a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; border-radius: 50px; background: rgba(5,26,20,.62); border: 1px solid rgba(255,255,255,.22); color: #eaf4ee; font-weight: 800; font-size: clamp(.72rem, 1.6vw, .84rem); text-decoration: none; transition: all .2s; }
.ct-links a i { color: var(--gold); } .ct-links a:hover, .ct-links a.hot { background: rgba(229,193,74,.92); color: #1a1405; border-color: transparent; } .ct-links a:hover i, .ct-links a.hot i { color: #1a1405; }
@media (min-width: 992px) { .ct-track { padding-inline: 8px; } .ct-card { flex-basis: 280px; opacity: 1; transform: none; } .ct-card.on { border-color: rgba(255,255,255,.2); } }
@media (min-width: 992px) and (max-width: 1099.98px) { .ct-nav.prev { right: -44px; } .ct-nav.next { left: -44px; } .ct-nav { width: 36px; height: 36px; } }

/* ---------- الحافلة ---------- */
.c-bus { position: absolute; overflow: visible; width: min(78vw, 580px); height: auto; will-change: transform; --wr: 0deg; filter: drop-shadow(0 16px 22px rgba(0,0,0,.4)); }
/* عناصر الرمز <symbol> داخل <use> لا تطابق محدّدات الأب (.c-bus ...)، لذا الأصناف مباشرة؛ المتغيرات تُورَّث من <svg> */
.cb-beam { opacity: calc(var(--beam, 1) * var(--night, 1)); } .cb-bloom { opacity: calc(.15 + var(--beam, 1) * var(--night, 1) * .85); } .cb-lamp { opacity: calc(.6 + var(--night, 1) * .4); }
.cb-lit { opacity: calc(var(--night, 1) * .85); } .cb-sky { opacity: calc((1 - var(--night, 1)) * .6); } .cb-tail { opacity: calc(.5 + var(--night, 1) * .5); } .cb-spin { opacity: var(--spin, 0); }
.s0-bus { left: 50%; bottom: 0; width: min(64vw, 500px); margin-left: calc(min(64vw, 500px) / -2); transform: translate3d(var(--b0x, 0px), var(--b0y, 0px), 0); z-index: 4; }

/* ---------- المشهد 0: المحطة ---------- */
.s0-photo { position: absolute; left: 0; right: 0; bottom: 0; height: 66%; overflow: hidden; -webkit-mask-image: linear-gradient(to top, #000 38%, transparent 100%); mask-image: linear-gradient(to top, #000 38%, transparent 100%); transform: translate3d(0, var(--p0y, 0px), 0) scale(var(--p0s, 1.08)); opacity: calc(.45 + (1 - var(--night)) * .35); will-change: transform; }
.s0-photo img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) brightness(var(--pb)) contrast(1.08); }
.s0-copy { top: 4%; transform: translate3d(-50%, var(--c0y, 0px), 0); opacity: var(--c0o, 1); will-change: transform, opacity; }

/* ---------- المشهد 1: الخطوط ---------- */
.s1 .c-center.top { opacity: var(--t1o, 1); transform: translate3d(-50%, var(--t1y, 0px), 0); }
.c-map { position: absolute; left: 50%; top: 56%; width: min(94vw, 1040px); height: auto; max-height: 62%; transform: translate3d(-50%, -50%, 0); overflow: visible; z-index: 2; }
.c-map text { font-family: 'Cairo', sans-serif; font-weight: 800; font-size: 20px; fill: #fff; paint-order: stroke; stroke: rgba(6,20,13,.9); stroke-width: 2.5px; stroke-linejoin: round; }
/* لا نستخدم transform في CSS هنا: يلغي سمة transform التي تحدد موضع المدينة على الخريطة */
.c-map .cm-city { opacity: 0; transition: opacity .5s ease; } .c-map .cm-city.on { opacity: 1; }
.c-map .cm-city circle { fill: #0c2118; stroke: #e5c14a; stroke-width: 3; } .c-map .cm-city .ring { fill: none; stroke: rgba(229,193,74,.5); animation: cPulse 2.2s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes cPulse { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.4); opacity: 0; } }
#cm-marker { filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.c-routes { position: absolute; left: 0; right: 0; bottom: 3%; display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; padding: 0 12px; z-index: 5; opacity: var(--rto, 1); }
.c-routes a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 50px; background: rgba(5,26,20,.72); border: 1px solid rgba(255,255,255,.22); color: #fff; font-weight: 800; font-size: clamp(.74rem, 1.7vw, .9rem); text-decoration: none; transition: all .2s; }
.c-routes a i { color: var(--gold); } .c-routes a small { background: rgba(229,193,74,.9); color: #1a1405; border-radius: 50px; padding: 0 9px; font-weight: 900; } .c-routes a:hover { background: var(--gold); color: #1a1405; } .c-routes a:hover i { color: #1a1405; }

/* ---------- المشهد 2: الطريق ---------- */
.c-world { position: absolute; inset: 0; transform: translate3d(0, var(--shk, 0px), 0); }
.c-layer { position: absolute; left: 0; right: 0; overflow: hidden; pointer-events: none; }
.c-tile { position: absolute; top: 0; bottom: 0; left: calc(var(--tw) * -1); width: calc(100% + var(--tw)); background-repeat: repeat-x; background-position: bottom left; transform: translate3d(var(--lx, 0px), 0, 0); will-change: transform; }
.c-layer.far { --tw: 900px; bottom: 21%; height: 34%; filter: brightness(var(--lbf)); } .c-layer.mid { --tw: 700px; bottom: 19%; height: 30%; filter: brightness(var(--lbm)); } .c-layer.near { --tw: 520px; bottom: 16%; height: 44%; filter: brightness(var(--lbn)); }
.c-layer.fore { --tw: 1100px; bottom: 0; height: 24%; z-index: 7; filter: blur(2px) brightness(var(--lbn)); opacity: .6; }
.c-layer.far .c-tile { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='200' viewBox='0 0 900 200'%3E%3Cpath d='M0 200 V120 Q60 70 130 110 T260 90 T400 120 T540 70 T700 110 T820 85 T900 120 V200 Z' fill='%230f3d2c' opacity='.9'/%3E%3C/svg%3E"); background-size: 900px 100%; }
.c-layer.mid .c-tile { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='200' viewBox='0 0 700 200'%3E%3Cg fill='%230a2a1e'%3E%3Crect x='20' y='120' width='60' height='80'/%3E%3Crect x='90' y='100' width='44' height='100'/%3E%3Crect x='140' y='130' width='70' height='70'/%3E%3Crect x='330' y='110' width='56' height='90'/%3E%3Crect x='392' y='135' width='64' height='65'/%3E%3Crect x='560' y='105' width='50' height='95'/%3E%3Crect x='616' y='125' width='60' height='75'/%3E%3C/g%3E%3Cg fill='%23071a12'%3E%3Cpath d='M250 200 V110 M250 112 q-30 -8 -44 8 M250 112 q30 -8 44 8 M250 112 q-18 -26 -38 -22 M250 112 q18 -26 38 -22' stroke='%23071a12' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3Cpath d='M480 200 V120 M480 122 q-26 -8 -40 6 M480 122 q26 -8 40 6 M480 122 q-16 -22 -34 -18 M480 122 q16 -22 34 -18' stroke='%23071a12' stroke-width='6' fill='none' stroke-linecap='round'/%3E%3C/g%3E%3Cg fill='%23f3cd5a' opacity='.8'%3E%3Crect x='30' y='132' width='8' height='10'/%3E%3Crect x='100' y='116' width='8' height='10'/%3E%3Crect x='340' y='124' width='8' height='10'/%3E%3Crect x='570' y='118' width='8' height='10'/%3E%3C/g%3E%3C/svg%3E"); background-size: 700px 100%; }
.c-layer.near .c-tile { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='260' viewBox='0 0 520 260'%3E%3Cg stroke='%2304110b' stroke-width='9' fill='none' stroke-linecap='round'%3E%3Cpath d='M70 260 V70 Q70 40 110 40 H140'/%3E%3C/g%3E%3Crect x='128' y='34' width='34' height='12' rx='5' fill='%23f3cd5a'/%3E%3Cpath d='M340 260 V120 M340 124 q-44 -12 -70 10 M340 124 q44 -12 70 10 M340 124 q-28 -38 -60 -32 M340 124 q28 -38 60 -32' stroke='%2304110b' stroke-width='9' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-size: 520px 100%; }
.c-layer.fore .c-tile { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1100' height='200' viewBox='0 0 1100 200'%3E%3Cg fill='%2303100a'%3E%3Cpath d='M120 200 Q125 90 150 50 Q160 120 175 200 Z'/%3E%3Cpath d='M150 200 Q175 110 215 70 Q205 140 190 200 Z'/%3E%3Cpath d='M95 200 Q90 120 60 80 Q110 130 130 200 Z'/%3E%3Cpath d='M720 200 Q725 80 760 30 Q770 120 790 200 Z'/%3E%3Cpath d='M760 200 Q790 100 840 60 Q825 140 805 200 Z'/%3E%3Cpath d='M690 200 Q680 110 650 70 Q710 130 735 200 Z'/%3E%3C/g%3E%3C/svg%3E"); background-size: 1100px 100%; }
.c-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(180deg, var(--road-a) 0%, var(--road-b) 100%); border-top: 4px solid rgba(255,255,255,.12); }
.c-ground::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 40%; background: linear-gradient(180deg, rgba(255,255,255,calc(.05 + (1 - var(--night)) * .08)), transparent); pointer-events: none; }
.c-lane { position: absolute; left: calc(-1 * 160px); right: 0; top: 52%; height: 6px; background: repeating-linear-gradient(to right, #f3dc92 0 80px, transparent 80px 160px); transform: translate3d(var(--lane-x, 0px), 0, 0); will-change: transform; opacity: .9; }
.s2-bus { left: 50%; bottom: 7%; width: min(76vw, 580px); margin-left: calc(min(76vw, 580px) / -2); transform: translate3d(var(--b2x, 0px), var(--b2y, 0px), 0); z-index: 5; }
.c-dust { position: absolute; left: calc(50% + min(76vw, 580px) * .3); bottom: 8.5%; width: 120px; height: 60px; z-index: 6; opacity: var(--spd, 0); pointer-events: none; }
.c-dust i { position: absolute; bottom: 0; right: 0; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle, rgba(220,205,170,.55), rgba(220,205,170,0) 70%); animation: cDust 1.6s ease-out infinite; will-change: transform, opacity; }
.c-dust i:nth-child(2) { animation-delay: .4s; } .c-dust i:nth-child(3) { animation-delay: .8s; } .c-dust i:nth-child(4) { animation-delay: 1.2s; }
@keyframes cDust { 0% { transform: translate3d(0,0,0) scale(.4); opacity: 0; } 20% { opacity: .8; } 100% { transform: translate3d(70px,-26px,0) scale(2.4); opacity: 0; } }
.c-speed { position: absolute; left: 0; right: 0; bottom: 14%; height: 20%; pointer-events: none; opacity: var(--spd, 0); z-index: 4; }
.c-speed i { position: absolute; height: 2px; width: 22%; border-radius: 2px; background: linear-gradient(to left, rgba(255,255,255,.55), transparent); animation: cSpeed .9s linear infinite; }
.c-speed i:nth-child(1) { top: 10%; right: -22%; animation-delay: 0s; } .c-speed i:nth-child(2) { top: 32%; right: -22%; animation-delay: .25s; width: 30%; } .c-speed i:nth-child(3) { top: 55%; right: -22%; animation-delay: .5s; }
.c-speed i:nth-child(4) { top: 75%; right: -22%; animation-delay: .15s; width: 18%; } .c-speed i:nth-child(5) { top: 90%; right: -22%; animation-delay: .65s; width: 26%; }
@keyframes cSpeed { from { transform: translate3d(0,0,0); } to { transform: translate3d(-160vw,0,0); } }
.c-steps { position: absolute; left: 0; right: 0; bottom: 2.5%; display: flex; justify-content: center; gap: 10px; z-index: 8; flex-wrap: wrap; padding: 0 12px; }
.c-steps span { display: inline-flex; align-items: center; gap: 7px; padding: 6px 15px; border-radius: 50px; background: rgba(6,20,13,.66); border: 1px solid rgba(255,255,255,.2); font-weight: 800; font-size: clamp(.74rem, 1.8vw, .92rem); color: #d4e6dc; opacity: .55; transform: scale(.94); transition: all .4s cubic-bezier(.2,.8,.2,1); }
.c-steps span.on { opacity: 1; transform: scale(1.06); background: linear-gradient(135deg, #e5c14a, #c9a227); color: #1a1405; border-color: transparent; box-shadow: 0 8px 24px rgba(201,162,39,.4); }
.s2 .c-center.top h2, .s2 .c-center.top p { transition: opacity .35s ease, transform .35s ease; } .s2 .c-center.top.swap h2, .s2 .c-center.top.swap p { opacity: 0; transform: translateY(8px); }

/* ---------- المشهد 3: لقطات حقيقية ---------- */
.c-reel { position: absolute; inset: 0; background: #05100a; overflow: hidden; }
.c-reel .rf { position: absolute; inset: 0; margin: 0; opacity: var(--o, 0); transform: translate3d(var(--x, 0px), var(--y, 0px), 0) scale(var(--s, 1.12)); will-change: transform, opacity; }
.c-reel .rf img { width: 100%; height: 100%; object-fit: cover; filter: brightness(calc(var(--pb) + .22)) saturate(1.05) contrast(1.05); }
.rf-tint { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,16,12,.72) 0%, rgba(4,16,12,.12) 42%, rgba(4,16,12,.8) 100%); pointer-events: none; }
.c-chips { position: absolute; left: 50%; bottom: 7%; transform: translate3d(-50%, var(--chy, 0px), 0); display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; width: min(94vw, 980px); z-index: 4; opacity: var(--cho, 1); }
.c-chips span { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: 50px; background: rgba(5,26,20,.74); border: 1px solid rgba(255,255,255,.22); font-weight: 800; font-size: clamp(.7rem, 1.7vw, .88rem); color: #eef7f1; }
.c-chips span i { color: var(--gold); } .c-chips .hot { background: linear-gradient(135deg, #e5c14a, #c9a227); color: #1a1405; border-color: transparent; } .c-chips .hot i { color: #1a1405; }
.c-reel-dots { position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 5; }
.c-reel-dots i { width: 26px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.3); transition: all .3s; } .c-reel-dots i.on { background: var(--gold); width: 44px; }

/* ---------- المشهد 4: التذكرة ---------- */
.c-ticket { position: absolute; left: 50%; top: 53%; width: min(86vw, 400px); transform: translate3d(-50%, calc(-50% + var(--tky, 0px)), 0) rotate(var(--tkr, 0deg)); opacity: var(--tko, 1); z-index: 3; filter: drop-shadow(0 28px 40px rgba(0,0,0,.55)); will-change: transform, opacity; }
.c-ticket .tk-top { background: linear-gradient(145deg, #123524, #1f6b4a); border-radius: 22px 22px 0 0; padding: 16px 20px; position: relative; overflow: hidden; }
.c-ticket .tk-top::after { content: ''; position: absolute; left: -30px; bottom: -40px; width: 150px; height: 150px; background: url('/img/sticker.webp') center/contain no-repeat; opacity: .12; filter: brightness(0) invert(1); }
.tk-brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: .8rem; color: #f0d98a; margin-bottom: 10px; } .tk-brand img { width: 26px; background: #fffdf4; border-radius: 8px; padding: 3px; }
.tk-route { display: flex; align-items: center; justify-content: space-between; font-size: clamp(1.1rem, 4vw, 1.5rem); font-weight: 900; margin-bottom: 12px; } .tk-route i { color: var(--gold); }
.tk-row { display: flex; justify-content: space-between; gap: 10px; } .tk-row small { display: block; color: #a9c7b8; font-weight: 700; font-size: .68rem; } .tk-row b { font-size: 1rem; font-weight: 900; }
.tk-tear { display: flex; align-items: center; height: 22px; background: #f8f5ea; position: relative; } .tk-tear span { flex: 1; border-top: 2px dashed #c9c2a8; margin: 0 14px; }
.tk-tear i { position: absolute; top: 0; width: 22px; height: 22px; background: var(--sky-mid, #0d3a2a); border-radius: 50%; } .tk-tear i:first-child { right: -11px; } .tk-tear i:last-child { left: -11px; }
.tk-bottom { background: #f8f5ea; border-radius: 0 0 22px 22px; padding: 12px 20px 16px; display: flex; align-items: center; gap: 14px; color: #123524; }
.tk-qr { width: 66px; height: 66px; flex-shrink: 0; border-radius: 6px; background: conic-gradient(from 0deg, #123524 25%, #fff 0 50%, #123524 0 75%, #fff 0) 0 0/16px 16px, #fff; border: 4px solid #fff; box-shadow: 0 0 0 1px #d9d2b8; }
.tk-note b { display: block; font-weight: 900; } .tk-note span { font-weight: 700; font-size: .78rem; color: #5b6b62; }
.c-how { position: absolute; left: 0; right: 0; bottom: 14%; margin: 0; padding: 0 14px; list-style: none; display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; z-index: 4; opacity: var(--how, 1); }
.c-how li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 50px; background: rgba(5,26,20,.72); border: 1px solid rgba(255,255,255,.22); font-weight: 800; font-size: clamp(.72rem, 1.7vw, .9rem); } .c-how li b { width: 24px; height: 24px; border-radius: 50%; background: var(--gold); color: #1a1405; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; }
.c-cta { position: absolute; left: 50%; bottom: 3.5%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 9px; padding: 11px 28px; border-radius: 50px; background: linear-gradient(135deg, #f1d36a, #c9a227); color: #1a1405; font-weight: 900; font-size: clamp(.9rem, 2vw, 1.05rem); text-decoration: none; box-shadow: 0 12px 34px rgba(201,162,39,.45); z-index: 9; transition: filter .2s; white-space: nowrap; }
.c-cta:not(.ghost)::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 12px 46px rgba(201,162,39,.85); opacity: 0; pointer-events: none; animation: cCta 2.4s ease-in-out infinite; }
.c-cta:hover { filter: brightness(1.08); color: #1a1405; } .c-cta.ghost { background: rgba(255,255,255,.12); color: #fff; border: 1.5px solid rgba(255,255,255,.4); box-shadow: none; } .c-cta.ghost:hover { background: rgba(255,255,255,.22); color: #fff; }
@keyframes cCta { 0%,100% { opacity: 0; } 50% { opacity: 1; } }
.s5 .c-cta { position: relative; transform: none; }
.c-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }

/* ---------- المشهد 5: شراكة وتشغيل ---------- */
.s5-copy { transform: translate3d(-50%, calc(-50% - 7vh + var(--c5y, 0px)), 0); }
.c-brand-line { overflow: hidden; } .c-brand-line span { display: inline-block; font-weight: 900; line-height: 1.3; transform: translate3d(0, var(--bly, 0%), 0); opacity: var(--blo, 1); }
.c-brand-line .b1 { font-size: clamp(1.4rem, 4.8vw, 3rem); color: #fff; text-shadow: 0 6px 28px rgba(0,0,0,.55); } .c-brand-line .b2 { font-size: clamp(1.8rem, 6.8vw, 4.2rem); background: linear-gradient(135deg, #fff1b0, #e5c14a 55%, #c9a227); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 24px rgba(201,162,39,.4)); }
.c-with { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 8px 0 6px; font-weight: 800; font-size: clamp(.8rem, 2vw, 1rem); color: #e2efe8; opacity: var(--wo, 1); } .c-with i { flex: 0 1 120px; height: 1px; background: linear-gradient(to left, transparent, rgba(229,193,74,.8), transparent); }
.s5-bus { left: 50%; bottom: 2%; margin-left: calc(min(58vw, 420px) / -2); width: min(58vw, 420px); transform: translate3d(var(--b5x, 0px), var(--b5y, 0px), 0); z-index: 2; opacity: var(--b5o, 1); }

/* ---------- الشريط الجانبي + العائم + تلميحات ---------- */
.c-rail { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); z-index: 20; display: flex; flex-direction: column; gap: 14px; }
.c-rail button { position: relative; width: 12px; height: 12px; padding: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.6); background: transparent; cursor: pointer; transition: all .3s; }
.c-rail button.on { background: var(--gold); border-color: var(--gold); transform: scale(1.35); box-shadow: 0 0 0 5px rgba(229,193,74,.25); }
.c-rail button span { position: absolute; left: 22px; top: 50%; transform: translateY(-50%) translateX(-6px); white-space: nowrap; font-size: .74rem; font-weight: 800; color: #fff; background: rgba(6,20,13,.88); padding: 3px 10px; border-radius: 8px; opacity: 0; pointer-events: none; transition: all .25s; }
.c-rail button:hover span { opacity: 1; transform: translateY(-50%); }
.c-float { position: absolute; left: 14px; top: 10px; z-index: 21; display: inline-flex; align-items: center; gap: 7px; padding: 6px 16px; border-radius: 50px; background: linear-gradient(135deg, #f1d36a, #c9a227); color: #1a1405; font-weight: 900; font-size: .82rem; text-decoration: none; box-shadow: 0 8px 22px rgba(201,162,39,.45); opacity: var(--fl, 0); transform: translate3d(0, calc((1 - var(--fl, 0)) * -12px), 0); pointer-events: none; transition: filter .2s; }
.c-float[data-on="1"] { pointer-events: auto; } .c-float:hover { filter: brightness(1.08); color: #1a1405; }
.c-hint { position: absolute; left: 64px; bottom: 3%; z-index: 12; display: flex; flex-direction: column; align-items: center; gap: 8px; font-weight: 800; font-size: .8rem; color: #e2efe8; opacity: var(--hint, 1); pointer-events: none; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.c-hint span { width: 24px; height: 38px; border: 2px solid rgba(255,255,255,.7); border-radius: 14px; position: relative; } .c-hint span::after { content: ''; position: absolute; top: 7px; left: 50%; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--gold); animation: cWheel 1.6s ease-in-out infinite; }
@keyframes cWheel { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }
.c-skip { position: absolute; right: 14px; top: 10px; z-index: 21; border: 1px solid rgba(255,255,255,.34); background: rgba(6,20,13,.6); color: #eef7f1; font-weight: 800; font-size: .76rem; padding: 5px 14px; border-radius: 50px; cursor: pointer; font-family: inherit; transition: all .2s; }
.c-skip:hover { background: var(--gold); color: #1a1405; border-color: transparent; }

/* ---------- شاشات متوسطة وجوال ---------- */
@media (max-width: 991.98px) { :root { --stage-h: calc(100vh - var(--nav-h, 72px) - 86px); --stage-h: calc(100svh - var(--nav-h, 72px) - 86px); } }
@media (max-width: 991.98px) { .ct-track { padding-inline: calc(50% - min(39vw, 150px)); } .ct-card { flex-basis: min(78vw, 300px); } .ct-nav { display: none; } }
@media (max-width: 768px) {
    .cine { --per: 80vh; }
    .c-rail { left: 8px; gap: 11px; } .c-rail button span { display: none; } .c-skip { font-size: .7rem; padding: 4px 11px; } .c-float { font-size: .74rem; padding: 5px 12px; }
    .c-center.top { top: 48px; }
    .c-routes { bottom: 2%; gap: 6px; } .c-routes a { padding: 5px 11px; }
    .c-chips { bottom: 8%; gap: 6px; } .c-chips span { padding: 4px 10px; } .c-how { bottom: 16%; }
    .c-map text { font-size: 26px; } .c-bus { width: min(92vw, 440px); } .s2-bus { margin-left: calc(min(92vw, 440px) / -2); } .s0-bus { width: min(70vw, 340px); margin-left: calc(min(70vw, 340px) / -2); }
    .c-steps { bottom: 2%; }
    .c-ticket { top: 47%; width: min(76vw, 320px); } .c-ticket .tk-top { padding: 11px 15px; } .tk-route { margin-bottom: 8px; } .tk-bottom { padding: 8px 15px 12px; } .tk-qr { width: 52px; height: 52px; }
    .c-how { gap: 6px; } .c-how li { font-size: .68rem; padding: 3px 9px; } .c-how li b { width: 20px; height: 20px; font-size: .68rem; }
    .c-grain { opacity: .06; mix-blend-mode: normal; animation: none; } .c-motes i:nth-child(n+5) { display: none; }
    .s0-copy { top: 40px; } .c-title { font-size: clamp(1.55rem, 7.4vw, 2.2rem); } .c-lead { font-size: .8rem; line-height: 1.55; } .c-partner { display: none; } .c-quick { display: none; }
    .c-brandrow { margin-bottom: 4px; } .ct-card { gap: 8px; padding: 11px 13px 12px; } .ct-route { font-size: 1.08rem; } .ct-price { font-size: 1.35rem; } .ct-nav { display: none; }
}
@media (max-width: 576px) { .c-rail { display: none; } .c-hint { display: none; } }
@media (max-height: 640px) { .c-hint, .c-how, .c-quick { display: none; } .c-chips { display: none; } .c-lead { display: none; } }
@media (max-height: 740px) and (max-width: 768px) { .s0-copy .c-lead, .ct-links { display: none; } }

.cine-live .c-scene:not(.on) *, .cine-live .c-scene:not(.on) *::after, .cine-live .c-scene:not(.on) *::before { animation-play-state: paused !important; }

.anim-off, .anim-off *, .anim-off *::before, .anim-off *::after { animation-play-state: paused !important; }

/* لا فراغ بين الشريط العلوي والمشهد: main يضيف padding-top: 1rem على كل الصفحات (LayoutBusStyleSheet) */
main[role="main"] { padding-top: 0 !important; }

/* ---------- الانتقال إلى باقي الصفحة: قسم الهيرو يصعد فوق المشهد المثبَّت بحافة موجية ----------
   الصفحة التالية تُسحب للأعلى بقدر ارتفاع المشهد (margin سالب) فيصعد قسم الهيرو وهو فوق المشهد المثبَّت أثناء آخر جزء من التمرير،
   فتبدو الصفحة كأنها تنزلق فوق القصة بدل أن تنتهي القصة بفراغ مظلم. */
.cine-wave { position: relative; z-index: 4; height: 0; margin-top: calc(var(--stage-h) * -1); pointer-events: none; }
.cine-wave svg { position: absolute; left: 0; right: 0; top: -89px; width: 100%; height: 90px; display: block; }
.cine-wave .cw-fill { fill: #0c2118; } .cine-wave .cw-line { fill: none; stroke: #e5c14a; stroke-width: 3; stroke-linecap: round; opacity: .92; filter: drop-shadow(0 -4px 10px rgba(229,193,74,.5)); }
.cine-lite .cine-wave .cw-line { filter: none; }
.cine-static ~ .cine-wave { margin-top: 0; } .cine-static ~ .cine-wave svg { display: none; }
/* التحام ناعم مع قمة قسم الهيرو الداكن */
.cine ~ .home-modern-container .hero-wrapper { box-shadow: inset 0 60px 50px -36px #0c2118; }

/* ---------- الوضع الخفيف (iPhone / الأجهزة الضعيفة / عند قلّة الإطارات) ----------
   يُلغي كل ما يُجبر المتصفح على إعادة رسم طبقات كبيرة أثناء التمرير (فلاتر، ظلال SVG، حبيبات، غبار، نجوم متلألئة) دون تغيير القصة. */
.cine-lite .c-grain, .cine-lite .c-motes, .cine-lite .c-stars::after, .cine-lite .c-dust, .cine-lite .c-speed, .cine-lite .c-layer.fore { display: none !important; }
.cine-lite .c-bus, .cine-lite #cm-marker, .cine-lite .c-ticket { filter: none !important; }
.cine-lite .c-clouds i, .cine-lite .c-logo::after, .cine-lite .c-cta::after, .cine-lite .cm-city .ring { animation: none !important; }
.cine-lite .c-moon i { box-shadow: 0 0 28px 6px rgba(255,248,200,.28); }
.cine-lite .c-sun, .cine-lite .c-emblem, .cine-lite .c-clouds i, .cine-lite .c-stars, .cine-lite .c-moon { will-change: auto; }
.cine-lite .cs-go, .cine-lite .ct-card, .cine-lite .c-chips span, .cine-lite .c-steps span { transition: none; }
.cine-lite .ct-card { box-shadow: 0 6px 14px rgba(0,0,0,.32); }

/* الفلاتر على طبقات كبيرة تتحرك كل إطار هي أثقل ما في مشهدَي الطريق والمحطة: نستبدلها بشفافية (نفس الإحساس الجوي) */
.cine-lite .c-layer.far, .cine-lite .c-layer.mid, .cine-lite .c-layer.near { filter: none !important; }
.cine-lite .c-layer.far { opacity: calc(1 - (1 - var(--night, 1)) * .42); } .cine-lite .c-layer.mid { opacity: calc(1 - (1 - var(--night, 1)) * .30); } .cine-lite .c-layer.near { opacity: calc(1 - (1 - var(--night, 1)) * .16); }
.cine-lite .c-reel .rf img { filter: none !important; opacity: calc(.74 + (1 - var(--night, 1)) * .26); }
.cine-lite .s0-photo img { filter: none !important; }
.cine-lite .s0-photo { opacity: calc(.4 + (1 - var(--night, 1)) * .3); }

/* خريطة الخطوط على الجوال: أسماء أكبر، وتُخفى أسماء المدينتين المتجاورتين (رأس جدير/الزاوية) كي لا تتداخل مع طرابلس */
@media (max-width: 576px) { .c-map text { font-size: 31px; stroke-width: 2px; } .c-map .cm-city.minor text { display: none; } }
/* العناوين الأطول في الإنجليزية/الفرنسية على الجوال */
@media (max-width: 768px) {
    html[dir="ltr"] .c-h2 { font-size: clamp(1.1rem, 5.4vw, 1.5rem); line-height: 1.25; }
    html[dir="ltr"] .c-title { font-size: clamp(1.4rem, 7.4vw, 2rem); }
    html[dir="ltr"] .c-lead { font-size: .76rem; line-height: 1.5; }
    html[dir="ltr"] .c-cta { white-space: normal; text-align: center; width: max-content; max-width: 86vw; font-size: .88rem; padding: 9px 20px; line-height: 1.3; }
    html[dir="ltr"] .c-cta-row { flex-direction: column; align-items: center; gap: 8px; }
    html[dir="ltr"] .c-how li { font-size: .62rem; }
    html[dir="ltr"] .c-brand-line .b1 { font-size: clamp(1.1rem, 5.6vw, 1.8rem); } html[dir="ltr"] .c-brand-line .b2 { font-size: clamp(1.4rem, 7vw, 2.4rem); }
    html[dir="ltr"] .c-ticket { top: 52%; }
}
/* ---------- اللغات اللاتينية (EN/FR): الاتجاه من اليسار لليمين ---------- */
html[dir="ltr"] .cine { direction: ltr; font-family: 'Cairo', system-ui, sans-serif; }
html[dir="ltr"] .ct-track, html[dir="ltr"] .ct-card { text-align: left; }
html[dir="ltr"] .ct-route b:last-child { text-align: right; }
html[dir="ltr"] .ct-nav.prev { right: auto; left: -52px; } html[dir="ltr"] .ct-nav.next { left: auto; right: -52px; }
html[dir="ltr"] .ct-nav i, html[dir="ltr"] .ct-book i, html[dir="ltr"] .c-routes i, html[dir="ltr"] .tk-route i { transform: scaleX(-1); display: inline-block; }
html[dir="ltr"] .c-title { letter-spacing: -.01em; }
@media (min-width: 992px) and (max-width: 1099.98px) { html[dir="ltr"] .ct-nav.prev { left: -44px; right: auto; } html[dir="ltr"] .ct-nav.next { right: -44px; left: auto; } }

/* ---------- بدون حركة / بدون جافاسكربت: عرض ثابت متسلسل ---------- */
.cine-static { height: auto; }
.cine-static .cine-stage { position: relative; top: 0; height: auto; overflow: visible; }
.cine-static .c-scene { position: relative; opacity: 1; visibility: visible; min-height: 86vh; display: block; border-bottom: 1px solid rgba(255,255,255,.08); pointer-events: auto; }
.cine-static .c-center, .cine-static .c-center.top { position: relative; left: auto; top: auto; transform: none; margin: 0 auto; padding: 40px 0 20px; }
.cine-static .c-bus { --beam: 0; }
.cine-static .c-bus, .cine-static .c-map, .cine-static .c-ticket { position: relative; left: auto; top: auto; bottom: auto; margin: 10px auto; transform: none; display: block; }
.cine-static .c-map { width: 90vw; } .cine-static .c-chips, .cine-static .c-how, .cine-static .c-steps, .cine-static .c-routes { position: relative; inset: auto; transform: none; margin: 14px auto; }
.cine-static .c-reel { position: relative; height: 40vh; } .cine-static .c-reel .rf { opacity: 1; } .cine-static .c-reel .rf:not(:first-child) { display: none; }
.cine-static .c-cta { position: static; transform: none; margin: 14px auto; }
.cine-static .c-world, .cine-static .c-speed, .cine-static .c-rail, .cine-static .c-hint, .cine-static .c-skip, .cine-static .c-sun, .cine-static .c-moon, .cine-static .c-clouds, .cine-static .c-emblem, .cine-static .c-float, .cine-static .c-motes, .cine-static .c-grain, .cine-static .c-reel-dots { display: none; }
.cine-static .c-steps span { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .cine *, .cine *::before { animation: none !important; transition: none !important; } }
@media print { .cine { display: none; } }

/* شريط التنقل في الصفحة الرئيسية معتم بلا backdrop-filter: كان يعيد تمويه ما خلفه مع كل تحديث للمشهد
   فيتأرجح لونه بين درجتين كل بضعة إطارات (رجفة ظاهرة أعلى الشاشة أثناء التمرير). */
html body .navbar-saas.navbar-saas.navbar-saas { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; background: #f7faf8 !important; transition: box-shadow .3s ease; }
html[data-bs-theme="dark"] body .navbar-saas.navbar-saas.navbar-saas { background: #0a1c14 !important; }