/* =============================================================
   SHABAN AUTO GROUP — Design System
   Dark cinematic automotive atelier
   ============================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  --bg:            #11100F;
  --surface:       #181716;
  --surface-2:     #23211E;
  --surface-3:     #2C2925;

  --text:          #F2EEE5;
  --text-2:        #AAA49A;
  --text-muted:    #716D66;

  --gold:          #D9A93E;
  --gold-bright:   #F0C65B;
  --gold-deep:     #A87C24;
  --bronze:        #8C6A3F;
  --steel:         #7B9293;

  --border:        rgba(242, 238, 229, 0.16);
  --border-soft:   rgba(242, 238, 229, 0.08);
  --border-gold:   rgba(217, 169, 62, 0.55);
  --border-gold-s: rgba(217, 169, 62, 0.22);

  --glow-gold:     0 0 42px rgba(217, 169, 62, 0.30);
  --glow-gold-sm:  0 0 18px rgba(217, 169, 62, 0.22);
  --shadow-lift:   0 26px 60px -22px rgba(0, 0, 0, 0.88);
  --shadow-deep:   0 40px 90px -30px rgba(0, 0, 0, 0.95);

  --f-display: "Oswald", "Cairo", "Arial Narrow", sans-serif;
  --f-body:    "Space Grotesk", "Tajawal", system-ui, sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, "Courier New", monospace;

  --ease:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast:    250ms;
  --t-mid:     400ms;
  --t-slow:    800ms;

  --gutter:    clamp(20px, 5vw, 88px);
  --maxw:      1560px;
  --header-h:  78px;
}

html[lang="ar"]{
  --f-display: "Cairo", "Oswald", sans-serif;
  --f-body:    "Tajawal", "Space Grotesk", system-ui, sans-serif;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  scroll-behavior:smooth;
  scroll-padding-top:var(--header-h);
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.68;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-locked{ overflow:hidden; }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ margin:0; font-weight:600; line-height:1.04; }
p{ margin:0; }
::selection{ background:var(--gold); color:#0C0B0A; }

::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--surface-3); border:2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover{ background:var(--gold-deep); }

:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
}

/* ---------- 3. TYPE ---------- */
.display{
  font-family:var(--f-display);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:-0.012em;
  line-height:0.92;
}
html[lang="ar"] .display{ letter-spacing:0; line-height:1.24; }

.d-xl{ font-size:clamp(2.9rem, 8.4vw, 8.4rem); }
.d-lg{ font-size:clamp(2.2rem, 5.4vw, 4.9rem); }
.d-md{ font-size:clamp(1.7rem, 3.1vw, 2.85rem); }
.d-sm{ font-size:clamp(1.25rem, 2vw, 1.7rem); }

.tech{
  font-family:var(--f-mono);
  font-size:0.685rem;
  letter-spacing:0.3em;
  text-transform:uppercase;
  color:var(--text-muted);
  font-weight:500;
}
html[lang="ar"] .tech{ letter-spacing:0.1em; font-size:0.76rem; }
.tech-gold{ color:var(--gold); }
.tech-steel{ color:var(--steel); }

.lead{
  font-size:clamp(1rem, 1.1vw, 1.13rem);
  color:var(--text-2);
  line-height:1.82;
  max-width:62ch;
}
.muted{ color:var(--text-muted); }
.gold{ color:var(--gold); }

/* ---------- 4. LAYOUT ---------- */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{ position:relative; padding-block:clamp(72px, 8.6vw, 146px); }
.section--tight{ padding-block:clamp(54px, 6vw, 92px); }
.section > .wrap{ position:relative; z-index:2; }

