/* Truly-global rules for the retro-arcade landing page: fonts, the box-model
   reset, the html/body sizing, and a handful of primitive classes that are
   used from multiple sections (.stage, .bleed, .px, .layer, .hl-word, .guy).
   Loaded via <link> from infinite-new-landing so it does not leak into the
   rest of the hospital app. Section-specific styles live inside each section
   folder as a real CSS Module. */

/* Centra No2 (Light 300 / Book 400 / Bold 700) is registered globally by the
   even-components Reset — the same faces every other hospital page uses, so we
   inherit them here and don't ship a second copy. */

* { margin: 0; padding: 0; box-sizing: border-box; }

/* The named colours, for the section modules. lib/stage.tsx's COLOR carries the
   same values for the JS side, which cannot read these: GSAP tweens the sky
   between sections and cannot interpolate a var(). Change one, change both. */
:root {
  --c-navy: #111547;  /* blue/blue 900 */
  --c-ink: #333333;   /* body copy on a light plate */
}

/* `--app-vh` is the JS-measured visible viewport height (visualViewport.height
   with innerHeight fallback). We prefer it to `100dvh`, which some iOS in-app
   WebViews under-report — that would size the shell shorter than the visible
   area and leave a strip below the stage. The dvh/svh chain remains as the
   pre-hydration fallback for the first paint. `html` deliberately has no
   explicit height: as the root element, its background paints the whole
   viewport canvas regardless of layout height, so any pixel not covered by
   `.stage-root` still reads as the current sky rather than the WebView's
   default white. */
html {
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--page-bg, var(--c-navy)) !important;
}

body, #root, #__next {
  width: 100%;
  height: 100%;
  height: 100svh;
  height: 100dvh;
  height: var(--app-vh, 100dvh);
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  /* `!important` beats the shared `theme/global.scss` `background-color:
     transparent`, whose chunk loads after this sheet. */
  background: var(--page-bg, var(--c-navy)) !important;
  color: #fff;
  font-family: 'Centra No2', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  touch-action: none;
}

.stage-root {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  height: 100svh;
  height: 100dvh;
  height: var(--app-vh, 100dvh);
  overflow: hidden;
  /* the letterbox around the stage — sections set this so it never shows the
     colour of the section before */
  background: var(--page-bg, var(--c-navy));
  transition: background-color 400ms ease;
}

/* `--camera-*` is the one thing that moves the whole stage: the footer parks a
   band below the stage's bottom edge and pans down onto it. `--camera-span` is
   the distance in stage units (a calc over the window vars, so a resize
   re-solves it for free) and `--camera-u` is how far along that pan we are.
   The translate comes AFTER scale() so it reads in stage units, not screen
   ones. */
.stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--stage-w);
  height: var(--stage-h);
  transform: translate(-50%, -50%) scale(var(--stage-scale))
    translateY(calc(var(--camera-span, 0px) * var(--camera-u, 0) * -1));
  transform-origin: center center;
}

/* Fill the phone width; origin at the top so a short window crops below
   the chrome rather than letterboxing the whole frame. */
html.is-mobile .stage {
  top: 0;
  transform: translateX(-50%) scale(var(--stage-scale))
    translateY(calc(var(--camera-span, 0px) * var(--camera-u, 0) * -1));
  transform-origin: top center;
}

/* a box the size of the window, measured in stage units. `--window-top` is
   where that window starts on the stage — centred, same on both devices. */
.bleed {
  position: absolute;
  left: 50%;
  top: var(--window-top, 0px);
  width: var(--bleed-w);
  height: var(--bleed-h);
  transform: translateX(-50%);
  pointer-events: none;
}
html.is-mobile .bleed { top: 0; }

.px { image-rendering: pixelated; image-rendering: crisp-edges; }

.layer { position: absolute; inset: 0; }

/* The brick course every outdoor section stands on, rendered by lib/scenery.
   Its per-section class stays on the element too — the mobile ground-shift
   rules select on that. */
.brick-floor { position: absolute; background-repeat: repeat; }

/* Inline, not inline-block. An inline-block word is its own unbreakable box
   with its own rounded width, which pushed the s1 headline onto a third line.
   Inline keeps the line breaking identical to plain text — the cost is that
   transforms do not apply, so the words change value rather than move.
   Selected by name via querySelectorAll(".hl-word") in the section code, so
   this rule stays global. */
.hl-word { display: inline; opacity: 0.32; }

@media (prefers-reduced-motion: reduce) {
  .hl-word { opacity: 1 !important; }
}

/* Two layers in one box, cut at the same size, so there is no offset to get
   wrong: both fill it. The balloon is the one that moves. */
.guy { position: absolute; }
.guy-layer { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }