/* =============================================================================
   THE HALO ZONE ENTRANCE

   Loaded by the homepage only. Every other page is exactly as light as it was.

   The palette is deliberately narrow: near-black navy, silver, and Halo Gold used
   sparingly. Red stays out of it almost entirely — the brand red is an accent in a
   publication, and an interface washed in it reads as an alert, not a front office.

   Motion is CSS transitions driven by state classes that entrance.js adds in order.
   No animation library, no keyframe soup: every visible change below is a transition
   on opacity, transform or filter, which the compositor can carry on a phone.
   ============================================================================= */

.hz-locked, .hz-locked body { overflow: hidden; }

.hz-entrance{
  position: fixed; inset: 0; z-index: 400;
  background: #04070D;
  /* One cell, everything stacked in it. The question and the navigation OVERLAP rather than
     sitting in separate rows: the question does not leave to make room for the interface, it
     recedes behind it. Laying them out as siblings in flow pushed the question off-screen. */
  display: grid; grid-template-areas: "stack"; place-items: center;
  opacity: 1; transition: opacity .42s ease;
  overscroll-behavior: contain;
}
.hz-question, .hz-nav{ grid-area: stack; }
.hz-entrance.is-leaving{ opacity: 0; pointer-events: none; }

/* ---- The physical world ---------------------------------------------------- */

.hz-stage{ position: absolute; inset: 0; overflow: hidden; }
.hz-poster,
.hz-video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;          /* centre crop: the composition is centre-weighted, so a
                                 narrow viewport keeps plate, sky and both tower groups */
  object-position: 50% 52%;
}
/* The poster is the FINAL frame — the field reveal. Showing it while the video loads would
   give away the payoff before the walk has started, so on the video path it stays hidden and
   the entrance opens on black, which is where the tunnel begins anyway. It appears only when
   the poster path is the experience. */
.hz-poster{ opacity: 0; transition: opacity .4s ease; }
.hz-entrance.poster-only .hz-poster{ opacity: 1; }
.hz-video{ opacity: 0; transition: opacity .5s ease; }
/* The video only becomes visible once it is genuinely playing, so a stalled load never
   shows a black rectangle over a poster that was already fine. */
.hz-entrance.playing .hz-video{ opacity: 1; }
.hz-entrance.poster-only .hz-video{ display: none; }

/* The transformation. The field does not cut away — it loses its colour and light while a
   navy ground rises through it, which is what makes the interface feel like it grew out of
   the stadium rather than replacing it. */
.hz-stage{ transition: filter 1.6s cubic-bezier(.4,0,.2,1); }
/* Why this exists: the cinematic has to stop being the subject and become the room the
   interface stands in, or the Command Circle spends its whole life competing with a lit
   ballpark. That intent is right and is unchanged.

   The VALUES moved, once, on evidence. A ladder of .12/.42 (previous), .18/.54 and .24/.66
   was rendered against the finished interface: at .24/.66 the mow lines and the outfield
   begin competing with the bottom label; at .12/.42 the park is so far down that the detail
   this cinematic was regenerated to obtain is thrown away and the frame tends toward
   featureless. .16/.50 sits between them — the stadium stays legible as a real place and
   still sits below the labels in the hierarchy. */
.hz-entrance.xform .hz-stage{ filter: saturate(.16) brightness(.50) contrast(1.05); }

.hz-veil{
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 62%, rgba(4,10,20,.10) 0%, rgba(4,7,13,.86) 68%, #04070D 100%);
  opacity: 0; transition: opacity 1.5s ease;
}
.hz-entrance.xform .hz-veil{ opacity: 1; }

/* The two tower lights become the gold. Positioned where the towers sit in the approved
   frame, so the colour appears to come from the stadium rather than from a UI layer. */
.hz-gold{
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 1.4s ease .25s;
  background:
    radial-gradient(22% 26% at 17% 27%, rgba(200,155,60,.52), transparent 66%),
    radial-gradient(22% 26% at 83% 27%, rgba(200,155,60,.52), transparent 66%),
    radial-gradient(64% 48% at 50% 56%, rgba(200,155,60,.16), transparent 72%);
}
.hz-entrance.xform .hz-gold{ opacity: 1; }

/* ---- The question ---------------------------------------------------------- */