.grid-bg{
  position:absolute; inset:0;
  pointer-events:none; z-index:0;
  background-image:
    linear-gradient(to right, var(--border-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border-soft) 1px, transparent 1px);
  background-size:clamp(60px,7vw,110px) clamp(60px,7vw,110px);
  -webkit-mask-image:radial-gradient(ellipse 88% 70% at 50% 40%, #000 0%, transparent 78%);
          mask-image:radial-gradient(ellipse 88% 70% at 50% 40%, #000 0%, transparent 78%);
  opacity:0.65;
}

.rules{
  position:absolute; inset:0; pointer-events:none; z-index:1;
  display:grid; grid-template-columns:repeat(4,1fr);
  max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--gutter);
}
.rules span{ border-inline-start:1px solid var(--border-soft); }
.rules span:first-child{ border-inline-start:0; }
@media (max-width:760px){ .rules{ grid-template-columns:repeat(2,1fr); } }

.sec-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,0.8fr);
  gap:clamp(22px,4vw,72px);
  align-items:end;
  padding-bottom:clamp(26px,3vw,50px);
  margin-bottom:clamp(32px,4vw,64px);
  border-bottom:1px solid var(--border);
}
.sec-marker{
  display:flex; align-items:center; gap:14px;
  margin-bottom:20px;
}
.sec-marker::after{
  content:""; height:1px; flex:1; max-width:150px;
  background:linear-gradient(90deg, var(--border-gold), transparent);
}
html[dir="rtl"] .sec-marker::after{
  background:linear-gradient(270deg, var(--border-gold), transparent);
}
@media (max-width:900px){
  .sec-head{ grid-template-columns:1fr; align-items:start; }
}

/* ---------- 5. BUTTONS ---------- */
.btn{
  position:relative;
  display:inline-flex; align-items:center; gap:12px;
  padding:15px 26px;
  border-radius:3px;
  font-family:var(--f-mono);
  font-size:0.7rem;
  font-weight:600;
  letter-spacing:0.2em;
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  transition:transform var(--t-fast) var(--ease),
             background-color var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease),
             box-shadow var(--t-mid) var(--ease),
             color var(--t-fast) var(--ease);
  will-change:transform;
}
html[lang="ar"] .btn{ letter-spacing:0.05em; font-size:0.8rem; }

.btn .ico{ width:15px; height:15px; flex:none; transition:transform var(--t-mid) var(--ease); }
html[dir="rtl"] .btn .ico{ transform:scaleX(-1); }
.btn:hover .ico{ transform:translateX(5px); }
html[dir="rtl"] .btn:hover .ico{ transform:scaleX(-1) translateX(5px); }

.btn--primary{
  background:var(--gold); color:#0F0E0C;
  border:1px solid var(--gold);
}
.btn--primary:hover{
  background:var(--gold-bright); border-color:var(--gold-bright);
  transform:translateY(-3px);
  box-shadow:0 14px 34px -12px rgba(217,169,62,0.62), var(--glow-gold-sm);
}
.btn--primary:active{ transform:translateY(1px); box-shadow:none; }

.btn--ghost{
  background:rgba(24,23,22,0.55); color:var(--text);
  border:1px solid var(--border);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.btn--ghost:hover{
  border-color:var(--border-gold); color:var(--gold-bright);
  transform:translateY(-3px);
  box-shadow:0 14px 34px -16px rgba(0,0,0,0.9), inset 0 0 22px rgba(217,169,62,0.07);
}
.btn--ghost:active{ transform:translateY(1px); }
.btn--sm{ padding:11px 18px; font-size:0.64rem; }

.btn::after{
  content:"";
  position:absolute; top:0; bottom:0; left:-60%; width:40%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,0.16), transparent);
  transform:skewX(-18deg);
  opacity:0;
}
.btn:hover::after{ animation:sheen 850ms var(--ease) forwards; }
@keyframes sheen{
  0%{ left:-60%; opacity:0; }
  22%{ opacity:1; }
  100%{ left:120%; opacity:0; }
}

.tlink{
  position:relative;
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-mono); font-size:0.68rem;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--text-2);
  padding-block:5px;
  transition:color var(--t-fast) var(--ease);
}
html[lang="ar"] .tlink{ letter-spacing:0.04em; font-size:0.8rem; }
.tlink::before{
  content:""; position:absolute; bottom:0; inset-inline-start:0;
  height:1px; width:100%;
  background:var(--gold);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--t-mid) var(--ease-out);
}
html[dir="rtl"] .tlink::before{ transform-origin:right; }
.tlink:hover{ color:var(--gold-bright); }
.tlink:hover::before{ transform:scaleX(1); }

