/* ════════════════════════════════════════════════════════════════════
   NexFlow · Horizontal-scroll homepage mode (v10)
   ────────────────────────────────────────────────────────────────────
   The homepage narrative reads as a sequence of full-screen panels that
   advance SIDEWAYS. engine/hscroll.js maps the mouse wheel / trackpad to
   horizontal movement, snaps panel-to-panel, and provides keyboard +
   arrow-button + progress navigation.

   Hard rules:
     · Only on wide screens with a fine pointer and motion allowed.
       Phones, tablets, touch, and prefers-reduced-motion get the normal
       vertical stack (this file does almost nothing there).
     · Every panel can scroll VERTICALLY inside itself, so dense panels
       (pricing, contact, the problem grid) are never clipped.
     · Text never sits on moving art — same solid-paper rule as the rest
       of the site.
   ════════════════════════════════════════════════════════════════════ */

.nf-h-ui { display: none; }

@media (min-width: 1025px) and (min-height: 680px) and (pointer: fine) {
  body.nf-h-on { overflow: hidden; height: 100vh; }

  /* The horizontal track */
  body.nf-h-on main.nf-h {
    position: fixed; inset: 0;
    width: 100vw; height: 100vh;
    display: flex; flex-wrap: nowrap;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-x: contain;
  }
  body.nf-h-on main.nf-h::-webkit-scrollbar { width: 0; height: 0; }
  body.nf-h-on main.nf-h { scrollbar-width: none; }

  /* Each section becomes a full-viewport panel */
  body.nf-h-on main.nf-h > section {
    flex: 0 0 100vw; width: 100vw; height: 100vh;
    overflow-y: auto; overflow-x: hidden;
    scroll-snap-align: start; scroll-snap-stop: always;
    display: flex; flex-direction: column;
    /* SAFE centring: short panels centre vertically; panels taller than
       the viewport fall back to top-alignment (scrollable) instead of
       being centred — which would push their top edge above the viewport
       and clip it UNREACHABLY (the hero H1 was losing its first line on
       every desktop height). 'safe' is the key word: plain 'center' clips. */
    justify-content: safe center;
    padding-top: 92px; padding-bottom: 56px;
    overscroll-behavior-y: contain;
  }
  body.nf-h-on main.nf-h > section::-webkit-scrollbar { width: 7px; }

  /* Vertical placement is handled by 'justify-content: safe center' on the
     panel above. The old 'margin-block: auto' centring trick was meant to
     avoid the overflow-top clip but didn't — auto margins on an overflowing
     flex item still centre it and hide the top — so it's removed here. */
  body.nf-h-on main.nf-h > section > .wrap { margin-block: 0; width: 100%; }

  /* Non-section children (marquee ticker, stray nodes) are folded out of
     the panel flow in horizontal mode. */
  body.nf-h-on main.nf-h > *:not(section) { display: none; }
  body.nf-h-on main.nf-h > section.nf-h-hide { display: none; }

  /* The footer is a SIBLING of <main> (not a child), so the rule above
     can't reach it. Once <main> goes position:fixed it leaves normal
     flow, the footer collapses to the top of the body, and — being
     positioned with z-index:var(--z-content) — it paints OVER the fixed
     hero panel, blocking the top of the page. In panel mode the footer
     isn't a reachable screen, so hide it; it returns automatically in the
     vertical layout (mobile / touch / reduced-motion / narrow) where
     body.nf-h-on is never set. */
  body.nf-h-on .nf-foot { display: none; }

  /* ── Reveal the 3D canvas behind the hero ─────────────────────────
     base.css retires the full-bleed WebGL stage globally
     (#three-stage{display:none !important}) for the v10 contained-animation
     design. Re-enable it ONLY here — desktop horizontal mode — so
     three-scene.js can boot its renderer (it early-outs on a hidden host).
     Mobile / vertical / reduced-motion never set body.nf-h-on, so the stage
     stays hidden there and the v10 "solid paper, no moving art" design is
     untouched. hscroll.js re-calls NexFlowScene.init() after this rule
     applies so the renderer actually starts. */
  body.nf-h-on #three-stage { display: block !important; }

  /* The fixed track has no z-index of its own, so position:fixed parks it
     in a stacking context at z-index:auto — BELOW #three-stage (--z-3d:1).
     A revived scene would then paint over the panels. Lift the track to
     --z-content so content always sits ON TOP of the moving art (exactly
     as in the vertical layout, where sections are at --z-content). */
  body.nf-h-on main.nf-h { z-index: var(--z-content); }

  /* Panels stay solid paper by default — "text never sits on moving art". */
  body.nf-h-on main.nf-h > section { background: var(--bg-0); }
  /* …except the hero, given a TRANSLUCENT solid wash so #three-stage shows
     through behind the headline — the "hero over canvas" moment the animation
     engine was built for — while keeping the text fully readable. A fully
     transparent hero let the moving nodes/edges sit directly under the copy
     and hurt legibility; an ~84% paper wash (plus a light backdrop blur to
     calm the busy art directly behind the text) keeps the animation clearly
     VISIBLE but the text CLEAR. Only the hero is exposed; every other panel
     keeps its fully solid fill so dense copy stays legible. */
  body.nf-h-on main.nf-h > section.hero {
    background: color-mix(in oklab, var(--bg-0) 84%, transparent);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  /* Dark panels keep their ink background edge-to-edge */
  body.nf-h-on main.nf-h > section.bg-ink { background: var(--bg-ink); }

  /* ── Navigation chrome ──────────────────────────────────────────── */
  .nf-h-ui { display: block; }

  /* progress rail along the very bottom */
  .nf-h-progress {
    position: fixed; left: 0; bottom: 0; height: 3px; z-index: 60;
    width: 100%; background: transparent; pointer-events: none;
  }
  .nf-h-progress > span {
    display: block; height: 100%; width: 0;
    background: var(--clay);
    transition: width .2s var(--ease-out);
  }

  /* left / right arrow buttons */
  .nf-h-arrow {
    position: fixed; top: 50%; transform: translateY(-50%);
    z-index: 60;
    width: 46px; height: 46px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-1); color: var(--fg-0);
    border: 1px solid var(--rule-strong);
    box-shadow: var(--shadow-2);
    font-size: 18px; cursor: pointer;
    transition: transform var(--d-fast) var(--ease-out), opacity var(--d-fast), background var(--d-fast);
  }
  .nf-h-arrow:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
  .nf-h-arrow.prev { left: 18px; }
  .nf-h-arrow.next { right: 18px; }
  .nf-h-arrow[disabled] { opacity: 0; pointer-events: none; }

  /* "Normal scroll" escape hatch — a visible, discoverable way out of the
     sideways pager (Esc does the same). Sits top-right, clear of the fixed
     nav, so a visitor never feels trapped in horizontal mode. */
  .nf-h-exit {
    position: fixed; top: 104px; right: 18px; z-index: 60;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 999px;
    background: color-mix(in oklab, var(--bg-1) 86%, transparent);
    color: var(--fg-1); border: 1px solid var(--rule-strong);
    box-shadow: var(--shadow-1); backdrop-filter: blur(8px);
    font-size: 12.5px; font-weight: 600; letter-spacing: .01em; cursor: pointer;
    transition: background var(--d-fast), color var(--d-fast), border-color var(--d-fast), transform var(--d-fast);
  }
  .nf-h-exit:hover { background: var(--brand); color: #fff; border-color: var(--brand); transform: translateY(-1px); }
  .nf-h-exit > span { font-size: 14px; line-height: 1; }

  /* panel dots + label, bottom-centre */
  .nf-h-dots {
    position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
    z-index: 60; display: flex; align-items: center; gap: 9px;
    padding: 8px 14px; border-radius: 999px;
    background: color-mix(in oklab, var(--bg-1) 86%, transparent);
    border: 1px solid var(--rule);
    box-shadow: var(--shadow-1);
    backdrop-filter: blur(8px);
  }
  .nf-h-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--rule-strong); cursor: pointer;
    transition: background var(--d-fast), transform var(--d-fast);
  }
  .nf-h-dot:hover { transform: scale(1.25); }
  .nf-h-dot.on { background: var(--clay); transform: scale(1.25); }

  /* a small "scroll sideways" hint, shown briefly on first load */
  .nf-h-hint {
    position: fixed; left: 50%; bottom: 56px; transform: translateX(-50%);
    z-index: 60; display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 15px; border-radius: 999px;
    background: var(--fg-0); color: var(--fg-inv);
    font-size: 12.5px; font-weight: 500; letter-spacing: .01em;
    box-shadow: var(--shadow-2);
    opacity: 0; transition: opacity .5s var(--ease-out);
  }
  .nf-h-hint.show { opacity: 1; }
  .nf-h-hint .arr { animation: nf-h-nudge 1.4s var(--ease-in-out) infinite; }
  @keyframes nf-h-nudge { 0%,100%{ transform: translateX(0);} 50%{ transform: translateX(4px);} }
}

@media (prefers-reduced-motion: reduce) {
  .nf-h-hint .arr { animation: none; }
}