/* ============================================================
   Crafta — V2 home (full-bleed image hero).
   Loaded AFTER styles.css. Overrides only what V2 changes.
   Activated by body.v2 — V1 surfaces are untouched.

   Design intent:
   - Hero becomes a full-bleed cinematic surface, ~88vh.
   - Three background images crossfade in lockstep with the
     role rotator: teacher↔classroom, coach↔snowboard,
     mentor↔executive (3s each, 9s loop).
   - Nav floats transparent over the image; reverts to paper
     once you scroll past the hero (the offerings section
     restores the normal paper system).
   - Text turns paper-cream over a dark gradient overlay for
     legibility. Italic-`a` lifts to accent-200 (lighter oxblood)
     so it stays differentiated against dark imagery.
   ============================================================ */

/* Nav floats over the hero. */
.v2 .nav {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  background: transparent;
  border-bottom: none;
}

.v2 .nav .wordmark,
.v2 .nav .nav-links a {
  color: var(--paper);
}

.v2 .nav .wordmark em {
  color: var(--accent-200);
}

.v2 .nav .wordmark:hover,
.v2 .nav .nav-links a:hover {
  color: #fff;
}

.v2 .nav .wordmark:hover em {
  color: var(--accent-100);
}

/* Hero — full-bleed with background image stack. */
.v2 .hero {
  position: relative;
  min-height: 88vh;
  padding: 0;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #0f0c0a; /* fallback while images load */
}

.v2 .hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.v2 .hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: visual-fade 9s infinite;
}

.v2 .hero-slide:nth-of-type(1) {
  animation-delay: 0s;
}
.v2 .hero-slide:nth-of-type(2) {
  animation-delay: 3s;
}
.v2 .hero-slide:nth-of-type(3) {
  animation-delay: 6s;
}

.v2 .hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Gradient overlay — light touch, since the source images now carry
   their own darkness. Just enough to anchor text in the lower-left
   without crushing the photography. */
.v2 .hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      120deg,
      rgba(15, 12, 10, 0.45) 0%,
      rgba(15, 12, 10, 0.2) 50%,
      rgba(15, 12, 10, 0) 85%
    ),
    linear-gradient(to top, rgba(15, 12, 10, 0.3) 0%, rgba(15, 12, 10, 0) 50%);
}

/* Hero content sits on top, lower-left. */
.v2 .hero .container {
  position: relative;
  z-index: 2;
  padding-top: var(--space-10);
  padding-bottom: var(--space-9);
}

/* Light-on-dark text scheme inside the hero only. */
.v2 .hero .eyebrow,
.v2 .hero .eyebrow span,
.v2 .hero h1,
.v2 .hero .lede {
  color: var(--paper);
}

.v2 .hero .eyebrow i,
.v2 .hero .hero-meta i {
  color: var(--accent-200);
}

.v2 .hero .role-rotator .role {
  color: var(--paper);
}

.v2 .hero .accent {
  color: var(--accent-200);
}

.v2 .hero .lede {
  color: rgba(242, 240, 232, 0.88);
}

.v2 .hero .hero-meta {
  color: rgba(242, 240, 232, 0.72);
}

.v2 .hero .hero-meta i {
  color: var(--accent-300);
}

/* CTA buttons over imagery — primary stays oxblood (still readable),
   ghost reverses to a paper outline so it stands off the dark overlay. */
.v2 .hero .btn-ghost {
  color: var(--paper);
  border-color: rgba(242, 240, 232, 0.4);
}

.v2 .hero .btn-ghost:hover {
  color: var(--paper);
  border-color: var(--paper);
  background: rgba(242, 240, 232, 0.08);
}

/* V2 has no separate visual band — the hero IS the imagery surface. */
.v2 .visual-band {
  display: none;
}

/* Responsive — phones get a stronger top-down overlay since portrait
   crops the imagery aggressively and text overlaps busier regions. */
@media (max-width: 720px) {
  .v2 .hero {
    min-height: 100vh;
    align-items: flex-end;
  }

  .v2 .hero-overlay {
    background: linear-gradient(
      180deg,
      rgba(15, 12, 10, 0.35) 0%,
      rgba(15, 12, 10, 0.15) 30%,
      rgba(15, 12, 10, 0.55) 100%
    );
  }

  .v2 .hero .container {
    padding-top: var(--space-9);
    padding-bottom: var(--space-7);
  }
}

/* Reduced motion — freeze on the first slide. */
@media (prefers-reduced-motion: reduce) {
  .v2 .hero-slide {
    animation: none;
  }
  .v2 .hero-slide:nth-of-type(1) {
    opacity: 1;
  }
}