/* ---------- 6. PRELOADER ---------- */
.preload{
  position:fixed; inset:0; z-index:9999;
  background:var(--bg);
  display:grid; place-items:center;
  transition:opacity 700ms var(--ease), visibility 700ms;
}
.preload.done{ opacity:0; visibility:hidden; }
.preload__in{ text-align:center; width:min(320px, 76vw); }
.preload__mark{
  margin:0 auto 34px; width:min(220px, 58vw); height:auto;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,0.55));
  animation:markIn 1200ms var(--ease-out) both;
}
@keyframes markIn{
  from{ opacity:0; transform:translateY(10px) scale(0.94); }
  to{ opacity:1; transform:none; }
}

.preload__bar{ height:1px; width:100%; background:var(--border); overflow:hidden; }
.preload__bar i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
  transition:width 260ms linear;
}
.preload__pct{ margin-top:16px; }

/* ---------- 7. HEADER ---------- */
.header{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:900;
  height:var(--header-h);
  display:flex; align-items:center;
  background:linear-gradient(to bottom, rgba(17,16,15,0.72), rgba(17,16,15,0.12));
  border-bottom:1px solid transparent;
  transition:background-color var(--t-mid) var(--ease),
             border-color var(--t-mid) var(--ease),
             height var(--t-mid) var(--ease),
             backdrop-filter var(--t-mid);
}
.header.scrolled{
  height:66px;
  background:rgba(17,16,15,0.9);
  border-bottom-color:var(--border);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
          backdrop-filter:blur(16px) saturate(1.2);
}
.header__in{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}

.brand{ display:flex; align-items:center; gap:13px; }
.brand__mark{ width:38px; height:38px; flex:none; transition:transform var(--t-mid) var(--ease); }
.brand:hover .brand__mark{ transform:rotate(-8deg) scale(1.06); }
.brand__txt{ display:flex; flex-direction:column; line-height:1; }
.brand__name{
  font-family:var(--f-display); font-size:1.07rem; font-weight:600;
  letter-spacing:0.09em; text-transform:uppercase; color:var(--text);
}
.brand__sub{
  font-family:var(--f-mono); font-size:0.53rem;
  letter-spacing:0.34em; text-transform:uppercase; color:var(--gold);
  margin-top:5px;
}
html[lang="ar"] .brand__sub{ letter-spacing:0.08em; font-size:0.62rem; }

.nav{ display:flex; align-items:center; gap:clamp(14px,1.8vw,30px); }
.nav a{
  position:relative;
  font-family:var(--f-mono); font-size:0.655rem;
  letter-spacing:0.2em; text-transform:uppercase;
  color:var(--text-2);
  padding-block:7px;
  transition:color var(--t-fast) var(--ease);
}
html[lang="ar"] .nav a{ letter-spacing:0.03em; font-size:0.8rem; }
.nav a::after{
  content:""; position:absolute; bottom:0; inset-inline-start:0;
  height:1px; width:100%; background:var(--gold);
  transform:scaleX(0); transform-origin:left;
  transition:transform 320ms var(--ease-out);
}
html[dir="rtl"] .nav a::after{ transform-origin:right; }
.nav a:hover{ color:var(--text); }
.nav a:hover::after,
.nav a.active::after{ transform:scaleX(1); }
.nav a.active{ color:var(--gold); }

.header__act{ display:flex; align-items:center; gap:12px; }

.lang{
  display:flex; align-items:center;
  border:1px solid var(--border);
  border-radius:3px; overflow:hidden;
}
.lang button{
  padding:8px 12px;
  font-family:var(--f-mono); font-size:0.63rem; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--text-muted);
  transition:color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.lang button:hover{ color:var(--text); }
