/* ===== ASRT hero imagery: warm light behind the marketing heroes =====
   Route-specific art is chosen before first paint by the inline data-hero
   script. Demo app screens are excluded (data-hero="none") because their
   frosted panels are translucent and would wash the photo through the UI. */

html:not([data-hero="none"]) main > div:first-child{isolation:isolate;overflow:hidden}
html:not([data-hero="none"]) main > div:first-child > *{position:relative;z-index:2}

/* Retire the original 30%-opacity stock layer where we paint our own */
html:not([data-hero="none"]) main > div:first-child:not(:has(video)) [class~="bg-cover"][class~="opacity-30"]{opacity:0}

html:not([data-hero="none"]) main > div:first-child:not(:has(video))::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.95;
  background-image:var(--asrtfx-hero-img);
  background-size:cover;
  background-position:50% 40%;
  filter:saturate(1.06) brightness(1.04);
  -webkit-mask-image:linear-gradient(180deg,#000 52%,rgba(0,0,0,.5) 78%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 52%,rgba(0,0,0,.5) 78%,transparent 100%);
  animation:asrtkenburns 38s ease-in-out infinite alternate;
}
html:not([data-hero="none"]) main > div:first-child:not(:has(video))::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(46% 42% at 70% 30%,rgba(255,190,110,.14),transparent 68%),
    linear-gradient(96deg,rgba(0,0,0,.90) 0%,rgba(0,0,0,.70) 24%,rgba(0,0,0,.30) 46%,rgba(0,0,0,.06) 68%,rgba(0,0,0,.16) 100%),
    linear-gradient(180deg,rgba(0,0,0,.40),transparent 30%,rgba(0,0,0,.66) 84%,#000);
  -webkit-mask-image:linear-gradient(180deg,#000 58%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 58%,transparent 100%);
}

/* Landing keeps its background video and only gets a warm grade */
html:not([data-hero="none"]) main > div:first-child:has(video)::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(46% 40% at 72% 24%,rgba(255,186,105,.16),transparent 68%),
    linear-gradient(180deg,rgba(0,0,0,.30),transparent 34%,rgba(0,0,0,.55) 82%,#000);
}

html[data-hero="office"]    main > div:first-child{--asrtfx-hero-img:url("/assets/hero-office.webp")}
html[data-hero="retail"]    main > div:first-child{--asrtfx-hero-img:url("/assets/hero-retail.webp")}
html[data-hero="classroom"] main > div:first-child{--asrtfx-hero-img:url("/assets/hero-classroom.webp")}

/* /products centres its headline, so frame the photo instead of raking it */
html[data-hero="retail-center"] main > div:first-child{--asrtfx-hero-img:url("/assets/hero-retail.webp")}
html[data-hero="retail-center"] main > div:first-child::after{
  background:
    radial-gradient(52% 40% at 68% 30%,rgba(255,190,110,.16),transparent 66%),
    linear-gradient(90deg,rgba(0,0,0,.46),transparent 32%,transparent 68%,rgba(0,0,0,.46)),
    linear-gradient(180deg,rgba(0,0,0,.66),rgba(0,0,0,.34) 30%,rgba(0,0,0,.16) 52%,rgba(0,0,0,.60) 86%,#000);
}

@keyframes asrtkenburns{
  from{transform:scale(1.02) translate3d(0,0,0)}
  to{transform:scale(1.07) translate3d(-1.6%,-1.2%,0)}
}

@media (max-width:767px){
  html:not([data-hero="none"]) main > div:first-child:not(:has(video))::before{background-position:56% 32%}
  html:not([data-hero="none"]) main > div:first-child:not(:has(video))::after{
    background:
      radial-gradient(70% 40% at 58% 18%,rgba(255,190,110,.16),transparent 66%),
      linear-gradient(180deg,rgba(0,0,0,.62),rgba(0,0,0,.38) 44%,rgba(0,0,0,.80) 86%,#000);
  }
}

@media (prefers-reduced-motion:reduce){
  html:not([data-hero="none"]) main > div:first-child:not(:has(video))::before{animation:none}
}