/* Landing-page layout only. Anything reusable belongs in components/.
   The dither stage is fixed behind everything; each .panel is one slide's worth of scroll (200svh: a hold, then the change).
   The copy of every panel is fixed in place and paginated: scroll-stage.js sets --vis / --shift on each panel from the
   same position that drives the dither, so the headline swaps in step with the dots re-forming. */
.stage { position: fixed; inset: 0; height: 100vh; height: 100svh; height: 100dvh; width: 100%; z-index: 0; transform: translateY(var(--menu-push)); }
main { position: relative; z-index: 1; }

.site-pager {
  position: fixed; z-index: 10; left: max(var(--gutter), calc((100% - var(--container)) / 2));
  /* fixed position: its cross-hairs sit level with the one in the lock-up's meta line (centre of that line, minus half the 18px slot) */
  top: calc(var(--lockup-top) + var(--meta-height) / 2 - 9px);
  opacity: 0;   /* scroll-stage.js drives opacity + transform from the slide position, so the pager arrives with the first lock-up */
}
:root[data-section="0"] .site-pager, :root:not([data-section]) .site-pager { pointer-events: none; }

.panel { height: 200vh; height: 200svh; }
.panel__inner {
  position: fixed; inset: 0; height: 100vh; height: 100svh; height: 100dvh;   /* dvh: the VISIBLE height on a phone (it follows Safari's address bar showing / hiding); svh left a strip under the stage when the bar hid */
  opacity: var(--vis, 1);
  transform: translateY(calc(var(--shift, 0) * var(--copy-shift) + var(--menu-push)));   /* next copy rises into place, old copy lifts away; + the phone menu pushing the page down */
  pointer-events: none;
  display: grid; align-content: start;
  padding: var(--lockup-top) var(--gutter) var(--space-8);
  padding-left: calc(max(var(--gutter), (100% - var(--container)) / 2) + var(--pager-offset));
}

.panel__inner > * { pointer-events: auto; }

/* first slide: the dither draws the logo near the top, and the intro lock-up sits beneath it, centred */
.hero .panel__inner { align-content: start; padding: var(--intro-top-fit, var(--intro-top)) var(--gutter) 0; justify-items: center; }   /* --intro-top-fit (set by js/landing.js) = --intro-top, moved up only if the intro would run into the Explore cue */

#about .panel__inner { padding-top: var(--about-top, var(--lockup-top)); }   /* js/landing.js raises it on a short window so the About picture always has room under the copy */

@media (max-width: 900px) {
  .panel__inner { padding-left: var(--gutter); }
  .site-pager { display: none; }
}

/* Loading: until the fonts and the dither images are ready the page shows only the paper colour (no stacked, unstyled copy); then it fades in. Set by an inline script in <head>, cleared in landing.js. */
html.is-loading main, html.is-loading .site-bar, html.is-loading .site-pager, html.is-loading .explore, html.is-loading .stage { visibility: hidden; }
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
html.is-ready main, html.is-ready .site-bar, html.is-ready .explore, html.is-ready .stage { animation: page-in .9s ease-out both; }   /* the stage (the dithered logo) fades in with the rest, it never pops on */