.hz-question{
  position: relative; z-index: 3;
  text-align: center; padding: 0 24px;
  display: grid; gap: .1em;
  /* Placement is measured, not chosen. Across the centre 60% of the approved frame the
     horizontal bands read: 0-40% luma 22-28 at an edge energy of 0-8; 40-50% luma 30 /
     energy 35; 50-60% luma 84 / energy 64 — the outfield wall meeting the grass, the
     brightest and busiest band in the entire shot. The question used to sit at roughly
     42-52%, straddling exactly that boundary, which is why it read as weak whatever colour
     it was given. It now sits in the calm dark band above the wall, where both the silver
     and the white hold their own against the field. */
  transform: translateY(-12vh);
  transition: opacity .8s ease, transform 1.1s cubic-bezier(.4,0,.2,1);
}

/* Ground for the type — deliberately NOT a panel. One wide, soft ellipse of the same
   near-black the environment already uses, centred on the words and gone long before it
   reaches the floodlights or the frame edge, so the stadium still shows through and the
   words appear to emerge from it rather than to sit on it.

   It arrives with the setup line because the type would otherwise spend its opening
   unsupported: the question begins at 6400 and the world does not start receding until
   7600, so for 1.2s this is the only thing holding the words off a fully lit field. */
.hz-question::before{
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 170%; height: 300%;
  background: radial-gradient(closest-side ellipse at 50% 50%,
              rgba(4,7,13,.74) 0%, rgba(4,7,13,.54) 38%, rgba(4,7,13,.23) 64%, transparent 100%);
  opacity: 0; transition: opacity .9s ease;
}
.hz-entrance.q1 .hz-question::before{ opacity: 1; }

/* The title rule: one hairline of Halo Gold above the setup, the way a broadcast title card
   carries a rule above its title. It is the only gold in the moment and it is a single pixel
   of it — enough to say whose title this is, not enough to become a colour. It draws itself
   outward as the setup arrives, which is what makes the moment feel authored. */
.hz-question::after{
  content: ''; order: -1; justify-self: center;
  width: 40px; height: 1px; margin-bottom: .66em;
  background: linear-gradient(90deg, transparent, rgba(200,155,60,.9) 50%, transparent);
  opacity: 0; transform: scaleX(.28);
  transition: opacity .7s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.hz-entrance.q1 .hz-question::after{ opacity: 1; transform: scaleX(1); }
/* The question is the emotional headline of the entrance, so it is set in the house
   EDITORIAL headline treatment rather than a lighter one of its own. site.css sets its
   largest headline (.hero h1) at weight 900, -.035em tracking, .97 line-height; the question
   was at 800 / -.02em / 1.03 — lighter, looser and flatter than anything else on the site,
   which is exactly why it read as system text rather than as a headline.

   The two lines are no longer interchangeable. The first is the setup and steps back in
   silver; the second is the payoff and carries the weight and the white. That build is the
   same one .hero h1 uses when it lands on "REAL DECISIONS." in red. */
/* The question is the thesis, not a banner. At 900 weight and 86px the second line had become
   a giant website headline sitting on a video, and the two lines read as separate statements.
   Scale is down about a third, weight is off its maximum, and the line-height has opened up so
   the pair breathes as ONE thought: a quiet setup in silver, then the question in white. The
   authority comes from spacing and contrast rather than from sheer mass. */
.hz-question span{
  display: block;
  font-family: var(--display);
  letter-spacing: -.018em; line-height: 1.06;
  /* enough to hold the type off the field, not a halo */
  text-shadow: 0 1px 2px rgba(0,0,0,.5), 0 2px 22px rgba(0,0,0,.45);
  opacity: 0; transform: translateY(10px);
  /* .45s, not .7s: the payoff needs to be ON the screen, not still arriving. */
  transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.2,1);
}
/* The setup steps back, and it steps back in metal rather than in grey. A single soft
   top-to-bottom ramp across the glyphs — bright at the crown, brand silver through the
   middle, cooler underneath — is the whole effect: it reads as light falling on the letters
   from the towers above, which is the impression a flat fill can never give. The ramp is
   three stops of the existing palette, not a new colour.

   Widening the setup/payoff ratio from 40:54 to 36:56 is what makes the pair a question
   rather than two headlines: the first line is now unmistakably the smaller of the two, so
   the eye runs through it and lands on the second. */
.hz-q1{ font-size: clamp(19px, 2.9vw, 36px); font-weight: 500; letter-spacing: .014em;
        color: var(--silver); }
@supports ((-webkit-background-clip: text) or (background-clip: text)){
  .hz-q1{
    background-image: linear-gradient(176deg, #F2F6F9 0%, var(--silver) 50%, #A3B2C2 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
    /* text-shadow paints a filled block behind clipped text, so the lift becomes a filter. */
    text-shadow: none;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.55)) drop-shadow(0 2px 18px rgba(0,0,0,.42));
  }
}
/* A forced-colours user gets the text back as text; transparent fill would erase it. */
@media (forced-colors: active){
  .hz-q1{ background-image: none; -webkit-text-fill-color: CanvasText; color: CanvasText;
          filter: none; }
}

