/* Shared big-bold-text layer for the /hf, /hf2, /hf3 animation tests (not the landing page).
   Per-slide contrast colour (--acc, set by bigtext.js), a highlighted "ApTask Franchise" badge,
   a giant kinetic background word, word-by-word headline slams and a highlighter bar on the key word. */
.bt-stage { --acc: #FC6E2B; --acc-ink: #0a0a0a; }

/* "ApTask Franchise": a solid colour block with a moving shine, so it can't be missed. */
.bt-badge { display: inline-block; position: relative; overflow: hidden; background: var(--acc); color: var(--acc-ink);
  font-family: 'Inter', system-ui, sans-serif; text-transform: none;
  font-weight: 900; font-size: clamp(22px, 3.2vw, 46px); letter-spacing: -.02em; line-height: 1;
  padding: .22em .6em .26em; border-radius: 12px; transform: rotate(-2deg);
  box-shadow: 0 14px 44px -8px var(--acc); transition: background-color .5s, box-shadow .5s; }
.bt-badge::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 35%, #ffffffb0 50%, transparent 65%);
  transform: translateX(-130%); animation: bt-shine 2.8s ease-in-out infinite; }
@keyframes bt-shine { 55%, 100% { transform: translateX(130%); } }

/* Giant background word: slams in per slide, then scrolls. */
.bt-kinetic { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 2;
  pointer-events: none; overflow: hidden; white-space: nowrap; }
.bt-kinetic span { display: inline-block; font-weight: 900; font-size: clamp(120px, 24vw, 420px); line-height: .9;
  letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 2px var(--acc); opacity: .34;
  animation: bt-marquee 24s linear infinite; }
.bt-light .bt-kinetic span { color: var(--acc); -webkit-text-stroke: 0; opacity: .14; }
.bt-in.slam { animation: bt-slam .9s cubic-bezier(.16,1,.3,1) both; }
@keyframes bt-slam { from { transform: scale(2.6); opacity: 0; filter: blur(14px); } to { transform: none; opacity: 1; filter: none; } }
@keyframes bt-marquee { to { transform: translateX(-50%); } }

/* Headline: each word slams in, staggered; the key word (em) gets a highlighter bar in the slide colour. */
h1 .bt-w { display: inline-block; }
.in h1 .bt-w { animation: bt-word .75s cubic-bezier(.2,1.4,.4,1) calc(var(--i) * 110ms) both; }
@keyframes bt-word { from { transform: translateY(40%) scale(1.8) rotate(-4deg); opacity: 0; filter: blur(10px); }
                     to { transform: none; opacity: 1; filter: none; } }
h1 em { color: var(--acc-ink) !important; padding: 0 .14em; margin: 0 -.02em; border-radius: .08em; text-shadow: none !important;
  background: linear-gradient(var(--acc), var(--acc)) no-repeat 0 62% / 100% 86%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.in h1 em { animation: bt-mark .55s ease-out calc(var(--i, 0) * 110ms + 450ms) both; }
@keyframes bt-mark { from { background-size: 0% 86%; color: var(--acc); } to { background-size: 100% 86%; color: var(--acc-ink); } }

@media (prefers-reduced-motion: reduce) {
  .bt-badge::after, .bt-kinetic span, .bt-in.slam, .in h1 .bt-w, .in h1 em { animation: none; }
}