/* ============================================================================
   United Way of Rhode Island — flair
   Four restrained motion touches that sit on top of the design system. Every
   one of them is additive: with JS off, or reduced motion on, the page reads
   exactly as it does without this file.
     1. hero headlines arrive word by word
     2. the stat circles count up when they scroll into frame
     3. the big buttons lean toward the cursor
     4. the closing navy band carries a soft light under the pointer
   ========================================================================== */

/* ── 1. hero headline, word by word ──────────────────────────────────────── */
/* held for the moment between flair.js running and the split landing, so the
   headline is never painted whole and then again in pieces */
.uw-flair-hold .uw-hero h1,
.uw-flair-hold .uwk-hero h1 { visibility: hidden; }

/* the wrapper is an <i>, not a <span>, so the several `h1 span` rules in the
   design system (display:block, white-space:nowrap) never see these. */
.uw-w { font-style: normal; }

.uw-flair h1.uw-split .uw-w {
  display: inline-block;
  opacity: .001;
  transform: translateY(.42em);
}
.uw-flair h1.uw-split.is-lit .uw-w {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease, transform .62s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--d, 0ms);
}

/* ── 2. counting stat circles ────────────────────────────────────────────── */
.uw-flair .uw-statcirc__n.is-counting { font-variant-numeric: tabular-nums; }

/* ── 3. magnetic buttons ─────────────────────────────────────────────────── */
.uw-flair .uw-btn.uw-mag {
  will-change: transform;
  transition: transform .34s cubic-bezier(.22, 1, .36, 1),
              background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.uw-flair .uw-btn.uw-mag.is-pulled { transition-duration: .12s; }

/* ── 4. the closing band's pointer light ─────────────────────────────────── */
/* an inserted element, not a pseudo — ::before and ::after on .uw-endcta are
   already spoken for by the corner light and the 211 ring ghost */
.uw-glow {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .5s ease;
  background: radial-gradient(
    460px circle at var(--gx, 50%) var(--gy, 30%),
    rgba(255, 186, 0, .13), rgba(255, 186, 0, .05) 42%, transparent 68%);
}
.uw-endcta.is-lit .uw-glow { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .uw-flair h1.uw-split .uw-w { opacity: 1; transform: none; transition: none; }
  .uw-flair .uw-btn.uw-mag { transition: none; }
  .uw-glow { display: none; }
}