/* ============================================================================
   CAPSEAD — THE CAPSEAD LENS (the arrival on Home)
   ----------------------------------------------------------------------------
   ONE signature object, derived from the real mark. /assets/brand/capsead-symbol.svg
   is three painted layers — the FACE (the broad outer surface of a furled sail,
   deep teal → teal → green), the FOLD (its under-surface, navy → blue) and the
   RIM (#7FE2FD, the specular lit edge of the fold, the mark's brightest element).
   lens.js instantiates that blade SEVEN times along Z, each deeper one larger and
   turned a few degrees further about the mark's own axis. From the front the seven
   nest into the CAPSEAD C; in parallax their mouths are a helical THROAT. The form
   is the current mark's surface, the nesting is the legacy circuit-C's structure,
   and the lighting model is the current mark's own.

   Native CSS 3D only. .ln-stage holds the perspective (origin = the eye, set by
   lens.js), .ln-world is the CAMERA (translateZ), and every blade and every record
   fragment is its own translate3d layer inside it.

   The flat layer (.ln-front: the seam, the thesis, the ways in) is ordinary HTML
   in its FINAL state; under motion its reveals are CSS animations gated by .ln-play,
   all sharing ONE clock (the .ln lnClock animation) with lens.js.

   Clock, in ms — keep in step with T in lens.js. THE ENDING IS STRICTLY SERIAL: nothing
   here overlaps the thing that caused it.
      0      ACT 1 · inside one customer's record, and a whole business of evidence
      380    line 1 is painted (the page's first contentful paint)
       90    ACT 2 · the camera is ALREADY drawing back; signals beacon once as they pass
     1350    ACT 3 · a lit edge, far out in the field — the MIDDLE form's, first
     1750         · a silhouette: something very large is eclipsing the record
     2450         · it takes on colour: the CAPSEAD mark, seven deep, three supporting forms
                     to the left of the centre C and three to the right
     3400    ACT 4 · CAPSEAD reads: light travels INWARD through the rims to the centre
     4120    ACT 5 · what matters is DRAWN IN — a continuous stream into the mouth of the
                     CENTRE C, and the centre brightens for every signal it takes
     5830         · the LAST meaningful signal is consumed. Nothing else has begun.
     5830         · the centre HOLDS what it has taken — it is the only thing lit
     5900         · and only THEN does the ordinary record fall back
     6170    ACT 6 · two lights, struck at the furthest-LEFT and furthest-RIGHT terminals
     6870         · they MEET in the centre C: its most complete state
     6980         · and THAT makes the six supporting forms fuse inward into it
     7980         · the fusion lands: ONE resolved CAPSEAD mark, centred and upright
     8130    ACT 7 · two traces run the mark's OWN silhouette and fold, and meet at its tail
     8430         · the meeting strikes one point, and ONE beam is fired at the plane
     8590         · impact; the seam takes its energy and spreads slowly from that point
     8690         · line 2 is read in and CAPSEAD's own spectrum resolves into the word
     9310         · the ways in; everything calms and holds
     9950    end
   ========================================================================== */

.ln { position: relative; min-height: max(100svh, 640px); display: flex; flex-direction: column;
  justify-content: flex-end; padding: 0 0 clamp(40px, 6.5svh, 74px); isolation: isolate; overflow: clip; }
.ln-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---- the room ------------------------------------------------------------ */
/* the pointer, declared ONCE on the hero so the object and the record field both read it */
.ln { --mx: 0; --my: 0; --sp: 0; --lit: 0; }
.ln-stage { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none;
  perspective: 1020px; perspective-origin: 50% 40%; }
.ln-world { position: absolute; left: 50%; top: 40%; width: 0; height: 0; transform-style: preserve-3d;
  /* world sizes (px at life size) for a record fragment */
  --k: 19px; --e: 30px; --n: 21px; }
@media (max-width: 760px) { .ln-stage { perspective: 780px; } .ln-world { --k: 13px; --e: 20px; --n: 14px; } }

/* ---- THE LENS ------------------------------------------------------------ */
/* three nested groups, each with exactly one job, so none of them fight:
     .ln-lens   placement and the arrival's own attitude — JS-animated, because the object
                squares up as the seven close into one (the nest is yawed, a single mark is
                not), and it also carries the pointer's vars for the subtree
     .ln-pivot  the very slow atmospheric depth the object holds at rest (CSS)
     .ln-tilt   the pointer's minute acknowledgement (CSS only) */
