/* ============================================================
   NovaFit — Homepage v4 bis (override on top of home-v4.css)
   Only difference vs v4: full-bleed photographic hero.
   Load AFTER home-v4.css. Everything else is inherited from v4.
   ============================================================ */

/* ---------- Hero: full-bleed image ---------- */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding-top: 0;
  isolation: isolate;
}
.hero-media { position: absolute; inset: 0; z-index: -3; }
.hero-media picture { display: block; width: 100%; height: 100%; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
.hero-zoom { animation: heroZoom 22s cubic-bezier(0.33,1,0.68,1) forwards; transform-origin: 60% 50%; }
@keyframes heroZoom { from { transform: scale(1.12); } to { transform: scale(1); } }

.hero-scrim {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, rgba(10,10,12,0.46) 0%, rgba(10,10,12,0.06) 30%, rgba(10,10,12,0.52) 68%, rgba(10,10,12,0.86) 100%),
    linear-gradient(78deg, rgba(10,10,12,0.72) 0%, rgba(10,10,12,0.22) 50%, transparent 82%);
}

.hero-content { padding-bottom: clamp(3.5rem, 9vh, 7rem); padding-top: 96px; }
.hero-content .label { color: #fff; margin-bottom: 1.6rem; }
.hero-content .label::before { background: var(--red); }
.hero-content h1.display { color: #fff; max-width: 15ch; margin-bottom: 1.9rem; }
.hero-content .lede { color: rgba(255,255,255,0.92); max-width: 46ch; margin-bottom: 2.3rem; }
.hero-content .hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }

/* Secondary CTA must read on photo */
.hero-content .btn-outline {
  color: #fff;
  border-color: rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(6px);
}
.hero-content .btn-outline:hover { border-color: #fff; background: rgba(255,255,255,0.12); }

/* ---------- Nav over the photo (before scroll) ---------- */
.nav:not(.is-scrolled) .nav-links a { color: rgba(255,255,255,0.82); }
.nav:not(.is-scrolled) .nav-links a:hover,
.nav:not(.is-scrolled) .nav-links a.active { color: #fff; }
.nav:not(.is-scrolled) .lang { border-color: rgba(255,255,255,0.34); }
.nav:not(.is-scrolled) .lang button { color: rgba(255,255,255,0.65); }
.nav:not(.is-scrolled) .lang button.active { color: #fff; background: rgba(255,255,255,0.2); }
.nav:not(.is-scrolled) .nav-burger { border-color: rgba(255,255,255,0.45); }
.nav:not(.is-scrolled) .nav-burger span { background: #fff; }

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