/* One foreground scene, three decorative presets. Originals: hero package 28.10.2026.
   The PNG-style drawing is decorative, not a technical SVG or a product diagram. */
:root {
  --hero-art-image: url("assets/hero-art/primary-city-lines.webp");
  --hero-art-mobile-image: url("assets/hero-art/primary-city-lines-mobile.webp");
  --hero-art-bg-brightness: .86;
  --hero-art-bg-saturation: .92;
  --hero-art-position: 50% 50%;
  --hero-ghost-height: 82%;
  --hero-ghost-right: -1%;
  --hero-ghost-top: 7%;
  --hero-ghost-opacity: .36;
  --hero-ghost-brightness: .86;
  --hero-ghost-saturation: .78;
  --hero-ghost-fade-start: 36%;
  --hero-ghost-fade-end: 100%;
  --hero-ghost-fade-x: 66%;
  --hero-ghost-fade-y: 76%;
  --hero-ghost-side-fade-start: 30%;
  --hero-ghost-side-fade-end: 88%;
  --hero-card-top-alpha: .78;
  --hero-card-bottom-alpha: .94;
  --hero-ghost-reveal-delay: 450ms;
  --hero-scenery-reveal-duration: 3600ms;
}
:root[data-hero-variant="blueprint"] {
  --hero-art-image: url("assets/hero-art/blueprint.webp");
  --hero-art-mobile-image: url("assets/hero-art/blueprint-mobile.webp");
  --hero-art-bg-brightness: .76;
  --hero-art-bg-saturation: .82;
  --hero-ghost-height: 76%;
  --hero-ghost-top: 10%;
  --hero-ghost-opacity: .36;
  --hero-ghost-brightness: .88;
  --hero-ghost-saturation: .84;
  --hero-ghost-reveal-delay: 600ms;
}
:root[data-hero-variant="cinematic"] {
  --hero-art-image: url("assets/hero-art/cinematic.webp");
  --hero-art-mobile-image: url("assets/hero-art/cinematic-mobile.webp");
  --hero-art-bg-brightness: .82;
  --hero-art-bg-saturation: 1.03;
  --hero-ghost-height: 68%;
  --hero-ghost-right: 2%;
  --hero-ghost-top: 14%;
  --hero-ghost-opacity: .26;
  --hero-ghost-brightness: .78;
  --hero-ghost-saturation: .68;
  --hero-ghost-reveal-delay: 800ms;
}
.home-hero { isolation: isolate; background: #071523 !important; }
.hero-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero-art *, .hero-art::after { pointer-events: none; }
.hero-art__landscape {
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: min(100%, 1360px);
  transform: translateX(-50%);
  /* Merge the illustration into the navy at both edges, including wide displays. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.hero-art__background {
  position: absolute;
  inset: 0;
  background: var(--hero-art-image) var(--hero-art-position) / cover no-repeat;
  filter: brightness(var(--hero-art-bg-brightness)) saturate(var(--hero-art-bg-saturation));
}
.hero-art__city {
  filter: brightness(var(--hero-art-bg-brightness)) saturate(calc(var(--hero-art-bg-saturation) * .8));
  animation: hero-art-city var(--hero-scenery-reveal-duration) cubic-bezier(.22, .61, .36, 1) var(--hero-ghost-reveal-delay) backwards;
}
.hero-art__autumn {
  -webkit-mask-image: radial-gradient(ellipse 24% 46% at 37% 60%, #000 25%, transparent 100%);
  mask-image: radial-gradient(ellipse 24% 46% at 37% 60%, #000 25%, transparent 100%);
  animation: hero-art-autumn 650ms ease-out 380ms backwards;
}
.hero-art__ghost-shaft {
  --hero-ghost-opacity-scale: 1;
  position: absolute;
  height: var(--hero-ghost-height);
  aspect-ratio: 3 / 4;
  background: url("assets/hero-art/ghost-shaft.webp") center / contain no-repeat;
  max-width: none;
  top: var(--hero-ghost-top);
  right: calc(max(0px, (100% - 1480px) / 2) + var(--hero-ghost-right));
  opacity: calc(var(--hero-ghost-opacity) * var(--hero-ghost-opacity-scale));
  filter: brightness(var(--hero-ghost-brightness)) saturate(var(--hero-ghost-saturation));
  /* The near (left) edge is clearer; the distant edge disappears into navy. */
  -webkit-mask-image: radial-gradient(ellipse var(--hero-ghost-fade-x) var(--hero-ghost-fade-y) at 50% 50%, #000 var(--hero-ghost-fade-start), transparent var(--hero-ghost-fade-end)),
    linear-gradient(90deg, #000 var(--hero-ghost-side-fade-start), transparent var(--hero-ghost-side-fade-end));
  mask-image: radial-gradient(ellipse var(--hero-ghost-fade-x) var(--hero-ghost-fade-y) at 50% 50%, #000 var(--hero-ghost-fade-start), transparent var(--hero-ghost-fade-end)),
    linear-gradient(90deg, #000 var(--hero-ghost-side-fade-start), transparent var(--hero-ghost-side-fade-end));
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  animation: hero-art-ghost var(--hero-scenery-reveal-duration) cubic-bezier(.22, .61, .36, 1) var(--hero-ghost-reveal-delay) backwards;
}
.hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  left: 50%;
  width: min(100%, 1360px);
  transform: translateX(-50%);
  background: linear-gradient(90deg, #071523f5 0%, #071523d6 30%, #071523b8 42%, #0715234f 50%, transparent 58%),
    linear-gradient(0deg, #071523 0%, transparent 17%, transparent 93%, #07152333);
}
.home-hero-inner { z-index: 1; }
/* Keep the original sharp foliage and dry paving. A silhouette glow mask is
   only for light, never for the photograph: it softens fine leaves otherwise. */
.home-office-environment--planting {
  --planting-side-mask: linear-gradient(90deg, transparent 14%, #0003 23%, #000 32%, #000 44%, transparent 55%);
}
.home-office-environment--planting .home-office-backdrop {
  clip-path: none;
  -webkit-mask-image: var(--planting-side-mask), linear-gradient(180deg, transparent 5%, #000 18%, #000 82%, #000b 86%, transparent 89%);
  mask-image: var(--planting-side-mask), linear-gradient(180deg, transparent 5%, #000 18%, #000 82%, #000b 86%, transparent 89%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.home-office-environment--planting .home-office-ground {
  -webkit-mask-image: var(--planting-side-mask), linear-gradient(180deg, #000 0%, #000e 18%, #0008 45%, #0002 72%, transparent 98%);
  mask-image: var(--planting-side-mask), linear-gradient(180deg, #000 0%, #000e 18%, #0008 45%, #0002 72%, transparent 98%);
}
.home-office-environment--planting .home-office-morning { opacity: 1; }
.home-office-environment--planting .home-office-morning::after {
  clip-path: none;
  -webkit-mask-image: url("assets/home-office/tree-glow-mask.png"), linear-gradient(180deg, #000 75%, transparent 89%);
  mask-image: url("assets/home-office/tree-glow-mask.png"), linear-gradient(180deg, #000 75%, transparent 89%);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* Content is ready immediately; only the scenery has an entrance animation. */
.home-hero .home-hero-copy > * { opacity: 1 !important; transform: none !important; transition: none !important; }
html.at .home-hero .home-hero-lead { color: #c3c8cf !important; }
.home-hero .hero-dealer-block::before { display: none; }
.home-hero .hero-dealer-block { color: #b5bec9; }
.home-hero .hero-dealer-block > div > span,
.home-hero .hero-dealers > a > span:last-child > span:last-child { color: #b5bec9 !important; }
/* Only the surface is translucent. Content and the existing show/hide stay intact. */
.home-hero .lift-node-card {
  background: linear-gradient(180deg, rgb(24 37 53 / var(--hero-card-top-alpha)) 0%, rgb(24 37 53 / .84) 60%, rgb(21 33 48 / var(--hero-card-bottom-alpha)) 100%);
  border-color: rgb(129 166 204 / .24);
  box-shadow: 0 12px 32px rgb(0 0 0 / .12);
}

@keyframes hero-art-city { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } }
@keyframes hero-art-autumn { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-art-ghost { from { opacity: 0; transform: translateY(3px); } to { opacity: calc(var(--hero-ghost-opacity) * var(--hero-ghost-opacity-scale)); transform: translateY(0); } }

@media (min-width: 768px) and (max-width: 1199.98px) {
  .hero-art__ghost-shaft { display: none; }
  .hero-art__landscape { left: 32%; width: 1050px; }
  .hero-art::after { background: linear-gradient(90deg, #071523f0, #071523c7 45%, #07152363 65%, transparent 78%), linear-gradient(0deg, #071523, transparent 22%); }
}
@media (max-width: 1365px) and (min-width: 1200px) {
  .hero-art__ghost-shaft { --hero-ghost-opacity-scale: .7; }
}
@media (max-height: 700px) { .hero-art__ghost-shaft { display: none; } }

/* Preserve the existing lightweight phone branch and its single live search. */
html.mobile-home #m-header { background: #071523; }
html.mobile-home .mobile-home-intro {
  position: relative;
  isolation: isolate;
  background: #071523;
}
html.mobile-home .mobile-home-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(90deg, #071523eb, #0715239c 70%, #07152366), var(--hero-art-mobile-image) 36% 45% / cover no-repeat;
}
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .hero-art__background, .hero-art__ghost-shaft { animation: none; }
}
html.at-lite .hero-art__background,
html.at-lite .hero-art__ghost-shaft { animation: none; }