/* Orli v3 · home hero · "the school world"
   ---------------------------------------------------------------------------
   One new Orliverse island: a felt-and-clay primary school on its round craft
   board, floating in the Orliverse sky the live hero already uses, with four
   hazy islands far behind and two soft clouds in front. The words sit in the
   clear haze on the sun side, as today. This file is the composed picture on
   its own: without script, under Still motion or with 3D off nothing else is
   needed. lib/hero.js adds the life (drift, the first moment, the peek and
   its pop, the dive into the classroom and the landing).

   Places are in the stage's own units, as ../final/hero.css: x and y in % of
   the stage, a width in --u (a hundredth of the stage width on a tall
   window; on a wide one the smaller of 1vw and 1.7svh). On a tall window
   lib/hero.js may fit the island group under the words with a transform
   (never a layout change, so nothing shifts).

   The five places on the island are links laid over the picture, each in
   its own box (fractions of the island picture, the same numbers as
   lib/data.js).

   System tokens only (shell.css): space, type, radii, shadow, motion, the
   glass film --s-film-*. No time-of-day light layers (see README).
   ------------------------------------------------------------------------- */

.sw {
  --sw-header: var(--o-header-h);
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 100%; grid-template-rows: auto var(--sw-dive, 0px);
  /* the sky itself, 40 × 22 px, until the real one paints (the live hero's
     inlined copy of the same picture) */
  background: #f6d6bd url("data:image/webp;base64,UklGRowAAABXRUJQVlA4IIAAAABwBQCdASooABYAPrVOo0wypCMiKrgKAlAWiWMAxm/FgM73bwzZV+IHRshZjqMvCq4X3EwAAP7wT1pagFFTJ9fzavn0c9WDHWGAf3xnkewRsa0GkRRbd/VoCl5mxw1cRX7ai8I5de+CJ4FJvYJmHC88VuBxyESQD8sgcNZi5aAAAA==") 30% 0 / cover no-repeat;
}
@media not (min-aspect-ratio: 5/4) {
  .sw { background-image: url("data:image/webp;base64,UklGRn4AAABXRUJQVlA4IHIAAABwBQCdASoUACQAPqVAmkmxI6KhNVv8AiAUiWUAt7g3EzpTDNG9PM1Fu5MYM8rJ/XsjqnXAAP7xQ2T/YqmZXrTGmsrRWVr29cXxp5Iwy7siQ3y+v6RGMX7mdcj2U+eYQHCDQISyvI2tWljOKiPpRMgAAAA="); background-position: 30% 100%; }
}

/* The dive's scroll is kept from the first paint, so the page never grows
   under you: .85 of a window on wide screens and .75 on tall ones. Still and
   3D off have no dive, and show the classroom as the next picture instead. */
html.js:not([data-motion="still"]):not([data-3d="off"]) .sw { --sw-dive: calc(max(100svh, 560px) * .85); }
@media not (min-aspect-ratio: 5/4) {
  html.js:not([data-motion="still"]):not([data-3d="off"]) .sw { --sw-dive: calc(max(100svh, 560px) * .75); }
}
html.js:not([data-motion="still"]):not([data-3d="off"]) .sw + .sw-class { display: none; }
.sw.is-dive + .sw-class { display: none; }

/* The sky runs up under the shell's header (clear at the top of the page,
   glass once scrolled). Without script the plain noscript links stay above. */
html.js .sw { margin-block-start: calc(-1 * var(--sw-header)); }
html:not(.js) .sw { --sw-header: 0px; }

/* ---------------------------------------------------------------- stage */
.sw__stage {
  --u: 1vw;
  grid-area: 1 / 1 / 3 / 2; align-self: start;
  position: sticky; top: 0; z-index: 0;
  height: 100svh; min-height: 560px; overflow: hidden; contain: layout paint;
}
@media (min-aspect-ratio: 5/4) {
  .sw__stage { --u: min(1vw, 1.7svh); }
}

