#hero-scene {
  background: var(--color-bg-matte-black);
}

html.is-entrance-active #hero-scene {
  content-visibility: visible;
  pointer-events: none;
}

/* Layer 0 — Background image (transform owned by heroAmbient.js / GSAP on .hero-visual-base) */
.hero-visual-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  transform-origin: center center;
  will-change: transform;
}

.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-bg picture,
.hero-bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-bg img {
  object-fit: cover;
  object-position: center center;
}

/*
 * Layer 1 — Soft cinematic readability overlay.
 * Deep charcoal falloff (~40% at base) — natural lighting, not a flat black slab.
 */
.hero-cinematic-tone {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(15, 13, 10, 0.45) 0%,
    rgba(15, 13, 10, 0.32) 18%,
    rgba(15, 13, 10, 0.18) 36%,
    rgba(15, 13, 10, 0.08) 52%,
    transparent 68%);
}

/* Layer 10 — Background light breathing (opacity + scale owned by heroAmbient.js) */
.hero-light-bleed {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 35%, rgba(229, 196, 131, 0.12) 0%, transparent 60%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transform-origin: center center;
  will-change: transform, opacity;
}

/* Layer 10 — Atmospheric fog (opacity + drift owned by heroAmbient.js) */
.hero-fog {
  position: absolute;
  inset: 0;
  width: 200%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 10;
  opacity: 0;
  will-change: transform, opacity;
}

.hero-fog--2 {
  transform: scaleX(-1);
}

.hero-fog svg {
  width: 100%;
  height: 100%;
  filter: blur(64px);
}

.hero-fog--1 svg {
  color: rgba(59, 66, 56, 0.45);
}

.hero-fog--2 svg {
  color: rgba(42, 51, 38, 0.45);
}

/* Layer 10 — Gold dust canvas */
.hero-gold-dust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  will-change: transform;
}

/* Layer 20 — Editorial frame / typography */
.hero-frame {
  position: relative;
  z-index: 20;
  width: 100%;
  max-width: 480px;
  min-height: 100dvh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-left: 1px solid rgba(255, 255, 255, 0.02);
  border-right: 1px solid rgba(255, 255, 255, 0.02);
}

.hero-header {
  display: flex;
  justify-content: center;
  padding: 3rem 1.5rem 0;
}

.hero-monogram {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.hero-monogram span {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 300;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.3);
  padding-left: 0.35em;
}

.hero-monogram__line {
  width: 1.5rem;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin-top: 0.625rem;
}

.hero-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 1.5rem 1.5rem;
  margin-top: auto;
}

.hero-welcome {
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1rem;
  padding-left: 0.25em;
}

.hero-names {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  margin: 0.5rem 0 2rem;
}

.hero-names h2 {
  font-family: var(--font-script);
  font-size: clamp(3rem, 12vw, 4.5rem);
  font-weight: 300;
  color: #fff;
  margin: 0;
  line-height: 1;
  text-shadow: 0 4px 12px rgba(15, 13, 10, 0.35);
}

.hero-names .connector {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-style: italic;
  color: rgba(229, 196, 131, 0.75);
  margin: 0.75rem 0;
}

.hero-date {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(229, 196, 131, 0.8);
  margin-bottom: 1rem;
  padding-left: 0.25em;
}

.hero-date .dot {
  color: rgba(255, 255, 255, 0.3);
  margin: 0 0.5rem;
}

.hero-tagline {
  font-family: var(--font-display);
  font-size: 14px;
  font-style: italic;
  color: rgba(255, 255, 255, 0.6);
  max-width: 280px;
  line-height: 1.6;
  margin: 0 0 2.5rem;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.hero-cta {
  width: 100%;
  max-width: 20rem;
  margin-bottom: 2rem;
}

.hero-cta button {
  width: 100%;
  height: 3rem;
  padding: 0 2.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(229, 196, 131, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(26, 26, 26, 0.15);
  font-family: var(--font-sans);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-accent-gold-light);
  box-shadow: 0 8px 32px rgba(15, 13, 10, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.05);
  transition: background 0.6s var(--ease-out), border-color 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out), transform 0.15s ease;
}

.hero-cta button:hover {
  background: rgba(229, 196, 131, 0.1);
  border-color: rgba(229, 196, 131, 0.35);
  box-shadow: 0 0 16px rgba(229, 196, 131, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.08);
}

.hero-cta button:active { transform: scale(0.98); }

.hero-scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 1rem;
  color: rgba(255, 255, 255, 0.3);
}

.hero-scroll span {
  font-family: var(--font-sans);
  font-size: 8px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(229, 196, 131, 0.6);
  padding-left: 0.25em;
}

.hero-scroll__track {
  width: 1px;
  height: 3rem;
  background: rgba(255, 255, 255, 0.05);
  position: relative;
  overflow: hidden;
}

.hero-scroll__indicator {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 33%;
  background: rgba(229, 196, 131, 0.4);
}

.hero-scroll__indicator.is-animated {
  animation: scroll-line 2.2s infinite cubic-bezier(0.15, 0.85, 0.45, 1);
}

#hero-scene.is-sleeping .hero-light-bleed,
#hero-scene.is-sleeping .hero-fog,
.is-sleeping .hero-scroll__indicator.is-animated {
  animation-play-state: paused;
}

@supports not (backdrop-filter: blur(12px)) {
  .hero-cta button { background: rgba(26, 26, 26, 0.4); }
}

@media (min-width: 768px) {
  .hero-names h2 { font-size: 4.5rem; }
  .hero-frame { border-left: none; border-right: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-light-bleed,
  .hero-fog {
    opacity: 0 !important;
  }
}