/* ============================================================================
   hero.css — BY THE OWL hero banner (#hbScroller), extracted VERBATIM
   for transplant into the Pixy template.  DO NOT REDESIGN — copy only.

   Three source groups, concatenated in ORIGINAL CASCADE ORDER:
     1/3  os-base.css      (loaded 1st on the live site)
     2/3  bto-os-home.css  (loaded 2nd)
     3/3  bto-tokens.css   (loaded LAST — the overrides win)

   THE ONE STRUCTURAL CHANGE: the two @import lines (os-base.css:4 and
   bto-tokens.css:8) are HOISTED to the top of this file. CSS requires
   @import to precede all other rules — left in place mid-file the parser
   would silently DROP them and the hero would lose Archivo + Inter.
   Nothing else was moved, renamed, reformatted or reordered.

   Rules marked  [DEP-GLOBAL]  are NOT .hb-* selectors. They are page-wide
   rules from the same source files that the hero MARKUP inherits from
   (the * reset, body font, h1 uppercase-Archivo, .kick). They are included
   for visual fidelity but they WILL restyle the whole Pixy page. Review /
   scope them before shipping — see _notes/02_hero-transplant.md.
   ========================================================================== */

/* ---- HOISTED @imports (see note above) ---------------------------------- */
/* from os-base.css line 4 — provides "Inter" (--disp) + "Fraunces" (--serif) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Fraunces:ital,opsz,wght@1,9..144,400;1,9..144,500&display=swap');
/* from bto-tokens.css line 8 — provides "Archivo" (--font-display/--font-body) */
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,500&display=swap');


/* ==========================================================================
   1/3 · SOURCE: os-base.css
   ========================================================================== */

/* --- os-base.css lines 6-17 : :root tokens + base resets ------------------ */
/* [DEP-GLOBAL] the * / html / body / img rules below are page-wide */
:root{
  --canvas:#f4f1ea; --surface:#ffffff; --ink:#1a1712;
  --body:rgba(26,23,18,.82); --mute:rgba(26,23,18,.60); --hair:rgba(26,23,18,.12);
  --green:#f1b84b; --green-tx:#f1b84b; --green-soft:rgba(241, 184, 75,.12);
  --dark:#1a1712; --dark-2:#211d17; --on-dark:#f4f1ea; --on-dark-mute:rgba(244,241,234,.62); --on-dark-hair:rgba(244,241,234,.14);
  --disp:"Inter",system-ui,sans-serif; --serif:"Fraunces",Georgia,serif;
  --max:1180px; --r:18px;
}
/* SCOPED FOR TRANSPLANT (main agent, integration):
   original selectors were  * / html / body / img  — page-wide. Left global they
   restyle Pixy's entire page (its own reset, its body face, its image layout).
   Each is re-anchored to .hb-scroller so the hero inherits exactly what it did
   on the live site and nothing outside the hero is touched.
   `html{scroll-behavior:smooth}` is DROPPED, not scoped: it is global page
   behaviour, not hero appearance, and it would hijack Pixy's anchor nav. */
.hb-scroller, .hb-scroller *{margin:0;padding:0;box-sizing:border-box}
.hb-scroller{background:var(--canvas);color:var(--ink);font-family:var(--disp);-webkit-font-smoothing:antialiased;line-height:1.55;letter-spacing:-.01em}
.hb-scroller img{display:block;max-width:100%}

/* --- os-base.css lines 38-40 : .kick base type ---------------------------- */
/* [DEP-GLOBAL] .hb-head .kick only overrides COLOR; weight/size/tracking/
   uppercase come from here. Unprefixed + generic — collision candidate. */
/* kicker */
/* SCOPED FOR TRANSPLANT: .kick is our only unprefixed class — scoped so it can
   never collide with anything Pixy or a future section introduces. */
.hb-scroller .kick{font-family:var(--disp);font-weight:600;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--green-tx)}
.hb-scroller .dark .kick{color:var(--green)}


/* ==========================================================================
   2/3 · SOURCE: bto-os-home.css
   ========================================================================== */