/* The sky: the exact shape of its picture, so a fit transform is exact. */
.sw__sky-fit { position: absolute; inset: 0; transform-origin: 0 0; }
.sw__sky { position: absolute; display: block; max-width: none; }
@media (min-aspect-ratio: 5/4) {
  .sw__sky { left: 0; top: -9%; width: 100%; height: 127%; object-fit: cover; object-position: 34% 0; }
}
@media not (min-aspect-ratio: 5/4) {
  .sw__sky {
    --sky-h: max(116svh, 650px, 179.2vw);
    height: var(--sky-h); width: calc(var(--sky-h) * .5581);
    bottom: -8%; left: calc((100% - var(--sky-h) * .5581) * .3);
  }
}
.sw__world { --sw-group: 84; position: absolute; inset: 0; transform-origin: 50% 100%; }

/* A layer: centred on its place, sized in --u, in its picture's ratio. */
.sw__far, .sw__isl, .sw__cloud {
  position: absolute; display: block;
  left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
  width: calc(var(--w) * var(--u));
  margin-inline-start: calc(var(--w) * var(--u) / -2);
  margin-block-start: calc(var(--w) * var(--u) / var(--ar) / -2);
  will-change: transform;
}
.sw__far { aspect-ratio: var(--ar); height: auto; pointer-events: none; opacity: var(--haze, .9); }
.sw__cloud { height: auto; pointer-events: none; opacity: .92; }
.sw__isl { --ar: 1.588; aspect-ratio: var(--ar); }
.sw__isl > img { display: block; width: 100%; height: 100%; -webkit-user-drag: none; user-select: none; pointer-events: none; }

/* ------------------------------------------------------------ the places
   Five links laid over the picture. At rest you see only the picture; under
   the pointer (or the keyboard) the place brightens a little and its bubble
   rises. The ring sits round the place's own shape. */
.sw__place {
  position: absolute; display: block;
  left: calc(var(--x0) * 100%); top: calc(var(--y0) * 100%);
  width: calc((var(--x1) - var(--x0)) * 100%); height: calc((var(--y1) - var(--y0)) * 100%);
  border-radius: var(--r, 50%);
  -webkit-tap-highlight-color: transparent;
}
.sw__place::before {
  content: ""; position: absolute; inset: 6%; border-radius: inherit; pointer-events: none;
  background: radial-gradient(closest-side, rgb(255 250 236 / .55), rgb(255 250 236 / 0));
  opacity: 0; transition: opacity var(--o-t-interact) var(--o-ease);
  will-change: opacity;   /* its own layer: the glow never repaints the island */
}
.sw__place:is(:hover, [data-peek])::before { opacity: 1; }
.sw__place:focus, .sw__place:focus-visible { outline: none; }
.sw__place:focus-visible::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  outline: var(--o-focus-ring); outline-offset: var(--o-focus-offset);
}
[data-sw-place="classroom"] { --x0: .012; --y0: .17;  --x1: .372; --y1: .5;   --r: 46% / 50%; }
[data-sw-place="gate"]      { --x0: .375; --y0: .655; --x1: .54;  --y1: .905; }
[data-sw-place="lunch"]     { --x0: .378; --y0: .05;  --x1: .68;  --y1: .645; --r: 40%; }
[data-sw-place="calm"]      { --x0: .69;  --y0: .235; --x1: .89;  --y1: .455; }
[data-sw-place="leader"]    { --x0: .702; --y0: .465; --x1: .918; --y1: .75; }

/* ----------------------------------------------- the picture, wide windows
   Title on the left in the sun's clear sky; the school to the right, low,
   the far islands climbing away behind it, a cloud in front at each side. */
@media (min-aspect-ratio: 5/4) {
  .sw__isl { --x: 73.5; --y: 56; --w: 50; }
  [data-sw-far="a"] { --x: 57;  --y: 19; --w: 11;  --haze: .85; }
  [data-sw-far="c"] { --x: 71;  --y: 14; --w: 4.5; --haze: .75; }
  [data-sw-far="d"] { --x: 90;  --y: 17; --w: 12;  --haze: .9; }
  [data-sw-far="e"] { --x: 101; --y: 47; --w: 9;   --haze: .85; }
  [data-sw-cloud="a"] { --x: 53; --y: 84; --w: 15; --ar: 2.65; }
  [data-sw-cloud="c"] { --x: 99; --y: 93; --w: 28; --ar: 2.64; }
}
/* 4:3 and narrower wide windows: the title takes more of the width, so the
   school sits lower and to the right, clear of the buttons */
