/*
 * Habillage holo des widgets : chat, alertes et barres « Dernier » façon HoloPocket (thème nuit de la collection
 * « Nashoba Holo »). C'est le seul habillage : chat/, alerts/ et latest/index.html chargent cette feuille seule.
 * skin=holo, présent dans les URL de la collection OBS, ne change rien.
 * Polices locales (OFL) servies par le même serveur : /holo/fonts/ (Bricolage Grotesque, Geist, Geist Mono).
 *
 * Tailles des sources OBS :
 *   /chat/?channel=…                      340 × 720 : panneau 337 × 717 en haut à gauche (+ ombre dure de 3 px)
 *   /chat/?channel=…&ghost=1              320 × 560 : chat caché, transparent, texte détouré, lignes qui s'effacent
 *   /alerts/                              960 × 240 : carte héros ≈ 560 × 161 centrée, haut à y 56 (pos=center),
 *                                         lueur et animations comprises dans la source (rien sur la ligne y 239)
 *   /latest/?kind=follower|subscriber|donation (ou follow|sub|dono)
 *                                         666 × 90 : barre 596 × 72 en haut à gauche (+ ombre de 3 px)
 *
 * Hiérarchie (revue DA) : chat et barres = panneaux secondaires (liseré #313136 + petite ombre dure) ;
 * la bordure holo vive et le jaune sont réservés à l'alerte (et à la pastille de scène).
 */

/* ── Polices locales ─────────────────────────────────────────────────────── */