/* The payoff is the hero, and the light on it is built rather than glowed. Four values, in
   order: a hairline of white along the top edge of each glyph, which is the tower light
   catching the crown and is what gives the line dimension without a bevel; a tight contact
   shadow; a broad soft one to lift the whole line off the grass; and a wide, weak cool
   bloom in brand silver — the air around a bright object in a lit stadium.

   The Halo red is deliberately NOT in this list. Red applied per-glyph produces exactly the
   red cloud around letters that this treatment must not have, so the red lives in ::before
   as a soft pool of reflected light that has no glyph shape at all. */
.hz-q2{ position: relative;
        font-size: clamp(27px, 4.6vw, 56px); font-weight: 800; letter-spacing: -.024em;
        color: #fff;
        text-shadow: 0 -1px 0 rgba(255,255,255,.26),
                     0 1px 2px rgba(0,0,0,.60),
                     0 2px 24px rgba(0,0,0,.50),
                     0 0 38px rgba(196,206,212,.22); }
/* Kept deliberately weak and deliberately short. At .20 over a 330%-tall box this pooled into
   a visible red rectangle wherever the blank videoboard happened to sit behind it — a shape
   rather than a light. Halved and flattened, it survives as a warmth at the line and never
   resolves into an object, whatever the frame crops to at a given viewport. */
.hz-q2::before{
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 54%; transform: translate(-50%, -50%);
  width: 112%; height: 205%;
  background: radial-gradient(closest-side ellipse at 50% 50%,
              rgba(186,0,33,.13) 0%, rgba(186,0,33,.055) 46%, transparent 100%);
  opacity: 0; transition: opacity 1.2s ease .12s;
}
.hz-entrance.q2 .hz-q2::before{ opacity: 1; }
.hz-entrance.q1 .hz-q1{ opacity: 1; transform: none; }
.hz-entrance.q2 .hz-q2{ opacity: 1; transform: none; }
/* The question hands off rather than lingering. Holding it behind the ball as ghost text
   collided with both the identity and the top destination, and a half-legible headline behind
   a navigation object is clutter, not emphasis — it has had its moment by now. */
/* The exit is relative to the new resting position: the question now sits at -12vh, so it
   still has to travel UP and away from there rather than back down through the frame. */
.hz-entrance.ball .hz-question{
  opacity: 0; transform: translateY(-19vh) scale(.94); pointer-events: none;
}

/* ---- Identity -------------------------------------------------------------- */

.hz-identity{
  position: absolute; z-index: 4; top: 3.2vh; left: 50%;
  transform: translateX(-50%) translateY(-10px);
  display: grid; justify-items: center; gap: 10px;
  opacity: 0; transition: opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1);
  pointer-events: none; text-align: center; padding: 0 20px;
}
/* x1.137 on the previous values. The corrected lockup carries transparent safe area (ink is
   569/1200 wide where it was 647), so the same CSS width would render the mark 12% smaller.
   This holds its apparent size; the artwork is untouched. */
.hz-identity img{ width: clamp(171px, 22.7vw, 284px); height: auto; display: block; }
.hz-tag{
  font-size: clamp(9px, 1.05vw, 11px); letter-spacing: .30em; text-transform: uppercase;
  color: var(--gold); font-weight: 700;
}
.hz-entrance.ident .hz-identity{ opacity: 1; transform: translateX(-50%) translateY(0); }

/* Short viewports, measured at 1366x768: the circle is sized on 80vh, so as the viewport
   gets shorter the navigation grows toward the masthead while the masthead — sized on vw —
   does not move. At 768 the identity's bottom edge and the HOME label's top edge met at
   exactly 0px of clearance. The fix belongs to the masthead, which is supporting furniture,
   rather than to the circle or the labels, which are the experience. Nothing here scales the
   artwork itself; it is the same lockup at a smaller rendered size. */
@media (max-height: 820px){
  .hz-identity{ top: 2.1vh; gap: 7px; }
  .hz-identity img{ width: clamp(154px, 19.4vw, 236px); }
}

/* ---- The environmental field ----------------------------------------------
   The cinematic ends under stadium light. Cutting from that to a black void is what made the
   interface feel like it belonged to a different production, so the light is carried across
   instead: two broad cool pools sit exactly where the tower glows sit in .hz-gold (17% and 83%
   across, high in the frame), over a wide navy lift in brand #003263.

   This layer is ADDITIVE only — it has no opaque base of its own. The veil underneath already
   holds ~14% of the darkened field visible through its centre, so what the visitor sees is the
   stadium still faintly present and now lit by the same sources. That is also what gives a
   #0E1729 segment something to sit on: the ground stays Halo Zone dark, but it is dark NAVY
   with depth in it rather than flat black.

   Everything here is larger than the viewport and very low alpha on purpose. If a visitor can
   point at a radial gradient, this has failed.
   ---------------------------------------------------------------------------- */
