/* Hero video — full-bleed looping video that blends into the page
   background and starscape canvas via mix-blend-mode.

   IMPORTANT: do not add isolation, background-color, transform, filter,
   or opacity<1 to .hero-video-hero / .hero-video-wrap — any of those
   would cut mix-blend-mode off from reaching body's background /
   the starscape <canvas> behind it. */

.hero-video-hero {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: clamp(320px, 60vh, 640px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-video-wrap {
  position: absolute;
  inset: 0;
}

.hero-video,
.hero-video-fallback-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  pointer-events: none;

  /* Fade to fully transparent at the top/bottom edges, peaking at full
     opacity in the middle. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 50%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 50%,
    transparent 100%
  );
}

.hero-video {
  mix-blend-mode: soft-light;
}

.hero-video-fallback-img {
  display: none;
  mix-blend-mode: soft-light;
}

/* Safari desktop (#23): `mix-blend-mode: soft-light` renders as a corrupted,
   over-saturated blob wherever it overlaps the starscape <canvas> — verified
   live in Safari 18 to be specific to soft-light itself, not the mask, not
   the <video> element, and not the starscape's canvas rendering in
   isolation (multiply/screen/overlay all composite cleanly against the same
   backdrop). `overlay` is the visual closest match to soft-light's contrast
   among the modes that render cleanly, so it's substituted for WebKit only.
   `-webkit-hyphens: none` is a long-standing reliable Safari-only feature
   query (Chromium/Firefox don't register the property), and the
   hover/pointer check further scopes it to desktop Safari — iOS Safari
   already renders soft-light correctly and is left untouched. */
@supports (-webkit-hyphens: none) {
  @media (hover: hover) and (pointer: fine) {
    .hero-video,
    .hero-video-fallback-img {
      mix-blend-mode: overlay;
      /* overlay reads noticeably brighter/higher-contrast than soft-light
         at full mask opacity — capping the mask's peak alpha at 0.1 (down
         from opaque black) dims the video enough to match the other
         browsers' look. */
      -webkit-mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.1) 50%,
        transparent 100%
      );
      mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(0, 0, 0, 0.1) 50%,
        transparent 100%
      );
    }
  }
}

.hero-text {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8%;
  z-index: 1;
  text-align: center;
  padding: 0 1rem;
  pointer-events: none;
}

.hero-title {
  font-family: "UnifrakturMaguntia", cursive;
  font-size: clamp(2.5rem, 7vw, 5.5rem);
  color: #fff;
  margin: 0 0 0.5rem;
  text-shadow:
    0 0 10px rgba(0, 0, 0, 0.9),
    0 0 24px rgba(0, 0, 0, 0.7),
    0 2px 6px rgba(0, 0, 0, 0.9);
}

/* Selector carries the extra .hero-text to outrank `.theme-cosmic p`, which
   otherwise adds a 1.2em bottom margin and 1.8 line-height here and pushes
   the tagline up off the hero's lower third. */
.hero-text .hero-subtitle {
  font-family: "Pirata One", cursive;
  font-size: clamp(1rem, 2.4vw, 1.6rem);
  color: #fff;
  margin: 0;
  line-height: 1.3;
  text-shadow:
    0 0 8px rgba(0, 0, 0, 0.9),
    0 2px 6px rgba(0, 0, 0, 0.9);
}

/* Respect reduced-motion: swap the looping video for the same still
   frame used as its poster. CSS-only so it works with JS disabled too. */
@media (prefers-reduced-motion: reduce) {
  .hero-video {
    display: none;
  }
  .hero-video-fallback-img {
    display: block;
  }
}

@media (max-width: 768px) {
  .hero-video-hero {
    min-height: clamp(280px, 50vh, 480px);
  }
}