/* The sky and cloud-sea artwork is decorative. Soft theme-colored veils keep
   live copy legible over the illustration without enclosing it in a card. */
.moonsea-hero { position: relative; isolation: isolate; width: 100%; min-height: 100svh; min-height: 100dvh; display: flex; align-items: center; overflow: hidden; background: var(--cream); }
.hero-backdrop { position: absolute; z-index: -2; inset: 0; }
.hero-backdrop picture { display: block; width: 100%; height: 100%; }
.hero-backdrop img,.hero-loop { width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.hero-loop { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .6s ease; }
.hero-loop.is-ready { opacity: 1; }
.hero-motion-toggle { position: absolute; right: 2rem; bottom: max(1.5rem,env(safe-area-inset-bottom)); display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.8rem; padding: .65rem .9rem; border: 1px solid var(--line); border-radius: 3rem; background: var(--surface); color: var(--ink); font-size: .68rem; }
.hero-motion-toggle svg { width: 1rem; height: 1rem; }
.hero-motion-toggle[hidden],.hero-motion-play,.hero-motion-toggle.is-paused .hero-motion-pause { display: none; }
.hero-motion-toggle.is-paused .hero-motion-play { display: block; }
.moonsea-hero::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,color-mix(in srgb,var(--cream) 58%,transparent),transparent 58%); pointer-events: none; }
.hero-content { width: 46%; max-width: 45rem; margin-left: clamp(2rem,7vw,9rem); padding-block: 5rem; transform: translateY(-5vh); }
.hero-content h1 { margin-block: 1.6rem 2.4rem; font-family: var(--font-display); font-size: clamp(3.2rem,5.6vw,5.8rem); font-weight: var(--font-heading-weight); line-height: 1.06; letter-spacing: -.025em; }
.hero-content h1 em { color: var(--moonlight); font-weight: inherit; }
/* This non-interactive heading only receives focus after the welcome closes. */
.hero-content h1:focus { outline: none; }
.hero-actions { display: flex; align-items: center; gap: 1.3rem; }
.hero-actions .button { min-width: 10rem; }
.hero-replay { min-height: 2.75rem; padding: .65rem .3rem; color: var(--ink); font-size: .72rem; }
.hero-replay > span { margin-left: .35rem; }
.hero-replay:hover { color: var(--moonlight); }
.hero-replay[hidden] { display: none; }
.hero-scroll { position: absolute; left: 50%; bottom: max(1.5rem,env(safe-area-inset-bottom)); translate: -50% 0; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); font-size: 1.1rem; }
/* Dark honey remains readable on the lavender patches of the light artwork. */
[data-theme="light"] .moonsea-hero { --moonlight: #654020; }
[data-theme="light"] .moonsea-hero::before { background: linear-gradient(90deg,color-mix(in srgb,var(--cream) 60%,transparent),transparent 55%); }
@media (min-aspect-ratio: 1/1) and (max-aspect-ratio: 3/2) {
  .hero-content { align-self: flex-start; padding-block: max(13svh,7rem) 4rem; transform: none; }
  .hero-content h1 { font-size: clamp(3rem,5.2vw,4.3rem); }
}
@media (max-aspect-ratio: 1/1) {
  .moonsea-hero { align-items: flex-start; }
  .hero-backdrop img,.hero-loop { object-position: 50% 65%; }
  .moonsea-hero::before { background: linear-gradient(180deg,color-mix(in srgb,var(--cream) 28%,transparent),transparent 45%); }
  [data-theme="light"] .moonsea-hero::before { background: linear-gradient(180deg,color-mix(in srgb,var(--cream) 62%,transparent),color-mix(in srgb,var(--cream) 25%,transparent) 32%,transparent 50%); }
  .hero-content { width: 100%; max-width: none; margin: 0; padding: max(11svh,6.5rem) 1.5rem 5rem; transform: none; text-align: center; }
  .hero-content h1 { margin-block: 1.1rem 1.7rem; font-size: clamp(2.75rem,8vw,4.5rem); letter-spacing: -.025em; }
  .hero-actions { justify-content: center; gap: 1.15rem; }
  .hero-actions .button { min-width: 8.5rem; }
  .hero-replay { font-size: .68rem; }
  .hero-scroll { width: 2.5rem; height: 2.5rem; bottom: max(1.1rem,env(safe-area-inset-bottom)); }
  .hero-motion-toggle { right: 1rem; bottom: max(1.1rem,env(safe-area-inset-bottom)); min-height: 2.5rem; padding: .6rem; font-size: .6rem; gap: .3rem; }
  .hero-scroll { left: 1rem; translate: none; }
}
@media (max-width: 23em) {
  .hero-content h1 { font-size: 2.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-loop,.hero-motion-toggle { display: none; }
}
@media (max-height: 40em) {
  .hero-content { padding-block: 5.3rem 4.5rem; transform: none; }
  .hero-content h1 { margin-block: .85rem 1.25rem; font-size: clamp(2.6rem,5vw,3.7rem); }
  .hero-actions .button { min-width: 8rem; font-size: .78rem; }
  .hero-replay { font-size: .65rem; }
  .hero-scroll { bottom: .8rem; width: 2.3rem; height: 2.3rem; }
}
@media (max-height: 40em) and (max-aspect-ratio: 1/1) {
  .hero-content h1 { margin-block: .5rem 1rem; font-size: 2.3rem; }
}