/* ============================================================
   Hero motion layer - evergreengaragedoorepair.com homepage
   ============================================================
   Deliberately kept OUT of css/styles.css. An automated agent on this VPS
   regenerates styles.css from its own source and has already wiped an
   appended block once (2026-08-17 00:48), which left .hero-media unstyled,
   static-positioned and 693px tall in the normal flow - it doubled the hero.

   Two defences, so a clobber can never break the page again:
     1. these rules live in their own file, which that regeneration does not
        touch;
     2. the layout-critical declarations (absolute fill + opacity 0) are ALSO
        set inline on the element in the HTML, so if this file disappears the
        layer stays invisible and correctly positioned and the hero simply
        falls back to its still. Losing the CSS costs the video, never the
        layout.
   ============================================================ */

/* Belt-and-braces: repeats the inline critical styles so this file alone is
   also sufficient. */
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity .9s ease;
}
/* !important is REQUIRED: the layout-critical opacity:0 is set inline on the
   element (see the note above), and an inline style outranks any selector.
   Coupling the reveal to THIS file is also the safety interlock - the scrim
   gradient below lives here too, so the layer can only ever become visible
   when the scrim that keeps the headline readable is present as well. */
.hero-media.is-playing { opacity: 1 !important; }

.hero-media__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% center; /* mirrors .hero's desktop background-position */
}

/* Duplicate of the gradient baked into .hero's background shorthand, so text
   contrast over the headline and checklist is identical with or without the
   video. If .hero's scrim is ever retuned, retune this to match. */
.hero-media__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(4,17,13,.90) 0%, rgba(4,17,13,.62) 40%, rgba(4,17,13,.30) 68%, rgba(4,17,13,.14) 100%);
}

@media (max-width: 640px) {
  /* Phones keep the still. The mobile hero is very tall, so cover crops the
     wide frame down to a ~11% centre strip of flat garage wall where the
     people are out of shot entirely - a video decode there buys nothing. */
  .hero-media { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-media { display: none; }
}