/* ============================================================
   HERO — two photographs, one slow cross-fade.
   Calm by design: opacity + a barely-there drift, all on the GPU.
   The images are pre-toned, so no CSS filters run on the big layers.
============================================================ */

/* text stays still and fully visible; nothing else inside the hero animates */
.hero *:not(.hm-slide), .hero *:not(.hm-slide)::before, .hero *:not(.hm-slide)::after { animation: none !important; }
.hero .hero-eyebrow, .hero .hero-title, .hero .hero-word, .hero .hero-desc,
.hero .hero-cta, .hero .hero-promise, .hero .hero-est-badge { opacity: 1 !important; transform: none !important; filter: none !important; }
.hero .hero-particles, .hero .hero-skyline-bg, .hero .hero-light-rays { display: none !important; }

.hero .hero-monuments-bg { position: absolute; inset: 0 !important; overflow: hidden; transform: none !important; }
.hero .hm-slide {
  position: absolute; inset: 0; opacity: 0; filter: none !important;
  background-size: cover; background-repeat: no-repeat; transform-origin: 50% 55%;
  animation: hmFade 20s linear infinite, hmDrift 20s ease-in-out infinite alternate !important;
  will-change: opacity, transform; backface-visibility: hidden;
}
.hero .hm-a { background-image: url('hero/h1.webp'); background-position: 28% 42%; opacity: 1; }
.hero .hm-b { background-image: url('hero/h2.webp'); background-position: 50% 62%; animation-delay: -10s, 0s !important; }
@keyframes hmFade { 0% { opacity: 1; } 42% { opacity: 1; } 50% { opacity: 0; } 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes hmDrift { from { transform: scale(1.02); } to { transform: scale(1.075); } }
.hero.is-off .hm-slide { animation-play-state: paused !important; }

/* readable, quiet overlay — deeper at the bottom where the 3-month timeline sits */
.hero .hm-overlay {
  background:
    radial-gradient(ellipse 72% 64% at 50% 42%, rgba(14,12,9,.66) 0%, rgba(14,12,9,.44) 50%, rgba(14,12,9,.16) 82%, rgba(14,12,9,.04) 100%),
    linear-gradient(to bottom, rgba(10,8,6,.55) 0%, rgba(10,8,6,.08) 26%, rgba(10,8,6,.34) 66%, rgba(8,6,4,.92) 100%);
}
html[data-theme="dark"] .hero .hm-overlay {
  background:
    radial-gradient(ellipse 72% 64% at 50% 42%, rgba(10,8,6,.78) 0%, rgba(10,8,6,.56) 50%, rgba(10,8,6,.28) 82%, rgba(10,8,6,.12) 100%),
    linear-gradient(to bottom, rgba(8,6,4,.66) 0%, rgba(8,6,4,.18) 26%, rgba(8,6,4,.46) 66%, rgba(6,5,3,.96) 100%);
}
.hero::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(201,168,76,.75) 50%, transparent 100%);
}
.hero .hero-title, .hero .hero-desc { text-shadow: 0 2px 24px rgba(0,0,0,.5); }

@media (max-width: 768px) {
  .hero .hm-a { background-image: url('hero/h1-m.webp'); background-position: 46% 50%; }
  .hero .hm-b { background-image: url('hero/h2-m.webp'); background-position: 38% 60%; }
  .hero .hm-slide { animation: hmFade 20s linear infinite !important; }   /* phones: cross-fade only */
  .hero .hm-b { animation-delay: -10s !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hero .hm-slide { animation: none !important; }
  .hero .hm-b { opacity: 0; }
}