@media (min-aspect-ratio: 5/4) and (max-aspect-ratio: 3/2) {
  .sw__isl { --x: 77.5; --y: 75; --w: 42; }
  [data-sw-far="a"] { --x: 66; --y: 23; --w: 10; }
  [data-sw-far="c"] { display: none; }
  [data-sw-far="d"] { --x: 90; --y: 19; --w: 12; }
  [data-sw-far="e"] { --x: 101; --y: 45; --w: 8; }
  [data-sw-cloud="a"] { --x: 54; --y: 95; --w: 14; }
  [data-sw-cloud="c"] { --x: 101; --y: 99; --w: 26; }
}

/* ------------------------------------------- the picture, tall windows
   Title on top in the sky; the school scaled to the width underneath, with
   sky above and below it (nothing of the school is cropped). A place is
   measured up from the foot of the stage (--b, in --u). */
@media not (min-aspect-ratio: 5/4) {
  .sw__far, .sw__isl, .sw__cloud { top: calc(100% - var(--b) * var(--u)); }
  .sw__isl { --x: 50; --b: 39; --w: 96; }
  [data-sw-far="a"] { --x: 17; --b: 74; --w: 26; --haze: .85; }
  [data-sw-far="c"] { display: none; }
  [data-sw-far="d"] { --x: 83; --b: 76; --w: 27; --haze: .9; }
  [data-sw-far="e"] { display: none; }
  [data-sw-cloud="a"] { --x: 6;  --b: 12; --w: 34; --ar: 2.65; }
  [data-sw-cloud="c"] { --x: 96; --b: 9;  --w: 40; --ar: 2.64; }
}

/* ----------------------------------------------------------------- copy */
.sw__copy {
  grid-area: 1 / 1; position: relative; z-index: 2;
  display: flex; align-items: center;
  min-height: max(100svh, 560px);
  padding-block: calc(var(--sw-header) + var(--o-space-6)) var(--o-space-9);
  pointer-events: none;
}
.sw__copy :is(a, button, p, h1) { pointer-events: auto; }
/* (the home page's v2 lead and small print are longer than the first ones:
   home.css gave the live hero this room) */
.sw__head { max-inline-size: 38rem; margin: 0; }
.sw__head .o-lead { max-inline-size: 36rem; }
.sw__title { text-wrap: balance; }
@media (min-aspect-ratio: 5/4) {
  .sw__title { max-inline-size: 12.5ch; }
}
.sw__small { max-inline-size: 34rem; text-wrap: balance; color: var(--o-ink-2); }
@media (min-width: 1600px) {
  .sw__copy { --o-max: var(--o-max-wide); }
}
@media not (min-aspect-ratio: 5/4) {
  .sw__copy { align-items: flex-start; padding-block-start: calc(var(--sw-header) + var(--o-space-6)); }
}

/* ------------------------------------------------------------ the peek
   A soap bubble rises out of the place with the place close up inside, and
   a paper tag under it: what the place is about. Point at it, press it: it
   squashes like bubble wrap, and pops (../final's film and pop). */
