/* ==========================================================================
   STAY FREE ENTERPRISE — Pin Drop hero (js/pin-drop.js)
   The WebGL canvas sits BEHIND the page's real-DOM headline (which is the
   LCP element and is owned/positioned by the page). Below 768px or under
   prefers-reduced-motion, GL never mounts and the static composition
   (.sf-pin-hero-static) is shown instead. Palette + shadow tokens from
   css/tokens.css — no raw hexes here.
   ========================================================================== */

/* ---- host ---------------------------------------------------------------
   The page owns the hero's layout/height and places the headline; these are
   safe defaults so the module works standalone (e.g. on the styleguide). */
.sf-pin-hero {
  position: relative;
  isolation: isolate;                 /* keep the canvas z-index local */
  min-height: clamp(28rem, 68vh, 46rem);
  overflow: hidden;
}

/* The WebGL canvas sf-gl.js injects (class .fx-canvas-abs, aria-hidden).
   Behind everything, non-interactive, decorative. Never the LCP element. */
.sf-pin-hero .fx-canvas-abs {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Lift the page's real-DOM hero content above the canvas without the page
   needing to know about the canvas. Excludes the canvas + static poster. */
.sf-pin-hero > :not(.fx-canvas-abs):not(.sf-pin-hero-static) {
  position: relative;
  z-index: 1;
}

/* ---- static composition (mobile / reduced-motion / no-GL) ---------------
   Large logo mark + soft taupe presence shadow. No motion.
   Visible by default (mobile-first, zero-JS-dependent — it's now rendered
   server-side in the HTML, not JS-inserted, so it's discoverable + eager-
   loadable as the mobile LCP candidate). Hidden the instant pin-drop.js
   confirms the WebGL pin is mounting (.sf-pin-hero--gl), so desktop users
   see it only as a poster-first flash before the animated pin takes over. */
.sf-pin-hero-static {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.sf-pin-hero--gl .sf-pin-hero-static {
  display: none;
}

.sf-pin-hero-static__mark {
  width: clamp(9rem, 26vw, 15rem);
  height: auto;
  /* soft taupe drop-shadow — presence, never black (matches --sf-shadow-* tint) */
  filter:
    drop-shadow(0 12px 20px rgba(138, 128, 116, 0.28))
    drop-shadow(0 28px 44px rgba(138, 128, 116, 0.22));
}

/* On very small screens the mark drifts toward the top so the page headline
   (placed by the page) has room beneath it. */
@media (max-width: 480px) {
  .sf-pin-hero-static { align-items: flex-start; padding-top: var(--sf-space-7); }
  .sf-pin-hero-static__mark { width: clamp(7.5rem, 42vw, 11rem); }
}

/* Reduced motion: the static poster is already motionless; this is a belt-
   and-suspenders guard in case a host was mounted in GL mode elsewhere. */
@media (prefers-reduced-motion: reduce) {
  .sf-pin-hero-static__mark { animation: none; }
}