/* ==========================================================================
   Spectrum IT Hub — hero parallax layers (Home only)
   --------------------------------------------------------------------------
   Turns the --pl-N custom properties set by hero-parallax.js into transforms.

   `!important` is required, not cosmetic: these elements are React-rendered
   with inline styles, and Home's reveal safety net explicitly sets
   `style.transform = "none"` on the hero text after 2 seconds. A normal rule
   would lose to both. See the header of hero-parallax.js.

   The fallback of 0px in each var() means that if the script never runs, every
   layer sits exactly where it was authored — the effect is purely additive.
   ========================================================================== */

/* Layer 2 is intentionally absent: the globe is pinned, not parallaxed.
   Layer numbers stay as authored (1, 3, 4) so they still read far-to-near. */
[data-parallax-layer] {
  will-change: transform;
}

[data-parallax-layer="1"] { transform: translate3d(0, var(--pl-1, 0px), 0) !important; }
[data-parallax-layer="3"] { transform: translate3d(0, var(--pl-3, 0px), 0) !important; }
[data-parallax-layer="4"] { transform: translate3d(0, var(--pl-4, 0px), 0) !important; }


/* --- Off on small screens ------------------------------------------------
   responsive.css unpins the hero below 760px (it becomes position:relative and
   grows with its content), so there is no pinned phase to scrub against, and
   the globe is already dimmed to a backdrop. Parallax there would fight the
   layout and cost frames on the devices least able to spare them. */
@media (max-width: 760px) {
  [data-parallax-layer] {
    transform: none !important;
    will-change: auto;
  }
}


/* --- Off when reduced motion is requested -------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-parallax-layer] {
    transform: none !important;
    will-change: auto;
  }
}

/* ==========================================================================
   Hero — letting the pointer reach the globe
   --------------------------------------------------------------------------
   `gold-globe` has had drag-to-rotate since it was written, but no visitor
   could ever use it: the gradient scrim (z-index 2, inset 0) and the copy
   wrapper (z-index 3, spanning the full 1340px measure) both sat on top with
   `pointer-events: auto` and swallowed every pointer event before it reached
   the canvas. Hit-testing across the globe returned those layers at every
   point, never the canvas.

   The fix is pointer-events only — nothing moves, nothing changes colour.
   The two layers stop intercepting, and the things that genuinely need the
   pointer get it back explicitly:

     - the CTAs, so the buttons still work;
     - the stat-card plate, so its hover still works;
     - the text itself, so it stays selectable.

   Everything between those — the empty space that used to block the globe —
   now passes through.
   ========================================================================== */

.hero-copy,
.hero-copy > [data-parallax-layer="3"] {
  pointer-events: none;
}

.hero-copy h1,
.hero-copy p,
.hero-copy span,
.hero-copy a,
.hero-copy [data-parallax-layer="4"] {
  pointer-events: auto;
}

/* Touch devices: the globe is a faint backdrop behind the copy and drag is not
   bound there (see gold-globe.js), so it must never intercept a swipe — a
   trapped scroll on a phone is far worse than a globe you cannot spin. */
@media (hover: none), (pointer: coarse) {
  gold-globe { pointer-events: none !important; }
}


/* ==========================================================================
   Hero copy — no scrollbar furniture
   --------------------------------------------------------------------------
   `.hero-copy` carried `overflow: scroll`, which in Chrome paints a permanent
   scrollbar track whether or not there is anything to scroll: a grey rule down
   the right of the hero and another across its foot, both drawn OVER the
   globe. That is the line above the globe — it was never the canvas.

   `scroll` is now `overflow-x: hidden; overflow-y: auto`, so the tracks only
   exist if the copy genuinely does not fit. Hiding the bar as well keeps a very
   short viewport scrollable without putting a grey rule back across the
   artwork. Keyboard and wheel scrolling are unaffected — only the chrome is
   hidden, which is why overflow stays `auto` rather than becoming `hidden`.
   ========================================================================== */
.hero-copy {
  scrollbar-width: none;              /* Firefox */
  -ms-overflow-style: none;           /* old Edge */
}

.hero-copy::-webkit-scrollbar {       /* Chrome, Safari */
  width: 0;
  height: 0;
}