/* =============================================================
   SHABAN AUTO GROUP — Sections & Components
   ============================================================= */

/* ---------- 10. SCROLL REVEAL ---------- */
[data-reveal]{
  opacity:0;
  transform:translateY(34px);
  transition:opacity 900ms var(--ease-out), transform 900ms var(--ease-out);
  will-change:opacity, transform;
}
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal="left"]{ transform:translateX(-40px); }
[data-reveal="right"]{ transform:translateX(40px); }
[data-reveal="scale"]{ transform:scale(0.96); }
[data-reveal="mask"]{ opacity:1; transform:none; clip-path:inset(0 100% 0 0); transition:clip-path 1100ms var(--ease-out); }
[data-reveal="mask"].in{ clip-path:inset(0 0 0 0); }

/* Animated hairline */
.hairline{
  height:1px; width:100%;
  background:linear-gradient(90deg, var(--border-gold), var(--border) 34%, transparent);
  transform:scaleX(0); transform-origin:left;
  transition:transform 1200ms var(--ease-out);
}
html[dir="rtl"] .hairline{ transform-origin:right; }
.hairline.in{ transform:scaleX(1); }

/* ---------- 11. BRAND MARQUEE ---------- */
.marquee{
  position:relative;
  border-block:1px solid var(--border-soft);
  background:linear-gradient(to bottom, rgba(24,23,22,0.7), rgba(17,16,15,0.4));
  padding-block:20px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.marquee__track{
  display:flex; align-items:center; gap:clamp(28px,4vw,62px);
  width:max-content;
  animation:slide 46s linear infinite;
}
.marquee:hover .marquee__track{ animation-play-state:paused; }
@keyframes slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.marquee span{
  font-family:var(--f-display); font-size:clamp(0.92rem,1.35vw,1.28rem);
  text-transform:uppercase; letter-spacing:0.15em;
  color:var(--text-muted);
  white-space:nowrap;
  transition:color var(--t-fast) var(--ease);
}
.marquee span:hover{ color:var(--gold); }
.marquee em{ color:var(--gold-deep); font-style:normal; }

/* ---------- 12. LEGACY / ABOUT ---------- */
.legacy{
  display:grid;
  grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);
  gap:clamp(32px,5vw,88px);
  align-items:center;
}
@media (max-width:980px){ .legacy{ grid-template-columns:1fr; } }

.legacy__media{
  position:relative;
  aspect-ratio:4/3.1;
  border:1px solid var(--border);
  overflow:hidden;
  background:var(--surface);
  box-shadow:var(--shadow-deep);
}
.legacy__media img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.04);
  transition:transform 1600ms var(--ease-out), filter 700ms var(--ease);
  filter:saturate(0.9) contrast(1.05);
}
.legacy__media:hover img{ transform:scale(1.11); filter:saturate(1.05) contrast(1.08); }
.legacy__media::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(17,16,15,0.78), transparent 52%);
}
.legacy__badge{
  position:absolute; z-index:3;
  inset-block-end:0; inset-inline-start:0;
  padding:20px 26px;
  background:rgba(17,16,15,0.85);
  border-top:1px solid var(--border-gold);
  border-inline-end:1px solid var(--border-gold);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.legacy__badge b{
  display:block; font-family:var(--f-display);
  font-size:clamp(2rem,3.6vw,3.1rem); color:var(--gold); line-height:1;
}
.legacy__badge span{ display:block; margin-top:7px; }

.legacy__list{ margin-top:34px; display:grid; gap:1px; background:var(--border-soft); }
.legacy__list li{
  background:var(--bg);
  display:grid; grid-template-columns:auto 1fr; gap:18px;
  padding:19px 4px;
  align-items:start;
}
.legacy__list b{ font-family:var(--f-mono); font-size:0.66rem; color:var(--gold); letter-spacing:0.18em; padding-top:4px; }
.legacy__list p{ color:var(--text-2); font-size:0.95rem; }
.legacy__list strong{ color:var(--text); font-weight:500; display:block; margin-bottom:3px; }

/* ---------- 13. DEPARTMENT INDEX ---------- */
.dindex{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.24fr);
  gap:clamp(30px,4.4vw,74px);
  align-items:start;
}
@media (max-width:980px){ .dindex{ grid-template-columns:1fr; } }

