/* Shared hero layout; home spheres are scoped to mood-hero--spheres. */
.mood-hero { position: relative; box-sizing: border-box; width: 100%; padding: var(--hero-edge); margin: 0; }
.mood-br { display: none; }
@media (min-width: 900px) {
.mood-br { display: inline; } }
.mood-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 72px);

  height: calc(var(--hero-vh, 100svh) - 2 * var(--hero-edge));
  min-height: 0;
  padding: 142px clamp(32px, 6vw, 110px) 72px;
  border-radius: var(--radius-hero);
  background: var(--mood-bg);
  color: var(--mood-ink);
  overflow: hidden;
  transition: background-color .55s ease;
}
.mood-content, .mood-exhibit { position: relative; z-index: 1; min-width: 0; }
.mood-title { max-width: 760px; text-wrap: balance; }
.mood-subtitle { max-width: 550px; margin-top: 16px !important; }
.mood-actions { margin-top: 32px; }
.mood-exhibit { display: flex; flex-direction: column; align-items: center; text-align: center; }

@media (min-width: 1000px) {
.mood-subtitle .mood-br { display: none; }
}
@media (max-width: 999px) {
.mood-stage { grid-template-columns: 1fr; gap: 12px; padding: calc(var(--header-h, 80px) + 56px) 28px 42px; min-height: calc(var(--hero-vh, 100svh) - 20px); }
.mood-content { text-align: center; }
.mood-title { max-width: 760px; margin-inline: auto; }
.mood-subtitle { margin: 12px auto 0 !important; }
.mood-actions { margin-top: 26px; }
  }
@media (max-width: 599px) {
.mood-stage { padding-inline: 22px; padding-top: calc(var(--header-h, 80px) + 42px); padding-bottom: 36px; gap: 10px; }
.mood-title { max-width: 400px; }
.mood-subtitle { max-width: 350px; }
}
@media (max-width: 359px) {
.mood-stage { padding-inline: 16px; }
.mood-title { overflow-wrap: anywhere; }
}
@media (min-width: 1000px) and (max-height: 700px) {
.mood-stage { padding-top: 110px; padding-bottom: 35px; }
}

@media (prefers-reduced-motion: reduce) {
.mood-stage { transition: none; }
}

@media (max-width: 599px) {
.mood-stage { padding-top: calc(var(--header-h, 80px) + 26px); padding-bottom: 26px; }
.mood-subtitle { margin-top: 10px !important; }
.mood-actions { margin-top: 20px; }
  }
.mood-stage { padding-bottom: 90px; }
@media (max-width: 999px) {
.mood-stage { min-height: 0; grid-template-rows: auto minmax(0, 1fr); padding-top: calc(var(--header-h, 64px) + 24px); padding-bottom: calc(var(--footer-h, 64px) + 20px); }
.mood-exhibit { height: 100%; min-height: 0; }
}

@media (max-width: 999px) {
:where(html[data-hero-short]) .mood-stage { gap: 4px; padding-top: calc(var(--header-h, 64px) + 14px); padding-bottom: calc(var(--footer-h, 64px) + 12px); }
:where(html[data-hero-short]) .mood-actions { margin-top: 12px; }
}
@media (min-width: 600px) and (max-width: 999px) {
:where(html[data-hero-short-landscape]) .mood-stage { grid-template-columns: 1.2fr 1fr; grid-template-rows: minmax(0, 1fr); gap: 20px; padding-bottom: 80px; }
:where(html[data-hero-short-landscape]) .mood-content { text-align: left; }
}

/* Home banner is full-bleed: no outer margin around its background. */
.mood-hero--spheres { padding: 0; }
.mood-hero--spheres .mood-stage {
  height: var(--hero-vh, 100svh);
  display: flex;
  align-items: flex-start;
  padding: clamp(132px, 19vh, 210px) clamp(24px, 6vw, 110px) 100px;
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: 0;
  min-height: 0;
}
.mood-hero--spheres .mood-stage { justify-content: center; }
.mood-hero--spheres .mood-content { width: min(100%, 720px); margin-inline: auto; text-align: center; }
/* Feathered backdrop protects the copy while spheres pass or rest behind it. */
.mood-hero--spheres .mood-content::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -36px -28px;
  pointer-events: none;
  background: color-mix(in srgb, var(--color-bg) 50%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  -webkit-mask-image: radial-gradient(ellipse, #000 45%, transparent 72%);
  mask-image: radial-gradient(ellipse, #000 45%, transparent 72%);
}
.mood-hero--spheres .mood-title { max-width: 680px; margin: 0 auto; text-wrap: balance; }
.mood-hero--spheres .mood-subtitle { margin-inline: auto; }
.mood-hero--spheres .mood-actions { display: flex; justify-content: center; }
.hero-spheres { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hero-sphere-controls { position: absolute; inset: 0; pointer-events: none; }
.hero-sphere-control { position: absolute; translate: -50% -50%; }
.hero-reveal-word { display: inline-block; }
.mood-hero--spheres.is-reveal-pending .hero-reveal-word, .mood-hero--spheres.is-reveal-pending .mood-subtitle, .mood-hero--spheres.is-reveal-pending .mood-actions { opacity: 0; }
.mood-hero--spheres.is-revealing .hero-reveal-word { animation: hero-text-appear 1s both; animation-delay: var(--reveal-delay); }
.mood-hero--spheres.is-revealing .mood-subtitle { animation: hero-text-appear 1.1s .35s both; }
.mood-hero--spheres.is-revealing .mood-actions { animation: hero-text-appear 1.1s .55s both; }
@keyframes hero-text-appear {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); } }
@media (max-width: 599px) {
.mood-hero--spheres .mood-stage { padding-top: min(220px, 24svh); padding-inline: 22px; min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
.mood-hero--spheres .hero-reveal-word, .mood-hero--spheres .mood-subtitle, .mood-hero--spheres .mood-actions { animation: none !important; opacity: 1 !important; }
}

@media (max-width: 599px) {
  .mood-hero--spheres .mood-content { width: calc(100% - 28px); }
}