/* --- bto-os-home.css lines 8-105 : the whole P1 hero block ---------------- */
/* ---------- P1 · HERO BANNER — scroll ASSEMBLE. The viewer holds the flying
   3D studio frames (Ash 2026-07-13: frames inside the owl-eye frame); the
   editor UI grows around it on scroll → holds → releases. Sticky + rAF scrub
   (bto-os-home.js §1). Frames engine = §5. --------------------------------- */
.hb-scroller { height: 160vh; position: relative; }
.hb-stage {
    /* pin BELOW the sticky site nav so the hero's own editor top-bar
       (dots + "Resolve Studio" + counting timecode) clears it instead of hiding behind it

       RETARGETED FOR THE TRANSPLANT (the one hero-adjacent edit the brief allows).
       Was 67px = the old BTO nav. Pixy's header is `.mil-top-panel-2`, measured:
         160px at rest · 120px once `.mil-scroll` lands (main.js adds it on ANY
         downward scroll, so the hero is always pinned against 120) · 100px ≤768px.
       Driven by a variable so there is exactly one number to change. */
    --bto-nav-h: 120px;
    position: sticky; top: var(--bto-nav-h); height: calc(100vh - var(--bto-nav-h)); overflow: hidden;
    display: flex; flex-direction: column;
    background: #14130f; color: var(--on-dark);
    contain: layout paint;   /* bound the chrome-grow reflow to this subtree */
}
/* top bar — grows from 0 */
.hb-top {
    height: 0; opacity: 0; overflow: hidden; flex: 0 0 auto;
    display: flex; align-items: center; gap: 26px; padding: 0 30px;
    border-bottom: 1px solid rgba(244, 241, 234, .08);
    font: 500 20px/1 var(--disp); letter-spacing: .08em; color: var(--on-dark-mute);
    white-space: nowrap;
}
.hb-dots { display: flex; gap: 11px; }
.hb-dots i { width: 18px; height: 18px; border-radius: 50%; display: block; }
.hb-dots i:nth-child(1) { background: #f26d5f; }
.hb-dots i:nth-child(2) { background: #f2bf5f; }
.hb-dots i:nth-child(3) { background: #59c76f; }
.hb-tc { margin-left: auto; font-family: ui-monospace, Menlo, monospace; font-size: 22px; color: #f1b84b; }

/* middle: viewer column + node panel */
.hb-mid { flex: 1; display: flex; min-height: 0; }
.hb-viewercol { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.hb-viewer { position: relative; flex: 1; overflow: hidden; min-height: 0; background: #000; }
/* the flying 3D studio frames ARE the viewer footage (engine §5). Own stacking
   context (isolate) so the cards' internal depth z stays inside the viewer. */
.hb-scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
    perspective: 1000px; perspective-origin: 50% 46%; isolation: isolate; }
.hb-cluster { position: absolute; top: 50%; left: 50%; transform-style: preserve-3d; will-change: transform; }
.hb-viewer::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 40%, rgba(6, 8, 6, .82) 100%); }
/* headline — lives in the fixed SIDE COLUMN (2026-07-26, replaced the nodes
   graph) so the reel is never covered; anchored to the column's bottom */
.hb-head { position: static; max-width: none; }
.hb-head .kick { color: #f1b84b; margin-bottom: 12px; }
.hb-head h1 { font-weight: 800; font-size: clamp(30px, 4.2vw, 52px); line-height: 1.05; letter-spacing: -.035em; color: #fff; text-shadow: 0 4px 30px rgba(0, 0, 0, .6); }
.hb-head p { margin-top: 12px; font-size: clamp(14px, 1.3vw, 18px); color: rgba(255, 255, 255, .8); max-width: 44ch; text-shadow: 0 2px 18px rgba(0, 0, 0, .55); }

/* brand strip — grows from 0 under the viewer
   FLAG (carried from old hero): client logos NOT NDA-cleared — Ash call pending */
.hb-brands {
    height: 0; opacity: 0; overflow: hidden; flex: 0 0 auto;
    display: flex; align-items: center; gap: clamp(30px, 4.6vw, 64px);
    background: #f4f1ea; padding: 0 clamp(28px, 4.6vw, 56px);   /* warm ivory, not stark #fff, so it docks into the dark editor */
}
.hb-brands img { height: 52px; width: auto; opacity: .85; flex: 0 0 auto; }

/* side column — WIPES IN with the assemble like the old nodes panel (§1
   animates width/opacity on desktop; static under reduce-motion/no-JS and
   ≤1024px). overflow hidden = the reveal clip; inner head is px-pinned by
   §1 so text never re-wraps mid-wipe. */
.hb-side {
    /* padding lives on the inner .hb-head — a padded column can't collapse
       to width:0, which left a 92px sliver at the top of the page */
    flex: 0 0 clamp(360px, 30vw, 520px); display: flex; flex-direction: column;
    justify-content: flex-end; padding: 0; overflow: hidden;
    border-left: 1px solid rgba(244, 241, 234, .08);
    background-image:
      radial-gradient(56% 42% at 60% 46%, rgba(127, 227, 179, .10), transparent 72%),
      radial-gradient(rgba(244, 241, 234, .05) 1px, transparent 1.5px);
    background-size: 100% 100%, 24px 24px;
    background-position: center, 14px 14px;
}
.hb-side .hb-head { box-sizing: border-box; padding: clamp(24px, 3vw, 48px); }
/* column-scale type — must out-specify the tokens !important h1 bump */
.hb-side .hb-head h1 { font-size: clamp(30px, 2.9vw, 46px) !important; }
.hb-side .hb-head p { max-width: none; }

/* (PANEL 5 post-strip CSS removed 2026-07-26 with its markup) */

.hb-cue {
    position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 5;
    font: 600 10px/1 var(--disp); letter-spacing: .24em; text-transform: uppercase; color: rgba(244, 241, 234, .5);
    /* no CSS transition — the §1 lerp already smooths this opacity; a transition would double-ease + ghost */
}

@media (max-width: 1024px) {
    /* narrow: the side column overlays the viewer bottom (the classic
       headline-over-reel placement) instead of squeezing the reel */
    .hb-mid { position: relative; }
    .hb-side { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; flex: none;
        border-left: 0; background: linear-gradient(180deg, transparent, rgba(6, 8, 6, .85) 70%);
        padding: 20px; overflow: visible; }
    .hb-side .hb-head { padding: 0; }
}
@media (max-width: 760px) {
    /* Panel 5 is now one cover-cropped video, so it needs no mobile re-layout — at 760vw the
       left 760 CSS px shows, i.e. the wheel-macro pane + a sliver of the scopes. The old
       grid-template-columns / .hb-wheels{display:none} rules died with the CSS mock. */
    .hb-brands img { height: 36px; }
}

/* --- bto-os-home.css lines 330-338 : reduced-motion (.hb-* subset) --------
   Original lines 339-347 of this @media block styled NON-hero panels
   (.st2-*, .ph-item, .ph-agit, .zm-*, #zmStage, .wk-glow, .wk-card) and were
   omitted. The closing } below is the block's original } from line 348. */
/* ---------- reduced motion ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .hb-scroller { height: auto; }
    .hb-stage { position: relative; }
    /* static, fully-assembled editor */
    .hb-top { height: 70px; opacity: 1; }
    .hb-brands { height: 84px; opacity: 1; }
    .hb-nodes { width: 425px; opacity: 1; }
    .hb-lower { height: 184px; opacity: 1; }
}

/* --- bto-os-home.css lines 716-721 : hero reel + poster layering ---------- */
/* HERO viewer = the SHOWREEL (Ash 2026-07-15, replaces the §5 flying-frames tunnel).
   Poster (z0) is the fallback/scroll-swap base; the video (z1) plays on top; the
   .hb-viewer::after gradient + .hb-head sit above. */
.hb-reel, .hb-reel-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hb-reel-poster { z-index: 0; }
.hb-reel { z-index: 1; }


/* ==========================================================================
   3/3 · SOURCE: bto-tokens.css   (loaded LAST — these win)
   ========================================================================== */

/* --- bto-tokens.css lines 10-30 : :root remap (light theme + structure) --- */
:root {
  --font-display: "Archivo", sans-serif;
  --font-body: "Archivo", sans-serif;
  --font-mono: "Archivo", ui-monospace, monospace;
  /* digital-creators palette */
  --dc-accent: #f1b84b;     /* yellow/gold */
  --dc-link:   #1544c0;     /* blue links */
  --dc-ink:    #212122;
  --dc-mute:   #727272;
  --dc-dark:   #212122;     /* dark section bg */
  --dc-lime:   #f1ff38;     /* bright accent on dark sections */
  /* remap OUR base vars → light theme (everything that uses them flips) */
  --canvas: #ffffff; --surface: #ffffff; --ink: #212122; --mute: #727272;
  --hair: rgba(33, 33, 34, .14);
  --on-dark: #212122; --on-dark-mute: #727272; --on-dark-hair: rgba(33, 33, 34, .14);
  --green: #f1b84b; --green-tx: #212122; --green-soft: rgba(241, 184, 75, .22);
  --bto-body: rgba(33, 33, 34, .8);
  /* structure */
  --ct: 1240px; --ct-gut: clamp(20px, 5vw, 40px);
  --ct-edge: max(var(--ct-gut), calc((100vw - var(--ct)) / 2));
}

/* --- bto-tokens.css line 33 : body ---------------------------------------- */
/* [DEP-GLOBAL] sets the hero's inherited font to Archivo — also paints the
   whole page white. Scope to .hb-scroller if Pixy's body must survive. */
/* SCOPED FOR TRANSPLANT: was `body` — would repaint Pixy's page white and swap
   its body face to Archivo. The hero still inherits Archivo via this rule. */
.hb-scroller { background: #ffffff; color: #212122; font-family: var(--font-body); }

/* --- bto-tokens.css lines 37-42 : heading + kick type --------------------- */
/* [DEP-GLOBAL] this is where the hero h1 gets Archivo 900 + UPPERCASE.
   Drop it and the headline renders sentence-case Inter — a visible regression. */
/* SCOPED FOR TRANSPLANT — the single most destructive rule in this file.
   Unscoped, it forces EVERY heading on the Pixy page to uppercase Archivo 900,
   destroying the template's typography scale (the whole point of the rebuild).
   Scoped to .hb-scroller the hero headline is byte-for-byte what it was. */
.hb-scroller h1, .hb-scroller h2, .hb-scroller h3,
.hb-scroller h4, .hb-scroller h5, .hb-scroller h6 {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  letter-spacing: -.01em; line-height: 1.02; color: #212122;
}
.hb-scroller h1 em.s, .hb-scroller h2 em.s, .hb-scroller h3 em.s { font-family: var(--font-display); font-style: normal; color: var(--dc-accent); }
.hb-scroller .kick { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #212122; }

/* --- bto-tokens.css line 45 : fluid hero headline size -------------------- */
.hb-head h1 { font-size: clamp(40px, 5.4vw, 88px); }

/* --- bto-tokens.css lines 67-80 : hero colour + .hb-stage dark-token block - */
/* HERO is a DARK cinematic stage (flying frames) → text must be light (Ash 2026-07-14 fix) */
.hb-head h1 { color: #ffffff !important; text-shadow: 0 2px 34px rgba(0,0,0,.55); }
.hb-head .kick { color: #f1b84b !important; }
.hb-head p { color: rgba(255,255,255,.84) !important; text-shadow: 0 1px 16px rgba(0,0,0,.6); }
/* HERO is a DARK editor stage — keep it dark AND restore the light-on-dark
   tokens the light theme remapped (line ~24: --on-dark*→dark). Redeclaring the
   three vars locally fixes every chrome consumer at once (.hb-top + .hb-nodes-title
   read var(--on-dark-mute); the hairlines are literals so they self-heal once dark). */
.hb-stage {
  background: #14130f !important; color: rgba(244, 241, 234, .92) !important;
  --on-dark: rgba(244, 241, 234, .92);
  --on-dark-mute: rgba(244, 241, 234, .55);
  --on-dark-hair: rgba(244, 241, 234, .08);
}

/* --- bto-tokens.css line 92 : .hb-head alignment -------------------------- */
.hb-head { left: var(--ct-edge); }

/* --- bto-tokens.css line 114 : container bump (feeds --ct-edge) ----------- */
:root { --ct: 1770px; }

/* --- bto-tokens.css line 116 : template-scale headline bump --------------- */
.hb-head h1 { font-size: clamp(48px, 6.6vw, 96px) !important; }