/* ===========================================================
   Hero v4 — full-bleed looping video background, dark-gold
   cinematic scrim, shimmering headline.
   Loaded by v4.html (body.v4) on top of styles.css.
   =========================================================== */

/* ---------- Transparent navigation ---------- */
body.v4 .nav {
  background: transparent; border-bottom: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.v4 .nav-logo,
body.v4 .nav-links a { text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); }
body.v4 .nav-links a {
  position: relative; color: var(--ink); opacity: 0.82;
  transition: opacity 0.2s ease, color 0.2s ease;
}
body.v4 .nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px;
  background: var(--gold); border-radius: 2px;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.3s cubic-bezier(.2, .7, .2, 1);
}
body.v4 .nav-links a:hover { opacity: 1; color: #fff; }
body.v4 .nav-links a:hover::after { transform: scaleX(1); }

/* ---------- Hero shell ---------- */
.hero4 {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; overflow: hidden;
  isolation: isolate; background: #0a0907;
  padding: 116px 0 56px;
}

/* ---------- Video background ---------- */
.hero4-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
  /* tame the bright daylight footage into the dark-gold theme */
  filter: brightness(0.66) saturate(0.85) contrast(1.04);
  opacity: 0; transition: opacity 1.2s ease;
}
.hero4-video.is-ready { opacity: 1; }

/* dark + warm scrim for legibility, vignette, and a fade into the page */
.hero4-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8, 7, 5, 0.92) 0%, rgba(8, 7, 5, 0.5) 42%, rgba(8, 7, 5, 0.08) 74%),
    linear-gradient(180deg, rgba(8, 7, 5, 0.7) 0%, rgba(8, 7, 5, 0.25) 26%, rgba(8, 7, 5, 0.45) 70%, var(--bg) 100%),
    radial-gradient(70% 60% at 78% 38%, rgba(203, 167, 90, 0.14), transparent 70%),
    radial-gradient(120% 100% at 50% 50%, transparent 52%, rgba(6, 5, 4, 0.66) 100%);
}

/* subtle "now playing" tag, bottom-right */
.hero4-tag {
  position: absolute; right: 28px; bottom: 92px; z-index: 2;
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
  color: var(--ink-dim); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}
.hero4-tag .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 0 rgba(203, 167, 90, 0.6); animation: hero4-pulse 2s infinite;
}
@keyframes hero4-pulse {
  0% { box-shadow: 0 0 0 0 rgba(203, 167, 90, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(203, 167, 90, 0); }
  100% { box-shadow: 0 0 0 0 rgba(203, 167, 90, 0); }
}

/* ---------- Copy ---------- */
.hero4-inner { position: relative; z-index: 2; width: 100%; flex: 1 1 auto; display: flex; align-items: center; }
.hero4-copy { max-width: 640px; }
.hero4-copy .hero-badge { margin-bottom: 24px; }
.hero4-copy h1 { font-size: clamp(48px, 7vw, 96px); line-height: 1.0; margin-bottom: 22px; }
.hero4-copy .hero-sub { font-size: 19px; color: var(--ink-dim); max-width: 480px; margin-bottom: 34px; }

/* shimmering headline — highlight sweeps left → right */
.v4-title {
  background-image: linear-gradient(100deg,
    var(--ink) 0%, var(--ink) 38%, #fff6e0 47%, #ffe9b0 50%, var(--gold) 53%, var(--ink) 62%, var(--ink) 100%);
  background-size: 230% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.v4-title em { font-style: italic; }
@keyframes v4-shimmer { 0% { background-position: 120% 0; } 100% { background-position: -20% 0; } }

/* ---------- Entrance ---------- */
.hero4 .anim {
  opacity: 0; transform: translateY(26px);
  animation: v4-in 0.8s cubic-bezier(.2, .7, .2, 1) forwards;
  animation-delay: calc(var(--d) * 0.11s + 0.2s);
}
@keyframes v4-in { to { opacity: 1; transform: none; } }
.hero4 .v4-title.anim {
  animation: v4-shimmer 5s ease-in-out infinite, v4-in 0.8s cubic-bezier(.2, .7, .2, 1) 0.31s forwards;
}

/* ---------- Scroll cue ---------- */
.v4-scroll {
  position: relative; z-index: 2; flex: none; align-self: center; margin-top: 20px;
  width: 26px; height: 42px; border: 1.5px solid rgba(239, 231, 214, 0.3); border-radius: 14px;
  display: grid; justify-items: center;
}
.v4-scroll span { width: 4px; height: 8px; border-radius: 2px; background: var(--gold); margin-top: 7px; animation: v4-cue 1.6s ease infinite; }
@keyframes v4-cue { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }

/* ---------- Mobile ---------- */
@media (max-width: 760px) {
  .hero4 { min-height: 88vh; padding: 110px 0 64px; }
  .hero4-copy h1 { font-size: clamp(40px, 12vw, 64px); }
  .hero4-copy .hero-sub { font-size: 17px; }
  .hero4-scrim { background:
    linear-gradient(180deg, rgba(8, 7, 5, 0.72) 0%, rgba(8, 7, 5, 0.4) 40%, rgba(8, 7, 5, 0.6) 75%, var(--bg) 100%),
    radial-gradient(120% 100% at 50% 50%, transparent 45%, rgba(6, 5, 4, 0.7) 100%); }
  .hero4-tag { right: 18px; bottom: 70px; }
}

/* ---------- Reduced motion: show poster, no autoplay flourish ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero4 .anim, .hero4 .v4-title.anim { animation: none; opacity: 1; transform: none; }
  .v4-title { background: none; -webkit-text-fill-color: var(--ink); color: var(--ink); }
  .v4-title em { color: var(--gold); }
  .hero4-video { opacity: 1; transition: none; }
  .v4-scroll span, .hero4-tag .dot { animation: none; }
}