/* ============================================================
   Hermes Logios — homepage motion pass (home-fx.css)
   ------------------------------------------------------------
   Effect-only styles for home-fx.js. Adds, on the homepage hero:
     1. an entrance reveal (fade + slight rise, staggered)
     2. a premium cyan hover treatment on the Build / Start pills
     3. ONE ambient "scan sweep" light bar over the dot-map
   Palette: cyan #51DCFB on near-black #101010 (owned by site.css).

   LOAD ORDER: load AFTER site.css and fx.css.

   Hydration-safe: every hook is an attribute/class that home-fx.js
   adds itself (hl-fx-*). We never style raw React classes, so a
   re-render can't strip our styling — the JS re-applies the hook.
   GPU-cheap: transform / opacity / box-shadow only.
   ============================================================ */

/* ---------- 1. entrance reveal ----------------------------------
   home-fx.js tags the hero H1 / sub-paragraph / button row with
   .hl-fx-reveal and a per-element --hl-fx-d stagger delay, then flips
   .hl-fx-in on the next frame. We start hidden+down, settle to rest.
   We DON'T set a starting transform on the buttons' own transforms —
   the reveal lives on a wrapping hook element / the row, so React's
   inline button transitions are untouched. */
.hl-fx-reveal {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) var(--hl-fx-d, 0s),
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) var(--hl-fx-d, 0s);
  will-change: opacity, transform;
}
.hl-fx-reveal.hl-fx-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
/* once settled, drop will-change so we don't pin a layer forever */
.hl-fx-reveal.hl-fx-done {
  will-change: auto;
}

/* ---------- 2. Build / Start hover micro-interaction ------------
   home-fx.js adds [data-hl-fx-cta] to the two <a> wrappers (Build /
   Start). We give the inner <button> a soft cyan glow + brightened
   border on hover / keyboard focus. The site's own hover fills the
   pill white; our cyan ring/glow rides on top for a premium accent
   without overriding that fill. */
[data-hl-fx-cta] > button {
  transition:
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}
[data-hl-fx-cta]:hover > button,
[data-hl-fx-cta]:focus-within > button {
  border-color: #51dcfb;
  box-shadow:
    0 0 0 1px rgba(81, 220, 251, 0.55),
    0 0 18px 2px rgba(81, 220, 251, 0.38),
    0 0 42px 6px rgba(81, 220, 251, 0.18);
}
/* subtle sheen sweep across the pill on hover (clipped to the pill) */
[data-hl-fx-cta] > button::after {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 50%;
  height: 100%;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(81, 220, 251, 0.28) 50%,
    transparent 100%
  );
  opacity: 0;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.2s ease;
}
[data-hl-fx-cta]:hover > button::after,
[data-hl-fx-cta]:focus-within > button::after {
  opacity: 1;
  animation: hl-fx-sheen 0.9s ease-out;
}
@keyframes hl-fx-sheen {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  100% {
    transform: translate3d(360%, 0, 0);
    opacity: 0;
  }
}

/* ---------- 3. ambient scan-sweep over the dot-map --------------
   A single faint cyan light bar that slowly drifts diagonally across
   the hero panel, evoking a sensor scan reading the chain. Lives in a
   layer home-fx.js injects INSIDE the hero panel (which is
   position:relative; overflow:hidden), z-index between the KV map
   (z-0) and the text (z-10). Pure CSS transform/opacity keyframes →
   GPU-cheap, no JS per-frame work. */
.hl-fx-scan {
  position: absolute;
  inset: 0;
  z-index: 1; /* above KV map (0), below hero text (10) */
  pointer-events: none;
  overflow: hidden;
  /* feather the edges so the bar fades in/out rather than hard-clips */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 12%,
    #000 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 12%,
    #000 88%,
    transparent 100%
  );
}
.hl-fx-scan::before {
  content: "";
  position: absolute;
  top: -25%;
  left: -40%;
  width: 36%;
  height: 150%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(81, 220, 251, 0.045) 38%,
    rgba(81, 220, 251, 0.13) 50%,
    rgba(81, 220, 251, 0.045) 62%,
    transparent 100%
  );
  filter: blur(2px);
  transform: translate3d(0, 0, 0) rotate(8deg);
  will-change: transform, opacity;
  /* slow drift across, long rest between passes (opacity gates it off
     for most of the cycle so it reads as an occasional sweep) */
  animation: hl-fx-scan-sweep 11s ease-in-out infinite;
}
@keyframes hl-fx-scan-sweep {
  0% {
    transform: translate3d(0, 0, 0) rotate(8deg);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  46% {
    opacity: 1;
  }
  60% {
    transform: translate3d(360%, 0, 0) rotate(8deg);
    opacity: 0;
  }
  100% {
    /* parked off-screen-left for the rest of the cycle (the pause) */
    transform: translate3d(360%, 0, 0) rotate(8deg);
    opacity: 0;
  }
}

/* JS pauses the loop when the tab is hidden by toggling this class. */
.hl-fx-scan.hl-fx-paused::before {
  animation-play-state: paused;
}

/* ---------- 4. reduced motion -----------------------------------
   Show final state instantly; kill the ambient loop + sheen. The JS
   also bails on its own reduced-motion check, but CSS is the
   authoritative fallback (covers any tagging that already happened). */
@media (prefers-reduced-motion: reduce) {
  .hl-fx-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  [data-hl-fx-cta] > button::after,
  [data-hl-fx-cta]:hover > button::after,
  [data-hl-fx-cta]:focus-within > button::after {
    animation: none !important;
    opacity: 0 !important;
  }
  .hl-fx-scan {
    display: none !important;
  }
}