/* ==========================================================================
   Home hero — premium 3D moving truck layer (.lzh3)
   --------------------------------------------------------------------------
   Sits inside .home-secA (the live homepage hero), on top of the existing
   drawn art band (.home-secA::before, vector/hero.svg) and below every
   piece of hero copy. The canvas itself is aria-hidden / pointer-events:none,
   so the search box, tabs and links are untouched.

   Stacking inside .home-secA:
     ::before (art, z1)  <  .lzh3 (truck, z1 but later in the DOM)
                         <  .cart_fig (flat forklift, z3 — fades out once
                            the 3D truck is actually running; it stays for
                            no-WebGL / reduced-motion visitors)
                         <  .container (all copy, z5)

   Loaded only by the homepage (index.blade.php).
   ========================================================================== */

.home-secA .lzh3 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 340px;               /* matches the ::before art band */
  z-index: 1;                  /* above the art (same z, later in DOM) */
  pointer-events: none;        /* the truck never eats clicks */
  overflow: hidden;            /* the truck enters/exits within the band */
}

.home-secA .lzh3 canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Lift all hero copy (headline, tabs, search card, rate note) above the
   canvas. No offsets — this element does not move in the layout. */
.home-secA .container {
  position: relative;
  z-index: 5;
}

/* Once the 3D truck is actually running, the flat sliding forklift steps
   aside — one moving vehicle reads premium, two read busy. */
.home-secA.lzh-on .cart_fig {
  opacity: 0;
  transition: opacity 0.9s ease 0.25s;
}

@media only screen and (max-width: 768px) {
  .home-secA .lzh3 {
    height: 200px;             /* matches the smaller art band on phones */
  }
}

/* ---- travel passes: the canvas goes full-viewport while a pass is live ----
   The script moves the canvas to <body> for a pass, so no transformed
   ancestor can trap or clip the fixed positioning. */
canvas.lzh-canvas--travel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 6;                  /* above the page, below the sticky header */
  display: block;
  pointer-events: none;
}
@media only screen and (max-width: 768px) {
  /* phones never travel — the class is defensive only */
  canvas.lzh-canvas--travel { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* the script renders one still frame of the truck; ground it immediately */
  .home-secA.lzh-on .cart_fig {
    opacity: 0;
    transition: none;
  }
}