/* ══════════════════════════════════════════════════════════════════
   Cinematic Scroll — Hero Fixed + Curtain
   Importato dopo ambient-background.css in site.css per vincere
   le regole ad alta specificità di quel file.
   ══════════════════════════════════════════════════════════════════ */

/* 1. Site-header placeholder reset
      Il nav è fixed; il placeholder nel flow può avere altezza 0. */
.ie-cinematic-page #site-header {
  height: 0;
}

/* 2. Hero shell: fixed full viewport
   !important necessario:
   - ambient-background.css usa `.bespoke-journey-page header.hero-full-viewport`
     (specificità 0,2,1) → imposta position: relative
   - `.bespoke-journey-page .hero-split-container.ie-hero-shell`
     (specificità 0,3,0) → stesso
   - Ogni pagina ha anche un inline <style> con la propria classe hero
     (es. .estates-hero, .business-hero, .hero-split) che imposta position: relative
   will-change: transform su hero shell → promuove a layer GPU per evitare
   jitter di compositing durante lo scroll. */
.ie-cinematic-page .ie-hero-shell {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  width: 100%;
  height: 100dvh;
  z-index: 1 !important;
  margin-top: 0 !important;
  overflow: hidden;
  will-change: transform;
}

/* Fix specificità aggiuntiva per .hero-split-container.ie-hero-shell (spec 0,3,0) */
.ie-cinematic-page .hero-split-container.ie-hero-shell {
  position: fixed !important;
}

/* Override esplicito per classi hero page-specific (belt-and-suspenders):
   ciascuna ha `position: relative` nel proprio <style> inline.
   La regola .ie-cinematic-page .ie-hero-shell !important vince già via cascade,
   ma le regole esplicite rimuovono ogni ambiguità. */
.ie-cinematic-page .estates-hero,
.ie-cinematic-page .business-hero,
.ie-cinematic-page .hero-split {
  position: fixed !important;
}

/* 3. Layer GPU hints */
.ie-cinematic-page .ie-hero-bg-layer {
  will-change: transform, filter;
  transform-origin: center center;
}

.ie-cinematic-page .ie-hero-content-layer {
  will-change: transform, opacity;
}

/* 4. Curtain — il contenuto sale sopra la hero fissa come un sipario.
      Agganciato via attributo data-ie-curtain (non class) per evitare
      conflitti con classi page-specific. */
.ie-cinematic-page [data-ie-curtain] {
  position: relative;
  z-index: 10;
  margin-top: 100dvh;
  background: var(--brand-obsidian);
  box-shadow: 0 -50px 100px rgba(0, 0, 0, 0.95);
  border-radius: 28px 28px 0 0;
}

/* 5. Footer: deve stare sopra la hero fissa */
.ie-cinematic-page #site-footer {
  position: relative;
  z-index: 10;
  background: var(--brand-obsidian, #080808);
}

/* 6. Advisory padding — ridotto da 200px a 80px (troppo spazio vuoto all'inizio
      della card su layout con curtain) */
.ie-cinematic-page #advisory {
  padding-top: 80px;
}

/* 7. Reveal-up animation */
.ie-reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.2s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ie-reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 8. Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ie-cinematic-page .ie-hero-shell {
    will-change: auto;
  }
  .ie-cinematic-page .ie-hero-bg-layer,
  .ie-cinematic-page .ie-hero-content-layer {
    will-change: auto;
  }
  .ie-reveal-up {
    transition: none;
    opacity: 1;
    transform: none;
  }
}