.ln-lens { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
.ln-pivot { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d; }
/* THE ORBIT. Every blade's own z is measured from blade 0's plane (lens.js rebases them), so
   this single translateZ carries the whole object to that plane and the rotations that follow
   turn it about ITSELF — no arc, no slide across the frame.
   AT REST a LOCAL perspective goes into the same chain, and it is the whole repair. MEASURED
   on the previous build: the mark sits at u 6.4 in a room whose perspective is 1020 px, which
   is very nearly orthographic, so 19 degrees of yaw moved blade 0's box by 25 px and squeezed
   it by 7% — degrees that were real and a projection that could not show them. --pd (about 3x
   the mark's own world half-width, set by lens.js so a phone and a desktop turn alike) makes
   the same 18 degrees read as a trapezoid: 272 px wide turned away, 333 px turned toward you.
   It is only applied once the nest has closed, because during the arrival the seven blades are
   spread over thousands of px of z and a second perspective would re-compose them. */
.ln-tilt { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-style: preserve-3d;
  transform: translateZ(var(--oz, 0px)) rotateY(calc(var(--mx) * 18deg)) rotateX(calc(var(--my) * -10deg)); }
.ln-settled .ln-tilt {
  transform: translateZ(var(--oz, 0px)) perspective(var(--pd, 3000px))
    rotateY(calc(var(--mx) * 18deg)) rotateX(calc(var(--my) * -10deg)) rotateZ(calc(var(--mx) * -2deg)); }

/* one blade: the mark's own three layers, on its own plane in the world */
.ln-blade { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.ln-blade .bl { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.bl-mat { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
/* before CAPSEAD is there, the material is a silhouette; the arrival lifts it (lens.js) */
.bl-mat { filter: brightness(.05) saturate(.5); }
.bl-blue, .bl-rim, .bl-hot { opacity: 0; }
/* the bloom is the one genuinely expensive thing in the scene (an SVG Gaussian blur). It gets its own
   compositor layer so the blade repainting beside it never re-rasters it — gives the layer back once
   the arrival is over, and then lens.js's settle() takes it out of the page entirely: NOTHING about
   the resting hero depends on a Gaussian blur, which is what a returning tab would have to redo. */
.bl-hot { will-change: opacity; }
.ln-alive .bl-hot, .ln-settled .bl-hot { will-change: auto; }
/* the resting object's one answer to a pointer beyond its degree of yaw: a minute specular lift on
   the lit edge, and only once everything has settled */
.bl-spec { opacity: 0; }
.ln-settled .ln-blade-a .bl-spec { opacity: calc(var(--sp, 0) * .5);
  transition: opacity .3s linear; }
/* the fold under-surface answers the turn too: the light stays put in the room, the object
   moves under it. Together with the yaw this is what stops a flat shape reading as a sticker. */
.ln-settled .ln-blade-a .bl-blue { opacity: calc(.18 + var(--lit, 0) * .2); transition: opacity .3s linear; }
/* the terminal dot — the legacy circuit-C's own motif, one at each blade's lit tail */
.bl-dot { fill: #EAFCFF; }

/* the probe lens.js uses to ask the engine whether it really divides by Z (see lens.js) */
.ln-probe { position: absolute; left: 0; top: 0; width: 100px; height: 100px; }
/* a ZERO-SIZE probe, for reading one transformed POINT. A sized box inside a blade is scaled
   by that blade's own scale() — ten times, at the back of the nest — and a rotated 1 000 px
   box's bounding rect starts nowhere near its origin, so the "measured" axis point was out by
   a different amount on each side of the centre. Zero size, and the rect IS the point. */
.ln-probe0 { width: 0; height: 0; }

/* the still: the mark itself, at rest, behind the words. It is what the page shows when there is no
   script, and what it falls back to if the engine does not apply perspective at all. */
.ln-still { position: absolute; left: 50%; top: 40%; z-index: -2; pointer-events: none;
  transform: translate(-46%, -50%); opacity: .82;
  filter: drop-shadow(0 0 60px rgba(2, 89, 114, .45)); }
.ln-still img { width: clamp(148px, 24vw, 292px); height: auto; }
@media (max-width: 760px) { .ln-still { top: 36%; } }

/* ACT 6 · the two lights. Deliberately NOT a circle with a soft falloff — that is the orb this
   build removed. Each is a short streak, elongated along the way it is travelling and rotated to
   face it, small, and always crossing the object's own geometry rather than floating in space. */
/* ACT 6's two lights are composited ABOVE the object, at the point their three-dimensional
   path projects to (see lens.js). A light travelling inside an instrument is seen ON it; as
   children of the nest they were behind six opaque surfaces and the whole Act photographed as
   nothing at all. The layer is inert — no hit testing, no filter, two elements. */
.ln-lite { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.ln-spark { position: absolute; left: 0; top: 0; width: 44px; height: 44px; opacity: 0;
  border-radius: 50%; transform-origin: 50% 50%; backface-visibility: hidden; pointer-events: none;
  background: radial-gradient(closest-side, #F4FFFF 0 11%, rgba(214, 250, 255, .92) 27%,
    rgba(127, 226, 253, .44) 55%, rgba(5, 121, 238, 0) 84%); }
.ln-settled .ln-lite { display: none; }

/* ACT 7 · THE RESULT. Nothing mark-shaped leaves this object. The previous build sent the
   #csRimP path forward through the room as a small CAPSEAD crescent that grew from 26 px to
   132 px — photographed at 6 870 → 6 950 ms it reads as a little logo hopping out and curving
   down to the seam, which is what this replaces. What leaves is a BEAM.
   The identity resolves first: two travelling dashes run the mark's own two edges — one down
   the outer silhouette, one along the lit fold — and meet at its tail. */
.ln-echo { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
.ln-echo svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.ln-echo use { opacity: 0; }
/* the layer the result is fired through: above the page's own ground, below its words */
.ln-fire { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* where they meet: ONE concentrated point, and the beam leaves from it */
.ln-flash { position: absolute; width: 50px; height: 50px; opacity: 0; border-radius: 50%;
  transform: translate(-50%, -50%) scale(.3); pointer-events: none;
  background: radial-gradient(closest-side, #FFFFFF 0 11%, rgba(223, 250, 255, .95) 22%,
    rgba(127, 226, 253, .34) 46%, rgba(5, 121, 238, 0) 72%); }
/* THE BEAM. Screen space, because it is travelling toward the viewer and its projection is the
   whole of what it is. It is laid out one pixel long and four high at the mark's tail; its own
   transform rotates it onto the line to the impact point, slides it out to where its tail has
   reached, and scales it to the length its head has run. Nothing about it curves, hops, floats
   or carries a shape. */
/* Its glow is MASKED, not shadowed. A box-shadow follows the border box, so on a streak whose
   own gradient is transparent for most of its length it paints a soft grey slab around the
   whole rectangle — photographed at 7 300 ms that is exactly what it looked like. A vertical
   mask instead gives a hot core that falls away above and below it, with no filter, no shadow
   and nothing for the compositor to re-raster. */
.ln-beam { position: absolute; height: 13px; opacity: 0; pointer-events: none;
  transform-origin: 100% 50%; will-change: transform, opacity;
  background: linear-gradient(90deg, rgba(127, 226, 253, 0), rgba(127, 226, 253, .5) 40%,
    rgba(190, 246, 255, .92) 78%, #EAFCFF 93%, #FFFFFF 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .22) 28%,
    #000 45%, #000 55%, rgba(0, 0, 0, .22) 72%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .22) 28%,
    #000 45%, #000 55%, rgba(0, 0, 0, .22) 72%, rgba(0, 0, 0, 0) 100%); }
/* and where it lands: a small, controlled flash, and the seam takes it from there */
.ln-hit { position: absolute; width: 168px; height: 60px; opacity: 0; border-radius: 50%;
  transform: translate(-50%, -50%) scale(.22, .3); pointer-events: none;
  background: radial-gradient(closest-side, #FFFFFF 0 10%, rgba(223, 250, 255, .9) 26%,
    rgba(127, 226, 253, .42) 54%, rgba(5, 121, 238, 0) 84%); }

/* the resting object's halo: a plain radial gradient, no filter, so the settled hero has
   nothing expensive in it at all */
.ln-glow { position: absolute; left: 0; top: 0; opacity: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(2, 121, 160, .3), rgba(5, 121, 238, .12) 44%, rgba(8, 8, 14, 0) 74%); }
/* the object's own halo leans with it, so the light in the room and the turn are one gesture */
.ln-settled .ln-tint { transform: translate(calc(var(--mx, 0) * 26px), calc(var(--my, 0) * 16px)) scale(1.05);
  transition: transform 520ms cubic-bezier(.22, 1, .3, 1), opacity 520ms linear;
  opacity: calc(.12 + var(--lit, 0) * .1); }

/* ---- a fragment of the record --------------------------------------------- */
/* Not a card and never a panel: a kind, its date, and — for a few — the words the
   record actually holds. Its ground is the page's own colour, feathered, so a nearer
   fragment covers a farther one. */
/* --gd is the ground a fragment stands on, and it is REGISTERED so it interpolates: the dark
   feather is what lets a sentence read against the room, and it is exactly wrong once that
   sentence is inside the object's own light. lens.js takes it to 0 as a signal is drawn in. */
@property --gd { syntax: '<number>'; inherits: false; initial-value: 1; }
.ln-o { position: absolute; left: 0; top: 0; white-space: nowrap; backface-visibility: hidden;
  font-family: var(--font); color: var(--ink-secondary); padding: 7px 12px; }
.ln-o::before { content: ''; position: absolute; inset: 9px 14px; z-index: -1; border-radius: 50%;
  opacity: var(--gd, 1);
  background: rgba(8, 8, 14, .66); box-shadow: 0 0 26px 20px rgba(8, 8, 14, .66); }
.ln-lab { display: flex; align-items: center; gap: .55em; font-size: var(--k); font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); line-height: 1.25; }
.ln-lab b { font-weight: 600; color: #BDB9B2; }
.ln-lab .sep { color: rgba(255, 255, 255, .26); font-weight: 400; }
.ln-txt { font-size: var(--e); font-weight: 300; letter-spacing: -.022em; line-height: 1.16; color: var(--ink);
  margin: .24em 0 0; padding-left: calc(var(--k) * .95); }
.k-commit .ln-txt, .k-need .ln-txt { font-size: calc(var(--e) * .8); color: var(--ink-secondary); font-weight: 350; }
.ln-name { font-size: var(--n); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: #BDB9B2; margin: 0 0 .55em; line-height: 1.2; }

/* the glyph of what a person saved — the site's own shapes, scaled into the world */
.ln-gl { flex: 0 0 auto; display: inline-block; border-radius: 1px; position: relative; }
.ln-gl::after { content: ''; position: absolute; left: 50%; top: 50%; width: 2.2em; height: 2.2em;
  margin: -1.1em 0 0 -1.1em; border-radius: 50%; opacity: .34;
  background: radial-gradient(closest-side, currentColor, transparent); }
.k-contact .ln-gl { color: var(--teal); width: .12em; height: .95em; background: var(--teal); box-shadow: 0 0 .5em rgba(24, 208, 215, .75); }
.k-commit .ln-gl { color: var(--gold); width: .26em; height: .66em; background: var(--gold); box-shadow: 0 0 .5em rgba(196, 146, 42, .7); }
.k-need .ln-gl { color: var(--gold); width: .26em; height: .66em; box-shadow: inset 0 0 0 1.5px var(--gold), 0 0 .5em rgba(196, 146, 42, .5); }
.k-memory .ln-gl { color: var(--steel); width: .36em; height: .36em; background: var(--steel); box-shadow: 0 0 .5em rgba(90, 135, 184, .8); }
.k-note .ln-gl { color: var(--ink-faint); width: .1em; height: .42em; background: var(--ink-faint); }
.k-note .ln-gl::after { opacity: .16; }
.k-quiet .ln-gl { color: #5A87B8; width: .3em; height: .3em; box-shadow: inset 0 0 0 1.5px var(--steel); }
/* a customer change: the record turning over — two offset ticks, not a new colour in the system */
.k-change .ln-gl { color: #7FE2FD; width: .3em; height: .5em; background: linear-gradient(180deg,
  #7FE2FD 0 42%, transparent 42% 58%, rgba(127, 226, 253, .5) 58% 100%); }

/* ---- a MARK of the record -------------------------------------------------
   The other ~200 things this business saved. A glyph, and — only while it is near enough for
   that to mean anything — the day a person saved it. There are three times as many of these
   as there are sentences, so they are cheap BY CONSTRUCTION: no filter, no shadow blur, no
   backdrop, nothing to re-rasterise. Only transform and opacity ever change.
   A mark is laid out at the size its own settled depth needs (lens.js sets font-size in world
   px), so the business reads as present at u = 24 exactly as it does at u = 1. */
.ln-m { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: .55em;
  white-space: nowrap; line-height: 1; backface-visibility: hidden; pointer-events: none;
  font-family: var(--font); }
.ln-m > i { flex: 0 0 auto; display: block; border-radius: .07em; }
/* WHAT a person saved, and only then WHEN. The kind leads; the date is the evidence under it,
   two thirds the size and half the presence. The previous build gave a mark a glyph and a date
   and nothing else, so the opening frames read as a calendar rather than as a business — this
   ordering, and this weighting, is that repair. */
.ln-m > em { font-size: .84em; font-style: normal; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(205, 201, 194, .92); }
.ln-m > b { font-size: .66em; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(163, 159, 152, .52); margin-left: -.2em; }
.ln-m.k-memory > em { color: rgba(163, 199, 236, .95); }
.ln-m.k-need > em, .ln-m.k-commit > em { color: rgba(222, 197, 141, .92); }
.ln-m.k-change > em { color: rgba(196, 230, 246, .92); }
.ln-m.k-contact > i { width: .17em; height: 1em; background: var(--teal); }
.ln-m.k-commit  > i { width: .3em; height: .74em; background: var(--gold); }
.ln-m.k-need    > i { width: .3em; height: .74em; box-shadow: inset 0 0 0 .075em var(--gold); }
.ln-m.k-memory  > i { width: .42em; height: .42em; border-radius: 50%; background: var(--steel); }
.ln-m.k-note    > i { width: .13em; height: .48em; background: var(--ink-faint); }
.ln-m.k-quiet   > i { width: .36em; height: .36em; border-radius: 50%; box-shadow: inset 0 0 0 .075em var(--steel); }
.ln-m.k-change  > i { width: .26em; height: .56em; background: linear-gradient(180deg,
  #7FE2FD 0 42%, transparent 42% 58%, rgba(127, 226, 253, .5) 58% 100%); }
/* ONE beacon per mark: a small point lifts, haloes and goes calm again as that signal passes
   through meaningful view depth. Once — never a repeat, never a notification dot. */
/* THE WAKE — the resting field's answer to the pointer, and it is TWO terms, not one.
     DOT      max(0, q · m): a signal only answers when the pointer is on its own side of the
              frame, and it answers more the further out it sits.
     NEAR     1 − |q − m|²·k: and it answers more the closer the pointer actually is to it.
   Together they are continuous in both direction and distance — pointer upper-right and the
   upper-right of the business comes up while the left settles; move to the lower left and the
   answer crosses the frame with you. There is no threshold, no radar sweep and no pointer
   flashlight: nothing switches, everything leans.
   One expression per signal, resolved by the style engine. No JS runs per mark, ever. */
.ln-settled .ln-m, .ln-settled .ln-o {
  --dx: calc(var(--qx, 0) - var(--mx, 0));
  --dy: calc(var(--qy, 0) - var(--my, 0));
  --near: max(0, calc(1 - (var(--dx) * var(--dx) + var(--dy) * var(--dy)) * .46));
  --dot: max(0, calc(var(--qx, 0) * var(--mx, 0) + var(--qy, 0) * var(--my, 0)));
  /* and the whole answer is scaled by HOW FAR the pointer is from neutral (--lit, set by
     lens.js as |m|), so that at rest — and the moment the pointer leaves the hero — the field
     settles completely instead of holding a lit patch in the middle of the frame. */
  --wk: min(1, calc((var(--dot) * .82 + var(--near) * var(--near) * .5) * var(--lit, 0))); }
.ln-mw, .ln-ow { display: none; position: absolute; left: -1.1em; right: -1.1em; top: -.9em; bottom: -.9em; opacity: 0;
  border-radius: .9em; pointer-events: none;
  background: radial-gradient(ellipse at 30% 50%, rgba(178, 242, 255, .92), rgba(110, 206, 246, .42) 34%, rgba(127, 226, 253, 0) 70%); }
.ln-settled .ln-mw, .ln-settled .ln-ow { display: block; opacity: calc(var(--wk) * 1.25);
  transition: opacity 420ms cubic-bezier(.22, 1, .3, 1); }
/* the signal itself comes up out of the air with its wake — the glyph, the kind and the date
   gain presence and a little size rather than merely sitting inside a glow. Opacity and one
   transform on three small boxes; no filter, nothing to re-rasterise. */
.ln-settled .ln-m > i, .ln-settled .ln-m > em, .ln-settled .ln-m > b,
.ln-settled .ln-o .ln-lab, .ln-settled .ln-o .ln-txt, .ln-settled .ln-o .ln-name {
  transition: opacity 420ms cubic-bezier(.22, 1, .3, 1), transform 420ms cubic-bezier(.22, 1, .3, 1); }
.ln-settled .ln-m > i { opacity: calc(.46 + var(--wk) * .54);
  transform: scaleY(calc(1 + var(--wk) * .22)); }
.ln-settled .ln-m > em { opacity: calc(.4 + var(--wk) * .6); transform: scale(calc(1 + var(--wk) * .1)); }
.ln-settled .ln-m > b { opacity: calc(.34 + var(--wk) * .66); transform: scale(calc(1 + var(--wk) * .08)); }
/* the sentences that survived are part of the field too */
.ln-ow { left: -.8em; right: -.8em; top: -.6em; bottom: -.6em; }
.ln-settled .ln-ow { opacity: calc(var(--wk) * .8); }
.ln-settled .ln-o .ln-lab, .ln-settled .ln-o .ln-name { opacity: calc(.5 + var(--wk) * .5); }
.ln-settled .ln-o .ln-txt { opacity: calc(.42 + var(--wk) * .58); }
.ln-mb { position: absolute; left: .16em; top: 50%; opacity: 0; border-radius: 50%;
  transform: translate(-50%, -50%) scale(.28); transform-origin: 50% 50%; pointer-events: none;
  background: radial-gradient(closest-side, #F4FFFF 0 15%, rgba(190, 250, 252, .9) 33%,
    rgba(127, 226, 253, .34) 58%, rgba(5, 121, 238, 0) 80%); }

/* the air of the business: a haze deep at the eye, and the light that comes out of it */
.ln-haze { position: absolute; left: 0; top: 0; width: 1700px; height: 980px; margin: -490px 0 0 -850px;
  border-radius: 50%; opacity: .5; transform-origin: 50% 50%;
  background: radial-gradient(closest-side, rgba(2, 89, 114, .22), rgba(2, 39, 97, .10) 40%, rgba(5, 121, 238, .03) 68%, rgba(8, 8, 14, 0)); }
.ln-tint { opacity: 0;
  background: radial-gradient(closest-side, rgba(127, 226, 253, .13), rgba(5, 121, 238, .06) 42%, rgba(2, 172, 132, 0) 74%); }

/* ---- the flat layer -------------------------------------------------------- */
.ln-scrim { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, var(--ground) 0, var(--ground) 52px, rgba(8, 8, 14, .66) 92px, rgba(8, 8, 14, 0) 168px); }
.ln-front { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; }
/* the words stand on the page's own ground, which begins just above the seam */
.ln-front::before { content: ''; position: absolute; z-index: -1; left: -50vw; right: -50vw; top: -54px; bottom: -220px;
  pointer-events: none; background: linear-gradient(180deg, rgba(8, 8, 14, 0), rgba(8, 8, 14, .82) 62px, var(--ground) 172px); }

/* the seam: it does not exist until CAPSEAD's signal reaches the viewer */
.ln-seam { position: relative; height: 2px; width: min(560px, 62vw); margin: 0 0 30px; }
.ln-seam::before { content: ''; position: absolute; left: 0; right: 0; top: .5px; height: 1px; background: var(--line);
  transform-origin: 50% 50%; }
.ln-seam::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, #011539, #0579EE 30%, #7FE2FD 50%, #029E9B 72%, #02AC84);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  box-shadow: 0 0 7px rgba(127, 226, 253, .8); transform-origin: 50% 50%;
  transition: filter .45s var(--ease-out); }
/* the environment answers the way in */
.ln:has(.ln-go:hover) .ln-seam::after, .ln:has(.ln-go:focus-visible) .ln-seam::after { filter: brightness(1.55) saturate(1.15); }

/* the thesis: two composed lines, cleanly centred, on the site's own h1 voice */
h1.ln-h { font-size: clamp(27px, calc((min(100vw, 1240px) - 80px) / 24.4), 50px); font-weight: 200; line-height: 1.12;
  letter-spacing: -0.032em; color: var(--ink); max-width: 20.5em; }
h1.ln-h .ln-l1, h1.ln-h .ln-l2 { display: block; }
h1.ln-h .ln-l1 > span, h1.ln-h .ln-l2 > span { display: block; text-wrap: balance; }
h1.ln-h .ln-l1 { color: var(--ink); }
h1.ln-h .ln-l2 { margin-top: .12em; }
/* only the word CAPSEAD carries the mark's own spectrum: the rim's cyan, the fold's
   blue, the face's teal and green — the real stops, resolved once and then static */
.ln-word { font-weight: 300;
  background-image: linear-gradient(97deg, #7FE2FD 0%, #0579EE 33%, #029E9B 70%, #02AC84 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent; }
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .ln-word { color: var(--teal); -webkit-text-fill-color: currentColor; }
}

/* the ways in — Request access is physically part of the scene: a dimensional edge
   drawn from the mark's own spectrum, a little internal light, and a small
   environmental answer (the seam brightens; one internal surface of the Lens wakes) */
.ln-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 30px; }
.ln-cta .ln-go { position: relative; isolation: isolate; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24),
  0 0 0 0 rgba(127, 226, 253, 0); transition: transform .2s var(--ease-out), box-shadow .34s var(--ease-out),
  background-color .2s var(--ease-out); }
/* the dimensional edge: a hairline of the mark's own gradient, standing just off the control */
.ln-cta .ln-go::before { content: ''; position: absolute; inset: -4px; border-radius: var(--r-pill); z-index: -1;
  padding: 1px; background: linear-gradient(101deg, #7FE2FD, #0579EE 34%, #011539 56%, #029E9B 82%, #02AC84);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .5; transition: opacity .3s var(--ease-out), inset .4s var(--ease-settle); }
/* internal light */
.ln-cta .ln-go::after { content: ''; position: absolute; inset: 0; border-radius: var(--r-pill); z-index: -1;
  background: radial-gradient(120% 160% at 50% -40%, rgba(234, 252, 255, .45), rgba(255, 255, 255, 0) 62%);
  opacity: .5; transition: opacity .3s var(--ease-out); }
@media (hover: hover) {
  .ln-cta .ln-go:hover::before { opacity: 1; inset: -6px; }
  .ln-cta .ln-go:hover::after { opacity: .9; }
  .ln-cta .ln-go:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 0 22px rgba(127, 226, 253, .22); }
}
.ln-cta .ln-go:focus-visible::before { opacity: 1; inset: -6px; }
.ln-cta .ln-go:focus-visible::after { opacity: .9; }
/* the object itself acknowledges it: one internal surface of the frontmost blade wakes */
.ln-wake { opacity: 0; transition: opacity .5s var(--ease-out); }
.ln:has(.ln-go:hover) .ln-wake, .ln:has(.ln-go:focus-visible) .ln-wake { opacity: .3; }

/* there IS a page below this one, and on a phone the hero owns the whole screen — so the hero
   stops 34 px short of the fold (the next section's own edge is the honest cue) and a hairline
   with a small chevron says so. It is static: the resting hero is allowed exactly one moving
   thing, and that is the object. */
.ln-cue { display: none; }
.ln-cue i { display: block; width: 1px; height: 20px; margin: 0 auto;
  background: linear-gradient(180deg, rgba(189, 185, 178, 0), rgba(189, 185, 178, .38)); }
.ln-cue svg { display: block; margin: 3px auto 0; width: 11px; height: 7px; opacity: .42; }

.ln-replay { position: absolute; right: var(--gut); bottom: 20px; z-index: 2; }

/* ---- phone: composed for the phone, not shrunk ---------------------------- */
@media (max-width: 760px) {
  /* the hero stops short of the fold on purpose: the next section's edge is the scroll cue */
  .ln { padding-bottom: 26px; min-height: max(calc(100svh - 34px), 660px); }
  .ln-cue { display: block; margin-top: 18px; }
  .ln-seam { width: min(320px, 76vw); margin: 0 0 22px; }
  h1.ln-h { font-size: clamp(24px, 6.9vw, 29px); line-height: 1.2; letter-spacing: -.028em; max-width: 14.6em; }
  .ln-cta { margin-top: 22px; width: 100%; }
  .ln-cta .btn-primary, .ln-cta .btn-ghost { flex: 1 1 46%; justify-content: center; }
  .ln-o { padding: 5px 9px; }
  .ln-o::before { inset: 7px 10px; box-shadow: 0 0 18px 14px rgba(8, 8, 14, .66); }
  .ln-txt { white-space: normal; max-width: 12em; }
  .ln-replay { bottom: auto; top: 68px; right: var(--gut); }
}
@media (max-width: 360px) {
  h1.ln-h { font-size: 23px; max-width: 13.6em; }
  .ln-cta .btn-primary, .ln-cta .btn-ghost { padding: 0 16px; }
}
/* A SHORT PHONE — 320x568 and every other small screen. The previous build kept a 640–700 px
   floor under the hero, so on a 568 px screen the hero was taller than the screen and `Sign in`
   was cut in half by the fold (measured: y 562, height 48). There is no floor here: the hero is
   the screen, less the cue, and the type and the rhythm come down to fit it. */
@media (max-width: 760px) and (max-height: 700px) {
  .ln { min-height: calc(100svh - 26px); padding-bottom: 14px; }
  h1.ln-h { font-size: clamp(19px, 5.8vw, 23px); line-height: 1.22; max-width: 15.5em; }
  .ln-seam { margin: 0 0 14px; }
  .ln-cta { margin-top: 14px; gap: 8px; }
  .ln-cta .btn-primary, .ln-cta .btn-ghost { height: 44px; padding: 0 12px; font-size: 13px; }
  .ln-cue { margin-top: 10px; }
  .ln-cue i { height: 13px; }
}
@media (min-width: 761px) and (max-height: 800px) {
  .ln-seam { margin: 0 0 22px; }
  .ln-cta { margin-top: 22px; }
}

/* ---- the arrival (motion only) -------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .ln.ln-play { animation: lnClock 9950ms linear; }
  @keyframes lnClock { from { --ln-clock: 0; } to { --ln-clock: 1; } }

  /* Line 1 is the page's first contentful paint: it is a statement about the world we
     are looking at, so it is there while we look at it — quiet, and it lifts to full
     ink only once CAPSEAD has answered it. */
  .ln-play h1.ln-h .ln-l1 > span { animation: lnFade 760ms var(--ease-out) 380ms backwards; }
  .ln-play h1.ln-h .ln-l1 { animation: lnLift 760ms var(--ease-out) 8790ms backwards; }
  @keyframes lnFade { from { opacity: 0; } }
  @keyframes lnLift { from { color: var(--ink-faint); } }

  /* Line 2 is the answer: it is read in, left to right, only after contact, and
     CAPSEAD's own spectrum resolves into the word as the letters arrive. */
  h1.ln-h .ln-l2 > span { padding: .2em .12em; margin: -.2em -.12em;
    -webkit-mask-image: linear-gradient(90deg, #000 46%, rgba(0, 0, 0, 0) 54%); mask-image: linear-gradient(90deg, #000 46%, rgba(0, 0, 0, 0) 54%);
    -webkit-mask-size: 340% 100%; mask-size: 340% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: 0 0; mask-position: 0 0; }
  .ln-play h1.ln-h .ln-l2 > span { animation: lnRead 1000ms cubic-bezier(.3, 0, .5, 1) 8690ms backwards; }
  @keyframes lnRead { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } }
  .ln-play .ln-word { animation: lnSpectrum 1000ms var(--ease-out) 8790ms backwards; }
  @keyframes lnSpectrum { from { filter: saturate(.08) brightness(1.55); } }

  /* the seam is the energy of the contact, spreading both ways from the point it touched */
  .ln-play .ln-seam::after { animation: lnSpread 1020ms cubic-bezier(.17, .84, .27, 1) 8590ms backwards; }
  .ln-play .ln-seam::before { animation: lnSpread 1280ms cubic-bezier(.17, .84, .27, 1) 8660ms backwards; }
  @keyframes lnSpread { from { transform: scaleX(0); } }
  .ln-play .ln-cta { animation: lnRise 620ms var(--ease-out) 9310ms backwards; }
  .ln-play .ln-cue { animation: lnFade 700ms var(--ease-out) 9610ms backwards; }
  @keyframes lnRise { from { opacity: 0; transform: translateY(7px); } }

  /* at rest the ONE mark is not still, but it is very nearly still: ±0.5° and 4px over half a
     minute. It is the only thing left running — and only while it is on screen AND the tab is
     being looked at (lens.js pauses it on visibilitychange as well as on intersection). */
  .ln-alive .ln-pivot { animation: lnBreathe 30s ease-in-out infinite alternate; }
  @keyframes lnBreathe {
    from { transform: rotateY(-.5deg) rotateX(.3deg); }
    to { transform: rotateY(.5deg) rotateX(-.3deg) translate3d(0, -4px, 12px); }
  }
}

/* ---- reduced motion: the final composition, held still --------------------- */
@media (prefers-reduced-motion: reduce) {
  .ln.ln-play, .ln.ln-play *, .ln.ln-play *::before, .ln.ln-play *::after { animation: none !important; }
}