.sw-peek {
  --b: clamp(96px, 9.5 * var(--u), 150px);
  position: absolute; left: 0; top: 0; z-index: 4;
  display: grid; justify-items: center; gap: var(--o-space-2);
  pointer-events: none;
  opacity: 0; transform-origin: 50% 100%;
}
.sw-peek[data-under] { transform-origin: 50% 0; }
.sw-peek__bubble {
  position: relative; width: var(--b); aspect-ratio: 1; border-radius: 50%;
  background: var(--o-warm) center / cover no-repeat;
  box-shadow: 0 14px 30px -14px rgb(60 57 50 / .45);
  pointer-events: auto; cursor: pointer; touch-action: manipulation;
  transition: transform var(--o-t-enter) var(--o-settle);
}
.sw-peek:not([data-open]) .sw-peek__bubble { pointer-events: none; }
.sw-peek[data-open] .sw-peek__tag { pointer-events: auto; }
.sw-peek__bubble.is-pressed { transform: scale(1.06, .9); transition-duration: var(--o-t-press); transition-timing-function: var(--o-ease); }
.sw-peek__bubble::before, .sw-peek__bubble::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; }
.sw-peek__bubble::before {
  background: conic-gradient(from 200deg, var(--s-film-pink), var(--s-film-mint), var(--s-film-lilac), var(--s-film-sky), var(--s-film-pink), var(--s-film-mint), var(--s-film-pink));
  -webkit-mask: radial-gradient(circle closest-side, transparent 66%, rgb(0 0 0 / .55) 86%, #000 99%, transparent 100%);
          mask: radial-gradient(circle closest-side, transparent 66%, rgb(0 0 0 / .55) 86%, #000 99%, transparent 100%);
  opacity: .92;
}
.sw-peek__bubble::after {
  background:
    radial-gradient(ellipse 16% 8% at 31% 24%, rgb(255 255 255 / .92), rgb(255 255 255 / 0) 100%),
    radial-gradient(circle at 75% 77%, rgb(255 255 255 / .55) 0 2.5%, rgb(255 255 255 / 0) 5%);
  rotate: -8deg;
  box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .7), inset 0 -10px 18px -8px rgb(255 255 255 / .35);
}
.sw-peek__tag {
  display: grid; justify-items: center; gap: 2px;
  max-inline-size: 17.5rem;
  padding: var(--o-space-2) var(--o-space-4) var(--o-space-3);
  border-radius: var(--o-r-card); background: var(--o-paper);
  box-shadow: var(--o-shadow);
  text-align: center; text-wrap: balance;
}
.sw-peek__pills { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--o-space-1); margin-block-end: 2px; }
.sw-peek__pills[hidden] { display: none; }
.sw-peek__pill {
  font: var(--o-weight-ui) var(--o-text-small) / 1.2 var(--o-font-ui);
  padding: 2px var(--o-space-2); border-radius: var(--o-r-pill);
  background: var(--o-warm); color: var(--o-ink);
}
.sw-peek__title { font: var(--o-weight-ui) var(--o-text-body) / 1.25 var(--o-font-ui); color: var(--o-ink); }
.sw-peek__line { font: var(--o-weight-body) var(--o-text-small) / var(--o-lh-small) var(--o-font-body); color: var(--o-ink-2); }
/* Tall windows (phones): a smaller bubble and a narrower, tighter tag, so an
   open peek leaves most of the school in view. */
@media not (min-aspect-ratio: 5/4) {
  .sw-peek { --b: clamp(72px, 7 * var(--u), 104px); gap: var(--o-space-1); }
  .sw-peek__tag { max-inline-size: min(14.5rem, 72vw); padding: var(--o-space-1) var(--o-space-3) var(--o-space-2); }
  .sw-peek__title { font-size: var(--o-text-small); }
}

