loading.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Loading…</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!-- Carried here too, so the tab icon doesn't drop out on the hand-off
       between the two sides. -->
  <link rel="icon" type="image/svg+xml" href="%BASE_URL%favicon.svg" />
  <link rel="icon" type="image/png" sizes="32x32" href="%BASE_URL%favicon-32.png" />
  <link rel="icon" type="image/png" sizes="16x16" href="%BASE_URL%favicon-16.png" />
  <link rel="apple-touch-icon" href="%BASE_URL%apple-touch-icon.png" />
  <link rel="stylesheet" href="./src/shared/stage.css" />
  <style>
    /* ABC Pelikan in the two cuts the piece uses (see src/shared/styles.css):
       titles at 700, the subheadline at 400. */
    @font-face {
      font-family: "Pelikan";
      src: url("./fonts/ABCPelikan-Regular.woff2") format("woff2");
      font-weight: 400;
      font-display: swap;
    }
    @font-face {
      font-family: "Pelikan";
      src: url("./fonts/ABCPelikan-Bold.woff2") format("woff2");
      font-weight: 700;
      font-display: swap;
    }

    :root{
      --bg:#0e0b16;
      --fg:#ffffff;
      --ring:#ffffff;
      --ringWidth: 3px;
      /* Same value as the splash so the disk does not jump size across the
         hand-off. */
      --disk: 900px;
    }

    html, body {
      height: 100%;
      margin: 0;
      background: var(--bg);
      color: var(--fg);
      font-family: "Pelikan", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      overflow: hidden;
    }

    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
    body { animation: fadeIn 0.6s ease-out; }

    /* The .viewport/.stage pair is in src/shared/stage.css (linked above);
       this page only centres its one disk on the stage. */
    .stage {
      display: grid;
      place-items: center;
    }

    .disk-area {
      position: relative;
      width: var(--disk);
      height: var(--disk);
    }

    /* Static ring — no coin, no image, no rotation. Just the outline. */
    .disk-ring {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: var(--ringWidth) solid var(--ring);
      box-shadow: 0 0 60px rgba(0,0,0,0.55);
      background: var(--bg);
      overflow: hidden;
    }

    .caption-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
      pointer-events: none;
      z-index: 3;
    }
    .caption-svg text {
      fill: var(--fg);
    }
    .caption-svg text.title {
      letter-spacing: 0.2em;
      text-transform: uppercase;
      font-weight: 700;
    }
    .caption-svg text.subhead {
      letter-spacing: 0.15em;
      text-transform: uppercase;
      font-weight: 400;
    }
    /* Dots always take their slot; only opacity changes so the LOADING text
       never shifts as the ellipsis animates. */
    .dot.on  { opacity: 1; }
    .dot.off { opacity: 0.18; }
  </style>
