/* =============================================================================
   Bay Area Support — Bay Area FX layer
   -----------------------------------------------------------------------------
   Creative, on-brand motion + landmark motifs for the marketing site. Built
   entirely on the shared tokens (tokens.css). Loaded after site.css.

   Concepts:
     1. Golden Gate cable motif  — hero underline + CTA-band cable divider
     2. Marine fog               — drifting fog over the homepage hero
     3. Cable car                — scroll-progress rider under the header
     4. Scroll reveals           — extended in site.css (kept in lockstep w/ JS)
     5. Type that pops           — cable underline, shimmer eyebrow, count-up stats
     6. Skyline footer           — cable-car cameo + fog over the cityscape

   Every animation is reduced-motion aware. Motifs default to their finished
   state when JS is off, so nothing is ever left hidden or half-drawn.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Shared: the cable car (SVG fill classes, reused in header + footer)
   --------------------------------------------------------------------------- */
.bas-car-body  { fill: var(--bas-cream); }
.bas-car-skirt { fill: var(--bas-orange); }
.bas-car-roof  { fill: var(--bas-pacific); }
.bas-car-win   { fill: var(--bas-pacific-night); }
.bas-car-line  { stroke: var(--bas-pacific-night); stroke-width: 1.4; fill: none; }
.bas-car-wheel { fill: var(--bas-pacific-night); stroke: var(--bas-teal); stroke-width: 1.4; }
.bas-car-head { fill: var(--bas-yellow); }   /* front headlight — makes the car's facing direction visible */

/* ---------------------------------------------------------------------------
   3. Cable car — scroll-progress rider under the header
   The header is sticky site-wide (home overrides to a fixed float in its own
   inline CSS, which loads later and wins), so the rider is always visible and
   its position maps to how far down the page you are.
   --------------------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 40; }

/* No visible track: the car rides the header's own 2px solid orange bottom rule
   (the exact line the header's bottom border shows once it goes solid on scroll).
   .bas-track is a zero-height, full-width anchor pinned to the header's bottom;
   the car sits on the border line and slides across as scroll progress. */
.bas-track { position: absolute; left: 0; right: 0; bottom: 0; height: 24px; overflow: hidden; z-index: 1; pointer-events: none; }
.bas-track__car { position: absolute; left: 0; bottom: 0; width: 34px; opacity: 0; will-change: transform; }
.bas-track__car svg { display: block; width: 34px; height: auto; }

/* ---------------------------------------------------------------------------
   1 + 5. The Golden Gate cable motif
   Same gesture in two places: a hand-drawn underline under a hero keyword, and
   a suspension-cable divider along the top of the closing CTA band.
   The cable strokes draw themselves in when scrolled into view (bayarea-fx.js
   measures each path and toggles stroke-dashoffset). Default = fully drawn.
   --------------------------------------------------------------------------- */
.bas-cable-draw { transition: stroke-dashoffset 1.5s cubic-bezier(.4,.05,.3,1); }

/* Hero-keyword underline */
.bas-ul { position: relative; white-space: nowrap; color: var(--bas-orange); }
.bas-ul__line { position: absolute; left: 0; bottom: -0.30em; width: 100%; height: 0.42em; overflow: visible; }
.bas-ul__line path { stroke: var(--bas-orange); stroke-width: 5; fill: none; stroke-linecap: round; }

/* CTA-band cable divider (orange on pacific) */
.section--pacific.cta { position: relative; }
.bas-cable-divider { position: absolute; top: 0; left: 0; right: 0; height: 34px; pointer-events: none; overflow: hidden; }
.bas-cable-divider svg { display: block; width: 100%; height: 100%; }
.bas-cable-divider .bas-cable-draw { stroke: var(--bas-orange); stroke-width: 2.5; fill: none; stroke-linecap: round; }
.bas-cable-divider .bas-suspender { stroke: var(--bas-orange); stroke-width: 1.2; opacity: 0.7; }

/* ---------------------------------------------------------------------------
   5. Shimmer eyebrow — a slow bay-teal → orange sweep on the top-of-page label.
   Wrapped in @supports so browsers without background-clip:text keep solid
   orange text (never transparent/invisible).
   --------------------------------------------------------------------------- */
.eyebrow--shimmer { color: var(--bas-orange); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.eyebrow--shimmer {
		background: linear-gradient(90deg, var(--bas-teal), var(--bas-orange), var(--bas-teal));
		background-size: 200% 100%;
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
		animation: bas-shimmer 5.5s linear infinite;
	}
}
@keyframes bas-shimmer { from { background-position: 0 0; } to { background-position: 200% 0; } }

/* ---------------------------------------------------------------------------
   5. Count-up stat band (homepage)
   --------------------------------------------------------------------------- */
.bas-stats-band { padding-top: 2.6rem; padding-bottom: 2.6rem; }
.bas-stats { display: flex; gap: clamp(1.6rem, 6vw, 4rem); justify-content: center; flex-wrap: wrap; text-align: center; }
.bas-stat { min-width: 120px; }
.bas-stat__n { font-family: var(--bas-font-display); font-weight: 700; font-size: clamp(2.4rem, 6vw, 3.4rem); line-height: 1; color: var(--pacific-ink); font-variant-numeric: tabular-nums; }
.bas-stat:nth-child(2) .bas-stat__n { color: var(--bas-orange); }
.bas-stat__l { margin-top: 0.5rem; color: var(--ink); font-size: 0.95rem; }

/* ---------------------------------------------------------------------------
   6. Skyline footer — a cable-car cameo over the existing animated cityscape SVG.
   --------------------------------------------------------------------------- */
.footer-cityscape { position: relative; }
.bas-city-car { position: absolute; top: 4px; left: 0; width: 40px; z-index: 3; pointer-events: none; animation: bas-citycar 26s linear infinite; }
.bas-city-car svg { display: block; width: 40px; height: auto; filter: drop-shadow(0 2px 3px rgba(8,31,41,0.35)); }
@keyframes bas-citycar { 0% { transform: translateX(-70px); } 100% { transform: translateX(calc(100vw + 70px)); } }

/* ---------------------------------------------------------------------------
   Reduced motion: freeze every ambient loop; motifs snap to finished state.
   (Scroll reveals are already handled in site.css.)
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.bas-city-car { animation: none; }
	.bas-cable-draw { transition: none; stroke-dashoffset: 0 !important; }
	.eyebrow--shimmer { animation: none; -webkit-text-fill-color: var(--bas-orange); color: var(--bas-orange); background: none; }
}