/* ============================================================
   HOMEPAGE MOTION LAYER — loaded by index.html only.
   Shared styles.css stays untouched so the other 1,100+ pages
   are unaffected. Every rule here either supports the GSAP
   choreography in js/home-motion.js, the WebGL hero scene in
   js/hero-scene.js, or quiet hover polish scoped to homepage
   sections.
   ============================================================ */

/* ------------------------------------------------------------
   1. HERO INTRO
   The .hm-js class is added by a tiny inline bootstrap in the
   head and removed either by home-motion.js (reduced motion or
   missing GSAP) or by a 2.5s failsafe timer. Content is only
   ever pre-hidden when motion is both wanted and possible.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .hm-js .hero-badge,
  .hm-js .hero .overline,
  .hm-js #hero-heading,
  .hm-js .hero .lead,
  .hm-js .hero-ctas,
  .hm-js .hero-proof,
  .hm-js .hero-credibility,
  .hm-js .hero-image {
    opacity: 0;
  }
}

.hm-word {
  display: inline-block;
  will-change: transform, opacity;
}

/* The shared stylesheet colors every span inside the hero h1 amber
   (that is how the accent line is built). Word split spans must
   inherit instead, so only the original accent span stays amber. */
.hero h1 span.hm-word {
  color: inherit;
}

/* ------------------------------------------------------------
   2. HERO WEBGL SCENE
   Mount sits behind .hero .container (which is z-index: 1).
   The existing CSS gradient on .hero is the permanent fallback,
   so if the canvas never initializes nothing is missing.
   ------------------------------------------------------------ */
.hero-scene {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s ease;
}

.hero-scene.is-live {
  opacity: 1;
}

.hero-scene canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* ------------------------------------------------------------
   3. BEFORE / AFTER PINNED EXCHANGE
   GSAP owns all hiding via inline styles, so the default state
   here is fully visible (correct for no JS and reduced motion).
   ------------------------------------------------------------ */
.ba-section .ba-before li,
.ba-section .ba-after li {
  will-change: opacity, transform;
}

/* ------------------------------------------------------------
   4. FIND / SHOW / BUILD CONNECTING LINE
   The line element is injected by home-motion.js and scrubbed
   from scaleX(0) to scaleX(1). Cards lift above it so only the
   segments in the grid gaps show, reading as a circuit trace
   drawing between the three steps.
   ------------------------------------------------------------ */
.fsb-grid {
  position: relative;
}

.fsb-grid .card {
  position: relative;
  z-index: 1;
}

.fsb-line {
  position: absolute;
  top: 3.4rem;
  left: 4%;
  width: 92%;
  height: 2px;
  z-index: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--amber) 0%, rgba(212, 168, 75, 0.35) 100%);
  transform: scaleX(0);
  transform-origin: left center;
}

@media (max-width: 900px) {
  .fsb-line { display: none; }
}

/* ------------------------------------------------------------
   5. QUIET HOVER STATES — services menu grid and AI Employees
   Slight lift, border emphasis, accent underline on the title.
   No entrance animation; these grids stay scannable.
   ------------------------------------------------------------ */
.menu-grid .card {
  transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.menu-grid .card:hover {
  transform: translateY(-3px);
  border-color: var(--amber);
  box-shadow: 0 12px 32px rgba(26, 39, 68, 0.12);
}

.menu-grid .card h3::after,
.ai-employees-section .ai-role-card h3::after {
  content: '';
  display: block;
  width: 38px;
  height: 2px;
  margin-top: 0.45rem;
  border-radius: 1px;
  background: var(--amber);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.3s ease;
}

.menu-grid .card:hover h3::after,
.ai-employees-section .ai-role-card:hover h3::after {
  transform: scaleX(1);
}

/* ------------------------------------------------------------
   6. FAQ ACCORDION — smooth height transition only.
   Progressive enhancement: browsers without interpolate-size
   keep the instant toggle they have today.
   ------------------------------------------------------------ */
@supports (interpolate-size: allow-keywords) {
  html {
    interpolate-size: allow-keywords;
  }
  details::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 0.3s ease, content-visibility 0.3s allow-discrete;
  }
  details[open]::details-content {
    block-size: auto;
  }
}

/* ------------------------------------------------------------
   7. REDUCED MOTION — everything resolves instantly to end
   state, including the legacy CSS reveal and fade-in systems.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .fade-in {
    animation: none;
    opacity: 1;
  }
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-scene {
    display: none;
  }
  .fsb-line {
    transform: scaleX(1);
  }
}