/* Engineering identities derived from the portfolio's existing logo assets.
   Static abstract artwork only: the shared GSAP timeline owns card motion.
   Every rule is confined to the new premium sliders and premium dialogs. */
.premium-slider [data-project-id="bmw"],
.premium-detail[data-project-id="bmw"] {
  --surface-bg:#071d35;
  --surface-ink:#f1f6fb;
  --surface-muted:#c1d4e5;
  --surface-edge:#3079ad;
  --surface-accent:#9ed6ff;
  --surface-glow:rgb(1 102 177 / .22);
}
.premium-slider [data-project-id="prada"],
.premium-detail[data-project-id="prada"] {
  --surface-bg:#e9e7e2;
  --surface-ink:#191919;
  --surface-muted:#555451;
  --surface-edge:#b8b5af;
  --surface-accent:#292929;
  --surface-glow:rgb(255 255 255 / .2);
}
.premium-slider [data-project-id="costa"],
.premium-detail[data-project-id="costa"] {
  --surface-bg:#f0e7ce;
  --surface-ink:#14394e;
  --surface-muted:#46606a;
  --surface-edge:#b5b8a9;
  --surface-accent:#3270a0;
  --surface-glow:rgb(231 175 42 / .19);
}
.premium-slider [data-project-id="infocamere"],
.premium-detail[data-project-id="infocamere"] {
  --surface-bg:#dce7ee;
  --surface-ink:#15334f;
  --surface-muted:#435e74;
  --surface-edge:#9eafc3;
  --surface-accent:#24509a;
  --surface-glow:rgb(36 80 154 / .12);
}
.premium-slider [data-project-id="iball"],
.premium-detail[data-project-id="iball"] {
  --surface-bg:#072f2b;
  --surface-ink:#edfaf5;
  --surface-muted:#b9ded3;
  --surface-edge:#419e90;
  --surface-accent:#45cdba;
  --surface-glow:rgb(69 205 186 / .18);
}