/* ------------------------------------------------------ the shooting star */
.sw-fx { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; pointer-events: none; clip-path: inset(var(--sw-header) 0 0 0); }
.sw-star {
  position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none;
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
}
.sw-star { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
.sw-star__img, .sw-land__mover > img { display: block; width: 100%; height: 100%; -webkit-user-drag: none; user-select: none; }
.sw-star__img, .sw-land__star > img { filter: drop-shadow(0 0 7px rgb(255 236 190 / .9)) drop-shadow(0 3px 4px rgb(150 90 30 / .28)); }
.sw-land__star > img { display: block; width: 100%; height: 100%; }

/* the veil a journey ends in */
.sw-veil { position: absolute; inset: 0; z-index: 6; background: var(--o-canvas); opacity: 0; pointer-events: none; }

/* --------------------------------------------------------- the classroom
   The dive's landing: the classroom corner of the island at the source's
   full resolution (lib/hero.js lays it out where it lands, and flies it in
   on the island; at rest its scale is 1, so it's crisp). */
.sw__dive { position: absolute; z-index: 1; opacity: 0; visibility: hidden; pointer-events: none; will-change: transform, opacity; }
.sw__dive img { display: block; width: 100%; height: 100%; }

/* ------------------------------------------------------------ the landing
   Once you're in the classroom the calm line draws across it, a star runs
   along it leaving the dotted star path, and lands on a paper card:
   "Ready to learn." Settled (Reduced, Still, no script) it is simply there. */
.sw-land { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.sw-land__path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sw-land__path path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.sw-land__line { stroke: var(--o-paper); stroke-width: 2.5; opacity: .9; }
.sw-land__dots { stroke: var(--o-paper); stroke-width: 5; stroke-dasharray: 0 14; filter: drop-shadow(0 1px 1.5px rgb(60 57 50 / .35)); }
.sw-land__card {
  position: absolute; margin: 0;
  inset-inline-start: max(var(--o-gutter), calc((100% - var(--o-max-wide)) / 2));
  inset-block-end: var(--o-space-7);
  display: grid; justify-items: start; gap: var(--o-space-2);
  padding: var(--o-space-4) var(--o-space-6) var(--o-space-3) var(--o-space-5);
  border-radius: var(--o-r-card); background: var(--o-paper);
  box-shadow: var(--o-shadow-raised);
  font: var(--o-weight-title) var(--o-text-heading) / var(--o-lh-heading) var(--o-font-ui);
  letter-spacing: var(--o-track-heading); color: var(--o-ink);
}
.sw-land__say { margin: 0; color: var(--o-action); }
.sw-land__next { pointer-events: auto; color: var(--o-ink); }
.sw-land__star { position: absolute; right: -14px; top: -18px; width: 40px; height: 40px; rotate: 14deg; }
/* desktop: the title step, on the quiet playground beside the classroom */
@media (min-aspect-ratio: 5/4) {
  .sw-land__card { inset-inline-start: auto; inset-inline-end: max(var(--o-gutter), 6%); inset-block-end: 14%; padding: var(--o-space-5) var(--o-space-7) var(--o-space-4) var(--o-space-6); }
  .sw-land__card { font-size: var(--o-text-title); line-height: var(--o-lh-title); letter-spacing: var(--o-track-title); }
  .sw-land__star { right: -18px; top: -22px; width: 48px; height: 48px; }
  .sw-land__star > img { width: 48px; height: 48px; }
}
@media not (min-aspect-ratio: 5/4) {
  .sw-land__card { inset-inline-start: 50%; translate: -50% 0; inset-block-end: var(--o-space-6); white-space: nowrap; }
}
.sw__stage .sw-land:not([data-beat="done"]) .sw-land__next { visibility: hidden; }
.sw-land[data-beat="wait"] :is(.sw-land__card, .sw-land__path) { opacity: 0; }
.sw-land__card { transition: opacity var(--o-t-enter) var(--o-ease), transform var(--o-t-enter) var(--o-settle); }
.sw-land[data-beat="play"] .sw-land__card:not([data-in]) { opacity: 0; transform: translateY(10px); }
.sw-land[data-beat="play"] .sw-land__card:not([data-in]) .sw-land__star { opacity: 0; }

/* The classroom as its own picture: Still, 3D off, no script. */
.sw-class { position: relative; margin: 0; height: min(84svh, 56.25vw); min-height: 360px; overflow: hidden; background: var(--o-warm); }
.sw-class > picture img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
@media not (min-aspect-ratio: 5/4) {
  .sw-class { height: min(100svh, 133vw); }
  /* On a phone the island's dusky pink clouds meet the classroom's peach sky
     in a hard line; the classroom's sky starts in the island's colour. */
  .sw-class::before {
    content: ""; position: absolute; inset: 0 0 auto; height: 72px; pointer-events: none;
    background: linear-gradient(180deg, #c99d93, rgb(201 157 147 / .55) 35%, rgb(201 157 147 / 0));
  }
}

/* -------------------------------------------- forced colours and print */
@media (forced-colors: active) {
  .sw-peek__tag, .sw-land__card { border: 1px solid CanvasText; }
  .sw-peek__pill { border: 1px solid CanvasText; }
  .sw-peek__bubble::before, .sw-peek__bubble::after, .sw__place::before { display: none; }
  .sw__place:focus-visible::after { outline-color: Highlight; }
}
@media print {
  .sw__stage { position: relative; height: auto; aspect-ratio: 16 / 9; }
  .sw-star, .sw-fx, .sw-peek, .sw-veil { display: none; }
}