.lang button.on{ background:var(--gold); color:#0F0E0C; }

.burger{
  display:none;
  width:42px; height:42px;
  border:1px solid var(--border); border-radius:3px;
  place-items:center;
  transition:border-color var(--t-fast) var(--ease), background-color var(--t-fast);
}
.burger:hover{ border-color:var(--border-gold); }
.burger i{
  display:block; width:17px; height:1.5px; background:var(--text);
  transition:transform 320ms var(--ease), opacity 220ms var(--ease);
}
.burger i + i{ margin-top:4.5px; }
.burger.on i:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger.on i:nth-child(2){ opacity:0; }
.burger.on i:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

@media (max-width:1180px){
  .nav{ display:none; }
  .burger{ display:grid; }
}

/* Mobile drawer */
.drawer{
  position:fixed; inset:0; z-index:880;
  background:rgba(12,11,10,0.97);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  padding:calc(var(--header-h) + 30px) var(--gutter) 40px;
  overflow-y:auto;
  opacity:0; visibility:hidden;
  transition:opacity var(--t-mid) var(--ease), visibility var(--t-mid);
}
.drawer.open{ opacity:1; visibility:visible; }
.drawer ul{ display:flex; flex-direction:column; }
.drawer li{ border-bottom:1px solid var(--border-soft); }
.drawer a{
  display:flex; align-items:baseline; gap:16px;
  padding:17px 0;
  font-family:var(--f-display); font-size:1.55rem;
  text-transform:uppercase; letter-spacing:0.02em;
  color:var(--text-2);
  opacity:0; transform:translateY(16px);
  transition:color var(--t-fast) var(--ease);
}
html[lang="ar"] .drawer a{ font-size:1.5rem; }
.drawer.open a{ animation:drawerIn 520ms var(--ease-out) forwards; }
.drawer a:hover{ color:var(--gold); }
.drawer a span{ font-family:var(--f-mono); font-size:0.6rem; color:var(--gold); letter-spacing:0.2em; }
@keyframes drawerIn{ to{ opacity:1; transform:translateY(0); } }
.drawer__foot{ margin-top:34px; display:flex; flex-wrap:wrap; gap:12px; }

/* ---------- 8. HERO ---------- */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; align-items:center;
  padding-block:calc(var(--header-h) + 54px) 70px;
  overflow:hidden;
  isolation:isolate;
}
.hero__bg{ position:absolute; inset:0; z-index:-3; background:var(--bg); }
.hero__vig{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, transparent 0%, rgba(17,16,15,0.55) 62%, var(--bg) 100%),
    linear-gradient(to bottom, rgba(17,16,15,0.8) 0%, transparent 26%, transparent 62%, var(--bg) 100%);
}
.hero__glow{
  position:absolute; inset-inline:0; top:-14%; height:62%;
  z-index:-2; pointer-events:none;
  background:radial-gradient(ellipse 56% 100% at 50% 0%, rgba(217,169,62,0.16), transparent 68%);
  animation:lightDrift 14s ease-in-out infinite alternate;
}
@keyframes lightDrift{
  0%{ opacity:0.55; transform:translateX(-3%) scale(1); }
  100%{ opacity:1; transform:translateX(3%) scale(1.07); }
}

.hero__in{
  position:relative; z-index:3;
  width:100%; max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--gutter);
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(0,0.94fr);
  gap:clamp(30px,4vw,70px);
  align-items:center;
}
@media (max-width:1080px){
  .hero__in{ grid-template-columns:1fr; gap:44px; }
}

.hero__copy{ position:relative; z-index:5; }

.hero__eyebrow{
  display:flex; align-items:center; gap:14px;
  margin-bottom:26px;
}
.hero__eyebrow::before{
  content:""; width:52px; height:1px; background:var(--gold);
  transform-origin:left; animation:lineDraw 900ms var(--ease-out) 300ms both;
}
html[dir="rtl"] .hero__eyebrow::before{ transform-origin:right; }
@keyframes lineDraw{ from{ transform:scaleX(0);} to{ transform:scaleX(1);} }

.hero h1{ margin-bottom:0; }
.hero h1 .ln{ display:block; overflow:hidden; }
.hero h1 .ln > span{
  display:block;
  transform:translateY(105%);
  animation:riseIn 1100ms var(--ease-out) forwards;
}
.hero h1 .ln:nth-child(1) > span{ animation-delay:340ms; }
.hero h1 .ln:nth-child(2) > span{ animation-delay:450ms; }
.hero h1 .ln:nth-child(3) > span{ animation-delay:560ms; }
@keyframes riseIn{ to{ transform:translateY(0); } }

.hero h1 .thin{
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:1px var(--text-2);
  color:transparent;
}
.hero h1 .au{ color:var(--gold); }

.hero__desc{ margin-top:28px; max-width:50ch; }
.hero__cta{ margin-top:38px; display:flex; flex-wrap:wrap; gap:14px; }

