/* =====================================================================
   جولة 27: أنميشن «التصريح الأحمر» — بوابة المنشأة (مشترك بين اللعبة ومعاينة المحرك)
   الألوان من المحرك: --light (الإضاءة) --haz (خطوط التحذير) --scr (الشاشة) --tx (النص)
   ===================================================================== */
.rx { position:fixed; inset:0; z-index:9999; overflow:hidden; background:#030203; color:var(--tx,#fff); opacity:0; user-select:none; -webkit-user-select:none;
  font-family:inherit; direction:rtl; --light:#ff2238; --haz:#f5c400; --scr:#b3001b; --tx:#fff; touch-action:manipulation }
.rx.rx-pv { position:absolute; z-index:1; border-radius:inherit }
.rx.out { transition:opacity .45s ease-in, filter .45s; opacity:0 !important; filter:blur(3px) }
.rx-scene { position:absolute; inset:-4%; transform-origin:50% 50%; will-change:transform }
/* الضلفتين — يملون الشاشة */
.rx-door { position:absolute; top:0; bottom:0; width:50%; overflow:hidden; will-change:transform; background:#1a1b1e }
.rx-door.l { left:0; box-shadow:inset -30px 0 60px #000c } .rx-door.r { right:0; box-shadow:inset 30px 0 60px #000c }
.rx-steel { position:absolute; inset:0;
  background:radial-gradient(circle,#7b7f88 0 2px,#202226 2.6px,#0000 3.6px) 26px 26px/72px 72px, repeating-linear-gradient(0deg,#0000 0 71px,#0009 71px 72px),
    repeating-linear-gradient(90deg,#ffffff05 0 2px,#0000 2px 8px), linear-gradient(180deg,#0006,#0000 30%,#0000 70%,#0008), linear-gradient(90deg,#26282c,#3d4046 45%,#33353a 70%,#232528) }
.rx-door.r .rx-steel { transform:scaleX(-1) }
.rx-steel.img { background:var(--gimg) center/200% 100% no-repeat, #1a1b1e } .rx-door.l .rx-steel.img { background-position:left center } .rx-door.r .rx-steel.img { transform:none; background-position:right center }
.rx-haz { position:absolute; left:0; right:0; height:11%; box-shadow:inset 0 0 0 3px #000a, 0 3px 10px #000a;
  background:linear-gradient(180deg,#0007,#0000 30%,#0000 70%,#0009), repeating-linear-gradient(-45deg,var(--haz) 0 34px,#111 34px 68px); filter:brightness(.8) saturate(.85) }
.rx-door.r .rx-haz { background:linear-gradient(180deg,#0007,#0000 30%,#0000 70%,#0009), repeating-linear-gradient(45deg,var(--haz) 0 34px,#111 34px 68px) }
.rx-haz.top { top:7% } .rx-haz.bot { bottom:7% }
.rx-edge { position:absolute; top:0; bottom:0; width:6%; min-width:22px; box-shadow:inset 0 0 0 2px #000b;
  background:linear-gradient(90deg,#0008,#0000 45%), repeating-linear-gradient(-45deg,var(--haz) 0 22px,#111 22px 44px); filter:brightness(.8) }
.rx-door.l .rx-edge { right:0 } .rx-door.r .rx-edge { left:0; background:linear-gradient(-90deg,#0008,#0000 45%), repeating-linear-gradient(45deg,var(--haz) 0 22px,#111 22px 44px) }
.rx-rib { position:absolute; left:5%; right:11%; height:14px; border-radius:3px; background:linear-gradient(#5b5f67,#1f2124); box-shadow:0 4px 10px #000c, inset 0 1px #ffffff2a }
.rx-door.r .rx-rib { left:11%; right:5% } .rx-rib.a { top:25% } .rx-rib.b { top:52% } .rx-rib.c { top:78% }
.rx-bolt { position:absolute; top:50%; width:min(150px,22vw); height:min(150px,22vw); margin-top:calc(min(150px,22vw) / -2); border-radius:50%;
  background:radial-gradient(circle,#2a2c31 0 30%,#0000 31%), conic-gradient(from 20deg,#4a4e56,#2a2c31,#5b5f68,#2a2c31,#4a4e56); box-shadow:0 0 0 6px #18191c, 0 10px 30px #000c, inset 0 0 0 3px #0009 }
.rx-door.l .rx-bolt { right:calc(min(150px,22vw) / -2) } .rx-door.r .rx-bolt { left:calc(min(150px,22vw) / -2) }
.rx-sten { position:absolute; top:31%; height:19%; left:0; right:0; display:grid; place-items:center; pointer-events:none }
.rx-door.l .rx-sten { right:8% } .rx-door.r .rx-sten { left:8% }
.rx-sten span { font-weight:900; font-size:clamp(28px,8vw,96px); letter-spacing:.06em; color:var(--haz); opacity:.85; white-space:nowrap; filter:brightness(.82); text-shadow:0 3px 0 #0009, 0 0 1px #000 }
.rx-logo { position:absolute; left:50%; top:60%; width:min(120px,20vw); transform:translate(-50%,-50%); opacity:.85; filter:drop-shadow(0 4px 10px #000c); pointer-events:none; transition:opacity .4s }
.rx.s1 .rx-logo { opacity:0 }
.rx-sign { position:absolute; top:calc(7% + 11% + 2.5%); left:50%; transform:translateX(-50%); z-index:2; font-size:clamp(11px,1.8vw,16px); font-weight:900; letter-spacing:.06em; color:#fff; white-space:nowrap;
  background:#1a0a0c; border:2px solid var(--light); padding:4px 14px; border-radius:3px; box-shadow:0 0 18px var(--light), inset 0 0 10px #000; animation:rxBlink .7s steps(2) infinite }
.rx.s2 .rx-sign { opacity:0; transition:opacity .3s; animation:none }
@keyframes rxBlink { 50% { box-shadow:0 0 4px var(--light), inset 0 0 10px #000; color:#ffffff88 } }
/* إضاءة الطوارئ: كل الحديد مصبوغ بلون الإضاءة (أحمر افتراضيًا) + ظلام + موجات تدور */
.rx-tint { position:absolute; inset:0; pointer-events:none; background:var(--light); mix-blend-mode:multiply; opacity:.55 }
.rx-tint::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 45%,transparent 25%,#000000b0 85%); mix-blend-mode:normal }
.rx.s2 .rx-tint { opacity:.25; transition:opacity 1s }
.rx-emer { position:absolute; inset:0; pointer-events:none; mix-blend-mode:screen; animation:rxPulse 1.6s ease-in-out infinite; filter:saturate(1.3) }
@keyframes rxPulse { 50% { opacity:.55 } }
.rx-emer::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% -10%, color-mix(in srgb,var(--light) 38%,transparent), transparent 60%), radial-gradient(ellipse at 50% 110%, color-mix(in srgb,var(--light) 22%,transparent), transparent 55%) }
.rx-bc { position:absolute; top:-30vmax; width:60vmax; height:60vmax; border-radius:50%; background:conic-gradient(from 0deg, color-mix(in srgb,var(--light) 75%,transparent), transparent 12%, transparent 50%, color-mix(in srgb,var(--light) 75%,transparent) 62%, transparent 74%); animation:rxSpin 2.4s linear infinite; filter:blur(8px) }
.rx-bc.l { left:-30vmax } .rx-bc.r { right:-30vmax; animation-direction:reverse }
@keyframes rxSpin { to { transform:rotate(360deg) } }
.rx.s2 .rx-emer { opacity:0; transition:opacity .8s; animation:none }
/* ضباب يمشي */
.rx-fog { position:absolute; left:-20%; right:-20%; height:70%; bottom:-10%; pointer-events:none; opacity:.35; filter:blur(18px);
  background:radial-gradient(ellipse at 30% 60%,#ffffff22,transparent 55%), radial-gradient(ellipse at 70% 70%,#ffffff1a,transparent 50%); animation:rxFog 14s ease-in-out infinite alternate }
.rx-fog.b { bottom:auto; top:-15%; height:50%; opacity:.18; animation-duration:19s; animation-direction:alternate-reverse }
@keyframes rxFog { to { transform:translateX(10%) } }
.rx-fx { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:3 }
.rx-vig { position:absolute; inset:0; pointer-events:none; z-index:4; background:radial-gradient(ellipse at 50% 50%,transparent 45%,#000c 100%) }
.rx.s3 .rx-vig { opacity:.6 }
/* الشاشة الحمراء — بنفس لغة البوابة */
.rx-screen { position:absolute; inset:0; z-index:2; display:grid; place-items:center; padding:clamp(14px,4vw,36px); opacity:0; visibility:hidden; overflow:auto }
.rx.s3 .rx-screen { opacity:1; visibility:visible }
.rx-sbg { position:absolute; inset:0; background-color:var(--scr); background-size:cover; background-position:center;
  background-image:radial-gradient(ellipse at 50% 35%, color-mix(in srgb,var(--scr) 60%,#fff 18%), var(--scr) 45%, color-mix(in srgb,var(--scr) 35%,#000) 100%) }
.rx-sbg::before { content:''; position:absolute; inset:0; background:repeating-linear-gradient(0deg,#0000 0 3px,#00000024 3px 4px), radial-gradient(circle,#ffffff10 0 1.5px,#0000 2px) 20px 20px/72px 72px }
.rx-sbg::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 50%,transparent 50%,#000b) }
.rx-sh { position:absolute; left:0; right:0; height:clamp(14px,2.4vw,22px); background:repeating-linear-gradient(-45deg,#0000008c 0 22px,#0000 22px 44px); box-shadow:0 0 0 1px #0004; opacity:0; transform:scaleX(.2) }
.rx-sh.top { top:0 } .rx-sh.bot { bottom:0 }
.rx.s3 .rx-sh { animation:rxBar .6s cubic-bezier(.2,.8,.2,1) .25s forwards } @keyframes rxBar { to { opacity:1; transform:none } }
.rx-card { position:relative; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; width:min(640px,100%) }
.rx-seal { position:relative; width:clamp(84px,16vmin,128px); height:clamp(84px,16vmin,128px); border-radius:50%; display:grid; place-items:center; color:var(--scr);
  background:radial-gradient(circle at 35% 30%,#fff,#f1e6e7 40%,#c9b9bb 75%); box-shadow:0 0 0 7px #00000038, 0 0 0 9px #ffffff30, 0 0 50px #fff6, 0 12px 30px #0008; transform:scale(0) }
.rx-seal i { position:absolute; inset:-14px; border-radius:50%; border:2px dashed #ffffff55; animation:rxSpin 14s linear infinite }
.rx-seal svg { width:50%; height:50%; color:var(--scr) }
.rx.s3 .rx-seal { animation:rxPop .7s cubic-bezier(.2,1.5,.4,1) .3s forwards } @keyframes rxPop { from { transform:scale(.2) rotate(-80deg); opacity:0 } to { transform:none; opacity:1 } }
.rx-kick, .rx-title, .rx-sub, .rx-perks li, .rx-go { opacity:0; transform:translateY(16px) }
.rx.s3 .rx-kick { animation:rxUp .5s ease-out .55s forwards } .rx.s3 .rx-title { animation:rxUp .65s cubic-bezier(.2,.8,.2,1) .68s forwards } .rx.s3 .rx-sub { animation:rxUp .5s ease-out .85s forwards }
.rx.s3 .rx-perks li { animation:rxUp .45s ease-out calc(1s + var(--i) * .13s) forwards } .rx.ready .rx-go { animation:rxUp .45s ease-out forwards }
@keyframes rxUp { to { opacity:1; transform:none } }
.rx-kick { letter-spacing:.32em; font-weight:800; font-size:12px; opacity:.85; margin-top:8px; color:var(--tx) }
.rx-title { margin:0; font-size:clamp(26px,6.4vw,58px); font-weight:900; line-height:1.15; text-shadow:0 4px 26px #0009; color:var(--tx) }
.rx-sub { margin:0; font-size:clamp(13px,2.4vw,17px); color:var(--tx); opacity:.86 }
.rx-perks { list-style:none; margin:12px 0 4px; padding:0; display:grid; gap:8px; width:min(520px,100%) }
.rx-perks li { position:relative; display:flex; align-items:center; gap:12px; padding:11px 16px 11px 14px; text-align:start; font-size:clamp(13px,2.3vw,15px); color:var(--tx);
  background:linear-gradient(90deg,#0000004d,#0000002a); border:1px solid #ffffff22; border-inline-start:3px solid var(--haz); clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%) }
.rx-perks li b { width:9px; height:9px; flex:none; transform:rotate(45deg); background:var(--haz); box-shadow:0 0 10px var(--haz) }
.rx-go { margin-top:8px; min-width:180px; padding:12px 26px; border:0; cursor:pointer; font:inherit; font-weight:900; font-size:16px; color:var(--scr); background:var(--tx);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px); box-shadow:0 10px 30px #0006; transition:filter .2s }
.rx-go:hover { filter:brightness(.92) }
.rx-skip { position:absolute; top:14px; left:14px; z-index:6; background:#ffffff14; border:1px solid #ffffff2b; color:#fff; border-radius:999px; padding:6px 14px; font:inherit; font-size:12px; cursor:pointer }
.rx.ready .rx-skip, .rx.rx-pv .rx-skip { opacity:0; pointer-events:none }
.rx.skipped .rx-seal, .rx.skipped .rx-kick, .rx.skipped .rx-title, .rx.skipped .rx-sub, .rx.skipped .rx-perks li, .rx.skipped .rx-sh { animation-delay:0s !important; animation-duration:.25s !important }
@media (max-width:640px) { .rx-rib { height:10px } .rx-haz { height:9% } .rx-perks li { padding:9px 12px } .rx-sign { top:calc(7% + 9% + 2%) } }
@media (prefers-reduced-motion: reduce) { .rx *, .rx { animation-duration:.01s !important; animation-iteration-count:1 !important } }