.dindex__map{
  position:relative;
  border:1px solid var(--border);
  overflow:hidden;
  background:var(--surface);
  box-shadow:var(--shadow-deep);
  aspect-ratio:16/9;
}
.dindex__map img{
  width:100%; height:100%; object-fit:cover;
  transition:transform 1600ms var(--ease-out);
}
.dindex__map:hover img{ transform:scale(1.06); }
.dindex__map::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to top, rgba(17,16,15,0.6), transparent 55%),
    radial-gradient(ellipse 70% 70% at 50% 50%, transparent 40%, rgba(17,16,15,0.5));
}

.dlist{ display:grid; gap:1px; background:var(--border-soft); }
.dlist a{
  position:relative;
  background:var(--bg);
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:clamp(14px,2vw,28px);
  align-items:center;
  padding:clamp(16px,1.7vw,22px) clamp(8px,1.4vw,18px);
  overflow:hidden;
  transition:background-color var(--t-mid) var(--ease), padding-inline var(--t-mid) var(--ease);
}
.dlist a::before{
  content:""; position:absolute; inset-block:0; inset-inline-start:0;
  width:2px; background:var(--gold);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform 420ms var(--ease-out);
}
.dlist a:hover{ background:var(--surface-2); padding-inline-start:clamp(16px,2.2vw,30px); }
.dlist a:hover::before{ transform:scaleY(1); }
.dlist__no{ font-family:var(--f-mono); font-size:0.68rem; color:var(--gold); letter-spacing:0.16em; }
.dlist__ttl{
  font-family:var(--f-display); font-size:clamp(1.02rem,1.55vw,1.42rem);
  text-transform:uppercase; letter-spacing:0.03em; color:var(--text-2);
  transition:color var(--t-fast) var(--ease);
}
html[lang="ar"] .dlist__ttl{ letter-spacing:0; }
.dlist a:hover .dlist__ttl{ color:var(--text); }
.dlist__arw{
  width:16px; height:16px; color:var(--text-muted);
  transition:transform var(--t-mid) var(--ease), color var(--t-fast) var(--ease);
}
html[dir="rtl"] .dlist__arw{ transform:scaleX(-1); }
.dlist a:hover .dlist__arw{ color:var(--gold); transform:translateX(5px); }
html[dir="rtl"] .dlist a:hover .dlist__arw{ transform:scaleX(-1) translateX(5px); }

/* ---------- 14. DEPARTMENT SECTIONS ---------- */
.dept{
  position:relative;
  border-top:1px solid var(--border-soft);
  padding-block:clamp(64px,7.2vw,124px);
}
.dept__in{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
  gap:clamp(30px,4.6vw,80px);
  align-items:center;
}
.dept--flip .dept__media{ order:-1; }
@media (max-width:980px){
  .dept__in{ grid-template-columns:1fr; gap:34px; }
  .dept--flip .dept__media{ order:0; }
}

.dept__no{
  font-family:var(--f-display);
  font-size:clamp(3.6rem,7.4vw,7.6rem);
  line-height:0.8;
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:1px rgba(217,169,62,0.42);
  color:transparent;
  margin-bottom:12px;
  user-select:none;
}
.dept h3{ margin-bottom:18px; }
.dept__tag{ margin-bottom:20px; }
.dept__body{ margin-bottom:26px; }