@font-face {
  font-family: "Bricolage Grotesque Variable";
  font-style: normal;
  font-display: block;
  font-weight: 200 800;
  src: url("/holo/fonts/bricolage-grotesque-latin-opsz-normal.woff2") format("woff2-variations"),
    url("/holo/fonts/bricolage-grotesque-latin-opsz-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque Variable";
  font-style: normal;
  font-display: block;
  font-weight: 200 800;
  src: url("/holo/fonts/bricolage-grotesque-latin-ext-opsz-normal.woff2") format("woff2-variations"),
    url("/holo/fonts/bricolage-grotesque-latin-ext-opsz-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Variable";
  font-style: normal;
  font-display: block;
  font-weight: 100 900;
  src: url("/holo/fonts/geist-latin-wght-normal.woff2") format("woff2-variations"),
    url("/holo/fonts/geist-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
    U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Variable";
  font-style: normal;
  font-display: block;
  font-weight: 100 900;
  src: url("/holo/fonts/geist-latin-ext-wght-normal.woff2") format("woff2-variations"),
    url("/holo/fonts/geist-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono Variable";
  font-style: normal;
  font-display: block;
  font-weight: 100 900;
  src: url("/holo/fonts/geist-mono-latin-wght-normal.woff2") format("woff2-variations"),
    url("/holo/fonts/geist-mono-latin-wght-normal.woff2") format("woff2");
}

/* ── Jetons (repris de holo/holo.css) ────────────────────────────────────── */

:root {
  --bg: #0e0e10;
  --panel: #18181b;
  --panel-2: #242428;
  --line: #313136;
  --ink: #f4f4f1;
  --muted: #9d9da3;
  --shade: #000;
  --brand: #ffd60a;
  --on-brand: #111;
  --accent: #8398ff;
  --holo-1: #ff4fa3;
  --holo-2: #8b6bff;
  --holo-3: #1fc8ff;
  --holo-4: #2fe39a;
  --holo-5: #ffc400;
  --holo: linear-gradient(90deg, #ff4fa3, #8b6bff, #1fc8ff, #2fe39a, #ffc400, #ff4fa3);
  --holo-card: linear-gradient(145deg, #ff4fa3 0%, #7c5cff 30%, #1fc8ff 55%, #2fe39a 80%, #ffc400 100%);
  --glow-purple: rgb(168 85 247 / 0.75);
  --font-sans: "Geist Variable", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Bricolage Grotesque Variable", "Geist Variable", ui-sans-serif, sans-serif;
  --font-mono: "Geist Mono Variable", ui-monospace, monospace;
  --track-display: -0.03em;
  --hard-sm: 3px 3px 0 var(--shade);
  --hard-lg: 6px 6px 0 var(--shade);
  --sparkle-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0l3.5 8.5L24 12l-8.5 3.5L12 24l-3.5-8.5L0 12l8.5-3.5z'/%3E%3C/svg%3E");
  /* contour lisible sur n'importe quel jeu (chat ghost) : 2 px en diagonale, 2,5 px sur les axes */
  --outline: -2px -2px 0 #0e0e10, 2px -2px 0 #0e0e10, -2px 2px 0 #0e0e10, 2px 2px 0 #0e0e10,
    0 -2.5px 0 #0e0e10, 0 2.5px 0 #0e0e10, -2.5px 0 0 #0e0e10, 2.5px 0 0 #0e0e10, 0 3px 10px rgb(0 0 0 / 0.55);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
}
body {
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* Étincelle blanche à 4 branches (le motif du logo) */
.sparkle {
  --s: 24px;
  --c: #fff;
  display: inline-block;
  width: var(--s);
  height: var(--s);
  flex: none;
  background: var(--c);
  -webkit-mask: var(--sparkle-mask) center / contain no-repeat;
  mask: var(--sparkle-mask) center / contain no-repeat;
}

/* ═══ Chat (source 340 × 720) ═════════════════════════════════════════════ */

.chat-root {
  width: 340px;
  height: 100%;
  padding: 0 3px 3px 0;
}
.chat-plaque {
  display: flex;
  flex-direction: column;
  width: 337px;
  height: 100%;
  overflow: hidden;
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--hard-sm);
}
.chat-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  height: 66px;
  padding: 0 14px;
  border-bottom: 2px solid var(--line);
}
.chat-head-ico {
  width: 40px;
  height: 40px;
  flex: none;
}
.chat-head-ico img {
  display: block;
  width: 40px;
  height: 40px;
}
.chat-head-copy {
  min-width: 0;
}
.chat-head-copy strong {
  display: block;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: var(--track-display);
  line-height: 1;
  white-space: nowrap;
}
/* Pastille « Twitch » : badge secondaire du site (fond panneau, liseré, point qui pulse) */
.chat-pill {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 7px;
  height: 34px;
  margin-left: auto;
  padding: 0 14px 0 11px;
  border: 2px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  box-shadow: var(--hard-sm);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  text-transform: uppercase;
}
.chat-pill i {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--holo-4);
}
.chat-pill i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: hc-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.chat-pill[data-state="off"] i {
  background: var(--muted);
}
.chat-pill[data-state="off"] i::after {
  animation: none;
}

.chat-log {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-end;
  gap: 9px;
  min-height: 0;
  padding: 12px 12px 14px;
  overflow: hidden;
  -webkit-mask: linear-gradient(transparent 0, #000 64px);
  mask: linear-gradient(transparent 0, #000 64px);
}
.chat-line {
  flex: none;
  padding: 9px 13px 10px;
  border-radius: 14px;
  background: var(--panel-2);
  color: var(--ink);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.32;
  overflow-wrap: anywhere;
  word-break: break-word;
  animation: hc-in 300ms cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}
.chat-line .who {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  margin-bottom: 2px;
  color: var(--c, var(--accent));
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
}
.chat-line .nick {
  min-width: 0;
  overflow-wrap: anywhere;
}
.chat-line .msg {
  display: block;
}
.chat-line .emote {
  display: inline-block;
  width: auto;
  height: 28px;
  margin: -4px 1px -3px;
  vertical-align: -6px;
}
/* Badges : MOD (vert), VIP (rose), abonné (carte holo + étincelle), Nashoba (le logo) */
.chat-line .badge {
  display: inline-grid;
  flex: none;
  place-items: center;
  height: 20px;
  min-width: 20px;
  padding: 0 6px;
  border: 1.5px solid #111;
  border-radius: 999px;
  background: var(--b, var(--ink));
  color: #111;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1;
  text-shadow: none;
}
.chat-line .badge--mod {
  --b: var(--holo-4);
}
.chat-line .badge--vip {
  --b: var(--holo-1);
}
.chat-line .badge--sub {
  padding: 0;
  background: var(--holo-card);
}
.chat-line .badge--sub .sparkle {
  --s: 11px;
  --c: #111;
}
.chat-line .badge-host {
  width: 22px;
  height: 22px;
  flex: none;
  margin: -3px -1px -3px -3px;
}
/* Messages de Nashoba : teinte violette (le jaune reste à l'alerte et à la pastille de scène) */
.chat-line.is-host {
  background: rgb(139 107 255 / 0.16);
  box-shadow: inset 0 0 0 2px rgb(139 107 255 / 0.6);
}
.chat-line.is-host .who {
  color: var(--ink);
}

/* ── Chat caché (ghost=1, source 320 × 560, par-dessus les jeux) ─────────── */

html[data-ghost] .chat-root {
  width: 100%;
  padding: 0 10px 8px;
}
html[data-ghost] .chat-plaque {
  width: 100%;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
html[data-ghost] .chat-head {
  display: none;
}
html[data-ghost] .chat-log {
  gap: 7px;
  padding: 22px 0 4px;
  -webkit-mask: linear-gradient(180deg, transparent 0%, #000 24%);
  mask: linear-gradient(180deg, transparent 0%, #000 24%);
}
/*
 * Les anciennes lignes pâlissent par leur REMPLISSAGE seulement (texte gris clair, pseudo assombri) :
 * le contour sombre reste plein, donc lisible sur un jeu clair ou chargé. La dernière ligne reste à 100 %.
 */
html[data-ghost] .chat-line {
  padding: 0;
  background: none;
  border-radius: 0;
  box-shadow: none;
  color: #c9c9c5;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  text-shadow: var(--outline);
  animation: hc-ghost-in 280ms ease-out both;
}
html[data-ghost] .chat-line:last-child {
  color: var(--ink);
}
html[data-ghost] .chat-line:not(:last-child) .who {
  filter: brightness(0.82);
}
html[data-ghost] .chat-line.is-host {
  background: none;
  box-shadow: none;
}
/* Une seule coulée de texte « badge Pseudo : message » : les pseudos longs passent à la ligne proprement */
html[data-ghost] .chat-line .who {
  display: inline;
  margin: 0;
  font-size: 20px;
  font-weight: 800;
}
html[data-ghost] .chat-line.is-host .who {
  color: #c4b5ff;
}
/* typographie française : espace fine insécable (U+202F) avant le deux-points */
html[data-ghost] .chat-line .who::after {
  content: "\202F:";
  margin: 0 2px 0 0;
  color: var(--ink);
}
html[data-ghost] .chat-line .msg {
  display: inline;
}
html[data-ghost] .chat-line .badge {
  margin-right: 5px;
  vertical-align: 2px;
  box-shadow: 0 1px 4px rgb(0 0 0 / 0.6);
}
html[data-ghost] .chat-line .badge-host {
  display: inline-block;
  margin: 0 4px 0 0;
  vertical-align: -4px;
}
html[data-ghost] .chat-line .badge-host,
html[data-ghost] .chat-line .emote {
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / 0.85));
}
html[data-ghost] .chat-line .emote {
  height: 26px;
  vertical-align: -6px;
}
html[data-ghost] .chat-line.is-out {
  animation: hc-ghost-out 480ms ease forwards;
}

/* ═══ Alertes (source 960 × 240, pos=center) ══════════════════════════════ */

.alert-stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/*
 * Carte héros : centrée, haut à y 56 (carte y 56-217, ombre dure jusqu'à 223).
 * Tout reste DANS la source 960 × 240 : lueur, ombre, étincelles, entrée et sortie (la ligne y 239 reste vide).
 */
.hl-frame {
  position: absolute;
  top: 56px;
  left: 50%;
  translate: -50% 0;
  opacity: 0;
}
html[data-pos="top"] .hl-frame {
  top: 40px;
}
html[data-pos="left"] .hl-frame {
  left: 40px;
  translate: none;
}
html[data-pos="right"] .hl-frame {
  left: auto;
  right: 30px;
  translate: none;
}
.hl-frame.show {
  animation: hl-in 680ms cubic-bezier(0.2, 0.9, 0.3, 1.12) forwards;
}
.hl-frame.show.hide {
  animation: hl-out 460ms cubic-bezier(0.5, 0, 0.75, 0) forwards;
}

.hl-toast {
  --angle: 210deg;
  position: relative;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  width: max-content;
  min-width: 560px;
  max-width: 880px;
  min-height: 160px;
  padding: 14px 36px 16px 24px;
  border: 3px solid transparent;
  border-radius: 24px;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    conic-gradient(from var(--angle), #ff4fa3, #8b6bff, #1fc8ff, #2fe39a, #ffc400, #ff4fa3) border-box;
  /* lueur décalée vers le haut : halo au-dessus et sur les côtés, éteinte avant le bas de la source (y 240) */
  box-shadow: var(--hard-lg), 0 -8px 28px -10px var(--glow-purple);
  animation: hl-angle 5s linear infinite;
}
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 210deg;
}
/* Reflet qui balaie la carte une fois, à l'entrée */
.hl-toast::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 21px;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 0.1) 45%, rgb(255 255 255 / 0.02) 52%, transparent 60%)
    -120% 0 / 250% 100% no-repeat;
  pointer-events: none;
}
.hl-frame.show .hl-toast::after {
  animation: hl-sheen 1.1s 380ms ease-out both;
}

/* La carte holo inclinée qui déborde en haut (comme le style frame) */
.hl-card {
  position: relative;
  align-self: start;
  width: 76px;
  height: 104px;
  margin: -22px 0 0 4px;
  rotate: -10deg;
  border: 3px solid #111;
  border-radius: 11px;
  background: var(--holo-card);
  box-shadow: 4px 5px 0 #000;
}
.hl-frame.show .hl-card {
  animation:
    hl-flip 640ms 80ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both,
    hl-hit 2.4s 900ms ease-in-out infinite;
}
.hl-card .sparkle {
  position: absolute;
  top: 10px;
  right: 10px;
  --s: 24px;
}
.hl-card .sparkle + .sparkle {
  top: auto;
  right: auto;
  bottom: 14px;
  left: 12px;
  --s: 13px;
}
.hl-count {
  position: absolute;
  right: -12px;
  bottom: -10px;
  display: grid;
  place-items: center;
  height: 30px;
  min-width: 30px;
  padding: 0 7px;
  border: 2px solid #111;
  border-radius: 999px;
  background: var(--brand);
  box-shadow: 2px 2px 0 #000;
  color: #111;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  rotate: 10deg;
}
.hl-count:empty {
  display: none;
}

.hl-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
}
/* Pastille jaune (kicker) */
.hl-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  margin-top: 2px;
  padding: 0 14px 0 11px;
  border: 2px solid #111;
  border-radius: 999px;
  background: var(--brand);
  box-shadow: var(--hard-sm);
  color: var(--on-brand);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.hl-kicker .sparkle {
  --s: 13px;
  --c: #111;
}
.hl-name {
  max-width: 100%;
  margin-top: 8px;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: 50px;
  font-weight: 800;
  letter-spacing: var(--track-display);
  line-height: 1;
  padding-bottom: 0.04em;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hl-line {
  max-width: 100%;
  margin-top: 3px;
  overflow: hidden;
  color: var(--muted);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hl-frame.show .hl-kicker {
  animation: hl-pop 420ms 180ms cubic-bezier(0.2, 0.9, 0.3, 1.4) both;
}
.hl-frame.show .hl-name {
  animation: hl-rise 460ms 240ms cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
}
.hl-frame.show .hl-line {
  animation: hl-rise 460ms 330ms cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
}
/* Étincelles blanches autour de la carte */
.hl-spark {
  position: absolute;
  translate: -50% -50%;
  --s: 16px;
  filter: drop-shadow(0 0 6px rgb(159 232 255 / 0.9));
  opacity: 0;
}
.hl-frame.show .hl-spark {
  animation: hl-twinkle 1.6s var(--d, 0s) ease-in-out infinite;
}

/* ═══ Barres « Dernier … » (source 666 × 90) ══════════════════════════════ */

.latest-root {
  width: 666px;
  height: 90px;
}
.latest-bar {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  width: 596px;
  height: 72px;
  padding: 0 14px 0 8px;
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--hard-sm);
}
.lt-tile {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 2px solid #111;
  border-radius: 12px;
  box-shadow: inset 0 -4px 0 rgb(0 0 0 / 0.22), inset 0 2px 0 rgb(255 255 255 / 0.35);
}
.lt-tile svg {
  display: block;
  width: 28px;
  height: 28px;
}
html[data-kind="follower"] .lt-tile {
  background: var(--holo-1);
}
html[data-kind="subscriber"] .lt-tile {
  background: var(--holo-card);
}
html[data-kind="donation"] .lt-tile {
  background: var(--holo-4);
}
.lt-tile .sparkle {
  --s: 26px;
  filter: drop-shadow(1.5px 0 0 #111) drop-shadow(-1.5px 0 0 #111) drop-shadow(0 1.5px 0 #111) drop-shadow(0 -1.5px 0 #111);
}
.lt-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}
.lt-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.latest-name {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: var(--track-display);
  line-height: 1.04;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.latest-name.is-empty {
  color: var(--muted);
}
.latest-name.pop {
  animation: lt-pop 420ms cubic-bezier(0.2, 0.9, 0.3, 1.15);
}
.lt-pill {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  border: 2px solid #111;
  border-radius: 999px;
  background: var(--panel-2);
  box-shadow: var(--hard-sm);
  color: var(--ink);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}
.lt-pill[hidden] {
  display: none;
}
/* « à l'instant » : pastille discrète (liseré, texte gris) comme le style frame */
html[data-kind="follower"] .lt-pill {
  border-color: var(--line);
  box-shadow: none;
  color: var(--muted);
}
html[data-kind="donation"] .lt-pill {
  font-family: var(--font-mono);
  letter-spacing: -0.02em;
}
.lt-pill.pop {
  animation: lt-pop 420ms 80ms cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}

/* ── Animations ──────────────────────────────────────────────────────────── */

@keyframes hc-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes hc-ghost-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}
@keyframes hc-ghost-out {
  to {
    opacity: 0;
    transform: translateY(-6px);
  }
}
@keyframes hc-ping {
  75%,
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}
@keyframes hl-angle {
  to {
    --angle: 570deg;
  }
}
@keyframes hl-in {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.94);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes hl-out {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateY(-14px) scale(0.97);
  }
}
@keyframes hl-flip {
  from {
    transform: perspective(500px) rotateY(-100deg) translateY(10px);
  }
  to {
    transform: none;
  }
}
@keyframes hl-hit {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-5px) rotate(-2deg);
  }
}
@keyframes hl-pop {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes hl-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes hl-sheen {
  from {
    background-position: -120% 0;
  }
  to {
    background-position: 220% 0;
  }
}
@keyframes hl-twinkle {
  0%,
  100% {
    opacity: 0;
    scale: 0.4;
    rotate: 0deg;
  }
  50% {
    opacity: 1;
    scale: 1;
    rotate: 45deg;
  }
}
@keyframes lt-pop {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}