/* APED — the hero's CSS half. Three jobs, and the build only links this file when
 * content/fx.json -> hero3d.enabled is not false, so with the block off the page is
 * exactly the one it is today.
 *
 * Unlike /fx/fx.css this sheet is render-blocking, on purpose: two of the three
 * rules decide the page's HEIGHT, and a preload+swap stylesheet would let the
 * mirror's own 9823 px lay out first and then jump to 13 500. See
 * docs/LISTA-HERO.md and tools/build.mjs (fxTags).
 */

/* ---------------------------------------------------------------------------
   1. the page gets taller, so the four beats can breathe
   ---------------------------------------------------------------------------
   Each hotspot is 0.16 of the scroll; on the mirror's 8923 px of travel that is
   1400 px, which is cramped for a beat that is supposed to feel like the camera
   settling. Padding on the content section is the whole mechanism: the footer
   simply starts lower, no element is resized, nothing is measured, and above all
   NO synthetic `resize` is dispatched — that one kills the WebGL engine before the
   scene exists (editor/fx/icons-anim.js:20).

   /fx/hero-3d.js overwrites the variable from `hero3d.padVh` when the editor sets
   one, before Vue has mounted anything, so there is never a layout to shift.

   MARGIN, not padding, and that is not a preference: the site is `box-sizing:
   border-box` and `.site-content` gets its height from `min-height: 9000px`, so a
   `padding-bottom` is swallowed by the min-height and the page does not grow one
   pixel (measured: 9823 -> 9823). A margin is outside the box either way. The
   footer declares no `margin-top`, so nothing collapses into it. */
:root {
  --aped-hero-pad: 415vh;
}

.site-content {
  margin-bottom: var(--aped-hero-pad);
}

/* ---------------------------------------------------------------------------
   2. the DOM content blocks go: their copy is now in the canvas
   ---------------------------------------------------------------------------
   `ContentBlock` (bundle l.63440) is a `position: fixed` overlay whose GSAP
   timeline the engine scrubs from `updateDoms()`. The four beats say the same
   words inside the WebGL scene now, so a DOM copy on top of them would be the
   same sentence twice. The nodes stay — the engine holds references to them and
   scrubs their timelines either way — they are just not painted, and because they
   were `fixed` the page's height does not move by taking them off.

   `.hape-section` blocks are the editor's own new sections and are NOT hero
   beats: they keep their copy. */
.content-block:not(.hape-section) {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ---------------------------------------------------------------------------
   3. belt and braces for the old giant wordmark
   ---------------------------------------------------------------------------
   The swap itself is a build patch (`hero-wordmark`, tools/patches.json), so there
   is never a frame with the old "Hape® LONDON" letters. This is the guard for the
   case where a stale bundle is being served: anything in that slot that is not our
   lockup is not painted. */
.site-content__intro-logo svg:not([data-aped-hero-lockup]) {
  display: none !important;
}

/* The lockup takes a third of the width the old wordmark needed (1340 px measured
   at 1440x900) and keeps the block's own 50 px gutter. It does not animate: the
   attention belongs to the beats now. Its ink follows the theme the same way
   /fx/logo.js resolves it, so one file serves red, black and white. */
.site-content__intro-logo svg[data-aped-hero-lockup] {
  display: block;
  width: 420px;
  height: auto;
  max-width: calc(100vw - 100px);
  color: #fff;
}

[data-theme='white'] .site-content__intro-logo svg[data-aped-hero-lockup] {
  color: #000;
}

@media (max-width: 1023px) {
  :root {
    --aped-hero-pad: 250vh;
  }
  .site-content__intro-logo svg[data-aped-hero-lockup] {
    width: 200px;
    max-width: calc(100vw - 40px);
  }
}