.hz-env{
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0; transition: opacity 1.5s ease .2s;
  background:
    radial-gradient(64% 50% at 17% 21%, rgba(196,206,212,.105), transparent 68%),
    radial-gradient(64% 50% at 83% 21%, rgba(196,206,212,.105), transparent 68%),
    radial-gradient(104% 80% at 50% 47%, rgba(0,50,99,.40), transparent 74%),
    /* and a base that takes the LITERAL stadium away. Lifting the environment without this
       lifted the photograph back up with it — plate, dirt and bleachers became legible again
       and the composition read as an interface sitting on a picture. What should survive the
       transition is the light, not the place. */
    radial-gradient(146% 116% at 50% 50%, rgba(4,7,13,.62) 0%, rgba(4,7,13,.90) 58%, rgba(4,7,13,.97) 100%);
}
.hz-entrance.xform .hz-env{ opacity: 1; }

/* ---- Navigation ------------------------------------------------------------ */

.hz-nav{
  position: relative; z-index: 5;
  display: grid; place-items: center;
  /* The signature object earns the screen. This was 68vh while the lockup sat above it at full
     strength; the lockup steps back during this state (see .hz-entrance.ball .hz-identity
     below), and that is what buys the extra height without the two colliding on a 768-tall
     laptop — the collision the 68vh figure was originally chosen to avoid. */
  /* The 720px cap was what bound on a 1920x1080 display, which put the object back into a
     large empty frame — the same undersized reading, just at a bigger screen. 880 lets height
     stay the governing limit up to ~1100px tall; nothing below 1366x768 changes. */
  width: min(94vw, 80vh, 880px); aspect-ratio: 1;
  opacity: 0; pointer-events: none;
  transition: opacity .8s ease;
}
.hz-entrance.ball .hz-nav{ opacity: 1; pointer-events: auto; }

/* No scale-in on the wrapper: the four segments arriving from their own directions IS the
   animation, and a simultaneous container scale fought it. */
.hz-circle-wrap{
  grid-area: 1 / 1; width: 63%; aspect-ratio: 1; place-self: center;
  pointer-events: none;                 /* only the segments themselves are targets */
}
.hz-circle{ width: 100%; height: 100%; display: block; overflow: visible; pointer-events: none; }
/* Each segment is a real, generous pointer target: the hit area is the filled sector, not a
   thin stroke. The centre stays inert — the shield is identity, never a fifth destination. */
.hz-seg{ pointer-events: auto; cursor: pointer; }
.hz-core{ pointer-events: none; }

/* --- segments --- */
.hz-seg{
  opacity: 0;
  /* opacity lands FASTER than the travel, so each piece reads as arriving and settling
     rather than lingering half-visible while the next one starts. */
  transition: opacity .20s ease, transform .28s cubic-bezier(.2,.8,.2,1);
}
/* ---------------------------------------------------------------------------
   WHY THE SEGMENTS ARE NO LONGER PLATES
   ---------------------------------------------------------------------------
   Live human QA: "the command graphic feels too much like a video game."

   That was a fair read, and it came from the silhouette rather than the colour. Four filled
   annular plates arranged around a lit hub is the shape of a radial selector — a weapon wheel,
   a franchise-mode menu — and each segment was carrying FIVE painted paths: a filled face, a
   silver sheen, an outline, a lit outer arc and a second inner rail. Five layers of drawn
   mechanism per quarter is HUD material, and no amount of restraint in the palette undoes the
   fact that the object looks like a controller.

   The fix is subtraction, not redesign. The DOM is untouched: same four groups, same paths,
   same anchors, same hit geometry, same destinations, same shield. What changes is how much of
   it is painted. The face survives as an invisible HIT TARGET, so a segment is still clickable
   exactly where it always was, and the only mark left on screen is one hairline arc per
   destination — the directional DNA, drawn rather than built.

   Four fine arcs around a quiet mark reads as a publication. Four lit plates around a hub
   reads as a game. Same geometry, same interaction, different object.
   --------------------------------------------------------------------------- */

/* The plate is now a hit area and nothing else. `transparent` rather than `none`: `none` is
   not hit-tested, which would silently kill the clickable-segment contract. */
