/* ==========================================================================
   CAPTION BUNNY — WEB STYLE RENDERER (see cb-captions.js)
   Each style is matched to its real MOGRT render (captionbunny-extension/previews):
   same reveal unit (word / line / letter), colours and motion.
   Sizes are in container units of the video frame, so a caption keeps the
   same proportions in any player size. --fs = font size as % of a 9:16 width.
   ========================================================================== */
.cbc-frame { container-type: inline-size; position: relative; overflow: hidden; }
.cbc {
  --fs: 8; --rs: 1; --fit: 1; --top: 70%;
  position: absolute; left: 50%; top: var(--top); z-index: 3;
  transform: translate(-50%, -50%) scale(var(--fit));
  width: max-content; white-space: nowrap;   /* lines break only where Characters Per Line puts them; fit() scales to the frame */
  font-size: calc(var(--fs) * var(--rs) * 1cqw);
  line-height: 1.12; text-align: center; color: #fff;
  pointer-events: none; -webkit-font-smoothing: antialiased;
}
.cbc.ratio-16x9 { --rs: .5; }
.cbc.ratio-1x1 { --rs: .74; }
.cbc.pos-top { --top: 20%; }
.cbc.pos-middle { --top: 50%; }
.cbc.pos-bottom { --top: 70%; }
.cbc.ratio-16x9.pos-top { --top: 17%; }
.cbc.ratio-16x9.pos-bottom { --top: 80%; }
.cbc .w { display: inline-block; }
@keyframes cbcIn { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Devin Jatho — LINE: whole caption shows, the line being spoken is red ---------- */
/* Saira at max width + black weight stands in for Tactic Sans Extended Bold Italic */
.cbc-devinjatho { --fs: 8.6; font-family: 'Saira', 'Montserrat', sans-serif; font-weight: 900; font-stretch: 125%; font-variation-settings: 'wdth' 125; font-style: italic; text-transform: uppercase; letter-spacing: .01em; line-height: 1.1; }
.cbc-devinjatho .cbc-box { animation: cbcIn .12s ease-out both; }
.cbc-devinjatho .ln { display: block; white-space: nowrap; }
.cbc-devinjatho .w { color: #fff; text-shadow: 0 0 .12em rgba(255,255,255,.55), 0 0 .35em rgba(255,255,255,.2), 0 .05em .12em rgba(0,0,0,.75); }
.cbc-devinjatho .ln.hot .w {
  background: linear-gradient(90deg, #e3102a 0%, #ff2a45 45%, #ff8796 100%); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; text-shadow: none; padding: 0 .04em;
  filter: drop-shadow(0 0 .1em rgba(255,70,90,.6)) drop-shadow(0 .05em .1em rgba(0,0,0,.7));
}

/* ---------- Gym Yellow (WORD) / Gym Yellow Letters (LETTER): quick fade + short rise ---------- */
.cbc-gymyellow, .cbc-gymyellowchar { --fs: 12.5; font-family: 'Anton', sans-serif; text-transform: uppercase; line-height: 1.0; }
.cbc-gymyellow .cbc-box, .cbc-gymyellowchar .cbc-box { transform: skewX(-9deg); }
.cbc-gymyellow .w, .cbc-gymyellowchar .w { padding: 0 .03em; }
.cbc-gymyellow .w, .cbc-gymyellowchar .ch {
  background: linear-gradient(180deg, #fdfdb8 0%, #fbf264 38%, #ffe600 70%, #e9c800 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 .04em .06em rgba(40,35,0,.75)) drop-shadow(0 0 .14em rgba(255,230,0,.3));
}
.cbc-gymyellow .w { opacity: 0; transform: translateY(.22em); transition: opacity .22s ease-out, transform .3s cubic-bezier(.2,.9,.3,1); }
.cbc-gymyellow .w.sp { opacity: 1; transform: none; }
.cbc-gymyellowchar .ch { display: inline-block; opacity: 0; transform: translateY(.22em); transition: opacity .12s ease-out calc(var(--i) * 16ms), transform .17s cubic-bezier(.2,.9,.3,1) calc(var(--i) * 16ms); }
.cbc-gymyellowchar .w.sp .ch { opacity: 1; transform: none; }

/* ---------- Hormozi — whole line shows; the active word pops yellow and bigger ---------- */
.cbc-hormozi { --fs: 12; font-family: 'Anton', sans-serif; line-height: 1.15; }
.cbc-hormozi .w { color: #fff; -webkit-text-stroke: .045em #000; paint-order: stroke fill; text-shadow: .05em .06em 0 #000; margin: 0 .03em; transition: transform .12s, color .12s; }
.cbc-hormozi .w.on { color: #ffe600; transform: scale(1.18); }

/* ---------- Karaoke Pro — whole line shows; blue pill follows the active word ---------- */
.cbc-karaoke { --fs: 9.6; font-family: 'Montserrat', sans-serif; font-weight: 800; line-height: 1.3; }
.cbc-karaoke .w { padding: .02em .16em .06em; border-radius: .22em; transition: background-color .1s; text-shadow: 0 .04em .12em rgba(0,0,0,.45); }
.cbc-karaoke .w.on { background: #1663d6; text-shadow: none; }

/* ---------- Highlight Bold — WORD: thin words type in, closing phrase in bold italic ---------- */
.cbc-highlightbold { --fs: 7.4; font-family: 'Poppins', sans-serif; font-weight: 300; line-height: 1.25; }
.cbc-highlightbold .w { opacity: 0; transition: opacity .25s; text-shadow: 0 .04em .2em rgba(0,0,0,.55); }
.cbc-highlightbold .w.sp { opacity: 1; }
.cbc-highlightbold .w.punch { font-family: 'Montserrat', sans-serif; font-weight: 900; font-style: italic; font-size: 1.12em; letter-spacing: -.01em; }

/* ---------- Beast Ultra — LINE: whole caption pops in tilted, 3D navy extrusion ---------- */
.cbc-beastultra { --fs: 12; font-family: 'Luckiest Guy', 'Anton', sans-serif; text-transform: uppercase; line-height: 1.05; }
.cbc-beastultra .cbc-box { transform: rotate(-3deg); animation: cbcBeastPop .32s cubic-bezier(.3,1.6,.5,1) both; }
.cbc-beastultra .w {
  color: #fff; -webkit-text-stroke: .05em #0a1840; paint-order: stroke fill; margin: 0 .04em;
  text-shadow: .04em .05em 0 #0a1840, .07em .09em 0 #0a1840, .1em .13em 0 #12307a;
}
.cbc-beastultra .w.key { color: #22c8ff; }
.cbc-beastultra .w.key2 { color: #ffd500; }
@keyframes cbcBeastPop { from { transform: rotate(-3deg) scale(.35); opacity: 0; } 60% { opacity: 1; } to { transform: rotate(-3deg) scale(1); } }

/* ---------- Gym Beast — WORD: each word slams in; red keyword ---------- */
.cbc-gymbeast { --fs: 14; font-family: 'Anton', sans-serif; text-transform: uppercase; line-height: 1.02; }
.cbc-gymbeast .w { color: #fff; -webkit-text-stroke: .04em #000; paint-order: stroke fill; text-shadow: .06em .06em 0 #d30d0d, .1em .1em 0 #000; margin: 0 .03em; transform: scale(1.6); opacity: 0; transition: transform .2s cubic-bezier(.3,1.5,.5,1), opacity .08s; }
.cbc-gymbeast .w.sp { transform: none; opacity: 1; }
.cbc-gymbeast .w.key { color: #ff1f1f; text-shadow: .06em .06em 0 #fff, .1em .1em 0 #000; }

/* ---------- Emoji Pop (+ XL) — LINE: emoji(s) left, whole caption at once ---------- */
.cbc-emojipop, .cbc-emojipopxl {
  --fs: 8.6; font-family: 'Poppins', sans-serif; font-weight: 700; display: flex; align-items: center; gap: .35em; text-align: center; line-height: 1.6;
  background: rgba(0,0,0,.55); padding: .3em .65em; border-radius: .25em;   /* the MOGRT's semi-transparent black box */
}
.cbc-emojipop .cbc-box, .cbc-emojipopxl .cbc-box { animation: cbcIn .15s ease-out both; flex: none; min-width: 7.5em; }
.cbc-emojipop .emo, .cbc-emojipopxl .emo { font-size: 1.6em; line-height: 1; white-space: nowrap; flex: none; animation: cbcEmo .45s cubic-bezier(.3,1.7,.5,1) both; filter: drop-shadow(0 .06em .1em rgba(0,0,0,.4)); }
.cbc-emojipopxl .emo { font-size: 1.25em; letter-spacing: .08em; }
.cbc-emojipop .w, .cbc-emojipopxl .w { text-shadow: 0 .05em .2em rgba(0,0,0,.6); }
@keyframes cbcEmo { from { transform: scale(0); } to { transform: none; } }

/* ---------- Smooth Blur Fade — WORD: blur-in; active word green ---------- */
.cbc-blurfade { --fs: 9.2; font-family: 'Montserrat', sans-serif; font-weight: 800; line-height: 1.2; }
.cbc-blurfade .w { opacity: 0; filter: blur(.25em); transform: translateY(.2em); transition: opacity .35s, filter .35s, transform .35s cubic-bezier(.2,1,.3,1), color .2s; text-shadow: 0 .04em .2em rgba(0,0,0,.5); }
.cbc-blurfade .w.sp { opacity: 1; filter: none; transform: none; }
.cbc-blurfade .w.on { color: #2bdc3b; }

/* ---------- Neon Typewriter — LETTER: typed on with caret, purple glow box ---------- */
.cbc-neon { --fs: 8.4; font-family: 'Poppins', sans-serif; font-weight: 500; line-height: 1.15; }
.cbc-neon .cbc-box { padding: .45em .8em; border: 1px solid rgba(168,85,247,.7); border-radius: .4em; background: rgba(22,8,44,.72); box-shadow: 0 0 .5em rgba(124,58,237,.45), inset 0 0 .6em rgba(124,58,237,.25); min-width: 6em; }
.cbc-neon .nt { color: #fff; text-shadow: 0 0 .18em #a855f7, 0 0 .5em #7c3aed; }
.cbc-neon .nt { white-space: pre; }
.cbc-neon .caret { display: inline-block; width: .07em; height: 1em; margin-left: .04em; vertical-align: -.12em; background: #fff; box-shadow: 0 0 .2em #a855f7; animation: cbcBlink .8s steps(1) infinite; }
@keyframes cbcBlink { 50% { opacity: 0; } }

/* ---------- Anime Sub — LINE: whole subtitle, yellow keyword ---------- */
.cbc-animesub { --fs: 8.2; font-family: 'Poppins', sans-serif; font-weight: 800; line-height: 1.3; }
.cbc-animesub .cbc-box { animation: cbcIn .12s ease-out both; }
.cbc-animesub .w { color: #fff; -webkit-text-stroke: .05em #000; paint-order: stroke fill; text-shadow: .03em .05em 0 #000; }
.cbc-animesub .w.key { color: #ffe600; }

/* ---------- Fire Lava — LINE: whole caption burns, flicker ---------- */
.cbc-firelava { --fs: 14; font-family: 'Anton', sans-serif; text-transform: uppercase; line-height: 1.02; }
/* measured from the render: 1 s breathing pulse, ~4% scale anchored at the baseline, brighter when biggest */
.cbc-firelava .cbc-box { transform-origin: 50% 100%; animation: cbcIn .15s ease-out both, cbcFire 1s ease-in-out infinite; }
@keyframes cbcFire {
  0%   { transform: scale(.985); filter: brightness(1.03); }
  27%  { transform: scale(1);    filter: brightness(1.1); }
  70%  { transform: scale(.962); filter: brightness(.95); }
  100% { transform: scale(.985); filter: brightness(1.03); }
}
.cbc-firelava .w {
  background: linear-gradient(180deg, #fff6c8 5%, #ffb300 38%, #ff4d00 70%, #8a1300); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 .12em rgba(255,90,0,.85)); margin: 0 .03em;
}

/* ---------- Ice Frost — LINE: whole caption, frozen glow, gentle float ---------- */
.cbc-icefrost { --fs: 11; font-family: 'Montserrat', sans-serif; font-weight: 900; text-transform: uppercase; line-height: 1.05; }
.cbc-icefrost .cbc-box { animation: cbcIn .15s ease-out both, cbcFloat 1.6s ease-in-out infinite; }
.cbc-icefrost .w { color: #f2fbff; -webkit-text-stroke: .02em #9fdcff; paint-order: stroke fill; text-shadow: 0 0 .1em #8fd3ff, 0 0 .3em #2aa0ff, 0 0 .6em #0077ff; }
@keyframes cbcFloat { 0%, 100% { transform: none; } 50% { transform: translateY(-.06em) rotate(-.6deg); } }

/* ---------- Horror Shake — LINE: whole caption, blood serif, shakes ---------- */
.cbc-horrorshake { --fs: 8.4; font-family: 'Playfair Display', serif; font-weight: 800; text-transform: uppercase; letter-spacing: .02em; line-height: 1.15; }
.cbc-horrorshake .cbc-box { animation: cbcIn .12s ease-out both, cbcShake 1.3s ease infinite; }
.cbc-horrorshake .w { color: #d10000; text-shadow: 0 0 .25em #ff0000, .04em .04em 0 #000; }
@keyframes cbcShake { 0%, 70%, 100% { transform: none; } 74% { transform: translate(.03em, -.02em) rotate(.6deg); } 78% { transform: translate(-.04em, .02em) rotate(-.8deg); } 82% { transform: translate(.02em, .03em); } 86% { transform: translate(-.02em, -.01em) rotate(.4deg); } }

/* ---------- Overlay Keyword — WORD: thin words, keyword in big outlined italic ---------- */
.cbc-overlaykeyword { --fs: 8.6; font-family: 'Poppins', sans-serif; font-weight: 300; line-height: 1.1; }
.cbc-overlaykeyword .w { opacity: 0; transition: opacity .25s; text-shadow: 0 .04em .25em rgba(0,0,0,.5); }
.cbc-overlaykeyword .w.sp { opacity: 1; }
.cbc-overlaykeyword .w.key { display: block; width: max-content; margin: 0 auto; font-family: 'Montserrat', sans-serif; font-weight: 900; font-style: italic; font-size: 1.35em; line-height: .95; letter-spacing: -.01em; color: rgba(255,255,255,.1); -webkit-text-stroke: .025em #fff; text-shadow: none; }

/* ---------- Staple Block — LINE: cream box + text fade up together ---------- */
.cbc-stapleblock { --fs: 8.8; font-family: 'Playfair Display', serif; font-style: italic; font-weight: 600; line-height: 1.45; }
.cbc-stapleblock .cbc-box { background: #f3e9d2; color: #4a2e1c; padding: .3em .8em; animation: cbcStaple .45s cubic-bezier(.2,1,.3,1) both; }
@keyframes cbcStaple { from { opacity: 0; transform: translateY(.3em); } to { opacity: 1; transform: none; } }

/* ---------- Staple Reveal — WORD: static box, words appear, latest orange ---------- */
.cbc-staplereveal { --fs: 7.8; font-family: 'Montserrat', sans-serif; font-weight: 800; line-height: 1.4; }
.cbc-staplereveal .cbc-box { background: #efe4cc; color: #111; padding: .45em .9em; text-align: center; }
.cbc-staplereveal .w { opacity: 0; transition: opacity .15s; }
.cbc-staplereveal .w.sp { opacity: 1; }
.cbc-staplereveal .w.on { color: #ff3d00; }