/* Compact AFK album promotion, scoped to the homepage BI4 section. */
.hub-spotlight-stack { display:flex; flex-direction:column; gap:12px; min-width:0; }
.bi4 { padding:32px 24px; background:#0e0b1b; color:#f4efff; font-family:Outfit,sans-serif; scroll-margin-top:96px; }
.bi4 * { box-sizing:border-box; }
.bi4-inner { position:relative; isolation:isolate; display:grid; grid-template-columns:42% 58%; align-items:center; max-width:1120px; margin:auto; overflow:hidden; border:1px solid #c4a2f940; border-radius:10px; background:radial-gradient(ellipse at 80% 70%,#6239a777,transparent 60%),linear-gradient(115deg,#161024,#211635); box-shadow:0 16px 45px #0003; }
.bi4-inner::before,.bi4-inner::after { content:''; position:absolute; z-index:-1; width:180px; height:180px; border:1px solid #c0a2fa30; transform:rotate(35deg); pointer-events:none; }
.bi4-inner::before { top:-120px; right:35%; }
.bi4-inner::after { bottom:-110px; right:5%; }
.bi4-album-copy { position:relative; z-index:2; padding:35px 0 45px 36px; }
.bi4-eyebrow { margin:0 0 15px; font-size:10px; font-weight:500; letter-spacing:2.4px; color:#cdb5e9; }
.bi4 h2 { margin:0; font:900 clamp(72px,8vw,106px)/.95 Outfit,sans-serif; letter-spacing:-.065em; color:#e3d4ff; text-shadow:0 0 35px #b98bea25; }
.bi4 h2 span { display:inline-block; vertical-align:top; font-size:.36em; margin-left:12px; color:#bba0ee; }
.bi4-album-lead { max-width:310px; margin:18px 0 22px; font-size:17px; line-height:1.6; color:#d5c8e6; }
.bi4-album-actions { display:flex; align-items:center; flex-wrap:wrap; gap:16px; }
.bi4-album-cta { display:inline-flex; gap:14px; align-items:center; padding:13px 16px; border-radius:3px; text-decoration:none; background:#d2b6ff; color:#1a102b; font-size:12px; font-weight:600; transition:background .2s; }
.bi4-album-cta:hover { background:#eadcff; }
.bi4-album-youtube { font-size:11px; color:#d3b9f2; text-decoration:none; }
.bi4-album-youtube:hover { text-decoration:underline; }
.bi4-event-hint { margin:20px 0 0; color:#ac98c7; font-size:10px; line-height:1.6; }
.bi4-pop-lineup { position:relative; align-self:stretch; min-height:355px; }
.bi4-pop-lineup img { position:absolute; bottom:0; display:block; width:52%; height:auto; filter:drop-shadow(0 0 14px #b78af72b); }
.bi4-pop-alice { left:-12%; z-index:1; }
.bi4-pop-furiel { left:11%; z-index:2; }
.bi4-pop-kira { left:34%; z-index:3; }
.bi4-pop-sonya { left:57%; z-index:4; }
.bi4-pop-lineup::after { content:''; position:absolute; z-index:5; bottom:0; left:0; right:0; height:65px; background:linear-gradient(transparent,#1b132c); pointer-events:none; }
.bi4-lineup-names { position:absolute; z-index:6; bottom:22px; left:8%; right:5%; text-align:center; color:#e2d2f4; font-size:8px; letter-spacing:2px; }
.bi4 #bi4-motion { position:absolute; z-index:7; top:12px; right:12px; padding:6px 9px; border:1px solid #c8a6f833; border-radius:20px; color:#ddc9f6; background:#160e25cc; font:9px Outfit,sans-serif; cursor:pointer; }
.bi4 button[hidden] { display:none; }
.bi4 :focus-visible { outline:3px solid #e5cfff; outline-offset:4px; }
.bi4-sparkles { position:absolute; z-index:1; inset:0; pointer-events:none; }
.bi4-sparkles i { position:absolute; top:var(--y); left:var(--x); width:var(--size); height:var(--size); background:#cdb0ff; clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%); opacity:.3; animation:bi4-glint var(--duration) ease-in-out var(--delay) infinite; }
@keyframes bi4-glint { 50% { opacity:.7; transform:scale(.6); } }
.bi4.is-paused *, .bi4.is-offscreen * { animation-play-state:paused !important; }
@media(max-width:900px) { .bi4-inner { grid-template-columns:44% 56%; } .bi4-album-copy { padding-left:24px; } .bi4-pop-lineup { min-height:340px; } .bi4-pop-lineup img { width:60%; } .bi4-pop-alice { left:-17%; } .bi4-pop-furiel { left:6%; } .bi4-pop-kira { left:29%; } .bi4-pop-sonya { left:52%; } .bi4-album-lead { font-size:15px; } }
@media(max-width:600px) { .bi4 { padding:24px 16px; } .bi4-inner { grid-template-columns:1fr; } .bi4-album-copy { padding:28px 22px 8px; } .bi4 h2 { font-size:78px; } .bi4-eyebrow { font-size:9px; margin-bottom:12px; } .bi4-album-lead { max-width:none; margin:14px 0 18px; font-size:15px; } .bi4-event-hint { margin-top:16px; } .bi4-pop-lineup { min-height:195px; margin-top:5px; } .bi4-pop-lineup img { width:48%; } .bi4-pop-alice { left:-10%; } .bi4-pop-furiel { left:14%; } .bi4-pop-kira { left:38%; } .bi4-pop-sonya { left:62%; } .bi4-lineup-names { bottom:15px; left:0; right:0; font-size:7px; letter-spacing:1.5px; } .bi4 #bi4-motion { font-size:8px; right:8px; top:8px; } }
@media(prefers-reduced-motion:reduce) { .bi4 *, .bi4 *::before, .bi4 *::after { animation:none !important; transition:none !important; } }

/* Album card beneath the Skin spotlight, including narrow dashboard columns. */
.bi4.bi4--hub { padding:0; min-width:0; background:transparent; }
.bi4--hub .bi4-inner { width:100%; max-width:none; height:120px; grid-template-columns:44% 56%; border-radius:4px; }
.bi4--hub .bi4-album-copy { padding:10px 0 10px 16px; }
.bi4--hub .bi4-eyebrow { margin-bottom:8px; font-size:8px; letter-spacing:1.4px; padding-right:0; }
.bi4--hub h2 { font-size:42px; margin-bottom:10px; }
.bi4--hub .bi4-album-lead { max-width:none; font-size:12px; line-height:1.4; margin:8px 0 10px; }
.bi4--hub .bi4-album-actions { gap:8px; }
.bi4--hub .bi4-album-cta { width:fit-content; padding:6px 8px; font-size:8px; gap:6px; white-space:nowrap; }
.bi4--hub .bi4-album-youtube { font-size:10px; }
.bi4--hub .bi4-event-hint { margin-top:8px; font-size:8px; }
.bi4--hub .bi4-pop-lineup { min-height:0; aspect-ratio:auto; margin-top:0; }
.bi4--hub .bi4-pop-lineup img { width:65%; bottom:-20px; }
.bi4--hub .bi4-pop-alice { left:-30%; }
.bi4--hub .bi4-pop-furiel { left:0%; }
.bi4--hub .bi4-pop-kira { left:30%; }
.bi4--hub .bi4-pop-sonya { left:60%; }
.bi4--hub .bi4-lineup-names { bottom:6px; left:0; right:0; font-size:6px; letter-spacing:1px; }
@media (max-width:480px) {
    .bi4--hub .bi4-inner { grid-template-columns:48% 52%; }
    .bi4--hub .bi4-album-copy { padding-left:10px; }
    .bi4--hub .bi4-eyebrow { font-size:7px; letter-spacing:.8px; }
    .bi4--hub .bi4-album-cta { padding:6px; font-size:7px; gap:4px; }
    .bi4--hub .bi4-pop-lineup img { width:80%; }
    .bi4--hub .bi4-lineup-names { display:none; }
}