/* =========================================================
   SONALIKA — PREMIUM SHOWCASE  ·  #lineup
   Luxury-automotive 3D coverflow for the Cinematic Homepage.
   Self-contained · namespace .scx-*  · vanilla, 60fps.
   ========================================================= */

.scx{
  --scx-blue:    #2b74ff;
  --scx-blue-2:  #5b9dff;
  --scx-blue-d:  #1a52cc;
  --scx-glow:    rgba(48,116,255,.55);
  --scx-gold:    #ffce5c;
  --scx-card-r:  24px;
  position:relative; isolation:isolate; overflow:hidden; color:#fff;
  padding:clamp(72px,9vw,128px) 0 clamp(60px,7vw,104px);
  background:
    radial-gradient(125% 92% at 50% -10%, #1f2f5e 0%, #16224d 46%, #0f1838 100%);
}

/* ---------- atmosphere ---------- */
.scx-aura{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.scx-aura b{ position:absolute; border-radius:50%; filter:blur(80px); opacity:.7; }
.scx-aura b.a1{ left:50%; top:34%; width:min(900px,86%); aspect-ratio:1/.66;
  background:radial-gradient(ellipse at center, rgba(48,116,255,.34), rgba(60,90,255,.08) 50%, transparent 72%);
  animation:scxDrift 22s ease-in-out infinite alternate; }
.scx-aura b.a2{ left:14%; top:62%; width:380px; height:380px;
  background:radial-gradient(circle at center, rgba(120,80,255,.26), transparent 68%);
  animation:scxDrift2 18s ease-in-out infinite alternate; animation-delay:-7s; }
.scx-aura b.a3{ right:10%; top:18%; width:420px; height:420px;
  background:radial-gradient(circle at center, rgba(40,140,255,.22), transparent 68%);
  animation:scxDrift2 20s ease-in-out infinite alternate; animation-delay:-13s; }
@keyframes scxDrift{ 0%{ transform:translate(-50%,-50%) translate(0,0); } 100%{ transform:translate(-50%,-50%) translate(3%,-4%); } }
@keyframes scxDrift2{ 0%{ transform:translate(0,0);} 100%{ transform:translate(-4%,3%);} }

.scx-grid{ position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  -webkit-mask:radial-gradient(120% 90% at 50% 20%, #000 0%, transparent 70%);
  mask:radial-gradient(120% 90% at 50% 20%, #000 0%, transparent 70%);
  background-image:
    linear-gradient(rgba(120,160,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,160,255,.06) 1px, transparent 1px);
  background-size:64px 64px; }

.scx-dust{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.scx-dust i{ position:absolute; bottom:-10px; width:3px; height:3px; border-radius:50%;
  background:radial-gradient(circle, rgba(160,195,255,.9), rgba(160,195,255,0) 70%);
  animation:scxRise linear infinite; opacity:0; }
@keyframes scxRise{ 0%{ transform:translateY(0) scale(.6); opacity:0; }
  12%{ opacity:.8; } 88%{ opacity:.7; } 100%{ transform:translateY(-86vh) scale(1); opacity:0; } }

.scx-wrap{ position:relative; z-index:3; max-width:1280px; margin:0 auto; padding-inline:var(--gut); }

/* ---------- heading ---------- */
.scx-head{ text-align:center; max-width:680px; margin:0 auto; }
.scx-kicker{ display:inline-flex; align-items:center; gap:12px; font-family:var(--display);
  font-weight:700; font-size:12.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--scx-gold); }
.scx-kicker::before,.scx-kicker::after{ content:""; width:34px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--scx-gold)); }
.scx-kicker::after{ background:linear-gradient(90deg,var(--scx-gold),transparent); }
.scx-title{ font-family:var(--display); font-weight:900; letter-spacing:-.035em; line-height:.96;
  font-size:clamp(38px,6vw,76px); margin:14px 0 0; }
.scx-title em{ font-style:italic;
  font-family:var(--serif); font-weight:400; letter-spacing:-.01em;
  background:linear-gradient(110deg,#ffd968 0%,#f4b400 42%,#ffce5c 72%,#ffd968 100%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:scxGrad 6s ease-in-out infinite; }
@keyframes scxGrad{ 0%,100%{ background-position:0% 50%; } 50%{ background-position:100% 50%; } }
.scx-sub{ color:rgba(225,232,255,.62); font-size:clamp(15px,1.5vw,17.5px); line-height:1.55;
  margin:16px auto 0; max-width:50ch; }

/* ---------- stage ---------- */
.scx-stage-wrap{ position:relative; margin-top:clamp(24px,3.4vw,46px); }
.scx-stage{ position:relative; height:clamp(340px,40vw,520px); perspective:2000px;
  transform-style:preserve-3d; touch-action:pan-y; cursor:grab; }
.scx-stage.is-drag{ cursor:grabbing; }

.scx-card{ position:absolute; left:50%; top:50%; width:clamp(300px,42vw,580px); aspect-ratio:7/5;
  transform:translate(-50%,-50%); transform-origin:center center; perspective:1000px;
  will-change:transform,opacity,filter;
  transition:transform .9s cubic-bezier(.18,.86,.28,1), opacity .6s ease, filter .6s ease;
  backface-visibility:hidden; }

.scx-media{ position:relative; width:100%; height:100%; border-radius:var(--scx-card-r); overflow:hidden;
  background:linear-gradient(180deg,#10193b,#0a1330);
  border:1px solid rgba(140,170,255,.16);
  box-shadow:0 40px 90px -34px rgba(0,0,0,.8);
  transform-style:preserve-3d; }
.scx-media::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 52%, rgba(6,10,26,.78) 100%);
  opacity:.9; transition:opacity .6s ease; }
.scx-media img, .scx-media image-slot{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; }
.scx-media image-slot{ transform:scale(1.04); transition:transform 1.1s var(--ease-out); }

/* parallax + float layer (centre only) */
.scx-card.is-center .scx-media{ border-color:rgba(120,170,255,.42);
  box-shadow:0 50px 120px -36px rgba(0,0,0,.9), 0 0 0 1px rgba(120,170,255,.25),
    0 30px 90px -30px var(--scx-glow); }
.scx-card.is-center .scx-media::after{ opacity:1; }
.scx-card.is-center .scx-media image-slot{ transform:scale(1.08); animation:scxFloat 7s ease-in-out infinite; }
@keyframes scxFloat{ 0%,100%{ transform:scale(1.08) translateY(0); } 50%{ transform:scale(1.08) translateY(-2.2%); } }

/* light-sweep "change" cue — re-fires each time a card becomes the centre */
.scx-shine{ position:absolute; inset:0; z-index:3; pointer-events:none; overflow:hidden; border-radius:inherit; }
.scx-shine::before{ content:""; position:absolute; top:-30%; left:0; width:42%; height:160%;
  transform:translateX(-220%) skewX(-18deg);
  background:linear-gradient(90deg, transparent, rgba(190,216,255,.42), transparent); }
.scx-card.is-center .scx-shine::before{ animation:scxShine 1s var(--ease-out); }
@keyframes scxShine{ 0%{ transform:translateX(-220%) skewX(-18deg); } 100%{ transform:translateX(360%) skewX(-18deg); } }

/* glow pulse behind the centre card */
.scx-card.is-center::before{ content:""; position:absolute; left:50%; top:54%; z-index:-1;
  width:84%; height:60%; transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(ellipse at center, var(--scx-glow), transparent 70%);
  filter:blur(38px); animation:scxPulse 5s ease-in-out infinite; }
@keyframes scxPulse{ 0%,100%{ opacity:.55; transform:translate(-50%,-50%) scale(.92);} 50%{ opacity:.95; transform:translate(-50%,-50%) scale(1.06);} }

/* HP badge */
.scx-hp{ position:absolute; right:16px; top:16px; z-index:4; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1px; min-width:60px; padding:11px 10px 9px;
  border-radius:16px; line-height:1;
  background:linear-gradient(160deg, rgba(60,124,255,.92), rgba(26,82,204,.92));
  border:1px solid rgba(170,200,255,.5); box-shadow:0 14px 30px -12px rgba(20,60,160,.8);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  opacity:0; transform:translateY(-8px) scale(.9); transition:opacity .5s .15s var(--ease-out), transform .5s .15s var(--ease-out); }
.scx-hp b{ font-family:var(--display); font-weight:900; font-size:26px; color:#fff; }
.scx-hp span{ font-family:var(--display); font-weight:700; font-size:11px; letter-spacing:.08em; color:rgba(225,236,255,.86); }
.scx-card.is-center .scx-hp{ opacity:1; transform:none; }
/* side cards: faint glass mini-badge */
.scx-card:not(.is-center) .scx-hp{ opacity:.55; background:rgba(255,255,255,.07);
  border-color:rgba(255,255,255,.14); box-shadow:none; backdrop-filter:blur(4px); }
.scx-card:not(.is-center) .scx-hp b{ font-size:22px; }

/* series pill on the active card */
.scx-pill-series{ position:absolute; left:50%; bottom:18px; z-index:4; transform:translateX(-50%) translateY(8px);
  padding:9px 22px; border-radius:100px; font-family:var(--display); font-weight:700;
  font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:#fff; white-space:nowrap;
  background:linear-gradient(120deg,var(--scx-blue),var(--scx-blue-d));
  box-shadow:0 12px 30px -10px var(--scx-glow); opacity:0; transition:opacity .5s .22s, transform .5s .22s var(--ease-out); }
.scx-card.is-center .scx-pill-series{ opacity:1; transform:translateX(-50%); }

/* ---------- arrows ---------- */
.scx-arrow{ position:absolute; top:42%; transform:translateY(-50%); z-index:30;
  width:clamp(48px,4vw,60px); height:clamp(48px,4vw,60px); border-radius:50%;
  display:grid; place-items:center; cursor:pointer; color:#dce6ff;
  background:rgba(255,255,255,.05); border:1px solid rgba(150,180,255,.28);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:transform .35s var(--ease-out), background .35s, box-shadow .35s, color .35s, border-color .35s; }
.scx-arrow:hover{ background:linear-gradient(140deg,var(--scx-blue),var(--scx-blue-d)); color:#fff;
  border-color:transparent; box-shadow:0 0 0 4px rgba(48,116,255,.18), 0 18px 40px -14px var(--scx-glow);
  transform:translateY(-50%) scale(1.08); }
.scx-arrow:active{ transform:translateY(-50%) scale(.96); }
.scx-arrow svg{ width:24px; height:24px; }
.scx-arrow.prev{ left:clamp(4px,3vw,30px); }
.scx-arrow.next{ right:clamp(4px,3vw,30px); }

/* ---------- panel ---------- */
.scx-panel{ position:relative; z-index:3; text-align:center; max-width:780px; margin:clamp(18px,2.4vw,30px) auto 0; }
.scx-fade{ transition:opacity .34s var(--ease-out), transform .34s var(--ease-out); }
.scx-panel.swap .scx-fade{ opacity:0; transform:translateY(10px); }

.scx-name{ font-family:var(--display); font-weight:900; letter-spacing:-.03em; line-height:1;
  font-size:clamp(30px,4.4vw,54px); color:#fff; }
.scx-tagline{ color:rgba(225,232,255,.68); font-size:clamp(15px,1.6vw,18px); margin-top:10px; }

/* model selector pills */
.scx-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:clamp(22px,2.6vw,32px) auto 0;
  max-width:780px; }
.scx-tab{ position:relative; font-family:var(--display); font-weight:700; font-size:12.5px;
  letter-spacing:.06em; text-transform:uppercase; color:rgba(205,216,255,.62); white-space:nowrap;
  padding:11px 20px; border-radius:100px; cursor:pointer;
  background:rgba(255,255,255,.05); border:1px solid rgba(150,180,255,.18);
  transition:color .3s, background .3s, border-color .3s, transform .3s var(--ease-out); }
.scx-tab:hover{ color:#fff; border-color:rgba(150,180,255,.4); transform:translateY(-2px); }
.scx-tab.on{ color:#fff; border-color:transparent;
  background:linear-gradient(120deg,var(--scx-blue),var(--scx-blue-d));
  box-shadow:0 14px 30px -12px var(--scx-glow); }

/* spec glass cards */
.scx-specs{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  margin:clamp(26px,3vw,38px) auto 0; max-width:760px; }
/* one-by-one entrance when the panel reveals */
.scx-spec{ opacity:0; transform:translateY(16px); }
.scx-panel.in .scx-spec{ opacity:1; transform:none;
  transition:opacity .6s var(--ease-out), transform .6s var(--ease-out), border-color .4s, background .4s; }
.scx-panel.in .scx-spec:nth-child(1){ transition-delay:.12s; }
.scx-panel.in .scx-spec:nth-child(2){ transition-delay:.22s; }
.scx-panel.in .scx-spec:nth-child(3){ transition-delay:.32s; }
.scx-panel.in .scx-spec:nth-child(4){ transition-delay:.42s; }
.scx-spec{ display:flex; align-items:center; gap:13px; text-align:left; padding:16px 18px;
  border-radius:18px; background:rgba(255,255,255,.045);
  border:1px solid rgba(150,180,255,.14); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  transition:transform .4s var(--ease-out), border-color .4s, background .4s; }
.scx-panel.in .scx-spec:hover,
.scx-spec:hover{ transform:translateY(-3px); border-color:rgba(120,170,255,.4); background:rgba(48,116,255,.08); }
.scx-spec .ic{ flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center; color:var(--scx-blue-2); }
.scx-spec .ic svg{ width:24px; height:24px; }
.scx-spec .v{ display:flex; flex-direction:column; line-height:1; min-width:0; }
.scx-spec .v b{ font-family:var(--display); font-weight:900; font-size:clamp(22px,2.4vw,28px); color:#fff; }
.scx-spec .v b i{ font-style:normal; font-size:.5em; font-weight:700; color:var(--scx-blue-2); margin-left:3px; }
.scx-spec .v small{ font-family:var(--display); font-weight:600; font-size:11px; letter-spacing:.05em;
  text-transform:uppercase; color:rgba(205,216,255,.55); margin-top:6px; }

.scx-desc{ color:rgba(216,224,255,.6); font-size:15px; line-height:1.6; margin:clamp(22px,2.6vw,30px) auto 0; max-width:54ch; }

/* CTAs */
.scx-actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:clamp(22px,2.6vw,32px); }
.scx-btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--display); font-weight:700; font-size:15.5px; padding:16px 32px; border-radius:100px;
  cursor:pointer; white-space:nowrap; border:1px solid transparent;
  transition:transform .45s var(--ease-out), box-shadow .4s, background .35s, border-color .35s; }
.scx-btn svg{ width:18px; height:18px; }
.scx-btn-primary{ color:#fff; background:linear-gradient(120deg,var(--scx-blue-2),var(--scx-blue) 55%,var(--scx-blue-d));
  box-shadow:0 18px 40px -16px var(--scx-glow), inset 0 1px 0 rgba(255,255,255,.28); }
.scx-btn-primary:hover{ transform:translateY(-3px); box-shadow:0 26px 56px -16px var(--scx-glow), inset 0 1px 0 rgba(255,255,255,.3); }
.scx-btn-ghost{ color:#eaf0ff; background:rgba(255,255,255,.05); border-color:rgba(150,180,255,.3);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.scx-btn-ghost:hover{ transform:translateY(-3px); background:rgba(255,255,255,.1); border-color:rgba(150,180,255,.55); }

/* ---------- responsive ---------- */
@media (max-width:820px){
  .scx-specs{ grid-template-columns:repeat(2,1fr); }
  .scx-card{ width:clamp(280px,82vw,440px); }
}
@media (max-width:560px){
  .scx-arrow{ top:auto; bottom:0; transform:none; }
  .scx-arrow:hover{ transform:scale(1.06); }
  .scx-arrow:active{ transform:scale(.96); }
  .scx-arrow.prev{ left:calc(50% - 64px); } .scx-arrow.next{ right:calc(50% - 64px); }
  .scx-stage{ height:clamp(280px,72vw,360px); }
}

/* =========================================================
   SHARED PREMIUM THEME  ·  apply .scx-themed to any .section
   (used on #why) — matches the showcase bg + heading treatment.
   ========================================================= */
.section.scx-themed{
  position:relative; isolation:isolate; overflow:hidden; color:#fff;
  background:radial-gradient(125% 92% at 50% -8%, #1f2f5e 0%, #16224d 48%, #0f1838 100%) !important;
}
.section.scx-themed::before{ content:""; position:absolute; left:50%; top:30%; z-index:0;
  width:min(920px,88%); aspect-ratio:1/.62; transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(48,116,255,.24), rgba(60,90,255,.06) 52%, transparent 72%);
  filter:blur(64px); }
.section.scx-themed::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
  -webkit-mask:radial-gradient(120% 90% at 50% 18%, #000 0%, transparent 70%);
  mask:radial-gradient(120% 90% at 50% 18%, #000 0%, transparent 70%);
  background-image:
    linear-gradient(rgba(120,160,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,160,255,.05) 1px, transparent 1px);
  background-size:64px 64px; }
.section.scx-themed > .wrap{ position:relative; z-index:2; }

/* heading treatment — gold double-dash kicker + blue-gradient accent word */
.section.scx-themed .eyebrow{ color:var(--scx-gold,#ffce5c); }
.section.scx-themed .eyebrow::before,
.section.scx-themed .eyebrow::after{ content:""; width:34px; height:2px; border-radius:2px;
  background:linear-gradient(90deg,transparent,#ffce5c); }
.section.scx-themed .eyebrow::after{ background:linear-gradient(90deg,#ffce5c,transparent); }
.section.scx-themed .sec-head h2{ color:#fff; }
.section.scx-themed .serif-y,
.section.scx-themed .serif-g,
.section.scx-themed .serif-i{
  background:linear-gradient(120deg,#5b9dff,#2b74ff); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent; }
.section.scx-themed .lead{ color:rgba(225,232,255,.66); }