/* Captions section scenes: Captions review and the Animated preset gallery. */

/* 05 Captions */
.cap-split{display:grid;grid-template-columns:1.05fr .95fr;gap:10px;align-items:start}
.cap-row{flex-direction:column;align-items:flex-start;gap:2px}
.cap-row .kp-muted{font-family:var(--mono);font-size:9.5px}
.cap-txt{font-size:11.5px}
.cap-prev{position:relative;border-radius:6px;overflow:hidden;aspect-ratio:9/12;background:#000;margin-top:18px}
.cap-prev img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.cap-anim{position:absolute;left:6%;right:6%;bottom:14%;text-align:center;font-weight:900;font-size:17px;line-height:1.1;
          color:#fff;letter-spacing:.01em;text-shadow:0 2px 0 rgba(0,0,0,.6),0 0 12px rgba(0,0,0,.5);opacity:0;transition:opacity .25s}
.cap-anim.on{opacity:1}
.cap-anim b{color:#ffd84a;display:inline-block;animation:pop .26s var(--ease);margin:0 .12em}
@keyframes pop{from{transform:scale(1.14)}to{transform:none}}

/* Animated: preset gallery and the looks. .st-* styles both the tile and the live preview. */
.an-split{display:grid;grid-template-columns:1.1fr .9fr;gap:10px;align-items:start}
.an-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.an-tile{aspect-ratio:1;border-radius:6px;background:#141418;border:1px solid var(--bd);display:flex;align-items:center;
         justify-content:center;transition:border-color .25s,box-shadow .25s,transform .25s var(--ease)}
.an-tile.on{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc-sub);transform:translateY(-2px)}
.an-w{font-weight:900;font-size:10.5px;letter-spacing:.02em;color:#fff;text-align:center}
.an-live{bottom:18%}
.st-pop b{color:#ffd84a}
.st-box{background:#0b0b0e;padding:2px 5px;border-radius:4px;text-shadow:none!important}
.st-box b{color:#45E0C8}
.st-outline{color:transparent;-webkit-text-stroke:1px #fff;text-shadow:none!important}
.st-outline b{color:#fff;-webkit-text-stroke:0}
.st-grad b{background:linear-gradient(90deg,#b7a3ff,#45E0C8);-webkit-background-clip:text;background-clip:text;color:transparent}
.st-karaoke{color:rgba(255,255,255,.6)}
.st-karaoke b{color:#4CD174}
.st-slab{background:#8B6CFF;padding:2px 6px;border-radius:4px;transform:rotate(-3deg);text-shadow:none!important}
.st-slab b{color:#16161a}
.st-soft{font-weight:600;letter-spacing:.06em}
.st-soft b{color:#F5B340}
.st-stack b{display:block;color:#E5484D}