/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* Spherical (radial) toning: dark midnight blue glow at top-center,
     falling off to navy toward the bottom. `farthest-side` sizes the circle
     so the gradient always finishes right at the bottom edge, regardless of
     viewport aspect ratio. */
  background: radial-gradient(circle farthest-side at 50% 0%, #10143a 0%, #060a24 45%, #010611 100%);
}

/* Starfield backdrop — sits behind the logo rain and the gradient shows
   through everywhere the canvas hasn't painted a star. */
#starfield {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  filter: blur(0.6px);
}

/* Fullscreen stage the logo rain lives inside — transparent so the body's
   gradient (and the starfield behind it) shows through untouched. */
#rain-container {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: transparent;
}

/* A single falling logo instance. Position is driven entirely by
   `transform: translate3d(...)` from rain.js so the browser can composite
   it on the GPU instead of triggering layout every frame. */
.logo {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  line-height: 1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  will-change: transform;
  pointer-events: none;
  user-select: none;
  transform-origin: center center;
}

.logo-iam {
  color: #ffffff;
  /* The braces' own side bearing already reads as loose next to a proportional
     sans "IAM" — a touch of positive tracking balances I/A/M internally
     without reopening the brace gaps fixed below. */
  letter-spacing: 0.02em;
}

.logo-brand {
  color: #97c459;
  /* Light weight gives "expert" a slender, condensed-ish feel — true
     font-stretch: condensed isn't reliably available across platforms
     without a specific condensed font, so weight does the job instead. */
  font-weight: 300;
  /* Lowercase "expert" sits visually low against baseline-aligned caps —
     nudge it up so its optical (ink) center lines up with IAM's, measured
     via Canvas actualBoundingBox metrics. em-based so it scales with
     whatever font-size this instance renders at. */
  position: relative;
  top: -0.145em;
}

/* {} render notably larger than the surrounding wordmark, scaled in em so
   it tracks whatever base font-size rain.js assigns per depth layer. */
.logo-brace {
  color: #97c459;
  font-size: 1.45em;
}

/* Kerning: open a deliberate "almost a space, not quite" gap around each
   brace — { IAM } rather than a cramped {IAM} or a full word-space gap.
   DOM order is always brace, IAM, brace, expert, so nth-of-type reliably
   tells the opening brace from the closing one even though both share
   .logo-brace. */
.logo-brace:nth-of-type(1) {
  margin-right: 0.14em;
}

.logo-brace:nth-of-type(3) {
  margin-left: 0.14em;
  margin-right: 0.1em;
}

/* logoRenderMode: 'image' — sized via width in rain.js, height follows
   the SVG's own aspect ratio. */
.logo--image {
  display: block;
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  .logo {
    transition: none;
  }
}

/* Fixed, centered hero mark — entirely outside the rain pool, so rain.js
   never touches it: no transform, no blur, no opacity changes, ever. */
#hero-logo {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  user-select: none;
  text-align: center;
}

/* Countdown to 2026-09-01 — sits below the mark, deliberately understated:
   small, muted labels with brighter (but not brand-green) numbers so it
   reads as a functional detail, not a competing headline. */
.hero-logo__countdown {
  display: flex;
  gap: clamp(16px, 2.8vw, 38px);
  margin-top: clamp(14px, 2.2vw, 30px);
  font-variant-numeric: tabular-nums;
}

.countdown__segment {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.countdown__value {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  line-height: 1;
  font-size: clamp(24px, 3.2vw, 46px);
  color: #ffffff;
}

.countdown__unit {
  margin-top: clamp(4px, 0.6vw, 8px);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(11px, 1.2vw, 15px);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}

.hero-logo__mark {
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  line-height: 1;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: clamp(56px, 9vw, 160px);
}

/* Tagline under the mark — deliberately muted (dimmed white, not the brand
   green or full white) so it reads as supporting text, never competes with
   the logo above it. */
.hero-logo__subtitle {
  margin: 0;
  margin-top: clamp(8px, 1.4vw, 20px);
  max-width: min(90vw, 700px);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-weight: 500;
  font-size: clamp(11px, 1.5vw, 19px);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

/* The initials hiding in "Identity Access Management" get called out in
   full white, echoing the IAM in the mark above. */
.subtitle-highlight {
  color: #ffffff;
}