.dept__feat{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px; background:var(--border-soft);
  border:1px solid var(--border-soft);
  margin-bottom:28px;
}
@media (max-width:520px){ .dept__feat{ grid-template-columns:1fr; } }
.dept__feat li{
  background:var(--bg);
  padding:15px 16px;
  display:flex; align-items:flex-start; gap:11px;
  font-size:0.9rem; color:var(--text-2);
  transition:background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.dept__feat li:hover{ background:var(--surface-2); color:var(--text); }
.dept__feat li::before{
  content:""; flex:none; margin-top:8px;
  width:5px; height:5px;
  background:var(--gold);
  transform:rotate(45deg);
}

.dept__brands{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px; }
.dept__brands li{
  font-family:var(--f-mono); font-size:0.615rem;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--text-2);
  padding:7px 12px;
  border:1px solid var(--border-soft);
  border-radius:2px;
  background:rgba(35,33,30,0.5);
  transition:border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
             transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
html[lang="ar"] .dept__brands li{ letter-spacing:0.02em; font-size:0.72rem; }
.dept__brands li:hover{
  border-color:var(--border-gold);
  color:var(--gold-bright);
  background:rgba(217,169,62,0.07);
  transform:translateY(-2px);
}

/* Department media — 3D card */
.dept__media{ perspective:1100px; }
.dept__frame{
  position:relative;
  aspect-ratio:16/9.4;
  border:1px solid var(--border);
  background:var(--surface);
  overflow:hidden;
  box-shadow:var(--shadow-deep);
  transform-style:preserve-3d;
  transition:transform 700ms var(--ease-out), border-color var(--t-mid) var(--ease),
             box-shadow var(--t-mid) var(--ease);
  will-change:transform;
}
.dept__frame:hover{
  border-color:var(--border-gold-s);
  box-shadow:var(--shadow-deep), 0 0 46px -12px rgba(217,169,62,0.28);
}
.dept__frame img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.03);
  filter:saturate(0.94) contrast(1.04);
  transition:transform 1700ms var(--ease-out), filter 800ms var(--ease);
}
.dept__frame:hover img{ transform:scale(1.1); filter:saturate(1.06) contrast(1.08); }
.dept__frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(to top, rgba(17,16,15,0.7), transparent 50%),
    linear-gradient(115deg, transparent 42%, rgba(240,198,91,0.09) 50%, transparent 58%);
}

/* Scanline HUD on media */
.dept__hud{
  position:absolute; z-index:4;
  inset-block-end:16px; inset-inline-start:16px;
  display:flex; align-items:center; gap:10px;
  padding:8px 13px;
  background:rgba(17,16,15,0.78);
  border:1px solid var(--border);
  border-radius:2px;
  -webkit-backdrop-filter:blur(9px); backdrop-filter:blur(9px);
}
.dept__hud b{ font-family:var(--f-mono); font-size:0.6rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold); }
html[lang="ar"] .dept__hud b{ letter-spacing:0.02em; font-size:0.7rem; }

.dept__ticks{
  position:absolute; z-index:4;
  inset-block-start:0; inset-inline-end:16px;
  height:100%; width:1px;
  background:repeating-linear-gradient(to bottom, var(--border) 0 6px, transparent 6px 16px);
  opacity:0.55;
}

/* ---------- 15. BRANCHES ---------- */
.branches{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.6vw,24px);
}
@media (max-width:980px){ .branches{ grid-template-columns:1fr 1fr; } }
@media (max-width:660px){ .branches{ grid-template-columns:1fr; } }

.branch{
  position:relative;
  display:flex; flex-direction:column;
  padding:clamp(22px,2.3vw,32px);
  background:linear-gradient(160deg, rgba(35,33,30,0.75), rgba(24,23,22,0.55));
  border:1px solid var(--border-soft);
  border-radius:3px;
  overflow:hidden;
  transition:transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease),
             box-shadow var(--t-mid) var(--ease), background-color var(--t-mid) var(--ease);
}
.branch::before{
  content:""; position:absolute; inset-block-start:0; inset-inline:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  transform:scaleX(0);
  transition:transform 520ms var(--ease-out);
}
.branch:hover{
  transform:translateY(-6px);
  border-color:var(--border-gold-s);
  box-shadow:var(--shadow-lift), 0 0 40px -16px rgba(217,169,62,0.34);
}
.branch:hover::before{ transform:scaleX(1); }

.branch__no{ font-family:var(--f-mono); font-size:0.63rem; letter-spacing:0.22em; color:var(--gold); }
.branch h4{
  font-family:var(--f-display); font-size:clamp(1.25rem,1.9vw,1.7rem);
  text-transform:uppercase; letter-spacing:0.02em;
  margin-block:14px 8px;
}
.branch__meta{ color:var(--text-muted); font-size:0.88rem; margin-bottom:20px; }
.branch__tel{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--f-mono); font-size:0.95rem; letter-spacing:0.08em;
  color:var(--text);
  margin-bottom:20px;
  transition:color var(--t-fast) var(--ease);
  direction:ltr;
}
.branch__tel:hover{ color:var(--gold-bright); }
.branch__tel svg{ width:14px; height:14px; color:var(--gold); flex:none; }
.branch__acts{ margin-top:auto; display:flex; flex-wrap:wrap; gap:9px; }

