/* HOME: AI Web Production OS (home/os-hero, from the Homepage Lab hero-loop, Annie 2026-10-06).
   Every rule is fenced under .lh so nothing here reaches the rest of the site. */
/* Hero: AI Web Production OS. One huge headline, then the seven stages as a loop, suspended in
   a black studio. The diagram is unchanged UI; the room, the light and the floor are environment.
   The arrows are one SVG drawn by hero-loop.js from where the boxes actually sit.
   One scale: --b (the box) drives icon, label, return line and bloom. */

.lh {
  --b: clamp(56px, 5.6vw, 100px);
  --violet: var(--brand);
  --hot: var(--brand-lift);
  --edge: var(--ink-2);
  --lav: 184, 160, 255;           /* the brand violet, pale (night --brand) */
  --glow: 139, 82, 255;           /* the brand violet as emitted light: deeper, more saturated */
  min-height: 100svh;
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--paper);
  color: var(--ink);
}

/* ---------- THE ROOM (night): one continuous near-black, no edge between wall and floor.
   The floor is never drawn; it is only revealed by what reflects in it and by the faint
   light the diagram spills onto it. --plane (set by the script) is where the floor sits. */
.lh { background: #000; }   /* the photograph's own black, so its edges never show */
.lh .room { position: absolute; inset: 0; z-index: -2; pointer-events: none; display: none; }
.lh .room { display: block; }
/* THE STUDIO FLOOR. Annie's photograph of a black room with a wet floor, drained of colour so its
   seven streaks are all neutral white, then scaled and placed by the script so the streaks sit
   under the seven boxes and its floor line sits just under the return arrow. */
.lh .studio { position: absolute; left: 0; top: 0; width: 1672px; height: auto; max-width: none; opacity: 0;
  transform-origin: 0 0; filter: grayscale(1) brightness(1.05) contrast(1.05);
  transition: opacity 2.2s ease-out; }
.lh.has-studio .studio { opacity: 1; }
/* THE MOVING LIGHT on the floor. It follows the action: it sits under the lit step, slides with the
   glow along each arrow, and rides the return arrow home. The tint turns the white streak beneath
   it violet; the glow adds the light itself and a little haze above the floor line. */
.lh .floorlight { position: absolute; left: 0; top: var(--plane, 72%); bottom: 0; width: calc(var(--b) * 1.9);
  margin-left: calc(var(--b) * -0.95); opacity: 0; transition: opacity .9s ease-out; }
.lh.has-light .floorlight { opacity: 1; }
/* each layer blends straight onto the photograph (no wrapper, so nothing isolates the blend) */
/* tint: gives the streak underneath the violet hue, keeps the floor's own light and texture */
/* floor colours sampled from Annie's photograph: tint a touch toward magenta (a plain 260deg violet
   reads blue once it takes the floor's brightness), highlights in the photo's own lavender */
.lh { --floor-tint: 172, 92, 255; --floor-lav: 194, 154, 246; }
.lh .floorlight--tint { mix-blend-mode: color;
  background: radial-gradient(50% 92% at 50% 6%, rgb(var(--floor-tint)) 0%, rgba(var(--floor-tint), 0.9) 40%, transparent 78%); }
/* glow: a little extra light on the wet surface, and a breath of haze where the floor meets the dark */
.lh .floorlight--glow { mix-blend-mode: screen; top: calc(var(--plane, 72%) - 3%);
  background:
    radial-gradient(34% 7% at 50% 5%, rgba(var(--floor-tint), 0.24), transparent 100%),
    radial-gradient(20% 60% at 50% 10%, rgba(var(--floor-lav), 0.26), rgba(var(--floor-tint), 0.07) 50%, transparent 82%);
  filter: blur(8px); }
.lh.is-column .studio, .lh.is-column .floorlight { display: none; }

.lh__wrap {
  max-width: 84rem;
  min-height: 100svh;
  margin: 0 auto;
  padding: clamp(3rem, 12vh, 8rem) clamp(1rem, 9vw, 9rem) max(26vh, 11rem);
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(3rem, 10vh, 6.5rem);
}

/* the one display moment: AI Sans at its heaviest, tight, two lines like the reference */
.lh__h1 {
  margin: 0;
  font: 850 clamp(3rem, 7.4vw, 8.5rem)/0.9 var(--display);
  letter-spacing: -0.055em;
  margin-left: -0.04em;
}
.lh__h1 .nb { display: block; white-space: nowrap; }


.lh .diagram { position: relative; padding-bottom: calc(var(--b) * 1.05); }
.lh .flow { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; align-items: flex-start; }
.lh .step { position: relative; flex: none; }
.lh .step a { position: relative; z-index: 1; display: block; color: inherit; text-decoration: none; }
.lh .box {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  width: var(--b); height: var(--b);
  border: 1.5px solid var(--edge);
  background: var(--paper);
  /* light comes on quickly and dies away slowly, like a lamp, not a switch */
  transition: border-color 1.6s ease-out, box-shadow 1.6s ease-out, background-color 1.6s ease-out;
}
.lh .box { background: transparent; border-color: rgba(214, 216, 226, 0.55); }
.lh .box svg { width: 44%; height: 44%; fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: miter; transition: stroke 1.6s ease-out; }
.lh .box svg .fill { fill: var(--ink); stroke: none; transition: fill 1.6s ease-out; }
/* the stage names, set the way the site sets them: AI Sans, heavy, tight, sentence case */
.lh .lab {
  position: absolute; left: 50%; top: calc(var(--b) + 0.75rem);
  transform: translateX(-50%);
  white-space: nowrap;
  font: 750 clamp(0.95rem, 1.3vw, 1.25rem)/1.1 var(--display);
  letter-spacing: -0.02em;
  transition: color 1.6s ease-out, text-shadow 1.6s ease-out;
}
.lh .step a:hover .box, .lh .step a:focus-visible .box { border-color: var(--violet); }
.lh .step a:focus-visible { outline: none; }
.lh .step a:focus-visible .box { outline: 2px solid var(--violet); outline-offset: 4px; }

/* ---------- LIGHT. A lit step behaves like a light source: a crisp emissive edge, and a soft
   bloom thrown into the dark around it (not a box-shadow halo). */
.lh .bloom { position: absolute; z-index: 0; left: calc(var(--b) / 2); top: calc(var(--b) / 2);
  width: calc(var(--b) * 3.7); height: calc(var(--b) * 3.7); transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(var(--glow), 0.5), rgba(var(--glow), 0.2) 38%, rgba(var(--glow), 0.06) 66%, transparent);
  filter: blur(13px); opacity: 0; transition: opacity 1.8s ease-out; pointer-events: none; }
