/* Motor Atlas — Midnight Showroom
   Premium black + electric-lime visual layer. This file intentionally sits
   after the existing styles so the catalogue/data system remains untouched. */
:root{
  --bg:#050807;
  --panel:#0b100e;
  --panel-2:#101612;
  --border:#26312a;
  --muted:#9ba59f;
  --lime:#b7ff48;
  --lime-2:#d8ff82;
  --glass:rgba(9,14,11,.76);
  --glow:0 0 34px rgba(183,255,72,.18);
}
html{background:#050807}
body{background:#050807;color:#f7faf8;overflow-x:hidden}
body::before{background:
  linear-gradient(90deg,rgba(2,6,4,.96) 0%,rgba(3,8,5,.62) 42%,rgba(3,7,5,.9) 100%),
  linear-gradient(180deg,rgba(3,8,5,.08),#050807 74%),
  url('assets/night-road.jpg') center top/cover no-repeat fixed!important;
  filter:saturate(.85) contrast(1.08);
}
body::after{background:
  radial-gradient(circle at 67% 11%,rgba(183,255,72,.14),transparent 24%),
  linear-gradient(105deg,transparent 0 47%,rgba(183,255,72,.045) 47.2%,transparent 47.5%),
  repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0 1px,transparent 1px 72px)!important;
}

/* --- Header / glass navigation --- */
header{height:82px;position:sticky;top:0;z-index:40;background:rgba(4,8,6,.8)!important;backdrop-filter:blur(18px) saturate(140%);border-color:rgba(183,255,72,.16)!important;box-shadow:0 14px 40px #0007}
header .brand{font-size:15px;letter-spacing:2px}
header .mark{color:var(--lime);filter:drop-shadow(0 0 10px rgba(183,255,72,.45))}
header nav a,header nav button{position:relative;color:#dfe5e1!important;transition:color .2s ease}
header nav a::after,header nav button::after{content:"";position:absolute;left:0;right:100%;bottom:-10px;height:2px;background:var(--lime);box-shadow:0 0 12px var(--lime);transition:right .25s ease}
header nav a:hover,header nav button:hover{color:var(--lime)!important}
header nav a:hover::after,header nav button:hover::after{right:0}

/* --- Cinematic hero --- */
.intro{position:relative;min-height:360px;padding:72px 0 52px!important;display:flex;align-items:center;overflow:visible}
.intro::before{content:"";position:absolute;inset:-20px -5vw 0;z-index:-1;background:linear-gradient(90deg,rgba(4,8,6,.9),rgba(4,8,6,.08) 58%,rgba(4,8,6,.6)),radial-gradient(circle at 63% 55%,rgba(183,255,72,.12),transparent 30%);border-bottom:1px solid rgba(183,255,72,.12);pointer-events:none}
.intro::after{content:"MOTOR / ATLAS";position:absolute;right:-2vw;bottom:1.4rem;font:700 clamp(3rem,8vw,7.5rem)/1 'Barlow Condensed',sans-serif;letter-spacing:.08em;color:rgba(255,255,255,.025);white-space:nowrap;pointer-events:none}
.intro .eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--lime);letter-spacing:.22em}
.intro .eyebrow::before{content:"";width:34px;height:2px;background:var(--lime);box-shadow:0 0 14px var(--lime)}
.intro h1{font-size:clamp(3.4rem,7vw,7rem)!important;max-width:760px;letter-spacing:-.025em;text-shadow:0 16px 50px #000;margin:.18em 0 .12em!important}
.intro h1 span{color:var(--lime);text-shadow:0 0 28px rgba(183,255,72,.32)}
.intro p{font-size:clamp(.9rem,1.35vw,1.08rem);max-width:520px;color:#c6cec9}
.index-note{padding:18px 22px;background:rgba(5,10,7,.62);border:1px solid rgba(183,255,72,.22);border-radius:14px;backdrop-filter:blur(14px);box-shadow:var(--glow)}
.index-note strong{color:var(--lime)!important;text-shadow:0 0 18px rgba(183,255,72,.3)}

/* --- Section polish --- */
.section-title{margin-top:44px!important}
.section-title h2,.brand-group-heading h2{letter-spacing:-.015em}
.brand-browser{padding:1.35rem;border:1px solid var(--border);border-radius:16px;background:linear-gradient(180deg,rgba(14,21,16,.8),rgba(7,11,9,.78));backdrop-filter:blur(12px);box-shadow:0 18px 45px #0005}
.brand-switch button{border-radius:10px!important;background:rgba(14,21,16,.82)!important;border-color:#344238!important;min-height:46px!important}
.brand-switch button:hover{border-color:var(--lime)!important;transform:translateY(-2px);box-shadow:0 0 0 1px rgba(183,255,72,.15),0 12px 26px #0005}
.brand-switch button.active{background:linear-gradient(135deg,var(--lime),#89d92e)!important;color:#071006!important;border-color:var(--lime)!important;box-shadow:0 0 24px rgba(183,255,72,.22)}
.collection-switch{display:flex;gap:.55rem;flex-wrap:wrap;margin:1rem 0 1.25rem}
.collection-switch button{min-height:44px;padding:.7rem 1rem;border:1px solid #344139;border-radius:999px;background:#0c120f;color:#b8c2bc;transition:.2s ease}
.collection-switch button:hover,.collection-switch button.active{color:#071006;background:var(--lime);border-color:var(--lime);box-shadow:0 0 20px rgba(183,255,72,.16)}
.toolbar .search,.toolbar .selectlabel{background:rgba(10,15,12,.82)!important;border-color:#334039!important;backdrop-filter:blur(10px);border-radius:10px!important}
.toolbar .search:focus-within,.toolbar .selectlabel:focus-within{border-color:var(--lime)!important;box-shadow:0 0 0 3px rgba(183,255,72,.08)}
.filterline{border-color:#28342d!important}
.tabs button.active{color:var(--lime)!important;border-color:var(--lime)!important}
.scope{padding:14px 16px;border-left:2px solid var(--lime);background:rgba(10,15,12,.6);border-radius:0 8px 8px 0}

/* --- Manufacturer groups --- */
.brand-group{position:relative;padding:1.2rem 0 1.6rem}
.brand-group::before{content:"";position:absolute;left:-4.5vw;right:-4.5vw;top:0;bottom:0;z-index:-1;background:linear-gradient(90deg,rgba(183,255,72,.018),transparent 35%,rgba(255,255,255,.01));border-top:1px solid rgba(255,255,255,.025);pointer-events:none}
.brand-group-heading{border-color:#2a362f!important}
.brand-group-heading .eyebrow{color:var(--lime)}
.brand-group-heading h2{font-size:clamp(2.25rem,4.4vw,3.6rem)!important}

/* --- Cards: showroom glass + motion --- */
.card{position:relative;background:linear-gradient(180deg,rgba(15,21,17,.94),rgba(8,12,10,.96))!important;border-color:#2c3831!important;border-radius:14px!important;box-shadow:0 10px 28px #0004;overflow:hidden;isolation:isolate}
.card::after{content:"";position:absolute;inset:auto -30% -65% -30%;height:70%;background:radial-gradient(ellipse,rgba(183,255,72,.10),transparent 62%);opacity:0;transition:opacity .35s ease;pointer-events:none;z-index:-1}
.card:hover{border-color:rgba(183,255,72,.65)!important;transform:translateY(-8px)!important;box-shadow:0 20px 48px #0009,0 0 0 1px rgba(183,255,72,.08),0 0 34px rgba(183,255,72,.08)!important}
.card:hover::after{opacity:1}
.photo{height:250px!important;background:#101411!important}
.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(5,8,6,.78));pointer-events:none}
.photo img{filter:saturate(.9) contrast(1.05);transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .4s ease!important}
.card:hover .photo img{transform:scale(1.075)!important;filter:saturate(1.05) contrast(1.08)}
.bodytag{z-index:2;background:rgba(6,10,8,.72)!important;border-color:rgba(255,255,255,.18)!important;backdrop-filter:blur(8px);border-radius:999px!important;padding:6px 10px!important}
.rating{z-index:2;background:var(--lime)!important;box-shadow:0 0 24px rgba(183,255,72,.26)!important}
.cardbody{padding:22px!important}
.card h2{font-size:clamp(1.75rem,2.7vw,2.25rem)!important}
.specstrip{border-color:#29352e!important}
.view{min-height:44px;background:#141b17!important;border-color:#35433a!important;border-radius:8px!important;transition:.22s ease!important}
.view:hover{background:var(--lime)!important;color:#071006!important;border-color:var(--lime)!important;box-shadow:0 0 18px rgba(183,255,72,.18)}

/* --- Premium vehicle detail panel --- */
dialog{width:min(1180px,96vw)!important;max-height:94vh!important;background:linear-gradient(160deg,#0b100e,#050806 72%)!important;border:1px solid rgba(183,255,72,.28)!important;border-radius:18px!important;box-shadow:0 36px 120px #000,0 0 70px rgba(183,255,72,.08)!important;overflow:auto}
dialog::backdrop{background:rgba(0,0,0,.78)!important;backdrop-filter:blur(12px) saturate(80%)!important}
.dialogtop{padding:15px 22px!important;background:rgba(8,12,10,.82)!important;border-bottom:1px solid #263129;backdrop-filter:blur(16px);letter-spacing:.18em!important}
#closeDialog{width:44px;height:44px;border:1px solid #36433b;border-radius:50%;display:grid;place-items:center;transition:.2s ease!important}
#closeDialog:hover{background:var(--lime);color:#071006;border-color:var(--lime);transform:rotate(90deg)}
#dialogContent{padding:22px 24px 30px!important}
.detailhero{grid-template-columns:minmax(0,1.35fr) minmax(280px,.8fr)!important;gap:34px!important;padding-bottom:22px}
.detailhero .detail-photo{position:relative;min-height:340px;border-radius:14px;overflow:hidden;border:1px solid #2e3a33;background:#0d120f}
.detailhero img{height:100%!important;min-height:340px;object-fit:cover!important;border-radius:0!important;transition:transform .8s ease}
.detailhero:hover img{transform:scale(1.025)}
.detailhero h2{font-size:clamp(2.8rem,6vw,5.3rem)!important;line-height:.92!important;letter-spacing:-.025em;margin:.12em 0!important}
.detailhero .eyebrow{color:var(--lime)}
.detailhero p{font-size:.92rem!important;color:#b7c1ba!important}
.score{display:inline-flex;align-items:center;gap:4px;padding:8px 11px;border-radius:8px;background:rgba(183,255,72,.08);border:1px solid rgba(183,255,72,.18);color:var(--lime)!important}
.showroom-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:8px 0 18px}
.showroom-stat{padding:14px 15px;background:#0e1511;border:1px solid #2c3931;border-radius:10px;min-width:0}
.showroom-stat span{display:block;font-size:.65rem;letter-spacing:.12em;color:#8f9a93;text-transform:uppercase;margin-bottom:6px}
.showroom-stat b{font:600 clamp(1rem,2vw,1.2rem) 'Barlow Condensed',sans-serif;color:#f3f7f4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.showroom-tabs{display:flex;gap:6px;overflow-x:auto;padding:4px 0 12px;border-bottom:1px solid #28332c;margin-bottom:16px;scrollbar-width:none}
.showroom-tabs::-webkit-scrollbar{display:none}
.showroom-tabs button{flex:0 0 auto;min-height:42px;padding:0 14px;border-radius:8px;color:#9da79f;border:1px solid transparent;transition:.2s ease}
.showroom-tabs button:hover{color:#fff;background:#101712}
.showroom-tabs button.active{color:#071006;background:var(--lime);border-color:var(--lime);box-shadow:0 0 18px rgba(183,255,72,.16)}
.detailnote{background:#0e1511!important;border:1px solid #29362e;border-left:3px solid var(--lime);border-radius:8px!important;color:#c6cec9!important}
.specsections{gap:14px!important}
.specsections section{background:#0d130f;border:1px solid #29362f;border-radius:12px;padding:16px 18px}
.specsections h3{color:var(--lime)!important;border-color:#2c3831!important}
dl>div{border-color:#222d27!important}
.sourcebox{background:#0c120e;border:1px solid #29362e;border-radius:12px;padding:18px}
.sourcebox a{color:var(--lime)!important}

/* --- Fixed desktop showroom navigation rail --- */
.atlas-rail{position:fixed;left:16px;top:50%;transform:translateY(-50%);z-index:35;width:68px;padding:10px 8px;border:1px solid rgba(183,255,72,.16);border-radius:18px;background:rgba(6,10,8,.74);backdrop-filter:blur(16px);box-shadow:0 20px 60px #0008;display:flex;flex-direction:column;gap:8px}
.atlas-rail button{position:relative;width:50px;min-height:48px;border-radius:12px;color:#8f9a93;display:grid;place-items:center;font-size:18px;transition:.2s ease}
.atlas-rail button::after{content:attr(data-label);position:absolute;left:62px;top:50%;transform:translateY(-50%) translateX(-5px);padding:7px 9px;border-radius:7px;background:#0b110d;border:1px solid #2d3932;color:#dfe7e1;font-size:11px;white-space:nowrap;opacity:0;pointer-events:none;transition:.18s ease}
.atlas-rail button:hover,.atlas-rail button.active{background:rgba(183,255,72,.12);color:var(--lime);box-shadow:inset 3px 0 0 var(--lime)}
.atlas-rail button:hover::after{opacity:1;transform:translateY(-50%) translateX(0)}
.atlas-progress{position:fixed;right:15px;top:50%;transform:translateY(-50%);z-index:30;width:2px;height:180px;background:#26312a;border-radius:4px;overflow:hidden}
.atlas-progress>i{display:block;width:100%;height:0;background:var(--lime);box-shadow:0 0 14px var(--lime);transition:height .12s linear}

/* --- Welcome gesture --- */
.atlas-welcome{position:fixed;inset:0;z-index:9999;background:#030504;display:grid;place-items:center;overflow:hidden;transition:opacity .45s ease,visibility .45s ease}
.atlas-welcome.hide{opacity:0;visibility:hidden}
.atlas-welcome::before{content:"";position:absolute;width:70vw;height:1px;background:linear-gradient(90deg,transparent,var(--lime),transparent);box-shadow:0 0 34px var(--lime);animation:welcome-sweep 1.35s ease-in-out both}
.atlas-welcome-inner{text-align:center;position:relative;z-index:2}
.atlas-welcome-mark{font:700 clamp(4rem,12vw,8rem)/1 'Barlow Condensed',sans-serif;color:var(--lime);letter-spacing:-.08em;text-shadow:0 0 32px rgba(183,255,72,.35);animation:welcome-mark .8s cubic-bezier(.2,.8,.2,1) both}
.atlas-welcome-name{margin-top:8px;font:600 clamp(1rem,3vw,1.7rem) 'DM Sans',sans-serif;letter-spacing:.42em;color:#f3f7f4;animation:welcome-name .8s .25s ease both}
.atlas-welcome-sub{margin-top:10px;font-size:.65rem;letter-spacing:.22em;color:#78837c;animation:welcome-name .8s .4s ease both}
@keyframes welcome-mark{from{opacity:0;transform:scale(.74);filter:blur(10px)}to{opacity:1;transform:scale(1);filter:blur(0)}}
@keyframes welcome-name{from{opacity:0;transform:translateY(8px);letter-spacing:.65em}to{opacity:1;transform:none}}
@keyframes welcome-sweep{0%{transform:translateX(-120vw) rotate(-8deg);opacity:0}30%{opacity:1}100%{transform:translateX(120vw) rotate(-8deg);opacity:0}}

/* --- Motion system --- */
@media(prefers-reduced-motion:no-preference){
  .brand-group{animation:showroom-rise .65s both;animation-timeline:view();animation-range:entry 0% entry 28%}
  .brand-group .card{animation:showroom-rise .55s both;animation-timeline:view();animation-range:entry 0% entry 22%}
  @keyframes showroom-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
}

/* --- Responsive --- */
@media(max-width:1200px){.atlas-rail{display:none}.atlas-progress{right:5px}.intro{min-height:320px}.detailhero{grid-template-columns:1.05fr .95fr!important}.showroom-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){
  body::before{background-position:62% top!important;background-attachment:scroll!important}
  .intro{min-height:310px;padding:48px 0 34px!important;align-items:end}.intro::after{font-size:3rem;right:-20px}.intro h1{font-size:clamp(3rem,15vw,4.5rem)!important}.index-note{display:none!important}
  .brand-browser{padding:1rem}.section-title{align-items:flex-start!important}.collection-switch{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}.collection-switch::-webkit-scrollbar{display:none}.collection-switch button{flex:0 0 auto}
  .photo{height:235px!important}.card:hover{transform:none!important}.atlas-progress{display:none}
  dialog{width:100vw!important;max-width:none!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important;border:0!important;margin:0!important}.dialogtop{padding-inline:16px!important}#dialogContent{padding:16px!important}.detailhero{grid-template-columns:1fr!important;gap:18px!important}.detailhero .detail-photo,.detailhero img{min-height:250px!important;height:250px!important}.detailhero h2{font-size:clamp(2.5rem,14vw,4rem)!important}.showroom-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.specsections{grid-template-columns:1fr!important}
}
@media(max-width:380px){.showroom-stats{grid-template-columns:1fr}.intro h1{font-size:2.8rem!important}}
@media(prefers-reduced-motion:reduce){.atlas-welcome{display:none!important}.card,.photo img,.showroom-tabs button,.atlas-rail button{transition:none!important}}