/* Abstract brand visuals (generated, no people) wired into the swap slots of site.css. */
[data-visual-slot="hero-bg"] {
  --visual: url("../img/visuals/hero-bg.webp");
  background-size: auto min(100%, 760px);
  background-position: left center;
  opacity: .9;
}
@media (max-width: 767px) {
  [data-visual-slot="hero-bg"] {
    --visual: url("../img/visuals/hero-bg-mobile.webp");
    background-size: 100% auto;
    background-position: center bottom;
    opacity: .55;
  }
}
[data-visual-slot="bento-a"],
[data-visual-slot="bento-d"],
[data-visual-slot="bento-g"] {
  border-radius: 0;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 1;
}
[data-visual-slot="bento-a"] { --visual: url("../img/visuals/bento-a.webp"); }
[data-visual-slot="bento-d"] { --visual: url("../img/visuals/bento-d.webp"); }
[data-visual-slot="bento-g"] { --visual: url("../img/visuals/bento-g.webp"); width: 70%; aspect-ratio: 21 / 9; }
[data-visual-slot="divider-1"],
[data-visual-slot="divider-2"] {
  --visual: url("../img/visuals/divider.webp");
  background-size: 100% auto;
  background-repeat: no-repeat;
}
/* parallax layers (loose transparent shapes, 16:9) */
.hero-layer { --layer: url("../img/visuals/hero-layers.webp"); }
/* glass icons (1:1, transparent) */
.glass-icon[data-icon="exam"] { --icon: url("../img/visuals/icon-exam.webp"); }
.glass-icon[data-icon="live"] { --icon: url("../img/visuals/icon-live.webp"); }
.glass-icon[data-icon="certificate"] { --icon: url("../img/visuals/icon-certificate.webp"); }
.glass-icon[data-icon="ai"] { --icon: url("../img/visuals/icon-ai.webp"); }
.glass-icon[data-icon="security"] { --icon: url("../img/visuals/icon-security.webp"); }
.fcard.art[data-art="a"] { --art: url("../img/visuals/bento-a.webp"); }
.fcard.art[data-art="d"] { --art: url("../img/visuals/bento-d.webp"); }
/* band, footer, textured sections (21:9, opaque) */
.band-art { --band-art: url("../img/visuals/band-bg.webp"); }
.foot-art { --foot-art: url("../img/visuals/footer-bg.webp"); }
.section.textured { --section-bg: url("../img/visuals/section-bg.webp"); }
:root[data-theme="dark"] [data-visual-slot] { opacity: .8; }
@media (prefers-reduced-motion: reduce) {
  [data-visual-slot] { transition: none; }
  .glass-icon { animation: none !important; }
}

/* English (LTR): the hero art sits on the side opposite the text, as in Arabic */
@media (min-width: 768px) {
  html[dir="ltr"] [data-visual-slot="hero-bg"] { transform: scaleX(-1); }
}