/* The cloud deck spans the viewport; the existing hero content keeps its grid. */
body.cloud-journey { overflow-x: clip; }
.landing-header { height: 88px; min-height: 0; padding-block: 0; flex-wrap: nowrap; }
.landing-header .brand { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
.landing-header .brand-icon { display: block; width: 44px; height: 44px; margin: 0; }
.landing-header nav { width: auto; }
.cloud-journey .hero { position: relative; isolation: isolate; padding-bottom: 160px; }
.cloud-journey .hero { grid-template-areas: "intro sky" "actions sky"; row-gap: 0; }
.hero .intro { grid-area: intro; align-self: end; }
.hero-actions { grid-area: actions; align-self: start; }
.hero .sky-window { grid-area: sky; }
footer > .sky-motion { font-size: 13px; }
.hero-cloud-floor { position: absolute; z-index: -1; left: calc(50% - 50vw); bottom: -70px; width: 100vw; height: clamp(340px, 35vw, 530px); overflow-x: clip; overflow-y: visible; pointer-events: none; }
.hero-cloud-floor img { display: block; width: 100%; height: 100%; object-fit: fill; filter: brightness(var(--cloud-light)) sepia(var(--cloud-warmth)); mask-image: linear-gradient(180deg, transparent, #000 20%, #000 62%, transparent); }
/* One world contains the foreground deck and every emerging cloud form. */
.hero-cloud-volume { position: absolute; z-index: -1; top: var(--cloud-volume-top, 0px); left: calc(50% - 50vw); width: 100vw; height: calc(100% + 70px - var(--cloud-volume-top, 0px)); pointer-events: none; }
.hero-cloud-volume .cloud-sculpture { mask-image: linear-gradient(#000 80%, transparent); }
/* The live volume replaces the photo deck; display none also skips painting it. */
.hero[data-cloud-volume="webgl"] .hero-cloud-floor { display: none; }
.hero[data-cloud-volume="webgl"] .hero-cloud-floor img { animation: none; }
.hero[data-cloud-volume="webgl"] .sky-scene { isolation: auto; }
.hero[data-cloud-volume="webgl"] .sky-stars,
.hero[data-cloud-volume="webgl"] .sky-sun,
.hero[data-cloud-volume="webgl"] .sky-moon { z-index: -2; }
.hero-cloud-flight { display: none; position: fixed; z-index: 4; inset: -20vh -15vw -15vh; pointer-events: none; background: var(--entry-mist, #d7e3ed); mask-image: linear-gradient(180deg, transparent, #000 18%, #000); }
.hero-cloud-flight::before, .hero-cloud-flight::after { content: ''; position: absolute; inset: -20%; background: url('/assets/cloud-bank.webp') center / cover no-repeat; filter: brightness(var(--cloud-light)) sepia(var(--cloud-warmth)); }
.hero-cloud-flight::after { inset: -55% -65%; transform: rotate(180deg); opacity: .75; }
:root { --entry-mist: #d7e3ed; }
:root[data-sky="sunrise"] { --entry-mist: #edd8ca; }
:root[data-sky="sunset"] { --entry-mist: #c9b3b8; }
:root[data-sky="nighttime"] { --entry-mist: #344860; }
:root[data-sky="nighttime"] .hero-cloud-floor img { filter: brightness(.35) sepia(.65) hue-rotate(170deg); }
/* All motion is transform/opacity; no scroll lock, canvas, or layout animation. */
@media (prefers-reduced-motion: no-preference) {
  :root[data-hero-entry="complete"] .hero-cloud-floor img { animation: hero-floor-drift 72s ease-in-out infinite alternate; }
  :root:not([data-clouds-paused="false"]) .hero-cloud-floor img { animation-play-state: paused; }
  :root[data-hero-entry="pending"] .hero-cloud-flight,
  :root[data-hero-entry="rising"] .hero-cloud-flight { display: block; }
  :root[data-hero-entry="pending"] .hero .intro,
  :root[data-hero-entry="pending"] .hero-actions,
  :root[data-hero-entry="pending"] .sky-controls,
  :root[data-hero-entry="pending"] .sky-scene { opacity: 0; }
  :root[data-hero-entry="pending"] .hero-cloud-floor img { transform: translateY(-65vh) scale(1.65); }
  :root[data-hero-entry="pending"] .hero-cloud-volume { opacity: 0; }
  :root[data-hero-entry="rising"] .hero-cloud-volume { animation: hero-volume-emerge 3.2s ease-out both; }
  :root[data-hero-entry="rising"] .hero-cloud-flight { animation: hero-cloud-ascent 3.2s cubic-bezier(.42,0,.2,1) both; }
  :root[data-hero-entry="rising"] .hero-cloud-floor img { animation: hero-floor-settle 3.2s cubic-bezier(.22,.6,.3,1) both; }
  :root[data-hero-entry="rising"] .hero .intro { animation: hero-copy-emerge 1.1s 1.2s ease-out both; }
  :root[data-hero-entry="rising"] .hero-actions { animation: hero-copy-emerge 1.1s 1.2s ease-out both; }
  :root[data-hero-entry="rising"] .sky-controls { animation: hero-copy-emerge .8s 2s ease-out both; }
  :root[data-hero-entry="rising"] .sky-scene { animation: hero-shapes-emerge 1s 2.1s ease-out both; }
}
@keyframes hero-floor-drift {
  from { transform: translate3d(-.8%,0,0) scale(1.02); }
  to { transform: translate3d(.8%,0,0) scale(1.02); }
}
@keyframes hero-cloud-ascent {
  0%, 8% { opacity: 1; transform: translate3d(0,0,0) scale(1.15); }
  50% { opacity: .95; }
  100% { opacity: 0; transform: translate3d(0,110vh,0) scale(1); }
}
@keyframes hero-floor-settle {
  from { transform: translate3d(0,-65vh,0) scale(1.65); }
  to { transform: translate3d(-.8%,0,0) scale(1.02); }
}
@keyframes hero-copy-emerge {
  from { opacity: 0; transform: translate3d(0,20px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes hero-shapes-emerge { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-volume-emerge {
  0%, 20% { opacity: 0; }
  60%, 100% { opacity: 1; }
}
@media (max-width: 760px) {
  .landing-header { height: 76px; }
  .cloud-journey .hero {
    --mobile-cloud-height: clamp(220px, 62vw, 320px);
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "intro" "sky" "actions";
    gap: 0;
    padding: 20px 0 56px;
  }
  .hero .intro, .hero-actions { align-self: auto; }
  .hero .eyebrow { margin-bottom: 12px; }
  .hero h1 { font-size: clamp(40px, 10.5vw, 62px); margin-bottom: 0; }
  .hero .sky-window { position: relative; margin: 4px 0 18px; }
  .hero .sky-scene { height: var(--mobile-cloud-height); aspect-ratio: auto; overflow: visible; }
  .hero-cloud-volume { height: calc(var(--mobile-cloud-height) + 88px); }
  .hero-cloud-floor { bottom: 0; height: var(--mobile-cloud-height); }
  .hero-cloud-floor img { object-fit: cover; object-position: 50% 60%; }
  .hero-actions .lede { max-width: 34ch; margin-bottom: 18px; font-size: 16px; line-height: 1.5; }
  .hero-actions .button { width: 100%; justify-content: space-between; min-height: 52px; padding: 14px 20px; }
  .hero-actions .signin-prompt { margin-top: 8px; font-size: 13px; }
}