/* Optional mobile composition. ?hero=classic shows the previous layout.
   Removing hero-layout.js and this stylesheet restores the previous layout. */
.purple-decoration { display: none; }
.purple-mascot { aspect-ratio: 1; }
.purple-mascot__body { display: block; width: 100%; height: 100%; }
.purple-mascot__face { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.purple-mascot__lid { opacity: 0; clip-path: inset(0 0 100% 0); }
@media (prefers-reduced-motion: reduce) {
  .purple-mascot__face { display: none; }
}
@media (max-width: 1024px), (max-width: 1100px) and (max-height: 550px) {
  /* A separate layer puts this character behind the existing edge foliage.
     It scrolls away with the opening screen; the yellow actor stays in its layer. */
  html[data-hero-layout="spacious"] body[data-view="home"] > .purple-decoration {
    display: block;
    position: absolute;
    inset: 0 0 auto;
    height: max(100svh, calc(var(--hero-yellow-top, 50svh) + 284px));
    overflow: clip;
    z-index: 2;
    pointer-events: none;
    user-select: none;
  }
  html[data-hero-layout="spacious"] .purple-mascot {
    display: block;
    top: calc(var(--hero-yellow-top, calc(50svh + 150px)) + 60px);
    right: 0;
    bottom: auto;
    width: clamp(170px, 46vw, 208px);
    transform: rotate(-10deg);
    transform-origin: 50% 70%;
  }
  html[data-hero-layout="spacious"] .tour-mode:not(.tour-motion-ready) > .purple-decoration {
    visibility: hidden;
  }
  html[data-hero-layout="spacious"] body:is(.menu-open, .mobile-menu-present, .reading-mobile-story) > .purple-decoration {
    visibility: hidden;
  }

  html[data-hero-layout="spacious"] .hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: calc(100svh - var(--header-height) - env(safe-area-inset-top, 0px));
    margin: 0 auto 28px;
    /* Balance the text around the screen centre, accounting for the header
       already above it. Extra room stays below the CTA, before the advisor.
       A minimum, rather than fixed height, also accommodates larger text. */
    padding-block: 32px calc(32px + var(--header-height) + env(safe-area-inset-top, 0px));
  }

  html[data-hero-layout="spacious"] .hero-copy > h1,
  html[data-hero-layout="spacious"] .hero-copy > .hero-description,
  html[data-hero-layout="spacious"] .hero-copy > .hero-cta {
    flex-shrink: 0;
  }

  html[data-hero-layout="spacious"] .decor-mascot-peek {
    top: var(--hero-yellow-top, calc(50svh + 150px));
    bottom: auto;
    left: 0;
    width: clamp(180px, 48vw, 208px);
  }

  /* Keep the larger ornament inside its existing animation/decorative layer. */
  html[data-hero-layout="spacious"] .decorations {
    height: max(100svh, calc(var(--hero-yellow-top, 50svh) + 224px));
  }
}

/* On a short landscape screen, prioritise fitting the complete invitation. */
@media (max-width: 1100px) and (max-height: 550px) and (orientation: landscape) {
  html[data-hero-layout="spacious"] .hero-copy {
    padding-block: 8px;
  }
}