.hz-seg-face{  fill: transparent; stroke: none; pointer-events: all; }
/* The two material layers are what made it feel manufactured. Gone. */
.hz-seg-sheen{ display: none; }
/* The hairline. --line (#1D2B44) is correct on the site's #070B14 pages, but on the entrance's
   #04070D it disappears and takes the segment's silhouette with it. This is the same
   white-transparency idiom site.css already uses for edges on darker ground. */
/* .11, not .17. With the core disc's own hairline left at .14 the centre now outranks the
   ring, which is the hierarchy we want: shield, then structure, then environment. */
/* The full sector outline drew the seams between the plates — the single strongest "device
   made of parts" cue. Without it the quarters stop being components. */
.hz-seg-line{ display: none; }
/* The one mark that remains. A drawn hairline, even along its length rather than a gradient
   that brightens toward a key light: a lit rail implies a machine, a line implies a diagram.
   This is what carries the four directions now. */
.hz-seg-edge{ fill: none; stroke: rgba(196,206,212,.30); stroke-width: 1.25;
              transition: stroke .28s ease, stroke-width .28s ease; }
/* The inner rail was the second lit edge and the most HUD-like element of the four. Hover red
   is APPROVED behaviour and is kept — it just moves onto the one arc that is still drawn,
   instead of lighting up a separate hidden rail. */
.hz-seg-hot{  display: none; }

/* Entry vectors — each segment comes from its own side and nowhere else.
   These are KEYFRAMES, not a transition, and that is a correctness decision rather than a
   stylistic one. As a transition (from a resting translate to `transform: none`) the segment
   rendered in the right place but its HIT AREA stayed at the start value: the visible inner
   band of every segment was dead to the pointer while a band outside the ring was live. It was
   caught by clicking, not by reading styles. An animation with no fill leaves the element on
   its base style once it ends, and the base style here carries no transform at all, so the
   settled geometry and the settled hit area are the same thing by construction. */
@keyframes hz-seg-in-n{ from{ transform: translateY(-30px); } to{ transform: none; } }
@keyframes hz-seg-in-e{ from{ transform: translateX(30px); }  to{ transform: none; } }
@keyframes hz-seg-in-s{ from{ transform: translateY(30px); }  to{ transform: none; } }
@keyframes hz-seg-in-w{ from{ transform: translateX(-30px); } to{ transform: none; } }
.hz-seg.in{ opacity: 1; }
/* `settled` is added by the script once the entry has had its time, and it takes the animation
   off the element entirely. That matters because a running-or-paused animation OWNS transform:
   in a background tab the compositor never advances it, so the element keeps the `from` offset
   for style and — the part that bites — for HIT TESTING. Once settled there is no animation and
   no transform at all, so the clickable area is the drawn area by construction, on every route
   and whatever the tab was doing while the entrance played. */
.hz-seg.in:not(.settled)[data-pos="n"]{ animation: hz-seg-in-n .26s cubic-bezier(.16,.84,.28,1); }
.hz-seg.in:not(.settled)[data-pos="e"]{ animation: hz-seg-in-e .26s cubic-bezier(.16,.84,.28,1); }
.hz-seg.in:not(.settled)[data-pos="s"]{ animation: hz-seg-in-s .26s cubic-bezier(.16,.84,.28,1); }
.hz-seg.in:not(.settled)[data-pos="w"]{ animation: hz-seg-in-w .26s cubic-bezier(.16,.84,.28,1); }
/* arrival: the edge answers once in silver, then settles back into the ambient light */
.hz-seg.lit .hz-seg-edge{ stroke: var(--silver); }

/* active: movement first, then a restrained red rule. 5 user units is ~5px at every size the
   circle is actually drawn at, because the transform is in SVG user space and scales with it. */
.hz-seg.on[data-pos="n"]{ transform: translateY(-5px); }
.hz-seg.on[data-pos="e"]{ transform: translateX(5px); }
.hz-seg.on[data-pos="s"]{ transform: translateY(5px); }
.hz-seg.on[data-pos="w"]{ transform: translateX(-5px); }
/* Hover red is approved and unchanged in intent — it now lands on the one arc that is drawn,
   and thickens very slightly, so the answer is the line itself rather than a second element
   switching on underneath it. */
.hz-seg.on .hz-seg-edge{ stroke: var(--red); stroke-width: 1.9; }

/* --- the independent centre --- */
.hz-core{
  opacity: 0; transform: scale(.965); transform-origin: 200px 200px;
  transition: opacity .30s ease, transform .30s cubic-bezier(.2,.8,.2,1);
}
.hz-core.in{ opacity: 1; transform: none; }
/* A rimmed disc with a second concentric ring around it is a thumbstick cap, and it was the
   centre of the "game controller" read. The disc keeps a soft, edgeless pad so the shield has
   something to sit on against a lit stadium — but it has no rim to trace, so it reads as depth
   rather than as a component. The mark is the object; the pad is only shadow. */
