/* ==========================================================================
   Sizzle — the motion layer for the marketing pages (2026-11-02)

   Purely additive: every page that has it loads this file and
   /js/sizzle.js after styles.css. Remove those two tags (and the
   capability ticker on the homepage) to get the previous site back; the
   pre-sizzle pages are kept in Archive/website-pre-sizzle-2026-11-02/.
   Everything here stops for prefers-reduced-motion.
   ========================================================================== */

/* ---------- scroll progress ---------- */
.sz-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1100;
  transform-origin: 0 50%; transform: scaleX(var(--sz-p, 0));
  background: linear-gradient(90deg, var(--color-secondary), var(--color-accent), #ff5fa2);
  pointer-events: none;
}

/* ---------- header: glass on scroll, sliding underline ---------- */
.site-header { transition: background var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); }
.site-header.is-scrolled { border-bottom-color: transparent; box-shadow: 0 6px 24px rgba(59, 21, 73, .10); }
/* Glass only where the nav is inline: backdrop-filter makes the header the
   containing block for fixed children, which would trap the mobile drawer. */
@media (min-width: 1025px) {
  .site-header.is-scrolled {
    background: rgba(255, 255, 255, .78);
    -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
  }
}
.site-header__inner { transition: padding var(--transition-base); }
.site-header.is-scrolled .site-header__inner { padding-top: .45rem; padding-bottom: .45rem; }
@media (min-width: 1025px) {
  .main-nav__link { position: relative; }
  .main-nav__link::after {
    content: ""; position: absolute; left: 50%; right: 50%; bottom: -4px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--color-secondary), var(--color-accent));
    transition: left var(--transition-base), right var(--transition-base);
  }
  .main-nav__link:hover::after, .main-nav__link--active::after { left: 0; right: 0; }
}
.site-logo__icon { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.site-logo:hover .site-logo__icon { transform: rotate(-12deg) scale(1.12); }

/* ---------- buttons: shine sweep, glow ---------- */
.btn--primary, .btn--ghost { position: relative; overflow: hidden; isolation: isolate; }
.btn--primary::after, .btn--ghost::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-20deg); transition: left .7s ease;
}
.btn--primary:hover::after, .btn--ghost:hover::after { left: 120%; }
.btn--primary { transition: transform var(--transition-fast), box-shadow var(--transition-base), background var(--transition-base); }
.btn--primary:hover { transform: translateY(-2px); }
.hero--platform .btn--primary, .cta-band .btn--primary { animation: sz-glow 2.8s ease-in-out infinite; }
@keyframes sz-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 127, 64, .0), 0 10px 26px rgba(255, 127, 64, .28); }
  50%      { box-shadow: 0 0 0 8px rgba(255, 127, 64, .12), 0 14px 34px rgba(255, 127, 64, .42); }
}