/* ---------- 16. SHOP TEASER ---------- */
.shop{
  position:relative;
  border:1px solid var(--border);
  border-radius:3px;
  padding:clamp(32px,4.4vw,74px);
  background:
    radial-gradient(ellipse 70% 120% at 82% 20%, rgba(217,169,62,0.13), transparent 62%),
    linear-gradient(150deg, var(--surface-2), var(--surface) 60%);
  overflow:hidden;
}
.shop::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(to right, var(--border-soft) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border-soft) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 60% 80% at 80% 30%, #000, transparent 72%);
          mask-image:radial-gradient(ellipse 60% 80% at 80% 30%, #000, transparent 72%);
}
.shop__in{ position:relative; z-index:2; max-width:72ch; }
.shop__pill{
  display:inline-flex; align-items:center; gap:9px;
  padding:8px 15px;
  border:1px solid var(--border-gold);
  border-radius:100px;
  margin-bottom:24px;
  background:rgba(217,169,62,0.07);
}
.shop__pill s{
  text-decoration:none; width:6px; height:6px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 12px var(--gold);
  animation:blip 2s ease-in-out infinite;
}
.shop__pill b{ font-family:var(--f-mono); font-size:0.63rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--gold-bright); }
html[lang="ar"] .shop__pill b{ letter-spacing:0.02em; font-size:0.74rem; }
.shop__cta{ margin-top:32px; display:flex; flex-wrap:wrap; gap:13px; }

/* ---------- 17. CONTACT ---------- */
.contact{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,0.86fr);
  gap:clamp(32px,4.6vw,80px);
  align-items:start;
}
@media (max-width:980px){ .contact{ grid-template-columns:1fr; } }

.cchan{ display:grid; gap:1px; background:var(--border-soft); border-block:1px solid var(--border-soft); }
.cchan a{
  position:relative;
  background:var(--bg);
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  gap:18px; align-items:center;
  padding:20px 6px;
  transition:background-color var(--t-mid) var(--ease), padding-inline var(--t-mid) var(--ease);
}
.cchan a:hover{ background:var(--surface-2); padding-inline:16px; }
.cchan__ic{
  width:38px; height:38px; flex:none;
  display:grid; place-items:center;
  border:1px solid var(--border-soft); border-radius:3px;
  color:var(--gold);
  transition:border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.cchan a:hover .cchan__ic{ border-color:var(--border-gold); background:rgba(217,169,62,0.08); }
.cchan__ic svg{ width:16px; height:16px; }
.cchan b{ display:block; font-size:0.97rem; font-weight:500; color:var(--text); }
.cchan span{ display:block; margin-top:3px; }
.cchan__val{ font-family:var(--f-mono); font-size:0.85rem; color:var(--text-2); letter-spacing:0.06em; direction:ltr; }

.hours{
  margin-top:30px;
  padding:24px;
  border:1px solid var(--border-soft);
  border-radius:3px;
  background:linear-gradient(160deg, rgba(35,33,30,0.6), transparent);
}
.hours li{
  display:flex; justify-content:space-between; gap:16px;
  padding-block:9px;
  font-size:0.92rem; color:var(--text-2);
  border-bottom:1px solid var(--border-soft);
}
.hours li:last-child{ border-bottom:0; }
.hours li b{ color:var(--text); font-weight:500; }
.hours li span{ font-family:var(--f-mono); font-size:0.78rem; color:var(--gold); letter-spacing:0.08em; direction:ltr; }

/* ---------- 18. FOOTER ---------- */
.footer{
  position:relative;
  border-top:1px solid var(--border);
  background:linear-gradient(to bottom, rgba(24,23,22,0.6), var(--bg));
  padding-block:clamp(50px,5.4vw,84px) 0;
}
.footer__grid{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) repeat(3, minmax(0,1fr));
  gap:clamp(26px,3vw,52px);
  padding-bottom:clamp(38px,4vw,64px);
}
@media (max-width:980px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer__grid{ grid-template-columns:1fr; } }