.hz-core-disc{ fill: rgba(8,14,26,.62); stroke: none; }
/* The completion ring announced that a machine had finished assembling. The shield arriving is
   the completion. */
.hz-core-ring{ display: none; }
/* The completion answer, and then it genuinely rests. Left at .30 the outer ring was
   BRIGHTER than the disc edge that actually holds the mark (.14), so the centre read as two
   competing rings with the shield inside them. It flares on arrival, then drops below the
   disc edge so the hierarchy is shield first, disc second, ring last. */
.hz-core.settle .hz-core-ring{ stroke: rgba(196,206,212,.30); }
.hz-core.rested .hz-core-ring{ stroke: rgba(255,255,255,.09); }

/* --- destinations --- */
/* No panel, no border, no filled rectangle. These are editorial labels belonging to the four
   directions of one object, and enclosing each in a box is what made them read as four
   unrelated dashboard cards sitting near a circle. */
/* This layer covers the same grid cell as the circle, so left solid it would swallow every
   click aimed at a segment. It passes pointer events through; the labels take their own. */
.hz-dests{ grid-area: 1 / 1; width: 100%; height: 100%; position: relative; pointer-events: none; }
.hz-dest{ pointer-events: auto; }

.hz-dest{
  position: absolute; display: grid; gap: 3px; text-decoration: none;
  padding: 4px 2px;
  /* No max-width. Capping these while the label itself is nowrap made the text overflow its
     own box to the right and run into the ring at 1366x768 — the box was clipped, the words
     were not. The east/west labels are anchored by their INNER edge instead (right/left at
     83.5%), so they shrink-to-fit and grow away from the circle, which cannot collide. */
  opacity: 0;
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1), color .25s ease;
}
.hz-dest.in{ opacity: 1; }
.hz-dest.dim{ opacity: .52; }
/* All four labels sit over a different piece of the stadium — HOME over dark sky, NEWS and
   ANALYSIS over the lit stands, GM over the infield. With no shadow their apparent strength
   tracked whatever happened to be behind them, which is why HOME read strongly and the side
   labels looked subdued. A consistent shadow makes the four equal by construction. */
.hz-dest-label{
  font-family: var(--display); font-weight: 800; letter-spacing: -.01em;
  font-size: clamp(17px, 1.95vw, 27px); color: #fff; white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 1px 14px rgba(0,0,0,.45);
}
.hz-dest-sub{
  font-size: clamp(10.5px, 1.02vw, 12.5px); letter-spacing: .15em; text-transform: uppercase;
  color: var(--text-2);        /* was --text-3; subtle is not the same as barely legible */
  white-space: nowrap;
  text-shadow: 0 1px 10px rgba(0,0,0,.5);
  transition: color .25s ease;
}
.hz-dest:hover .hz-dest-sub,
.hz-dest:focus-visible .hz-dest-sub{ color: var(--gold); }

/* The connector. A single hairline pointing at the segment this label names — proximity and
   alignment do most of the work, and this finishes the sentence. */
.hz-dest::before{
  content: ""; position: absolute; background: rgba(255,255,255,.20);
  transition: background .25s ease;
}
.hz-dest:hover::before,
.hz-dest:focus-visible::before{ background: var(--red); }

/* You're the GM is the flagship, expressed typographically. It carries the gold rule it
   already had and a brighter second line — it is NOT pre-selected, and the resting interface
   keeps all four segments identical. */