/* Leaving for a case study (landing.js): the stage clears (the dots dissolve to an empty slide) while the copy fades and lifts away. */
html.is-leaving .panel__inner > * { opacity: 0; transform: translateY(-28px); transition: opacity .35s ease-out, transform .55s cubic-bezier(.3, .6, .2, 1); pointer-events: none; }
html.is-leaving .site-pager { opacity: 0 !important; transition: opacity .3s ease-out; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { html.is-leaving .panel__inner > * { transition: none; } html.is-ready main, html.is-ready .site-bar, html.is-ready .explore, html.is-ready .stage { animation: none; } }

html.is-leaving .site-bar, html.is-leaving .explore { opacity: 0; transition: opacity .35s ease-out; pointer-events: none; }
html.on-about .site-pager { opacity: 0 !important; visibility: hidden; transition: opacity .3s ease-out, visibility 0s .3s; pointer-events: none; }   /* no pager on the About slide */

/* Phones (<= 700px): no paging on the intro and About slides. Their copy scrolls inside the slide (js/scroll-stage.js only pages to the next / previous slide once you are at the end of it, and
   only on a fresh swipe); the three case study slides still page. The About picture sits behind the text, under the end of it (.about-spacer holds the room for it). */
.about-spacer { display: none; }
@media (max-width: 700px) {
  .panel__inner[data-scroll-panel] { overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; pointer-events: auto; scrollbar-width: none; }
  .panel__inner[data-scroll-panel]::-webkit-scrollbar { display: none; }
  .hero .panel__inner[data-scroll-panel] { padding-bottom: 120px; }   /* clear of the Explore cue */
  #about .panel__inner[data-scroll-panel] { top: var(--bar-h, 101px); height: calc(100dvh - var(--bar-h, 101px)); padding-top: 12px; padding-bottom: 0; }   /* starts under the bar, so the copy never scrolls behind the logo and nav */
  .about-spacer { display: block; height: var(--about-pic-room, 220px); }
}

/* HIGHLIGHT on the landing copy: the page colour behind each line of text (a highlighter pen), so type stays readable over the dithered pictures (and on a phone).
   Titles use a nested pair: <span class="hl"><span class="hl__tx">…</span></span>. The outer span (the colour) is its own layer BEHIND the inner span (the text) so a line's highlight never paints over
   the descenders of the line above. Body copy (the About paragraphs) uses a single <span class="hl">, see article.css. The meta lines (name | role) carry the colour on the line itself. */
.panel .hl { background: var(--color-bg); padding: .26em .35em; margin-left: -.35em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.panel .lockup__title .hl, .panel .intro__title .hl, .panel .intro__text .hl { position: relative; z-index: 0; padding: .06em .2em; margin-left: -.2em; margin-right: 0; }
/* The 5th Avenue WEB font has much taller built-in vertical metrics (ascent 1.395em, descent 0.69em) than the old desktop file (0.75 / 0.25), and an inline highlight box is as tall as the font's metrics,
   so each page-colour box grew to ~2.2em: it covered the meta line above the title (Luno x Principal Product Designer) and wiped out far more of the dither than before. Safari cannot correct a font's metrics
   (no ascent-override), so the band is drawn with a gradient instead: page colour only from 0.75em above to 0.25em below the baseline (plus the .06em padding), the height the highlight had with the old file.
   Box = 1.395 + 0.69 + 2 x 0.06 = 2.205em tall; the band runs from 0.645em (29.25%) to 1.765em (80.05%) down it. */
.panel .lockup__title .hl, .panel .intro__title .hl { background: linear-gradient(to bottom, transparent 29.25%, var(--color-bg) 29.25%, var(--color-bg) 80.05%, transparent 80.05%); }
.panel .lockup__title .hl__tx, .panel .intro__title .hl__tx, .panel .intro__text .hl__tx { position: relative; z-index: 1; }
.panel .intro__meta, .panel .lockup__meta { background: var(--color-bg); padding-inline: 8px; margin-left: -8px; position: relative; z-index: 2; }   /* above the title's highlight boxes, whatever the font's metrics */
.panel .intro__meta { margin-left: 0; }

/* Phones: the statement is scaled down so the whole intro fits under the dithered logo with room to spare (no overlaps); if a very short screen still cannot fit it, the slide scrolls (see above). */
@media (max-width: 700px) {
  .intro { gap: 10px; }
  .intro__meta { display: flex; flex-direction: column; align-items: center; row-gap: 2px; font-size: 1rem; line-height: 1.4; }
  .intro__meta .sep { display: none; }   /* (name above role: no cross-hair to strand on a line of its own) */
  .intro__title { font-size: 1.625rem; line-height: 1.15; margin-top: 10px; }
  .intro__text { font-size: 1.25rem; line-height: 1.2; margin-top: 6px; }
}
html.menu-open .explore { opacity: 0 !important; pointer-events: none; }   /* the pushed-down page would otherwise run into the Explore cue */

/* Phones: the case study slides' copy starts 40% closer to the bar than on a computer (it keeps 60% of the space between the bar and the usual spot), so the slide uses more of the height. */
@media (max-width: 700px) {
  :root { --lockup-top: calc(var(--bar-h, 57px) + (30svh - var(--bar-h, 57px)) * 0.6); }
}