.footer h5{
  font-family:var(--f-mono); font-size:0.64rem;
  letter-spacing:0.26em; text-transform:uppercase;
  color:var(--gold); margin:0 0 20px; font-weight:600;
}
html[lang="ar"] .footer h5{ letter-spacing:0.04em; font-size:0.76rem; }
.footer__links li{ margin-bottom:11px; }
.footer__links a{
  font-size:0.91rem; color:var(--text-2);
  transition:color var(--t-fast) var(--ease), padding-inline-start var(--t-fast) var(--ease);
  display:inline-block;
}
.footer__links a:hover{ color:var(--gold-bright); padding-inline-start:7px; }

.social{ display:flex; gap:10px; margin-top:22px; }
.social a{
  width:40px; height:40px;
  display:grid; place-items:center;
  border:1px solid var(--border-soft); border-radius:3px;
  color:var(--text-2);
  transition:transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
             color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.social a:hover{
  transform:translateY(-3px);
  border-color:var(--border-gold);
  color:var(--gold-bright);
  background:rgba(217,169,62,0.07);
}
.social svg{ width:17px; height:17px; }

.footer__bar{
  border-top:1px solid var(--border-soft);
  padding-block:22px;
  display:flex; flex-wrap:wrap; gap:14px;
  align-items:center; justify-content:space-between;
}

/* Big watermark wordmark */
.footer__mark{
  position:relative;
  overflow:hidden;
  line-height:0;
  border-top:1px solid var(--border-soft);
  padding-top:clamp(16px,2vw,28px);
}
.footer__mark span{
  display:block;
  font-family:var(--f-display);
  font-size:clamp(3rem, 15.6vw, 15rem);
  letter-spacing:-0.02em;
  text-transform:uppercase;
  line-height:0.82;
  white-space:nowrap;
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:1px rgba(242,238,229,0.10);
  color:transparent;
  -webkit-mask-image:linear-gradient(to bottom, #000 30%, transparent 92%);
          mask-image:linear-gradient(to bottom, #000 30%, transparent 92%);
}
html[lang="ar"] .footer__mark span{ font-size:clamp(2.6rem, 13vw, 12rem); line-height:1.05; }

/* ---------- 19. FLOATING WHATSAPP ---------- */
.wa{
  position:fixed; z-index:800;
  inset-block-end:22px; inset-inline-end:22px;
  display:flex; align-items:center; gap:11px;
  padding:13px 18px;
  background:var(--gold);
  color:#0F0E0C;
  border-radius:3px;
  box-shadow:0 16px 40px -14px rgba(217,169,62,0.6);
  font-family:var(--f-mono); font-size:0.66rem; font-weight:600;
  letter-spacing:0.18em; text-transform:uppercase;
  opacity:0; transform:translateY(18px); pointer-events:none;
  transition:opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease),
             background-color var(--t-fast) var(--ease), box-shadow var(--t-mid) var(--ease);
}
html[lang="ar"] .wa{ letter-spacing:0.02em; font-size:0.78rem; }
.wa.show{ opacity:1; transform:none; pointer-events:auto; }
.wa:hover{ background:var(--gold-bright); transform:translateY(-4px); box-shadow:0 22px 52px -14px rgba(217,169,62,0.75); }
.wa:active{ transform:translateY(0); }
.wa svg{ width:17px; height:17px; flex:none; }
@media (max-width:560px){
  .wa{ inset-block-end:16px; inset-inline-end:16px; padding:14px; }
  .wa span{ display:none; }
}

/* ---------- 20. SCROLL PROGRESS ---------- */
.progress{
  position:fixed; inset-block-start:0; inset-inline-start:0;
  height:2px; width:0%;
  background:linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
  z-index:950;
  box-shadow:0 0 14px rgba(217,169,62,0.6);
  transition:width 120ms linear;
}

/* ---------- 21. IMAGE FALLBACK ---------- */
.ph{
  position:relative;
  background:
    repeating-linear-gradient(135deg, rgba(217,169,62,0.05) 0 2px, transparent 2px 12px),
    linear-gradient(150deg, var(--surface-2), var(--surface));
}
img.broken{ opacity:0; }

/* ---------- 22. REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  .hero h1 .ln > span{ transform:none !important; }
  .hairline{ transform:scaleX(1) !important; }
  .stage__world{ transform:none !important; }
}

/* ---------- 23. PRINT ---------- */
@media print{
  .header,.wa,.progress,.preload,.drawer,.stage{ display:none !important; }
  body{ background:#fff; color:#000; }
}