/* 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;
  /* Soft sky: blue at the top melting into the page colour at the bottom,
     with eased stops so there is no visible band. */
  background: linear-gradient(to bottom,
    #72acff 0%,
    #86bafe 18%,
    #a9d3fd 38%,
    #cdeafd 58%,
    #e9f8fe 76%,
    var(--color-bg) 94%);
  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;
  /* No tint: only the blur, so the sky gradient shows through without a glow. */
  background: 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 .6s both; animation-delay: var(--reveal-delay); }
.mood-hero--spheres.is-revealing .mood-subtitle { animation: hero-text-appear .6s .1s both; }
.mood-hero--spheres.is-revealing .mood-actions { animation: hero-text-appear .6s .2s 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); }
  /* Phone: the banner stops short of the fold so the top of the first project
     cover (feed gap + card title sit in between) peeks out under the button. */
  .mood-hero--spheres .mood-stage { height: auto; min-height: calc(var(--hero-vh, 100svh) - 240px); padding-top: clamp(100px, 24svh - 30px, 190px); padding-bottom: 72px; }
}

/* Home video banner: full-bleed clip behind the copy. The colours are fixed —
   the copy sits on footage, so it does not follow the site theme. */
.mood-hero--video { padding: 0; overflow: clip; }
.mood-hero--video .mood-stage {
  height: var(--hero-vh, 100svh);
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: calc(var(--header-h, 64px) + 20px) clamp(24px, 4vw, 72px) clamp(32px, 8vh, 88px);
  border-radius: 0;
  background: #2b63c9;
  color: #fff;
}
.hero-video { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.hero-video__poster, .hero-video__clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-video__clip { opacity: 0; transition: opacity .5s ease; }
.hero-video__clip.is-playing { opacity: 1; }
/* Landscape: the copy sits bottom right, in the open sky beside the figure. */
.mood-hero--video .mood-content { width: clamp(320px, 35vw, 640px); max-width: 100%; margin: 0; text-align: left; }
/* Feathered blur keeps the copy readable wherever it lands on the footage. */
.mood-hero--video .mood-content::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -80px -96px;
  pointer-events: none;
  background: rgb(24 62 150 / .3);
  -webkit-backdrop-filter: blur(26px);
  backdrop-filter: blur(26px);
  -webkit-mask-image: radial-gradient(ellipse closest-side, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse closest-side, #000 40%, transparent 100%);
}
.mood-hero--video .mood-title { max-width: none; margin: 0; color: inherit; text-wrap: balance; }
.mood-hero--video .mood-subtitle { margin-inline: 0 !important; color: inherit; }
.mood-hero--video .mood-actions { display: flex; justify-content: flex-start; }
.mood-hero--video.is-reveal-pending .hero-reveal-word, .mood-hero--video.is-reveal-pending .mood-subtitle, .mood-hero--video.is-reveal-pending .mood-actions { opacity: 0; }
.mood-hero--video.is-revealing .hero-reveal-word { animation: hero-text-appear .6s both; animation-delay: var(--reveal-delay); }
.mood-hero--video.is-revealing .mood-subtitle { animation: hero-text-appear .6s .1s both; }
.mood-hero--video.is-revealing .mood-actions { animation: hero-text-appear .6s .2s both; }
@media (prefers-reduced-motion: reduce) {
.mood-hero--video .hero-reveal-word, .mood-hero--video .mood-subtitle, .mood-hero--video .mood-actions { animation: none !important; opacity: 1 !important; }
.hero-video__clip { display: none; }
}
/* Portrait screens: the vertical clip fills the whole screen height; taller
   phones crop its sides (a little more on the left, to keep the hand in frame).
   The copy moves to the bottom of the banner. */
@media (max-aspect-ratio: 4/5) {
.mood-hero--video .mood-stage { align-items: flex-end; padding: 0 22px 30px; }
.hero-video__poster, .hero-video__clip { object-position: 58% 50%; }
/* The copy lies on the yellow sweater here, so it is dark, not white. */
.mood-hero--video .mood-content { width: 100%; text-align: center; color: #111; }
.mood-hero--video .mood-title { margin-inline: auto; }
.mood-hero--video .mood-subtitle {
  margin-inline: auto !important;
  /* Keep line breaks stable from the full-width frame to its grid inset. */
  width: calc(var(--hero-inline-size, 100vw) - 44px - 2 * var(--hero-scroll-gutter, 16px));
}
.mood-hero--video .mood-actions { justify-content: center; }
/* Blur only, no tint: a feathered ellipse behind the copy and the button. */
.mood-hero--video .mood-content::before {
  inset: -44px -22px -30px;
  background: transparent;
  -webkit-mask-image: radial-gradient(ellipse closest-side, #000 35%, transparent 100%);
  mask-image: radial-gradient(ellipse closest-side, #000 35%, transparent 100%);
}
}