.hz-dest.is-feature .hz-dest-label{ color: #fff; }
/* GM's prominence is the gold rule below it and nothing else. Brightening its subtitle and
   widening its tracking as well made it read as a different component sitting under the
   circle rather than the fourth member of one navigation system. */
/* ...but it still answers a pointer the way the other three do. Without this the flagship
   destination is the only one that does not respond, because the rule above outranks the
   shared hover rule. */
.hz-dest.is-feature:hover .hz-dest-sub,
.hz-dest.is-feature:focus-visible .hz-dest-sub{ color: var(--gold); }
.hz-dest.is-feature::after{
  content: ""; height: 2px; width: 34px; background: var(--gold); border-radius: 2px;
  margin-top: 5px; opacity: .95; justify-self: center;
}

/* Anchored to the ring, not to the corners of the box. The circle's edge sits at 18.5% / 81.5%
   of the square, so these land just outside it and read as parts of one system. */
.hz-dest[data-pos="n"]{ bottom: 83.5%; left: 50%; transform: translateX(-50%) translateY(10px);
                        text-align: center; justify-items: center; }
.hz-dest[data-pos="s"]{ top: 83.5%; left: 50%; transform: translateX(-50%) translateY(-10px);
                        text-align: center; justify-items: center; }
.hz-dest[data-pos="e"]{ left: 83.5%; top: 50%; transform: translateY(-50%) translateX(-10px);
                        text-align: left;  justify-items: start; }
.hz-dest[data-pos="w"]{ right: 83.5%; top: 50%; transform: translateY(-50%) translateX(10px);
                        text-align: right; justify-items: end; }
.hz-dest[data-pos="n"].in, .hz-dest[data-pos="s"].in{ transform: translateX(-50%); }
.hz-dest[data-pos="e"].in, .hz-dest[data-pos="w"].in{ transform: translateY(-50%); }

.hz-dest[data-pos="n"]::before{ left: 50%; bottom: -13px; width: 1px; height: 11px; }
.hz-dest[data-pos="s"]::before{ left: 50%; top: -13px;    width: 1px; height: 11px; }
.hz-dest[data-pos="e"]::before{ top: 50%;  left: -15px;   height: 1px; width: 11px; }
.hz-dest[data-pos="w"]::before{ top: 50%;  right: -15px;  height: 1px; width: 11px; }

/* During the decision layer the CENTRE SHIELD is the identity. The horizontal lockup steps
   back rather than competing with it — and stepping back is also what frees the vertical room
   the larger circle needed. Normal site branding is untouched; this applies to this state of
   the entrance only. */
.hz-entrance.ball .hz-identity{
  /* .62, not .42. Subordinate to the centre shield is the point, but at .42 it had stopped
     registering at all — the visitor should know they are entering Halo Zone before they
     choose anything. It still reads well below the shield, which keeps the payoff. */
  opacity: .62;
  /* -14px keeps the tightest pair in the layout (this and the HOME label at 1366x768) apart. */
  /* scale stays at .86. Raising it to .90 cost 10px at 1366x768, taking the gap to the HOME
     label down to 8px — the tightest pair in the layout. Opacity is what makes the lockup
     register; size was not the problem. */
  transform: translateX(-50%) translateY(-14px) scale(.86);
  transition: opacity .9s ease .15s, transform .9s cubic-bezier(.2,.7,.2,1) .15s;
}

/* ---- Skip ------------------------------------------------------------------ */

.hz-skip{
  position: absolute; z-index: 6; right: 22px; bottom: 20px;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(8,14,24,.62); color: var(--text-2);
  border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
  padding: 9px 16px; font: inherit; font-size: 12px; letter-spacing: .16em;
  text-transform: uppercase; cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity .6s ease, color .2s ease, border-color .2s ease, background-color .2s ease;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hz-entrance.skippable .hz-skip{ opacity: 1; pointer-events: auto; }
.hz-skip:hover, .hz-skip:focus-visible{ color: #fff; border-color: var(--gold); background: rgba(12,20,34,.8); }
/* Once the navigation is up there is nothing left to skip. */
.hz-entrance.ball .hz-skip{ opacity: 0; pointer-events: none; }

/* ---- Replay ---------------------------------------------------------------- */

.hz-replay{
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--text-3);
  letter-spacing: .12em; text-transform: uppercase;
  transition: color .2s ease;
}
.hz-replay:hover, .hz-replay:focus-visible{ color: var(--gold); }
/* 12px of uppercase text is a 20px-tall tap target, well under the 44px minimum. The fix is an
   invisible hit area rather than padding: padding would grow the footer's bottom row and move
   the two lines beside this one. ::after is part of the button, so the pointer target grows and
   nothing about the layout, the type, the focus ring or the entrance's timing changes. */
.hz-replay{ position: relative; }
.hz-replay::after{
  content: ''; position: absolute; left: 0; right: 0;
  top: 50%; transform: translateY(-50%); height: 44px;
}

/* ---- Narrow screens --------------------------------------------------------
   No hover exists here, so the ball stops being the control surface and becomes the
   centrepiece it should be: the four destinations become explicit, full-width, thumb-sized
   rows underneath it. The concept survives; the usability does not get sacrificed to it. */

@media (max-width: 820px){
  /* The phone gets a composition of its own: the object on its own row at real size, the four
     destinations as a list beneath it. Previously the circle was a desktop object shrunk into a
     tall black box and the canvas went mostly unused. */
  .hz-nav{
    width: min(94vw, 470px); aspect-ratio: auto;
    grid-template-rows: auto auto; gap: 24px; align-content: center;
  }
  .hz-circle-wrap{ grid-area: auto; width: min(72vw, 310px); margin: 0 auto; }
  .hz-dests{ grid-area: auto; position: static; display: grid; gap: 0; width: 100%; }
  /* Rows separated by a rule, not boxed as cards — the same idiom site.css uses for the mobile
     main navigation. The touch target stays generous; only the enclosure goes. */
  .hz-dest,
  .hz-dest[data-pos]{
    position: static; transform: translateY(8px);
    max-width: none;
    display: grid; grid-template-columns: 1fr auto; align-items: center;
    text-align: left; justify-items: start;
    min-height: 62px;                        /* comfortable thumb target */
    padding: 13px 4px;
    background: none; border: 0;
    border-bottom: 1px solid var(--line-soft);
    border-radius: 0;
  }
  .hz-dest::before{ display: none; }         /* the connector is a radial idea */
  .hz-dest.in, .hz-dest[data-pos].in{ transform: none; }
  .hz-dest-sub{ grid-column: 1; }
  .hz-dest-label{ font-size: clamp(18px, 5.2vw, 23px); }
  /* GM carries ONE gold mark here, not two. The tick is the stronger and more deliberate of
     the pair; a gold border-bottom on top of it only recoloured one divider out of three and
     read as decoration rather than emphasis. The row keeps the same rule as its neighbours. */
  .hz-dest.is-feature::after{ grid-column: 2; grid-row: 1 / span 2; margin: 0;
                              width: 3px; height: 28px; justify-self: end; }
  .hz-dest.dim{ opacity: 1; }              /* dimming is a hover idea; it means nothing here */
  /* The band analysis holds here too: the poster is object-fit:cover, so on a portrait
     viewport it crops the sides and keeps the vertical proportions — the wall/grass boundary
     is still the busiest row in the frame. The question clears it the same way it does on a
     wide screen. It hands off before the circle arrives, so nothing below it is displaced. */
  .hz-question{ transform: translateY(-10vh); }
  .hz-question::before{ width: 150%; height: 240%; }
  .hz-question::after{ width: 32px; margin-bottom: .58em; }
  /* The question hands off here exactly as it does on a wide screen. Keeping it visible
     behind the interface collided with the wrapped tagline at 360px, and two pieces of
     centred text fighting for the same band is worse than letting the first one go. */
  .hz-identity{ top: 3vh; }
  .hz-entrance.ball .hz-identity{ opacity: .62; transform: translateX(-50%) scale(.8); }
  .hz-skip{ right: 14px; bottom: 14px; }
}

/* ---- Reduced motion --------------------------------------------------------
   Not "the same thing, faster". The video is never fetched, nothing translates or scales,
   and the interface is present immediately. Only opacity is allowed to change. */

@media (prefers-reduced-motion: reduce){
  .hz-entrance, .hz-entrance *{
    transition-duration: .001ms !important;
    animation-duration: .001ms !important;
  }
  /* These visitors receive every state at once, so the question never gets a moment of its
     own. Overlapping it with the navigation the way the animated path does would therefore
     mean they simply never read it — and the question IS the product. It gets its own row
     instead, and the interface sits beneath it. */
  .hz-entrance{ grid-template-areas: "q" "nav"; align-content: center; gap: clamp(12px, 3vh, 30px); }
  .hz-question{ grid-area: q; transform: none; }
  /* Here the question keeps its own row directly above the interface, so the ground behind it
     has to stop at the words rather than spilling down over the circle. */
  .hz-question::before{ width: 132%; height: 170%; }
  .hz-nav{ grid-area: nav; width: min(90vw, 56vh, 520px); }
  .hz-entrance.ball .hz-question{ opacity: 1; transform: none; }
  .hz-q1{ font-size: clamp(16px, 4.2vw, 25px); }
  .hz-q2{ font-size: clamp(20px, 5.4vw, 32px); }
  .hz-circle-wrap{ transform: none !important; width: min(46vw, 34vh, 300px); }
  .hz-seg, .hz-seg[data-pos], .hz-core{ transform: none !important; }
  /* Present, complete and usable with no assembly: opacity is the only thing allowed to move,
     and these are the states the script hands over in one step on this path. */
  .hz-seg{ opacity: 1; }
  .hz-core{ opacity: 1; }
  .hz-dest, .hz-dest[data-pos]{ transform: none !important; }
  /* The identity is absolutely positioned; at this density it would sit on top of the
     question, so it is pinned tighter to the edge. */
  .hz-identity{ top: 1.5vh; }
  .hz-identity img{ width: clamp(137px, 17.1vw, 193px); }
}