.hero__stats{
  margin-top:clamp(38px,4vw,58px);
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1px; background:var(--border-soft);
  border-block:1px solid var(--border-soft);
}
.hero__stats div{ background:var(--bg); padding:18px 16px 18px 0; }
html[dir="rtl"] .hero__stats div{ padding:18px 0 18px 16px; }
.hero__stats b{
  display:block;
  font-family:var(--f-display); font-size:clamp(1.6rem,2.7vw,2.4rem);
  font-weight:600; color:var(--text); line-height:1;
}
.hero__stats b em{ font-style:normal; color:var(--gold); }
.hero__stats span{ display:block; margin-top:9px; }

.hero__scroll{
  position:absolute; bottom:26px; inset-inline-start:var(--gutter);
  z-index:4;
  display:flex; align-items:center; gap:13px;
}
.hero__scroll i{
  position:relative; display:block;
  width:1px; height:42px; background:var(--border); overflow:hidden;
}
.hero__scroll i::after{
  content:""; position:absolute; inset-inline:0; top:0; height:44%;
  background:var(--gold);
  animation:scrollCue 2.4s var(--ease) infinite;
}
@keyframes scrollCue{
  0%{ transform:translateY(-110%); }
  60%,100%{ transform:translateY(240%); }
}
@media (max-width:1080px){ .hero__scroll{ display:none; } }

/* ---------- 9. 3D SHOWROOM STAGE ---------- */
.stage{
  position:relative;
  perspective:1250px;
  perspective-origin:50% 46%;
  height:clamp(380px, 52vw, 620px);
  width:100%;
}
.stage__world{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform 700ms var(--ease-out);
  will-change:transform;
}

/* Floor */
.stage__floor{
  position:absolute;
  left:-18%; right:-18%; bottom:-6%;
  height:120%;
  transform-origin:bottom center;
  transform:rotateX(76deg) translateZ(-60px);
  transform-style:preserve-3d;
  background:
    linear-gradient(to top, rgba(217,169,62,0.09), transparent 46%),
    linear-gradient(to bottom, #100F0E, #1A1917 55%, #0C0B0A);
  background-blend-mode:screen, normal;
}
.stage__floor::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(242,238,229,0.13) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(242,238,229,0.10) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(to top, #000 6%, transparent 72%);
          mask-image:linear-gradient(to top, #000 6%, transparent 72%);
}
.stage__floor::after{
  content:""; position:absolute; inset-inline:12%; bottom:0; height:60%;
  background:radial-gradient(ellipse 60% 100% at 50% 100%, rgba(217,169,62,0.20), transparent 70%);
  filter:blur(26px);
  animation:floorPulse 7s ease-in-out infinite alternate;
}
@keyframes floorPulse{ from{ opacity:0.5; } to{ opacity:1; } }

/* Back wall */
.stage__wall{
  position:absolute; inset-inline:6%; top:4%; bottom:24%;
  transform:translateZ(-260px);
  background:
    linear-gradient(to bottom, #1C1B19, #131211);
  border:1px solid var(--border-soft);
  overflow:hidden;
}
.stage__wall::before{
  content:""; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, rgba(242,238,229,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(242,238,229,0.05) 1px, transparent 1px);
  background-size:44px 44px;
}
.stage__wall::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse 52% 60% at 50% 34%, rgba(217,169,62,0.13), transparent 68%);
}

/* Ceiling light strips */
.stage__strip{
  position:absolute; height:6px; border-radius:3px;
  background:linear-gradient(90deg, transparent, var(--gold-bright) 16%, #FFF3D2 50%, var(--gold-bright) 84%, transparent);
  box-shadow:0 0 30px 6px rgba(217,169,62,0.42), 0 0 90px 20px rgba(217,169,62,0.18);
  opacity:0.88;
}
.stage__strip--1{ top:8%;  left:8%;  right:8%;  transform:translateZ(-150px) rotateX(28deg); animation:stripGlow 5.5s ease-in-out infinite alternate; }
.stage__strip--2{ top:19%; left:15%; right:15%; transform:translateZ(-40px)  rotateX(22deg); opacity:0.6; animation:stripGlow 6.5s ease-in-out 0.6s infinite alternate; }
.stage__strip--3{ top:29%; left:24%; right:24%; transform:translateZ(70px)   rotateX(18deg); opacity:0.38; animation:stripGlow 7.5s ease-in-out 1.1s infinite alternate; }
@keyframes stripGlow{
  from{ filter:brightness(0.72); }
  to{ filter:brightness(1.25); }
}

/* Glass side panels */
.stage__glass{
  position:absolute; top:12%; bottom:26%; width:20%;
  background:linear-gradient(150deg, rgba(123,146,147,0.13), rgba(242,238,229,0.03) 45%, transparent);
  border:1px solid rgba(242,238,229,0.10);
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.stage__glass::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 34%, rgba(242,238,229,0.16) 48%, transparent 60%);
  animation:glassSweep 9s var(--ease) infinite;
}
@keyframes glassSweep{
  0%,72%{ transform:translateX(-120%); opacity:0; }
  78%{ opacity:1; }
  100%{ transform:translateX(120%); opacity:0; }
}
.stage__glass--l{ left:-4%;  transform:translateZ(-150px) rotateY(38deg); transform-origin:left center; }
.stage__glass--r{ right:-4%; transform:translateZ(-150px) rotateY(-38deg); transform-origin:right center; }

/* Main photo plate */
.stage__plate{
  position:absolute;
  inset-inline:5%; top:20%;
  aspect-ratio:16/9;
  transform:translateZ(80px);
  transform-style:preserve-3d;
  border:1px solid var(--border);
  background:
    linear-gradient(135deg, var(--surface-2), var(--surface));
  box-shadow:var(--shadow-deep), 0 0 0 1px rgba(217,169,62,0.10);
  overflow:hidden;
}
.stage__plate img{
  width:100%; height:100%; object-fit:cover;
  opacity:0.96;
  transform:scale(1.03);
  transition:transform 1400ms var(--ease-out);
}
.stage:hover .stage__plate img{ transform:scale(1.09); }
.stage__plate::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(to top, rgba(17,16,15,0.66), transparent 46%),
    linear-gradient(115deg, transparent 40%, rgba(240,198,91,0.12) 50%, transparent 62%);
  pointer-events:none;
}

