/* =========================================================================
   APEX SOLUTIONS — landing screen
   ---------------------------------------------------------------------------
   The site's first screen. Not a splash, not an overlay: it is opaque, it has
   its own lighting, and it hands over to the homepage by physically parting
   rather than by fading away on top of it.

   Everything here is scoped under .intro-run (set by intro-boot.js) or lives
   on #intro, which is detached at the end. When the handover completes,
   .intro-run comes off, every inline style the timeline wrote is cleared and
   #intro is removed — so the page returns to exactly immersive.css.

   Only transform / opacity / clip-path are animated, so nothing here can
   reflow the homepage it is protecting.
   ========================================================================= */

/* ---------- page lock ---------- */

.intro-run,
.intro-run body {
  overflow: hidden !important;
  height: 100%;
  overscroll-behavior: none;
}

/* Homepage elements are held back until the split reveals them. Hidden with
   opacity only — never display:none — so their geometry stays measurable and
   nothing reflows when they come in. */
.intro-run .site-header,
.intro-run .hero__inner,
.intro-run .hero__scroll,
.intro-run main > section:not(.hero),
.intro-run .site-footer {
  opacity: 0;
}
/* The cursor stays live on the landing screen — it is the first thing the
   visitor can interact with, and hiding it made the screen feel inert. */

/* =========================================================================
   The screen
   ========================================================================= */

#intro {
  position: fixed;
  inset: 0;
  z-index: 400;                   /* above --z-cursor (300) */
  overflow: hidden;
  contain: strict;
  /* The site's own background. Using a deeper custom shade made the handover
     to the homepage a visible colour step; matching --bg means the backdrop
     can dissolve without the base tone shifting underneath it. */
  background: var(--bg, #0a120e);
}
.intro-done #intro,
html:not(.intro-run) #intro { display: none; }

/* The screen's only lighting now that the helix rays are gone — so it carries
   more weight than before and is correspondingly stronger. */
.intro__glow {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 48% at 50% 48%, rgba(46, 204, 113, .17), transparent 70%),
    radial-gradient(78% 70% at 50% 52%, rgba(14, 92, 58, .26), transparent 76%);
}

/* =========================================================================
   Centred lockup
   ========================================================================= */

.intro__stage {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  will-change: transform, opacity;
  /* Hard guard against the lockup outgrowing the viewport. Sized in vw, it
     was running past the right edge and clipping the X off APEX — a centred
     element wider than the screen loses both ends, and the X is the one that
     gets noticed. */
  max-width: 88vw;
}

/* Both halves occupy the same box: the first is in flow so the stage takes
   its size, the second is layered exactly on top. Clipping makes each show
   one vertical half, so together they are indistinguishable from a single
   lockup right up until they part. */
/* Same arrangement as the header brand: mark on the left, APEX above
   SOLUTIONS on the right — just scaled up to fill the screen. */
.intro__half {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: clamp(14px, 2.4vw, 42px);
  will-change: transform, opacity;
}
.intro__half--r { position: absolute; inset: 0; }

/* The seam.
   A sub-pixel overlap (49.98%) was worse than none: the two halves each drew
   an antialiased edge over the same fractional pixel, which showed as a
   lighter hairline down the centre of the mark. Overlapping by a clear ~1%
   instead means the shared strip is covered by fully opaque, identical
   artwork on both sides — drawn twice, but pixel-identical, so invisible.
   The extra sliver the left half carries away is imperceptible in motion. */
.intro__half--l { clip-path: inset(0 49.4% 0 0); }
.intro__half--r { clip-path: inset(0 0 0 50%); }

/* Sized in vw so mark and type scale together and the header proportions
   hold. Deliberately smaller than before: at 19vw the lockup measured wider
   than the viewport and lost its outer edges. ~12vw leaves clear margins on
   both sides at every width. */
.intro__mark {
  width: clamp(54px, 12vw, 170px);
  height: auto;
  display: block;
  flex: none;
  /* No drop-shadow: the halves are clipped, and a filter's blur extends past
     the clip rectangle, so the shadow was sliced off square and showed as a
     hard-edged box behind the lockup. .intro__glow lights it instead. */
}

.intro__word {
  display: flex;
  flex-direction: column;
  line-height: 1;
  font-family: var(--font, "Space Grotesk", system-ui, sans-serif);
  min-width: 0;
}
.intro__name {
  font-weight: 700;
  font-size: clamp(2rem, 12vw, 11rem);
  letter-spacing: .04em;
  color: var(--text, #fff);
  white-space: nowrap;
}
.intro__sub {
  font-weight: 500;
  /* Tracking is what makes SOLUTIONS span the width of APEX above it, the
     same relationship the header lockup has. */
  font-size: clamp(0.5rem, 2.48vw, 2.3rem);
  letter-spacing: .3em;
  color: var(--green, #2ecc71);
  margin-top: clamp(5px, 1vw, 16px);
  white-space: nowrap;
  /* The trailing letter-space would otherwise push the block off-centre. */
  text-indent: .3em;
}

/* =========================================================================
   Reduced motion — intro-boot.js never sets .intro-run in that case; this is
   belt-and-braces for anyone toggling the setting mid-session.
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  #intro { display: none !important; }
  .intro-run, .intro-run body { overflow: auto !important; }
  .intro-run .site-header,
  .intro-run .hero__inner,
  .intro-run .hero__scroll,
  .intro-run main > section:not(.hero),
  .intro-run .site-footer { opacity: 1 !important; }
}

/* Portrait phones: a full-width horizontal lockup leaves the type too small
   to read, so the mark shrinks relative to the wordmark to buy it room. */
@media (max-width: 560px) {
  .intro__mark { width: 13vw; }
  .intro__name { font-size: 15vw; }
  .intro__sub  { font-size: 2.9vw; letter-spacing: .24em; }
}