.lh .step.is-lit .bloom { opacity: 1; transition-duration: .35s; }
.lh .step.is-lit .box, .lh .step.is-lit .box svg, .lh .step.is-lit .box svg .fill, .lh .step.is-lit .lab { transition-duration: .35s; }
.lh .step.is-lit .box { border-color: #c9b2ff; background: rgb(28, 14, 58);
  box-shadow: 0 0 0 1px rgba(var(--glow), 0.8), 0 0 7px rgba(var(--glow), 0.75), 0 0 20px rgba(var(--glow), 0.42), inset 0 0 18px rgba(var(--glow), 0.38); }
.lh .step.is-lit .box svg { stroke: #f1eaff; }
.lh .step.is-lit .box svg .fill { fill: #f1eaff; }
.lh .step.is-lit .lab { color: #c7aeff; text-shadow: 0 0 14px rgba(var(--glow), 0.65); }

/* arrows: violet with a faint self-lit edge, so they read as light rather than CSS strokes */
.lh .wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.lh .wires path { fill: none; stroke: var(--violet); stroke-width: 1.75; stroke-linecap: square; stroke-linejoin: miter; }
.lh .wires .line, .lh .wires .head { filter: drop-shadow(0 0 1.5px rgba(var(--lav), 0.5)) drop-shadow(0 0 6px rgba(var(--lav), 0.18)); }
.lh .wires .line, .lh .wires .head { transition: stroke 1.4s ease-out, filter 1.4s ease-out; }
.lh .wires .line.is-warm { stroke: #c4a8ff; filter: drop-shadow(0 0 2px rgba(var(--glow), 0.85)) drop-shadow(0 0 9px rgba(var(--glow), 0.4)); transition-duration: .3s; }
.lh .wires .head.is-hot { stroke: #e9ddff; filter: drop-shadow(0 0 3px rgba(var(--glow), 0.95)) drop-shadow(0 0 11px rgba(var(--glow), 0.55)); transition-duration: .2s; }
.lh .wires .pulse { stroke: #d9c6ff; stroke-width: 3.5; stroke-linecap: round; opacity: 0;
  filter: drop-shadow(0 0 3px rgba(var(--glow), 0.95)) drop-shadow(0 0 10px rgba(var(--glow), 0.75)) drop-shadow(0 0 20px rgba(var(--glow), 0.4)); }

/* ---------- THE FLOOR. A live mirror of the diagram, flipped about --plane, stretched a little
   (glossy floors lengthen reflections), smeared vertically, dimmed, and gone within a short
   distance. White reflects as faint grey; lit violet reflects as lavender. Never mirror-sharp. */
.lh .mirror { position: absolute; inset: 0; z-index: -1; pointer-events: none; display: none;
  transform-origin: 50% var(--plane-local, 100%);
  /* foreshortened: seen from above, a glossy floor squashes what it reflects */
  transform: scaleY(-0.78);
  filter: url(#streak) brightness(1.05) saturate(1.4);
  opacity: 0.85;
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.8) 30%, rgba(0, 0, 0, 0.45) 62%, rgba(0, 0, 0, 0.16) 85%, transparent 100%);
          mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.8) 30%, rgba(0, 0, 0, 0.45) 62%, rgba(0, 0, 0, 0.16) 85%, transparent 100%); }
/* the photographed floor carries the reflections now; the drawn mirror stays off */
.lh .mirror { display: none; }
.lh .mirror .lab { text-shadow: none; }
.lh.is-column .mirror { display: none; }

/* first-load state: steps wait until the script brings them in (only when motion is allowed) */
html.lh-anim .lh .step { opacity: 0; transform: translateY(10px); }
html.lh-anim .lh .step.is-in { opacity: 1; transform: none; transition: opacity .45s ease-out, transform .45s cubic-bezier(.2, .7, .2, 1); }

/* phones: the row becomes a column, labels beside the boxes, the loop runs up the right */
@media (max-width: 44rem) {
  .lh { --b: 54px; }
  .lh__wrap { justify-content: flex-start; gap: 2.75rem; padding: 3rem 1.25rem 6rem; }
  .lh__h1 { font-size: clamp(2rem, calc((100vw - 2.5rem) / 7.6), 4.5rem); line-height: 0.92; } /* the longer line, "Web Production", runs 7.33 em wide: fit it inside the 1.25rem gutters */
  .lh .diagram { padding-bottom: 0; max-width: 22rem; }
  .lh .flow { flex-direction: column; gap: 44px; }
  .lh .lab { left: calc(var(--b) + 1rem); top: 50%; transform: translateY(-50%); font-size: 1.15rem; }
}

/* ---------- ON THE SITE. The hero is the black studio in both site themes, so it carries the night
   tokens itself; it runs edge to edge inside the main column; and the site's own .step panel style
   (site.css) never reaches its steps. */
.lh {
  --paper: #0B0D12; --paper-deep: #10131B; --paper-3: #161A24;
  --ink: #F2F3F7; --ink-2: #A8B0BD; --ink-3: #78808E;
  --rule: #222735; --rule-firm: #39415A;
  --brand: #B8A0FF; --brand-lift: #CBB8FF; --brand-wash: #1A1530; --brand-edge: #3A2E66;
  color-scheme: dark;
}
body.home-os #main { padding: 0; }
body.home-os #main > .topbar { display: none; }
body.home-os #main > .ia { margin: 0; }
.lh .step { background: none; padding: 0; }

/* ONE SCREEN, NO SCROLL. The hero is exactly the viewport (less the site's top bar where the rail
   becomes one), and its content fits inside it; the script lays the boxes onto the floor's streaks. */
.lh { height: 100svh; min-height: 0; overflow: hidden; }
.lh__wrap { min-height: 0; height: 100%; }
@media (max-width: 60rem) { body.home-os .lh { height: calc(100svh - 69px); } }
@media (max-width: 44rem) {
  .lh { --b: clamp(30px, 6.2svh, 54px); --gap: clamp(10px, 3svh, 40px); }
  .lh__wrap { justify-content: center; gap: clamp(1.25rem, 3.5svh, 2.75rem); padding: clamp(1rem, 3svh, 2.5rem) 1.25rem; }
  .lh__h1 { font-size: clamp(2rem, min(calc((100vw - 2.5rem) / 7.6), 8svh), 4.5rem); }
  .lh .flow { gap: var(--gap); }
  /* the tap area is the whole row, not just the drawn box: box plus gap tall, never under 44px,
     reaching across the label, so a small box is still an easy target (founder, Phase 4 touch check) */
  .lh .diagram > .flow .step a::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: calc(var(--b) + 10rem); height: max(44px, calc(var(--b) + var(--gap))); }
  .lh .lab { font-size: clamp(1rem, 2.4svh, 1.15rem); }
}
/* where the photograph can't reach the bottom (tall, narrow screens), it fades into the dark instead
   of ending on an edge, and the moving light stops where the floor does */
.lh .studio { -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent); mask-image: linear-gradient(to bottom, #000 82%, transparent); }
.lh .floorlight { bottom: auto; height: calc(var(--floor-end, 100%) - var(--plane, 72%)); }