/*
  Responsive, flicker-free hero video with image fallbacks.
  - Desktop + landscape: uses desktop mp4 and desktop fallback image
  - Mobile portrait: uses mobile mp4 and mobile fallback image
  - Overlay text scales fluidly with viewport, clamped for readability
*/

/* Reset */
* {
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
body {
  margin: 0;
  background: #000;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.hero {
  position: relative;
  width: 100%;
  height: 100dvh; /* avoids URL-bar jumps */
  overflow: hidden;
  isolation: isolate; /* keep overlay crisp */
}

/* Backdrop to avoid any black frame before video paints */
.hero__backdrop {
  position: absolute;
  inset: 0;
  background: center / cover no-repeat
    url("assets/images/Desktop Fall Back Image.jpg");
  transform: translateZ(0);
  will-change: opacity;
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: none; /* default hidden until media query picks one */
  background: transparent; /* no black */
  filter: none;
}

/* Overlay text */
.overlay {
  position: absolute;
  pointer-events: none; /* text is static */
  left: 10%;
  top: 50%; /* desktop default */
  transform: translateY(-50%);
}

.kicker {
  margin: 0;
  line-height: 0.92;
  font-weight: 700;
  /* Desktop/Landscape size */
  font-size: 151px;
  letter-spacing: 0.2px;
  line-height: 1.1;
  text-rendering: optimizeLegibility;
}
.kicker .dot {
  color: #ffffff;
}

/* Reduce motion respects accessibility, but keeps a still hero */
@media (prefers-reduced-motion: reduce) {
  .hero__video {
    animation: none;
  }
}

/* Select the proper video per orientation/width */
/* Mobile portrait default */
@media (max-width: 768px) and (orientation: portrait) {
  .hero__backdrop {
    background-image: url("assets/images/Mobile Fall Back Image.jpg");
  }
  .hero__video--mobile {
    display: block;
  }
  .kicker {
    font-size: 13.33vmin;
  }
  .overlay {
    top: auto;
    bottom: 22%;
    left: 10%;
    transform: none;
  }
}

/* Landscape (desktop and mobile landscape) */
@media (orientation: landscape) {
  .hero__backdrop {
    background-image: url("assets/images/Desktop Fall Back Image.jpg");
  }
  .hero__video--desktop {
    display: block;
  }
}

/* Mobile landscape: scale down text for shorter viewport or touch devices */
@media (orientation: landscape) and (max-height: 500px),
  (orientation: landscape) and (hover: none) and (pointer: coarse) {
  .kicker {
    font-size: 13.33vmin;
  }
  .overlay {
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
  }
}

/* No additional scaling on larger desktops; fixed size as requested */

/* Avoid poster flash by cross-fading video in smoothly once canplay */
/* Optional progressive reveal using attribute hooks from HTML is avoided here
   to keep the implementation CSS-only as requested. The backdrop image remains
   visible under the playing video, preventing any black frames. */