/* ---------- heroes: aurora + stars ---------- */
.hero--platform, .page-header, .page-hero { position: relative; overflow: hidden; isolation: isolate; }
.sz-aurora { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.sz-aurora i {
  position: absolute; display: block; border-radius: 50%; filter: blur(60px); opacity: .55;
  mix-blend-mode: screen; will-change: transform;
}
.sz-aurora i:nth-child(1) { width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; left: -10%; top: -30%;
  background: radial-gradient(circle, rgba(84, 200, 232, .75), transparent 65%); animation: sz-drift-a 19s ease-in-out infinite alternate; }
.sz-aurora i:nth-child(2) { width: 40vw; height: 40vw; max-width: 560px; max-height: 560px; right: -8%; top: -20%;
  background: radial-gradient(circle, rgba(255, 127, 64, .7), transparent 65%); animation: sz-drift-b 23s ease-in-out infinite alternate; }
.sz-aurora i:nth-child(3) { width: 52vw; height: 52vw; max-width: 700px; max-height: 700px; left: 25%; bottom: -55%;
  background: radial-gradient(circle, rgba(255, 95, 162, .45), transparent 65%); animation: sz-drift-c 27s ease-in-out infinite alternate; }
@keyframes sz-drift-a { to { transform: translate(18vw, 14vh) scale(1.25); } }
@keyframes sz-drift-b { to { transform: translate(-16vw, 18vh) scale(.85); } }
@keyframes sz-drift-c { to { transform: translate(-12vw, -16vh) scale(1.15); } }

.sz-stars {
  position: absolute; inset: -50% 0 0 0; z-index: -1; pointer-events: none; opacity: .7;
  background-image:
    radial-gradient(1.5px 1.5px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 90px 120px, rgba(255,255,255,.8), transparent),
    radial-gradient(1.5px 1.5px at 160px 60px, rgba(125,216,239,.9), transparent),
    radial-gradient(1px 1px at 230px 170px, #fff, transparent),
    radial-gradient(2px 2px at 300px 90px, rgba(255,153,102,.85), transparent),
    radial-gradient(1px 1px at 350px 220px, rgba(255,255,255,.7), transparent);
  background-size: 380px 260px;
  animation: sz-stars 60s linear infinite, sz-twinkle 4s ease-in-out infinite alternate;
}
@keyframes sz-stars { to { transform: translateY(260px); } }
@keyframes sz-twinkle { from { opacity: .35; } to { opacity: .8; } }

/* hero entrance */
.sz-js .hero--platform .hero__eyebrow,
.sz-js .hero--platform .hero__lede,
.sz-js .hero--platform .hero__actions,
.sz-js .hero--platform .hero__note,
.sz-js .page-header .container > *,
.sz-js .page-hero .container > * { animation: sz-rise .9s cubic-bezier(.2, .8, .2, 1) both; }
.sz-js .hero--platform .hero__eyebrow { animation-delay: .05s; }
.sz-js .hero--platform .hero__lede    { animation-delay: .75s; }
.sz-js .hero--platform .hero__actions { animation-delay: .9s; }
.sz-js .hero--platform .hero__note    { animation-delay: 1.05s; }
.sz-js .page-header .container > :nth-child(2), .sz-js .page-hero .container > :nth-child(2) { animation-delay: .12s; }
.sz-js .page-header .container > :nth-child(3), .sz-js .page-hero .container > :nth-child(3) { animation-delay: .24s; }
.sz-js .page-header .container > :nth-child(n+4), .sz-js .page-hero .container > :nth-child(n+4) { animation-delay: .36s; }
@keyframes sz-rise { from { opacity: 0; transform: translateY(26px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

.sz-w { display: inline-block; animation: sz-word .8s cubic-bezier(.2, .9, .25, 1.2) both; animation-delay: calc(.15s + var(--i) * 70ms); }
@keyframes sz-word { from { opacity: 0; transform: translateY(.6em) rotate(4deg); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }

.hero__accent {
  display: inline-block;
  background: linear-gradient(100deg, var(--color-secondary) 0%, var(--color-accent-light) 30%, #ff5fa2 50%, var(--color-accent-light) 70%, var(--color-secondary) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  animation: sz-shimmer 6s linear infinite;
}
.sz-js .hero--platform .hero__accent { animation: sz-pop 1s cubic-bezier(.2, .9, .25, 1.25) .55s both, sz-shimmer 6s linear 1.5s infinite; }
@keyframes sz-shimmer { to { background-position: -220% 0; } }
@keyframes sz-pop { from { opacity: 0; transform: scale(.7) translateY(.3em); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }

/* ---------- proof strip ---------- */
.proof { position: relative; overflow: hidden; }
.proof::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(84, 200, 232, .10) 50%, transparent 70%);
  background-size: 250% 100%; animation: sz-sweep 7s ease-in-out infinite;
}
@keyframes sz-sweep { from { background-position: 150% 0; } to { background-position: -150% 0; } }
.proof__item b { transition: color var(--transition-base); }
.proof__item:hover b { color: var(--color-secondary-light); }

/* ---------- capability ticker ---------- */
.sz-ticker {
  background: var(--color-bg-white); border-bottom: 1px solid var(--color-border-light);
  overflow: hidden; padding: 1rem 0; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.sz-ticker__track { display: flex; width: max-content; animation: sz-marquee 46s linear infinite; }
.sz-ticker:hover .sz-ticker__track { animation-play-state: paused; }
.sz-ticker ul { display: flex; list-style: none; flex-shrink: 0; }
.sz-ticker li {
  display: flex; align-items: center; gap: 1.4rem; padding-right: 1.4rem; white-space: nowrap;
  font-weight: 700; font-size: clamp(1rem, 2vw, 1.3rem); letter-spacing: -.01em; color: var(--color-primary);
}
.sz-ticker li::after { content: "✦"; font-size: .8em; color: var(--color-accent); }
.sz-ticker li:nth-child(3n+2)::after { color: var(--color-secondary-dark); }
.sz-ticker li:nth-child(3n)::after { color: #ff5fa2; }
@keyframes sz-marquee { to { transform: translateX(-50%); } }

/* ---------- scroll reveal ---------- */
/* Side-entering columns start off to the side; clip (not hidden) so the
   page never scrolls sideways and sticky still works. */
#main-content { overflow-x: clip; }
.sz-js .sz-r { transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1), filter .8s ease; }
.sz-js .sz-r:not(.is-in) { opacity: 0; transform: translateY(34px) scale(.98); filter: blur(4px); }
.sz-js .sz-r.sz-r--fade:not(.is-in) { transform: none; filter: none; }
.sz-js .compare__col--before.sz-r:not(.is-in) { transform: translateX(-48px) rotate(-1.5deg); }
.sz-js .compare__col--after.sz-r:not(.is-in) { transform: translateX(48px) rotate(1.5deg); }
.sz-js .cap.sz-r:not(.is-in), .sz-js .card.sz-r:not(.is-in), .sz-js .alc.sz-r:not(.is-in) { transform: translateY(40px) rotateX(12deg); }

/* section headings get a growing gradient bar */
.section__head h2, .section__header h2 { position: relative; }
.section__head h2::after {
  content: ""; display: block; height: 4px; width: 0; margin: .9rem auto 0; border-radius: 4px;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-accent), #ff5fa2);
  transition: width 1s cubic-bezier(.2, .8, .2, 1) .3s;
}
.section__head.is-in h2::after, html:not(.sz-js) .section__head h2::after { width: 64px; }
.section__head > h2:only-child::after { margin-bottom: 0; }

/* ---------- compare: strike the old, tick the new ---------- */
.compare__col--before li { position: relative; }
.compare__col--before li::after {
  content: ""; position: absolute; left: 0; top: 50%; height: 2px; width: 0; border-radius: 2px;
  background: rgba(224, 96, 32, .55); transition: width .5s ease; transition-delay: calc(.6s + var(--n, 0) * 120ms);
}
.compare__col--before.is-in li::after { width: 100%; }
.sz-js .compare__col--after li::before { display: inline-block; transform: scale(0); transition: transform .45s cubic-bezier(.34, 1.8, .64, 1); transition-delay: calc(.7s + var(--n, 0) * 120ms); }
.compare__col--after.is-in li::before { transform: scale(1); }
.compare__arrow { animation: sz-nudge 1.8s ease-in-out infinite; }
@keyframes sz-nudge { 0%, 100% { translate: 0 0; color: var(--color-text-muted); } 50% { translate: 10px 0; color: var(--color-accent); } }
.compare__col--after { position: relative; }
.compare__col--after::before {
  content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: calc(var(--radius-lg) + 2px);
  background: conic-gradient(from var(--sz-a, 0deg), var(--color-primary), var(--color-secondary), var(--color-accent), var(--color-primary));
  animation: sz-spin-a 6s linear infinite; opacity: .9;
}
.compare { isolation: isolate; }

/* ---------- capability cards: spotlight, counter, lift ---------- */
.cap-grid { counter-reset: sz-cap; perspective: 1200px; }
.cap { position: relative; overflow: hidden; isolation: isolate; counter-increment: sz-cap;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .35s ease, opacity .8s cubic-bezier(.2, .8, .2, 1), filter .8s ease; }
.cap::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), rgba(84, 200, 232, .16), rgba(255, 127, 64, .06) 40%, transparent 70%);
}
.cap::after {
  content: counter(sz-cap, decimal-leading-zero); position: absolute; top: .6rem; right: 1rem;
  font-size: 2.6rem; font-weight: 800; letter-spacing: -.04em; line-height: 1;
  color: transparent; -webkit-text-stroke: 1px rgba(84, 29, 102, .14); transition: -webkit-text-stroke-color .3s ease, transform .4s ease;
}
.cap h3 { position: relative; padding-top: .9rem; }
.cap h3::before {
  content: ""; position: absolute; top: 0; left: 0; height: 4px; width: 28px; border-radius: 4px;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-accent)); transition: width .4s cubic-bezier(.2, .8, .2, 1);
}
.cap:hover { transform: translateY(-6px); border-color: rgba(84, 29, 102, .25); box-shadow: 0 18px 40px rgba(59, 21, 73, .14); }
.cap:hover::before { opacity: 1; }
.cap:hover::after { -webkit-text-stroke-color: rgba(255, 127, 64, .55); transform: scale(1.08) rotate(-4deg); }
.cap:hover h3::before { width: 64px; }

/* ---------- map ---------- */
.map-legend i { transition: transform .3s ease; }
.map-legend:hover i { transform: scaleY(1.6); }

/* ---------- GivingTuesday band ---------- */
.gt-band {
  background: linear-gradient(120deg, #1f7a8c, #2b1235, #541d66, #1f7a8c);
  background-size: 300% 300%; animation: sz-flow 16s ease infinite; position: relative; overflow: hidden; isolation: isolate;
}
@keyframes sz-flow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.gt-band__stat { position: relative; overflow: hidden; isolation: isolate; background: transparent; border-color: transparent; }
.gt-band__stat::before {
  content: ""; position: absolute; inset: -60%; z-index: -2;
  background: conic-gradient(from 0deg, transparent 0 55%, var(--color-secondary) 70%, var(--color-accent) 85%, transparent 100%);
  animation: sz-spin 5s linear infinite;
}
.gt-band__stat::after { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: calc(var(--radius-xl) - 2px); background: rgba(31, 14, 40, .92); }
.gt-band__stat b { animation: sz-beat 2.4s ease-in-out infinite; text-shadow: 0 0 24px rgba(255, 153, 102, .45); }
@keyframes sz-beat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.07); } 24% { transform: scale(1); } 36% { transform: scale(1.04); } 48% { transform: scale(1); } }
@keyframes sz-spin { to { transform: rotate(1turn); } }

