/* ============================================================
   VIDEO BACKGROUND HERO — reusable premium component (simpler,
   cheaper sibling of Cinematic Gallery: one full-bleed ambient
   video loop, not a multi-slide show). Structural CSS below
   travels unmodified between templates; only the variables in
   the --vhero-* block should be re-skinned per site (colours,
   overlay strength, sizing).
   ============================================================ */

.vhero {
  /* Re-skinned to trymysite's navy/orange brand tokens — same technique
     as the existing 4 embeds, only this block touched. No licensed video
     ships with this site either (same reasoning as the master reference,
     see video-hero.js's header comment) so the ambient gradient below is
     what visitors actually see — built from the site's own navy shades
     with a warm orange glow standing in for "video" motion. */
  --vhero-text: var(--text);
  --vhero-muted: rgba(238, 242, 255, 0.82);
  --vhero-accent: var(--orange);
  --vhero-accent-text: #1a0d02;
  --vhero-font-display: var(--font-display);
  --vhero-font-body: var(--font-body);
  --vhero-overlay-from: rgba(8, 13, 26, 0.9);
  --vhero-overlay-via: rgba(8, 13, 26, 0.32);
  --vhero-overlay-to: rgba(8, 13, 26, 0.55);
  --vhero-ambient-1: var(--navy-3);
  --vhero-ambient-2: var(--navy);
  --vhero-ambient-3: #4a2c14;
  --vhero-min-height: 480px;
  --vhero-max-height: 880px;

  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: var(--vhero-min-height);
  max-height: var(--vhero-max-height);
  overflow: hidden;
  background: #000;
  color: var(--vhero-text);
  font-family: var(--vhero-font-body);
  isolation: isolate;
}

.vhero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  will-change: transform;
}

.vhero__ambient {
  position: absolute;
  inset: -12%;
  background:
    radial-gradient(120% 90% at 22% 24%, var(--vhero-ambient-3), transparent 60%),
    radial-gradient(130% 100% at 82% 78%, var(--vhero-ambient-1), transparent 55%),
    linear-gradient(135deg, var(--vhero-ambient-2), var(--vhero-ambient-1));
  background-size: 200% 200%;
  animation: vhero-ambient-pan 28s ease-in-out infinite alternate;
}

@keyframes vhero-ambient-pan {
  from { background-position: 0% 40%, 100% 60%, 0% 0%; transform: scale(1); }
  to   { background-position: 35% 55%, 65% 35%, 15% 15%; transform: scale(1.06); }
}

.vhero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
}

.vhero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, var(--vhero-overlay-from) 0%, var(--vhero-overlay-via) 48%, var(--vhero-overlay-to) 100%),
    linear-gradient(to right, rgba(6, 7, 9, 0.4) 0%, transparent 60%);
  pointer-events: none;
}

.vhero__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  max-width: 640px;
  padding: 0 clamp(20px, 6vw, 72px) clamp(52px, 10vh, 108px);
}

.vhero__eyebrow {
  display: inline-block;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vhero-accent);
  margin-bottom: 0.9rem;
}

.vhero__heading {
  font-family: var(--vhero-font-display);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1.08;
  margin: 0 0 0.85rem;
  text-shadow: 0 4px 26px rgba(0, 0, 0, 0.45);
}

.vhero__subheading {
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  color: var(--vhero-muted);
  line-height: 1.6;
  margin: 0 0 1.75rem;
  max-width: 48ch;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

.vhero__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  padding: 0.9rem 1.6rem;
  background: var(--vhero-accent);
  color: var(--vhero-accent-text);
  font-weight: 600;
  font-size: 0.94rem;
  text-decoration: none;
  border-radius: 999px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.vhero__cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
}

.vhero__eyebrow:empty,
.vhero__subheading:empty,
.vhero__cta:empty {
  display: none;
}

.vhero[data-offscreen="true"] .vhero__ambient {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .vhero__ambient {
    animation: none !important;
  }
  .vhero__media {
    transform: none !important;
    opacity: 1 !important;
  }
}

@media (max-width: 640px) {
  .vhero {
    --vhero-min-height: 420px;
  }
  .vhero__content {
    padding: 0 20px clamp(40px, 12vh, 72px);
  }
  .vhero__heading {
    font-size: clamp(1.7rem, 7vw, 2.4rem);
  }
  .vhero__subheading {
    font-size: 0.92rem;
  }
  .vhero__cta {
    padding: 0.8rem 1.35rem;
    font-size: 0.88rem;
  }
}