/* ============================================================================
   GC TOTAL — HOME HERO ONLY
   ----------------------------------------------------------------------------
   The measuring rulers, grid pulse, parallax tiers and full-bleed hero live
   here because only the home page carries them. Interior pages use .gc-phero
   from site.css, which is a flat band with none of this machinery.

   The background drawing (the exploded axonometric) ships its own style block
   inside index.html, fully namespaced under .gcbg — leave it there.
   ========================================================================= */

/* The hero is the first sheet in the stack: it pins, and the sections after it
   slide up over it. This lives here rather than in site.css because home.css
   loads second, so a `position` declared there would lose to this rule. */
.site .gc-hero{position:sticky;top:0;min-height:92vh;display:flex;flex-direction:column;
  padding:22px 0 0}
.site .gc-hero.is-tall{position:relative;min-height:88vh}
@media(min-width:900px){.site .gc-hero{padding-left:30px}}
/* The hero leaves the stack with the sheets behind it -- see the matching
   query in site.css. `svh`, not `vh`: on a phone `100vh` resolves against the
   LARGE viewport, so a hero sized in vh is taller than the screen for as long
   as the address bar is showing, and its bottom edge is cut. The vh line stays
   first as the fallback for anything without svh. */
@media (max-width:899px), (hover:none), (pointer:coarse){
  .site .gc-hero{position:relative;top:auto;min-height:88vh;min-height:88svh}
}
.site .gc-hgrid{position:absolute;inset:-12px;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(242,242,242,.03) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(242,242,242,.03) 1px,transparent 1px);
  background-size:52px 52px}

/* the slow white grid pulse — the grid never scales, only the mask grows, so
   the lit lines stay in register with the lines underneath them */
.site .gc-pulse{position:absolute;inset:-12px;pointer-events:none;opacity:0;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.8) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.8) 1px,transparent 1px),
    linear-gradient(to right,rgba(255,255,255,.2) 3px,transparent 3px),
    linear-gradient(to bottom,rgba(255,255,255,.2) 3px,transparent 3px);
  background-size:52px 52px,52px 52px,52px 52px,52px 52px;
  -webkit-mask-image:radial-gradient(circle,transparent 0 22%,rgba(0,0,0,.35) 36%,rgba(0,0,0,.9) 50%,rgba(0,0,0,.35) 64%,transparent 80%);
  mask-image:radial-gradient(circle,transparent 0 22%,rgba(0,0,0,.35) 36%,rgba(0,0,0,.9) 50%,rgba(0,0,0,.35) 64%,transparent 80%);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:50% 42%;mask-position:50% 42%;
  -webkit-mask-size:0% 0%;mask-size:0% 0%;
  animation:gc-pulse 15s ease-out infinite both}
@keyframes gc-pulse{
  0%   {opacity:0;    -webkit-mask-size:0% 0%;      mask-size:0% 0%}
  9%   {opacity:.15}
  30%  {opacity:.115}
  50%  {opacity:.055; -webkit-mask-size:210% 210%;  mask-size:210% 210%}
  62%  {opacity:0;    -webkit-mask-size:265% 265%;  mask-size:265% 265%}
  100% {opacity:0;    -webkit-mask-size:265% 265%;  mask-size:265% 265%}}

/* ---------- parallax: layers drift against the pointer at different rates.
   The grid and the pulse MUST share one transform or the lit lines drift off
   the base grid — the register problem again. The background layers get their
   own container so their internal transforms are not overridden. ---------- */
.site .gc-hgrid,.site .gc-pulse{
  transform:translate3d(var(--gc-gx,0px),var(--gc-gy,0px),0);
  transition:transform .25s cubic-bezier(.2,.8,.3,1);will-change:transform}
.site .gc-plx-bg{position:absolute;inset:0;pointer-events:none;z-index:0;
  transform:translate3d(var(--gc-bx,0px),var(--gc-by,0px),0);
  transition:transform .3s cubic-bezier(.2,.8,.3,1);will-change:transform}

/* ---------- measuring rulers: top edge + left edge ---------- */
.site .gc-rt,.site .gc-rl{position:absolute;pointer-events:none;z-index:2}
.site .gc-rt{top:0;left:0;right:0;height:20px}
.site .gc-rl{top:0;bottom:0;left:0;width:20px;display:none}
@media(min-width:900px){.site .gc-rl{display:block}}
.site .gc-rt .mn,.site .gc-rt .mj{position:absolute;left:0;right:0;top:0}
.site .gc-rt .mn{height:5px;background-image:repeating-linear-gradient(90deg,var(--gc-tick) 0 1px,transparent 1px 8px)}
.site .gc-rt .mj{height:11px;background-image:repeating-linear-gradient(90deg,var(--gc-tick2) 0 1px,transparent 1px 80px)}
.site .gc-rl .mn,.site .gc-rl .mj{position:absolute;top:0;bottom:0;left:0}
.site .gc-rl .mn{width:5px;background-image:repeating-linear-gradient(0deg,var(--gc-tick) 0 1px,transparent 1px 8px)}
.site .gc-rl .mj{width:11px;background-image:repeating-linear-gradient(0deg,var(--gc-tick2) 0 1px,transparent 1px 80px)}

/* the tick that follows the pointer, plus a faint crosshair */
.site .gc-mk-v,.site .gc-mk-h,.site .gc-cx-v,.site .gc-cx-h{
  position:absolute;pointer-events:none;opacity:0;transition:opacity .22s ease}