@property --sz-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes sz-spin-a { to { --sz-a: 360deg; } }

/* ---------- FAQ ---------- */
.faq { position: relative; border-left-color: transparent; transition: transform .3s ease; }
.faq::before {
  content: ""; position: absolute; left: -3px; top: 0; bottom: 0; width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, var(--color-secondary), var(--color-accent), #ff5fa2);
  background-size: 100% 200%; transform-origin: top; transform: scaleY(0); transition: transform .9s cubic-bezier(.2, .8, .2, 1) .2s;
}
.faq.is-in::before, html:not(.sz-js) .faq::before { transform: scaleY(1); }
.faq:hover { transform: translateX(6px); }
.faq:hover::before { animation: sz-slide-y 1.6s linear infinite; }
@keyframes sz-slide-y { to { background-position: 0 -200%; } }

/* ---------- final CTA: drifting embers ---------- */
.cta-band {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary), #7a2f8f, var(--color-primary-dark));
  background-size: 300% 300%; animation: sz-flow 14s ease infinite;
}
.cta-band::before, .cta-band::after {
  content: ""; position: absolute; inset: 0 0 -100% 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(3px 3px at 10% 80%, rgba(255, 153, 102, .9), transparent),
    radial-gradient(2px 2px at 30% 60%, rgba(125, 216, 239, .9), transparent),
    radial-gradient(3px 3px at 55% 90%, rgba(255, 95, 162, .8), transparent),
    radial-gradient(2px 2px at 75% 70%, rgba(255, 255, 255, .8), transparent),
    radial-gradient(3px 3px at 90% 85%, rgba(255, 153, 102, .8), transparent);
  background-size: 100% 50%;
  animation: sz-ember 12s linear infinite;
}
.cta-band::after { background-size: 70% 40%; animation-duration: 18s; opacity: .6; }
@keyframes sz-ember { from { transform: translateY(0); } to { transform: translateY(-50%); } }

/* ---------- other marketing pages ---------- */
.card, .value-item, .alc, .bundle, .resource-card, .contact-info__item {
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, opacity .8s cubic-bezier(.2, .8, .2, 1), filter .8s ease;
}
.card:hover, .alc:hover, .bundle:hover, .resource-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(59, 21, 73, .14); }
.value-item__icon, .card__icon { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.value-item:hover .value-item__icon, .card:hover .card__icon { transform: scale(1.15) rotate(-8deg); }

/* ---------- footer ---------- */
.site-footer { position: relative; }
.site-footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--color-secondary), var(--color-accent), #ff5fa2, var(--color-secondary));
  background-size: 200% 100%; animation: sz-shimmer 8s linear infinite;
}
.footer__social a { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1), color .2s ease; }
.footer__social a:hover { transform: translateY(-4px) rotate(-6deg); }

/* ---------- reduced motion: show everything, move nothing ---------- */
@media (prefers-reduced-motion: reduce) {
  .sz-progress, .sz-aurora, .sz-stars { display: none; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0s !important; }
  .sz-js .sz-r:not(.is-in) { opacity: 1; transform: none; filter: none; }
  .sz-ticker__track { animation: none; }
  .sz-ticker { overflow-x: auto; }
}