/* Legends Brackets — hero title v2: monochrome fight-night intro. Plays once, then holds.
   Uses live tokens from /games/hub.css: --fg, --muted, --font. Only transforms/opacity animate, so there's no layout shift. */
.lb-ht {
  position: relative;
  /* Clip box widened to ~the viewport: flying words and FX never cause horizontal scroll,
     and words are only clipped at the screen edge (where they'd be offscreen anyway). */
  --lb-ht-bleed: max(0px, calc((100vw - 100%) / 2 - 10px));
  overflow-x: clip; padding-inline: var(--lb-ht-bleed); margin-inline: calc(-1 * var(--lb-ht-bleed));
  /* Russo One display face, scoped to the hero title only (kicker stays Outfit). Naturally bold: weight 400. */
  font-family: "Russo One", var(--font, Outfit), system-ui, sans-serif;
  font-weight: 400; letter-spacing: -.005em; line-height: 1;
  font-size: clamp(2.1rem, 5.2vw, 3.9rem); /* Russo One is wider than Outfit 800; this keeps the same line fit */
}
.lb-ht-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.lb-ht-visual { display: block; color: var(--fg, #f6f3ec); }
.lb-ht-w { display: inline-block; position: relative; transform-origin: 50% 60%; will-change: transform, opacity; }
/* landing FX: all absolutely positioned on the word, pointer-events none, so no layout shift */
/* (1) beam lives in .lb-ht-fx (injected by JS); its box, a little wider than the word, sets the beam length.
   Horizontal scroll is prevented by the widened clip on .lb-ht; the words themselves are never clipped. */
.lb-ht-fx { position: absolute; left: -18%; right: -18%; top: -.7em; bottom: -.7em; overflow: visible; pointer-events: none; z-index: -1; }
.lb-ht-beam {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgba(246,243,236,.45) 25%, rgba(255,255,255,.75) 50%, rgba(246,243,236,.45) 75%, transparent);
  box-shadow: 0 0 10px 1px rgba(246,243,236,.28), 0 0 28px 5px rgba(246,243,236,.1);
  opacity: 0; transform: scaleX(0); mix-blend-mode: screen;
}
.lb-ht-hit .lb-ht-beam {
  height: 2.5px; margin-top: -1.25px;
  background: linear-gradient(90deg, transparent, rgba(231,215,161,.45) 20%, rgba(255,251,233,.8) 50%, rgba(231,215,161,.45) 80%, transparent);
  box-shadow: 0 0 12px 2px rgba(231,215,161,.32), 0 0 36px 7px rgba(231,215,161,.12);
}
.lb-ht-hit .lb-ht-fx { left: -24%; right: -24%; top: -.9em; bottom: -.9em; }
/* (2) word-shaped dust: 3 ghost copies of the word (JS), exactly over it and behind it, billowing out */
.lb-ht-ghost {
  position: absolute; left: 0; top: 0; z-index: -1; white-space: nowrap; pointer-events: none;
  color: rgba(246,243,236,.9); opacity: 0; transform-origin: 50% 55%;
}
.lb-ht-hit .lb-ht-ghost { color: rgba(240,228,190,.9); } /* faint gold tint */
.lb-ht-w::after { /* (2) diagonal light sheen clipped to the glyphs (duplicate text via data-text) */
  content: attr(data-text); position: absolute; inset: 0; color: transparent; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.5) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%; background-position: 130% 0;
  -webkit-background-clip: text; background-clip: text; opacity: 0;
}
/* (3) spark streaks, final hits only (spans injected by JS) */
.lb-ht-sparks { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.lb-ht-sparks i {
  position: absolute; left: 0; top: -1px; width: .55em; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--fg, #f6f3ec)); transform-origin: 0 50%;
  opacity: 0; transform: rotate(var(--a)) translateX(.3em) scaleX(.2);
}

/* armed (JS present, before play): words wait offstage; failsafe shows them if JS never starts */
html.lb-ht-js .lb-ht:not(.is-done):not(.is-play):not(.is-reduced) .lb-ht-w { opacity: 0; animation: lb-ht-failsafe 0s 2.5s forwards; }
html.lb-ht-js .intro:has(> .lb-ht:not(.is-done):not(.is-play):not(.is-reduced)) > .kicker { opacity: 0; animation: lb-ht-failsafe 0s 2.5s forwards; }
@keyframes lb-ht-failsafe { to { opacity: 1; } }

/* start offsets per direction */
.lb-ht-w[data-from="left"]      { --from: translateX(-2.6em) rotate(-4deg); }
.lb-ht-w[data-from="right"]     { --from: translateX(2.6em) rotate(4deg); }
.lb-ht-w[data-from="top"]       { --from: translateY(-1.8em) rotate(-6deg); }
.lb-ht-w[data-from="bottom"]    { --from: translateY(1.8em) rotate(5deg); }
.lb-ht-w[data-from="zoom"]      { --from: scale(3.4); }
.lb-ht-w[data-from="zoom-tilt"] { --from: scale(3) rotate(-7deg); }

/* full motion */
.lb-ht.is-play .lb-ht-w {
  opacity: 0;
  animation: lb-ht-slam 420ms cubic-bezier(.2,.9,.25,1) var(--d, 0ms) both;
}
.lb-ht.is-play .lb-ht-beam { animation: lb-ht-beam 380ms cubic-bezier(.2,.8,.3,1) calc(var(--d, 0ms) + 280ms) both; }
.lb-ht.is-play .lb-ht-hit .lb-ht-beam { animation-name: lb-ht-beam-big; animation-duration: 460ms; }
.lb-ht.is-play .lb-ht-ghost { animation: lb-ht-dust 650ms cubic-bezier(.2,.7,.3,1) calc(var(--d, 0ms) + 270ms + var(--gd, 0ms)) both; }
.lb-ht.is-play .lb-ht-hit .lb-ht-ghost { animation-name: lb-ht-dust-big; animation-duration: 800ms; }
/* grainy dusty edge (SVG turbulence) on larger, fine-pointer screens only; phones get blur only */
@media (min-width: 700px) and (hover: hover) {
  .lb-ht.is-play .lb-ht-ghost { animation-name: lb-ht-dust-grain; }
  .lb-ht.is-play .lb-ht-hit .lb-ht-ghost { animation-name: lb-ht-dust-grain-big; }
}
.lb-ht.is-play .lb-ht-w::after { animation: lb-ht-sheen 350ms ease-out calc(var(--d, 0ms) + 300ms) both; }
.lb-ht.is-play .lb-ht-sparks i { animation: lb-ht-spark 250ms ease-out calc(var(--d, 0ms) + 290ms) both; }
.lb-ht.is-play .lb-ht-hit { animation-name: lb-ht-slam-big; animation-duration: 460ms; }

@keyframes lb-ht-slam {
  0%   { opacity: 0; transform: var(--from); filter: blur(5px); }
  55%  { opacity: 1; filter: blur(0); }
  70%  { transform: scale(1.09); }
  84%  { transform: scale(.97); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes lb-ht-slam-big {
  0%   { opacity: 0; transform: var(--from); filter: blur(6px); }
  58%  { opacity: 1; filter: blur(0); text-shadow: 0 0 0 transparent; }
  68%  { transform: scale(1.16); text-shadow: 0 0 .45em rgba(231, 215, 161, .27); } /* the one warm-gold glint */
  82%  { transform: scale(.96); }
  100% { opacity: 1; transform: none; filter: none; text-shadow: none; }
}
@keyframes lb-ht-beam { 0% { opacity: 0; transform: scaleX(0); } 30% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1.05) scaleY(.5); } }
@keyframes lb-ht-beam-big { 0% { opacity: 0; transform: scaleX(0); } 25% { opacity: 1; transform: scaleX(1) scaleY(1.3); } 100% { opacity: 0; transform: scaleX(1.08) scaleY(.5); } }
@keyframes lb-ht-dust {
  0% { opacity: .28; transform: scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translateY(-.12em) scale(var(--gs, 1.25)); filter: blur(calc(var(--gb, 10px) + 4px)); }
}
@keyframes lb-ht-dust-big {
  0% { opacity: .32; transform: scale(1); filter: blur(0); }
  100% { opacity: 0; transform: translateY(-.18em) scale(calc(var(--gs, 1.25) + .12)); filter: blur(calc(var(--gb, 10px) + 7px)); }
}
@keyframes lb-ht-dust-grain {
  0% { opacity: .28; transform: scale(1); filter: url(#lb-ht-dust) blur(0); }
  100% { opacity: 0; transform: translateY(-.12em) scale(var(--gs, 1.25)); filter: url(#lb-ht-dust) blur(calc(var(--gb, 10px) + 4px)); }
}
@keyframes lb-ht-dust-grain-big {
  0% { opacity: .32; transform: scale(1); filter: url(#lb-ht-dust) blur(0); }
  100% { opacity: 0; transform: translateY(-.18em) scale(calc(var(--gs, 1.25) + .12)); filter: url(#lb-ht-dust) blur(calc(var(--gb, 10px) + 7px)); }
}
@keyframes lb-ht-sheen { 0% { opacity: 1; background-position: 130% 0; } 100% { opacity: 1; background-position: -30% 0; } }
@keyframes lb-ht-spark {
  0% { opacity: 1; transform: rotate(var(--a)) translateX(.3em) scaleX(.2); }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(1.3em) scaleX(1); }
}
.lb-ht.is-shake .lb-ht-visual   { animation: lb-ht-shake 180ms linear; }
.lb-ht.is-shake-big .lb-ht-visual { animation: lb-ht-shake-big 260ms linear; }
@keyframes lb-ht-shake { 25% { transform: translate(2px,-1px); } 50% { transform: translate(-2px,1px); } 75% { transform: translate(1px,1px); } }
@keyframes lb-ht-shake-big {
  15% { transform: translate(4px,-2px) rotate(.25deg); } 35% { transform: translate(-4px,2px) rotate(-.25deg); }
  55% { transform: translate(3px,1px); } 75% { transform: translate(-2px,-1px); } 100% { transform: none; }
}
/* kicker letter-spaces in after the last hit */
.intro:has(> .lb-ht.is-play) > .kicker { animation: lb-ht-kicker 600ms cubic-bezier(.2,.8,.2,1) var(--kd, 1150ms) both; }
@keyframes lb-ht-kicker { from { opacity: 0; letter-spacing: .6em; } to { opacity: 1; letter-spacing: .22em; } }

/* reduced motion: everything fades in together, 300 ms */
.lb-ht.is-reduced .lb-ht-w { animation: lb-ht-fade 300ms ease-out both; }
.lb-ht.is-reduced .lb-ht-w::after, .lb-ht.is-done .lb-ht-w::after { animation: none; opacity: 0; }
.lb-ht.is-reduced .lb-ht-sparks, .lb-ht.is-done .lb-ht-sparks, .lb-ht.is-reduced .lb-ht-fx, .lb-ht.is-done .lb-ht-fx, .lb-ht.is-reduced .lb-ht-ghost, .lb-ht.is-done .lb-ht-ghost { display: none; }
.intro:has(> .lb-ht.is-reduced) > .kicker { animation: lb-ht-fade 300ms ease-out both; }
@keyframes lb-ht-fade { from { opacity: 0; } to { opacity: 1; } }
.lb-ht.is-done .lb-ht-w, .intro:has(> .lb-ht.is-done) > .kicker { opacity: 1; animation: none; }

html.lb-light .lb-ht-w::after { background-image: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%); }