/* 4MGarage live backdrop — drop-in addition to site.css, nothing removed.

   site.css already paints a fixed srp-wangan image behind the whole document
   and renders every section translucent over it. This swaps that one still for
   a live canvas in the same place, so the page keeps its exact composition and
   the scene simply comes alive underneath it. */

.m4gl{
  display:block; border:0; pointer-events:none;
  opacity:0; transition:opacity .8s ease;
}
.m4gl.is-ready{opacity:1}

/* full-page: the canvas takes the job the fixed background image had */
.m4gl.m4-page{
  position:fixed; inset:0; width:100%; height:100%; z-index:-10;
}
body.m4-live{
  background-image:none;          /* the static srp-wangan still steps aside */
  background-color:#06090d;
}

/* hero-only mode (window.M4_HERO = { mode:"hero" }) */
.hero .m4gl:not(.m4-page){
  position:absolute; inset:0; width:100%; height:100%; z-index:-3;
}

/* No WebGL2, or the script never ran: neither class is ever added, so the page
   keeps the fixed srp-wangan backdrop and the original gradients. */
.hero.m4-off .m4gl{display:none}

/* Two jobs for the hero's height. The content - headline, lead, buttons, live
   card - needs about 330px and is bottom-aligned, so 600px leaves no clear
   space for a subject. And the capture is 16:9, so a hero much squarer than
   that crops the road and the car away. 56vw tracks 16:9 and floors at 600. */
body.m4-live .hero,
body.m4-live-hero .hero:not(.m4-off){min-height:clamp(600px,56vw,880px)}

/* site.css darkens the hero 84% on the left so a bright still stays readable.
   The capture is lifted at build time now, so that veil only muddies it: while
   the canvas is live it drops to a scrim that still holds the headline. */
body.m4-live .hero:before,
body.m4-live-hero .hero:not(.m4-off):before{
  background:
    linear-gradient(90deg,rgba(3,6,10,.72) 0%,rgba(3,6,10,.30) 48%,rgba(3,6,10,.04) 100%),
    linear-gradient(0deg,rgba(6,9,13,.50),transparent 50%);
}

/* ---- the animated header mark -------------------------------------------
   The canvas lies exactly over the existing <img>, which keeps its layout box
   (it is what sizes the canvas) and stays in the accessibility tree for its
   alt text. Without WebGL2 neither class is ever added and the image shows
   normally. */
.brand{position:relative}
.brand canvas.m4mark{
  position:absolute; pointer-events:none;
  opacity:0; transition:opacity .45s ease;
}
.brand.m4mark-ready canvas.m4mark{opacity:1}
.brand.m4mark-ready img{opacity:0}

@media (prefers-reduced-motion:reduce){
  .brand canvas.m4mark{transition:none}
  .m4gl{transition:none}
}

/* ---- scrolling cost ------------------------------------------------------
   site.css blurs four layers over the page background: .top at 18px, .footer
   at 8px, .section.alt at 5px, .pagehero at 2px. Over the old static still a
   browser rasterises each blur once and reuses it. Over a canvas that repaints
   every frame it has to redo all four every frame, and the sticky full-width
   18px header blur alone costs more than the scene does - which is why the
   page only started to drag once the backdrop went live.

   The canvas already supplies the depth those blurs were there to fake, so
   while it is running they come off and the panels carry the separation on
   opacity instead. All of it is scoped to .m4-live: with the effect off, or
   on a browser without WebGL2, site.css is untouched. */
body.m4-live .top,
body.m4-live .section.alt,
body.m4-live .pagehero,
body.m4-live .footer{
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
body.m4-live .top{background:rgba(6,9,13,.97)}
body.m4-live .section.alt{background:rgba(7,13,19,.90)}
body.m4-live .footer{background:rgba(4,8,12,.90)}
body.m4-live .pagehero{background:radial-gradient(circle at 80% 20%,rgba(25,198,255,.15),transparent 32%),rgba(4,8,12,.62)}

/* Keep the backdrop on its own compositing layer, so scrolling the document
   never drags it into a page repaint. */
.m4gl.m4-page{will-change:transform; transform:translateZ(0); contain:paint}