.site .gc-mk-v{top:0;height:20px;width:1px;background:var(--gc-o);left:var(--gc-mx,-10px);z-index:3}
.site .gc-mk-h{left:0;width:20px;height:1px;background:var(--gc-o);top:var(--gc-my,-10px);z-index:3}
.site .gc-cx-v{top:0;bottom:0;width:1px;left:var(--gc-mx,-10px);
  background:linear-gradient(180deg,rgba(255,77,0,.28),rgba(255,77,0,.05) 60%,transparent);z-index:1}
.site .gc-cx-h{left:0;right:0;height:1px;top:var(--gc-my,-10px);
  background:linear-gradient(90deg,rgba(255,77,0,.24),rgba(255,77,0,.04) 55%,transparent);z-index:1}
.site .gc-hero.is-measuring .gc-mk-v,
.site .gc-hero.is-measuring .gc-mk-h{opacity:1}
.site .gc-hero.is-measuring .gc-cx-v,
.site .gc-hero.is-measuring .gc-cx-h{opacity:1}
/* the readouts, in feet and inches */
.site .gc-rd{position:absolute;font-size:13px;font-weight:500;letter-spacing:.06em;color:var(--gc-o);
  opacity:0;transition:opacity .22s ease;z-index:3;white-space:nowrap}
.site .gc-rd-x{top:23px;left:var(--gc-mx,-999px);transform:translateX(6px)}
.site .gc-rd-y{left:23px;top:var(--gc-my,-999px);transform:translateY(-50%)}
.site .gc-hero.is-measuring .gc-rd{opacity:1}

/* ---------- the survey mark: where the finger last was ----------
   A phone never sends a pointermove, so every readout above stayed dark and
   the hero's whole reason for carrying a ruler went with it. site.js puts the
   mark where the screen was tapped, follows the finger while it drags, and
   leaves it there on release.

   `.gc-mk-h` is the tick INSIDE the left ruler, so it lights only where that
   ruler does. Below 900px the ruler is display:none and a lit tick would be a
   stub floating on nothing; at 900px and up -- a touch tablet, say -- the
   ruler is there and a full-width crosshair reaching an untouched ruler is
   the odd half. It tracks the ruler either way. Its crosshair `.gc-cx-h`
   spans the full width and always belongs: the mark needs both axes to read
   as a point.

   site.js never adds these classes under reduced motion, so there is nothing
   to freeze here. */
.site .gc-hero.is-marked .gc-mk-v,
.site .gc-hero.is-marked .gc-cx-v,
.site .gc-hero.is-marked .gc-cx-h,
.site .gc-hero.is-marked .gc-rd-x,
.site .gc-hero.is-marked .gc-rd-y{opacity:1}
@media(min-width:900px){.site .gc-hero.is-marked .gc-mk-h{opacity:1}}

/* The elevation readout is pinned to the right edge instead of following the
   mark. It normally sits beside the left ruler, which is not there below
   900px, and anchoring it to `--gc-mx` would push it off screen for any mark
   in the right third. Against the right edge it reads as a level annotation
   on a section, which is what it is. */
@media (max-width:899px){
  .site .gc-hero .gc-rd-y{left:auto;right:14px}
}
/* The station readout has the same problem and cannot be pinned, because it
   labels the tick. It flips to the other side of it instead. */
.site .gc-hero.is-mark-right .gc-rd-x{transform:translateX(calc(-100% - 6px))}

/* The box, drawn only once the finger is off. Hung on the ruler tick rather
   than on an element of its own: that tick already sits at --gc-mx with its
   top at the hero's, so a child placed at --gc-my lands exactly on the point.
   The tick and not the crosshair, because the crosshair sits at z-index 1,
   under the hero copy, and the box is the one thing here that must not be
   painted over. While the finger is still down the mark is being aimed rather
   than set, so no box. */
.site .gc-hero.is-marked:not(.is-tracking) .gc-mk-v::after{
  content:"";position:absolute;left:50%;top:var(--gc-my,-999px);
  /* site.css's `.site *{box-sizing:border-box}` does NOT reach a pseudo-
     element, so this box inherited content-box, the 1px border landed outside
     the 26px, and the mark sat a pixel up and left of the point it claims to
     be on. Set it here or the centring maths is wrong by the border width. */
  box-sizing:border-box;
  width:26px;height:26px;margin:-13px 0 0 -13px;
  border:1px solid var(--gc-o);opacity:.9;
  animation:gc-mark-set .28s cubic-bezier(.2,.8,.3,1) both}
/* The keyframes move the SCALE only. Fading in from the keyframes as well
   made the box's resting visibility depend on the animation finishing, so
   anything that stalls it -- a throttled tab, a browser that never paints --
   left the mark set with nothing drawn on it. Opacity lives on the rule where
   it cannot be withheld. */
@keyframes gc-mark-set{ from{transform:scale(1.6)} to{transform:scale(1)} }

.site .gc-hbody{position:relative;z-index:2;flex:1 1 auto;display:flex;align-items:center;padding:34px 0 28px}
.site .gc-cols{display:block;width:100%}

@media (prefers-reduced-motion: reduce){
  .site .gc-hgrid,.site .gc-pulse,.site .gc-plx-bg{
    transform:none !important;transition:none}
  .site .gc-pulse{animation:none;opacity:0}
  .site .gc-mk-v,.site .gc-mk-h,.site .gc-cx-v,.site .gc-cx-h,
  .site .gc-rd{transition:none}
}