/*
 * Motion Hero (Phases 1-2), H Club.
 *
 * Styles for the .motion-hero section built in UX Builder. Layout, text and
 * CTA come from UX Builder; this file only handles the hero shell, the
 * 3D scene layer and the initial hidden state of the reveal targets.
 *
 * PLACEHOLDER SCENE: #motion-hero-scene currently shows
 * assets/images/hero-space.jpg as a background image. To replace it:
 * - Spline: put the public/embed iframe inside the #motion-hero-scene div
 *   (see README "Motion Hero (3D)"). Keep the iframe below the text layer
 *   (z-index) and never let it cover the CTA.
 * - Three.js / GLB: drop the optimized .glb into assets/models/ and render
 *   a canvas into #motion-hero-scene with a Three.js loader (code not
 *   included yet). Remove the placeholder background-image below then.
 */

.motion-hero {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  isolation: isolate;
  background: #0b0a08;
}

.motion-hero__container {
  position: relative;
  z-index: 2;
}

.motion-hero__content {
  position: relative;
  z-index: 3;
}

#motion-hero-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  /* Placeholder scene: house photo + gold glow. Replace per comment above. */
  background:
    radial-gradient(circle at 70% 35%, rgba(240, 178, 77, 0.28), transparent 34%),
    url('images/hero-space.jpg') center / cover no-repeat,
    #0b0a08;
}

.motion-hero__title,
.motion-hero__subtitle,
.motion-hero__actions {
  opacity: 0;
  transform: translateY(32px);
}

@media (max-width: 849px) {
  .motion-hero {
    min-height: 620px;
  }

  #motion-hero-scene {
    opacity: 0.55;
    transform: scale(0.82);
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-hero__title,
  .motion-hero__subtitle,
  .motion-hero__actions {
    opacity: 1;
    transform: none;
  }

  #motion-hero-scene {
    display: none;
  }
}