/* ============================================================
   FAULKNER HR SOLUTIONS — HUB EXPERIENCE LAYER

   Progressive enhancement for body[data-hub-page]. Content is
   never hidden by CSS alone; JavaScript adds transient state
   classes only while an element is actively animating.
   ============================================================ */

body[data-hub-page] {
  --hub-ink: var(--navy-dark, #122839);
  --hub-navy: var(--navy, #1b3a52);
  --hub-navy-light: var(--navy-light, #2a4f6e);
  --hub-gold: var(--gold, #c49a3c);
  --hub-gold-light: var(--gold-light, #d4ae5a);
  --hub-paper: var(--off-white, #f8f7f4);
  --hub-motion-distance: 22px;
  --hub-motion-duration: 720ms;
  --hub-motion-ease: cubic-bezier(.22, 1, .36, 1);
}

/* Reveal hooks remain fully readable without JavaScript. */
body[data-hub-page] [data-reveal],
body[data-hub-page] [data-stagger] > * {
  backface-visibility: hidden;
}

body[data-hub-page] .hub-is-animating {
  will-change: opacity, transform;
}

body[data-hub-page] .hub-reveal-complete {
  opacity: 1;
  transform: none;
  visibility: visible;
  will-change: auto;
}

/* A small accent rule that can be attached to any section heading. */
body[data-hub-page] [data-hub-accent] {
  position: relative;
}

body[data-hub-page] [data-hub-accent]::after {
  content: "";
  display: block;
  width: clamp(48px, 8vw, 88px);
  height: 2px;
  margin-top: 18px;
  background: linear-gradient(90deg, var(--hub-gold), rgba(196, 154, 60, 0));
  transform: scaleX(var(--hub-accent-progress, 1));
  transform-origin: left center;
}

/* ---------- Lightweight Three.js / raw-WebGL system field ---------- */
body[data-hub-page] [data-webgl-system] {
  position: relative;
  isolation: isolate;
  overflow: clip;
  --hub-field-opacity: .74;
}

body[data-hub-page] [data-webgl-system]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 24%, rgba(196, 154, 60, .14), transparent 34%),
    radial-gradient(circle at 12% 78%, rgba(42, 79, 110, .28), transparent 42%);
}

body[data-hub-page] [data-webgl-system] > :not(.hub-webgl__canvas) {
  position: relative;
  z-index: 1;
}

.hub-webgl__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: var(--hub-field-opacity, .74);
  pointer-events: none;
  contain: strict;
}

[data-webgl-system].hub-webgl--static::after,
[data-webgl-system].hub-webgl--unavailable::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .36;
  background-image:
    radial-gradient(circle at 18% 28%, rgba(212, 174, 90, .55) 0 2px, transparent 3px),
    radial-gradient(circle at 68% 34%, rgba(212, 174, 90, .42) 0 2px, transparent 3px),
    radial-gradient(circle at 46% 76%, rgba(255, 255, 255, .25) 0 2px, transparent 3px),
    linear-gradient(118deg, transparent 20%, rgba(212, 174, 90, .12) 20.2%, transparent 20.5%),
    linear-gradient(34deg, transparent 62%, rgba(255, 255, 255, .09) 62.2%, transparent 62.5%);
  background-size: 240px 180px, 300px 210px, 280px 220px, 100% 100%, 100% 100%;
}

/* ---------- Lottie mount and no-library fallback ---------- */
body[data-hub-page] [data-lottie-system] {
  position: relative;
  isolation: isolate;
  width: min(100%, var(--hub-lottie-size, 260px));
  aspect-ratio: 1;
  overflow: hidden;
}

body[data-hub-page] [data-lottie-system] svg,
body[data-hub-page] [data-lottie-system] canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

.hub-lottie__fallback {
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(196, 154, 60, .38);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(196, 154, 60, .16), transparent 48%),
    linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(27, 58, 82, .05));
}

.hub-lottie__fallback::before,
.hub-lottie__fallback::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 999px;
  background: var(--hub-gold);
  transform-origin: left center;
}

.hub-lottie__fallback::before {
  width: 28%;
  height: 4px;
  transform: translate(-34%, 12px) rotate(42deg);
}

.hub-lottie__fallback::after {
  width: 46%;
  height: 4px;
  transform: translate(-2%, 12px) rotate(-47deg);
}

[data-lottie-system].hub-lottie--fallback .hub-lottie__fallback {
  animation: hub-fallback-arrive 700ms var(--hub-motion-ease) both;
}

@keyframes hub-fallback-arrive {
  from { opacity: 0; transform: scale(.88) rotate(-4deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}

/* ---------- Scroll-progress hook ---------- */
body[data-hub-page] [data-hub-progress] {
  position: relative;
  --hub-progress: 0;
}

body[data-hub-page] [data-hub-progress-line] {
  transform: scaleY(var(--hub-progress));
  transform-origin: top center;
  will-change: transform;
}

body[data-hub-page] [data-hub-progress="horizontal"] [data-hub-progress-line] {
  transform: scaleX(var(--hub-progress));
  transform-origin: left center;
}

/* ---------- Optional Spline adapter hook ----------
   No Spline runtime or scene is loaded by this stylesheet/script.
   Until a brand-owned scene is registered, this static layer stays.
   ---------- */
body[data-hub-page] [data-spline-scene] {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: var(--hub-spline-min-height, 320px);
  background:
    radial-gradient(circle at 65% 35%, rgba(196, 154, 60, .16), transparent 28%),
    linear-gradient(145deg, rgba(18, 40, 57, .98), rgba(27, 58, 82, .9));
}

body[data-hub-page] [data-spline-scene].hub-spline--fallback::after {
  content: "";
  position: absolute;
  inset: 14%;
  z-index: 0;
  border: 1px solid rgba(212, 174, 90, .22);
  border-radius: 50%;
  box-shadow:
    0 0 0 42px rgba(212, 174, 90, .045),
    0 0 0 84px rgba(212, 174, 90, .025);
}

body[data-hub-page] [data-spline-scene] > canvas,
body[data-hub-page] [data-spline-scene] > spline-viewer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

body[data-hub-page] [data-spline-scene] > :not(canvas):not(spline-viewer) {
  position: relative;
  z-index: 1;
}

/* ---------- Reduced motion and constrained devices ---------- */
@media (prefers-reduced-motion: reduce) {
  body[data-hub-page] {
    --hub-motion-distance: 0px;
    --hub-motion-duration: 1ms;
  }

  body[data-hub-page] *,
  body[data-hub-page] *::before,
  body[data-hub-page] *::after {
    scroll-behavior: auto !important;
  }

  body[data-hub-page] [data-reveal],
  body[data-hub-page] [data-stagger] > *,
  body[data-hub-page] .hub-is-animating {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }

  body[data-hub-page] [data-webgl-system] .hub-webgl__canvas {
    display: none;
  }

  [data-lottie-system].hub-lottie--fallback .hub-lottie__fallback {
    animation: none;
  }

  body[data-hub-page] [data-hub-progress-line] {
    transform: none;
  }
}

@media (max-width: 767px) {
  body[data-hub-page] [data-webgl-system] {
    --hub-field-opacity: .38;
  }

  body[data-hub-page] [data-webgl-system] .hub-webgl__canvas {
    display: none;
  }
}

@media (forced-colors: active) {
  body[data-hub-page] [data-webgl-system]::before,
  body[data-hub-page] [data-webgl-system]::after,
  .hub-lottie__fallback {
    display: none;
  }
}