/* BMW: precise blue arcs and a receding technical plane. */
.premium-slider [data-project-id="bmw"] .project-scenery,
.premium-detail[data-project-id="bmw"] .project-scenery {
  background:
    radial-gradient(ellipse at 102% 76%,rgb(1 102 177 / .31),transparent 53%),
    radial-gradient(ellipse at 6% 103%,rgb(111 111 111 / .17),transparent 48%),
    linear-gradient(143deg,rgb(31 93 140 / .18),transparent 42%,rgb(0 8 20 / .25));
}
.premium-slider [data-project-id="bmw"] .project-scenery::before,
.premium-detail[data-project-id="bmw"] .project-scenery::before {
  inset:47% -52% -38% 16%;
  border-radius:50%;
  background:repeating-radial-gradient(ellipse at 58% 57%,transparent 0 32px,rgb(158 214 255 / .16) 33px 34px,transparent 35px 61px);
  transform:rotate(-29deg);
  mask-image:linear-gradient(transparent,#000 29%,#000 82%,transparent);
}
.premium-slider [data-project-id="bmw"] .project-scenery::after,
.premium-detail[data-project-id="bmw"] .project-scenery::after {
  inset:63% -30% -19% -28%;
  background:repeating-linear-gradient(92deg,transparent 0 31px,rgb(130 178 212 / .1) 32px 33px,transparent 34px 64px);
  transform:perspective(300px) rotateX(56deg) rotateZ(-19deg);
  mask-image:radial-gradient(ellipse,#000 13%,transparent 72%);
}

/* Prada: porcelain, black ink and restrained geometric folds. */
.premium-slider [data-project-id="prada"] .project-scenery,
.premium-detail[data-project-id="prada"] .project-scenery {
  background:
    radial-gradient(ellipse at 7% 15%,rgb(255 255 255 / .5),transparent 58%),
    linear-gradient(147deg,transparent 49%,rgb(60 58 54 / .055));
}
.premium-slider [data-project-id="prada"] .project-scenery::before,
.premium-detail[data-project-id="prada"] .project-scenery::before {
  inset:46% -14% -22% 27%;
  border:1px solid rgb(0 0 0 / .16);
  background:linear-gradient(121deg,rgb(255 255 255 / .03),rgb(43 42 39 / .06));
  transform:rotate(34deg);
  mask-image:linear-gradient(transparent,#000 30%,#000 83%,transparent);
}
.premium-slider [data-project-id="prada"] .project-scenery::after,
.premium-detail[data-project-id="prada"] .project-scenery::after {
  inset:53% -22% -39% -4%;
  border:1px solid rgb(0 0 0 / .12);
  transform:rotate(34deg);
  mask-image:linear-gradient(transparent,#000 32%,transparent 94%);
}

/* Costa: warm ivory with sea-blue contours and the existing golden accent. */
.premium-slider [data-project-id="costa"] .project-scenery,
.premium-detail[data-project-id="costa"] .project-scenery {
  background:
    radial-gradient(ellipse at 97% 19%,rgb(231 175 42 / .14),transparent 51%),
    radial-gradient(ellipse at 1% 94%,rgb(50 112 160 / .12),transparent 45%),
    linear-gradient(149deg,rgb(255 255 255 / .32),transparent 43%);
}
.premium-slider [data-project-id="costa"] .project-scenery::before,
.premium-detail[data-project-id="costa"] .project-scenery::before {
  inset:54% -49% -24% -33%;
  border-radius:50%;
  background:repeating-radial-gradient(ellipse at 31% 91%,transparent 0 25px,rgb(50 112 160 / .17) 27px 28px,transparent 30px 47px);
  transform:rotate(-13deg);
  mask-image:linear-gradient(transparent,#000 31%,#000 82%,transparent);
}
.premium-slider [data-project-id="costa"] .project-scenery::after,
.premium-detail[data-project-id="costa"] .project-scenery::after {
  inset:72% -20% -15% 15%;
  border-radius:50%;
  background:radial-gradient(ellipse,rgb(231 175 42 / .17),transparent 68%);
}

/* InfoCamere: a pale blue structural network, separate from BMW's dark blue. */
.premium-slider [data-project-id="infocamere"] .project-scenery,
.premium-detail[data-project-id="infocamere"] .project-scenery {
  background:
    radial-gradient(ellipse at 100% 74%,rgb(36 80 154 / .12),transparent 51%),
    radial-gradient(ellipse at 0% 0%,rgb(255 255 255 / .38),transparent 53%),
    linear-gradient(156deg,transparent 43%,rgb(91 103 112 / .055));
}
.premium-slider [data-project-id="infocamere"] .project-scenery::before,
.premium-detail[data-project-id="infocamere"] .project-scenery::before {
  inset:49% -21% -31% -30%;
  background:
    repeating-linear-gradient(90deg,transparent 0 37px,rgb(36 80 154 / .14) 38px 39px,transparent 40px 76px),
    repeating-linear-gradient(0deg,transparent 0 31px,rgb(91 103 112 / .11) 32px 33px,transparent 34px 64px);
  transform:perspective(340px) rotateX(45deg) rotateZ(21deg);
  mask-image:radial-gradient(ellipse at 54% 49%,#000 15%,transparent 72%);
}
.premium-slider [data-project-id="infocamere"] .project-scenery::after,
.premium-detail[data-project-id="infocamere"] .project-scenery::after {
  inset:66% -11% -20% 24%;
  border:1px solid rgb(36 80 154 / .13);
  border-radius:50%;
  mask-image:linear-gradient(transparent,#000 33%,transparent 96%);
}

/* iBall: the original Silvercoal teal, on a quiet dark water-like field.
   These circles are abstract artwork, not an illustration of the product. */
.premium-slider [data-project-id="iball"] .project-scenery,
.premium-detail[data-project-id="iball"] .project-scenery {
  background:
    radial-gradient(ellipse at 102% 78%,rgb(69 205 186 / .21),transparent 53%),
    radial-gradient(ellipse at 5% 99%,rgb(81 148 130 / .2),transparent 44%),
    linear-gradient(150deg,rgb(22 94 78 / .13),transparent 44%,rgb(0 13 21 / .2));
}
.premium-slider [data-project-id="iball"] .project-scenery::before,
.premium-detail[data-project-id="iball"] .project-scenery::before {
  inset:49% -35% -24% 16%;
  border-radius:50%;
  border:1px solid rgb(69 205 186 / .27);
  background:radial-gradient(ellipse at 34% 36%,rgb(69 205 186 / .18),transparent 43%);
  box-shadow:inset 0 0 27px rgb(69 205 186 / .11);
  transform:rotate(-24deg);
  mask-image:linear-gradient(transparent,#000 29%,#000 83%,transparent);
}
.premium-slider [data-project-id="iball"] .project-scenery::after,
.premium-detail[data-project-id="iball"] .project-scenery::after {
  inset:64% -28% -35% -19%;
  border-radius:50%;
  background:repeating-radial-gradient(ellipse at 64% 68%,transparent 0 29px,rgb(132 223 202 / .14) 31px 32px,transparent 34px 57px);
  transform:rotate(17deg);
  mask-image:linear-gradient(transparent,#000 33%,transparent 96%);
}