</head>
<body>
  <div class="viewport">
  <div class="stage">
    <div class="disk-area">
      <svg class="caption-svg" viewBox="-500 -500 1000 1000" aria-hidden="true">
        <defs>
          <!-- Title arcs on the splash's title ring (TITLE_RING_R, set at
               boot). Both use sweep=1 for the short arc. -->
          <path id="arc-title-left"  d="" />
          <path id="arc-title-right" d="" />

          <!-- Subheadline: bottom outer semicircle at r=760 (same slot as
               home's bottom one-liner). Ascenders point inward, upright at
               the 6 o'clock midpoint reading L→R. -->
          <path id="arc-subhead" d="M -760 0 A 760 760 0 0 0 760 0" />
        </defs>

        <text id="label-left"  class="title"><textPath href="#arc-title-left"  startOffset="50%" text-anchor="middle"></textPath></text>
        <text id="label-right" class="title"><textPath href="#arc-title-right" startOffset="50%" text-anchor="middle"></textPath></text>
        <text id="subheadline" class="subhead"><textPath href="#arc-subhead"    startOffset="50%" text-anchor="middle"></textPath></text>
      </svg>

      <!-- The disk is blank while a side loads: the title and subheadline
           outside it carry the screen. -->
      <div class="disk-ring"></div>
    </div>
  </div>
  </div>

  <script type="module">
    // Cross-link interstitial. The splash no longer routes through here — it
    // runs the same transition in place (see src/splash/narrative.js) so that
    // entering a side is one navigation, not two. What is left is the
    // biomes <-> anthromes hand-off, where a full page load is unavoidable and
    // this screen covers it with the destination's own framing.
    import { initPageStage, splashVariant } from './src/shared/pageStage.js';
    import {
      SIDE_COPY, TITLE_DIM, TITLE_RING_R, buildLoadingLabel, splashType, sideHref
    } from './src/shared/splashCopy.js';

    // sizeAll() is hoisted; a phone turning re-sets the type (see splashType()).
    initPageStage({ onVariantChange: () => sizeAll() });

    // --- Route params -------------------------------------------------------
    // side= is the whole contract: it picks the copy and the target viz. The
    // two sides no longer hand each other a selection, so nothing is carried
    // through here — any other param is dropped rather than forwarded.
    const params = new URLSearchParams(window.location.search);
    const side = params.get('side') === 'anthromes' ? 'anthromes' : 'biomes';

    const d = SIDE_COPY[side];
    const target = sideHref(side);

    // --- References ---------------------------------------------------------
    const labelLeft   = document.getElementById('label-left');
    const labelRight  = document.getElementById('label-right');
    const labelLeftP  = labelLeft.querySelector('textPath');
    const labelRightP = labelRight.querySelector('textPath');
    const subhead     = document.getElementById('subheadline');
    const subheadP    = subhead.querySelector('textPath');

    // --- Content placement --------------------------------------------------
    const titleP = d.titlePos === 'left' ? labelLeftP  : labelRightP;
    const loadP  = d.titlePos === 'left' ? labelRightP : labelLeftP;
    const loadEl = d.titlePos === 'left' ? labelRight  : labelLeft;
    titleP.textContent = d.title;
    subheadP.textContent = d.subhead;
    const tickDots = buildLoadingLabel(loadP);
    // LOADING sits at the same dim the splash's commit state gives it, so the
    // cross-link interstitial and the splash read as one screen. It used to
    // stay full white here.
    loadEl.style.opacity = TITLE_DIM;

    // --- Title arcs ------------------------------------------------------------
    // The final ui splash's title ring, so a title lands where the splash's
    // commit state leaves it.
    function updateTitleArcs() {
      const r = TITLE_RING_R;
      const off = (r * Math.SQRT1_2).toFixed(2);
      document.getElementById('arc-title-left').setAttribute('d',
        `M -${off} ${off} A ${r} ${r} 0 0 1 -${off} -${off}`);
      document.getElementById('arc-title-right').setAttribute('d',
        `M ${off} -${off} A ${r} ${r} 0 0 1 ${off} ${off}`);
    }

    function sizeAll() {
      updateTitleArcs();
      const type = splashType(splashVariant());
      labelLeft.setAttribute('font-size',  type.title);
      labelRight.setAttribute('font-size', type.title);
      subhead.setAttribute('font-size',    type.base);
    }

    // --- Preload hook + fixed wait ------------------------------------------
    // Lightweight prefetch to warm the browser HTTP cache. No iframe: running
    // the viz off-screen while our loading screen is up caused resource
    // contention and racing double-fetches. `rel=prefetch` + a fire-and-forget
    // fetch are both idle-priority hints that let the browser cache the target
    // HTML without executing it.
    const link = document.createElement('link');
    link.rel = 'prefetch';
    link.href = target;
    link.as = 'document';
    document.head.appendChild(link);
    fetch(target, { credentials: 'same-origin' }).catch(() => {});

    // Fixed 5s reading window. Both Apps show a plain dark background rather
    // than their own loading text, so any residual load time after the redirect
    // is visually continuous with this screen.
    const MIN_WAIT_MS = 5000;

    function boot() {
      // Every input to sizeAll() is a constant but the type scale, which only
      // changes when a phone turns (see initPageStage above); otherwise the
      // window only changes the scale pageStage.js applies.
      sizeAll();
      const dotTimer = setInterval(tickDots, 450);
      setTimeout(() => {
        clearInterval(dotTimer);
        // replace(), not href: this screen swaps ITSELF out of the history
        // stack for the target, so Back from the destination returns to the
        // page that linked here rather than landing on an interstitial that
        // immediately forwards again.
        window.location.replace(target);
      }, MIN_WAIT_MS);
    }

    if (document.fonts && document.fonts.ready) document.fonts.ready.then(boot);
    else boot();
  </script>
</body>
</html>