/* Cleaned hero: headline, one short line, the door, two buttons. Door intro with two endings
   (data-ending="ariadne" | "line"). Final state is the CSS default; html.cl-intro sets the
   first frame and clean.js animates from there. */
header.stage { position: relative; }
.hero--clean {
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "line" "door" "actions";
  justify-items: center; text-align: center; row-gap: 16px; align-content: center; padding-block: 72px 16px;
}
.hero--clean h1 { grid-area: title; margin: 0; }
.hero--clean .lead--short, .hero--clean .reserve--line { grid-area: line; margin: 0; font-size: 22px; line-height: 30px; color: var(--on-stage-soft); }
/* Room for the longest title and subtitle in any of the eight languages: invisible copies sit in
   the same grid cells (their text is drawn from attributes, so it is not page text). The title's
   spare row comes from the space above it, so the door and the buttons keep their place in
   every language; a shorter title sits on the subtitle, a longer one grows upwards. */
.hero--clean .reserve { display: grid; visibility: hidden; pointer-events: none; user-select: none; width: 100%; }
.hero--clean .reserve > span { grid-area: 1 / 1; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
.hero--clean .reserve > span::before { content: attr(data-text); }
.hero--clean .reserve--title { grid-area: title; }
.hero--clean h1, .hero--clean .reserve--title { margin-top: -1lh; }
.hero--clean h1 { align-self: end; }
.hero--clean .lead--short { align-self: start; }
.hero--clean .hero__actions { grid-area: actions; justify-content: center; margin-top: 8px; }
.hero--clean .cl-door { grid-area: door; width: clamp(200px, 34svh, 330px); margin-block: 8px 0; }

.cl-door { grid-area: door; }

.cl-door { position: relative; aspect-ratio: 300 / 360; justify-self: center; align-self: center; }
.cl-glow { position: absolute; inset: -14% -22% -6%; pointer-events: none;
  background: radial-gradient(closest-side at 50% 55%, rgba(255, 201, 77, .40), rgba(255, 201, 77, .12) 55%, rgba(255, 201, 77, 0)); }
.cl-scene { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cl-outline { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.cl-ariadne { position: absolute; left: 50%; bottom: 2%; width: 58%; aspect-ratio: 280 / 240; pointer-events: none;
  transform-origin: 50% 100%; transform: translate(-50%, 0) scale(1);
  filter: drop-shadow(0 0 1.4px #1F2A30) drop-shadow(0 0 .8px #1F2A30); }
.cl-ariadne.is-away { opacity: 0 !important; transition: opacity .25s; }
/* After the intro she answers taps (clean.js). */
.cl-ariadne.cl-tappable { pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cl-ariadne svg { display: block; width: 100%; height: 100%; }
.cl-line { position: absolute; left: 21%; right: 21%; top: 36%; margin: 0; text-align: center;
  font: 800 clamp(24px, 3vw, 34px)/1.04 var(--display); letter-spacing: -0.025em; color: #1F2A30; }
.cl-orb { position: absolute; left: 0; top: 0; width: 140px; height: 140px; margin: -70px 0 0 -70px; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 238, 190, .95), rgba(255, 201, 77, .55) 38%, rgba(255, 201, 77, 0)); }

/* The guide's button keeps the glow ring after the intro; focus shows outside it. */
.hero--clean .button--sun.cl-lit { box-shadow: var(--shadow-glow); }
.hero--clean .button--sun:focus-visible { outline: 3px solid #F4F4F1; outline-offset: 9px; }

/* First frame, before clean.js takes over (and only when motion is allowed). */
html.cl-intro .cl-glow, html.cl-intro .cl-spill, html.cl-intro .cl-threshold,
html.cl-intro .cl-fill, html.cl-intro .cl-line, html.cl-intro .cl-ariadne { opacity: 0; }
html.cl-intro .cl-outline { stroke-dashoffset: 1; }

/* Ariadne's "Hi there!" while she waves; hidden in the final state. */
.cl-hi { position: absolute; right: 61%; top: 47%; margin: 0; padding: 8px 14px; border-radius: 16px 16px 4px 16px;
  background: #FFFFFF; color: #1F2A30; font: 700 16px/1.2 var(--display); white-space: nowrap; pointer-events: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .28); opacity: 0; transform-origin: 100% 100%; }
/* Her answers when tapped: above her head, wrapping, popping in and out. */
.cl-hi.is-reply { right: auto; left: 50%; top: auto; bottom: 56%; width: max-content; max-width: min(260px, 78vw); white-space: normal;
  text-align: center; border-radius: 16px; transform-origin: 50% 100%; transform: translateX(-50%) scale(.7); opacity: 0;
  transition: opacity .15s ease-out, transform .22s cubic-bezier(.3, 1.6, .5, 1); z-index: 2; }
.cl-hi.is-reply.is-shown { opacity: 1; transform: translateX(-50%) scale(1); }
@media (prefers-reduced-motion: reduce) { .cl-hi.is-reply { transition: none; } }

@media (max-height: 820px) and (min-width: 761px) {
  .hero--clean { padding-block: 48px 8px; row-gap: 12px; }
  .hero--clean .cl-door { width: clamp(190px, 31svh, 300px); }
}

@media (max-width: 760px) {
  .hero--clean { row-gap: 14px; padding-block: 40px 12px; }
  .hero--clean .lead--short, .hero--clean .reserve--line { font-size: 18px; line-height: 26px; }
  .hero--clean .cl-door { width: min(62vw, 26svh, 250px); margin-block: 4px 0; }
  .hero--clean .hero__actions { margin-top: 4px; }
  .cl-line { font-size: 22px; }
  .cl-hi { font-size: 14px; padding: 6px 11px; }
}

/* Short phones (iPhone SE size): a smaller door and tighter spacing keep the cue in view. */
@media (max-width: 760px) and (max-height: 700px) {
  .hero--clean { padding-block: 16px 4px; row-gap: 8px; }
  .hero--clean h1, .hero--clean .reserve--title { font-size: 31px; line-height: 33px; }
  .hero--clean .cl-door { width: min(56vw, 22svh, 200px); }
  .hero--clean .hero__actions { gap: 8px; }
  .hero--clean .hero__actions .button { min-height: 46px; }
  .scroll-cue { margin-bottom: 6px; padding-block: 4px; }
}

/* Narrow phones: a slightly smaller title keeps the longest translations to two or three rows,
   with room above them under the top bar. */
@media (max-width: 380px) {
  .hero--clean h1, .hero--clean .reserve--title { font-size: 35px; line-height: 37px; }
}
@media (max-width: 380px) and (max-height: 700px) {
  .hero--clean h1, .hero--clean .reserve--title { font-size: 28px; line-height: 30px; }
}