/* Corner brackets */
.stage__plate i{
  position:absolute; width:22px; height:22px; z-index:3;
  border:1px solid var(--border-gold);
  pointer-events:none;
}
.stage__plate i:nth-of-type(1){ top:12px; left:12px;  border-right:0; border-bottom:0; }
.stage__plate i:nth-of-type(2){ top:12px; right:12px; border-left:0;  border-bottom:0; }
.stage__plate i:nth-of-type(3){ bottom:12px; left:12px;  border-right:0; border-top:0; }
.stage__plate i:nth-of-type(4){ bottom:12px; right:12px; border-left:0;  border-top:0; }

/* Floating HUD chips */
.chip{
  position:absolute; z-index:6;
  display:flex; align-items:center; gap:9px;
  padding:9px 13px;
  background:rgba(24,23,22,0.82);
  border:1px solid var(--border);
  border-radius:3px;
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:var(--shadow-lift);
  white-space:nowrap;
}
.chip b{ font-family:var(--f-mono); font-size:0.64rem; letter-spacing:0.16em; color:var(--text); font-weight:600; text-transform:uppercase; }
html[lang="ar"] .chip b{ letter-spacing:0.02em; font-size:0.74rem; }
.chip s{ text-decoration:none; width:5px; height:5px; border-radius:50%; background:var(--gold); box-shadow:0 0 10px var(--gold); animation:blip 2.2s ease-in-out infinite; }
@keyframes blip{ 0%,100%{ opacity:1; } 50%{ opacity:0.25; } }
.chip--a{ top:14%; inset-inline-start:2%; transform:translateZ(150px); animation:floatY 6s ease-in-out infinite; }
.chip--b{ bottom:22%; inset-inline-end:1%; transform:translateZ(190px); animation:floatY 7.5s ease-in-out 0.8s infinite; }
.chip--c{ bottom:8%; inset-inline-start:14%; transform:translateZ(120px); animation:floatY 8.5s ease-in-out 1.4s infinite; }
@keyframes floatY{ 0%,100%{ translate:0 0; } 50%{ translate:0 -11px; } }

@media (max-width:600px){
  .chip--c{ display:none; }
  .chip{ padding:7px 10px; }
}