/* The Statusong trailer (see trailer.js). Everything scales with the width of its box. */
.tr { --acc: #4ff08a; --pink: #f472b6; position: relative; container-type: inline-size; aspect-ratio: 16 / 9; width: 100%; overflow: hidden; border-radius: 22px; background: #07070b; color: #fff; isolation: isolate; font-family: inherit; border: 1.5px solid rgba(255, 255, 255, 0.1); box-shadow: 0 40px 90px -40px #000, 0 0 70px -30px var(--acc); }
.tr * { box-sizing: border-box; margin: 0; }
.tr-bg { position: absolute; inset: -6%; z-index: -2; background-size: cover; background-position: center; filter: blur(2px) saturate(1.2); animation: trZoom 22s ease-in-out infinite alternate; }
@keyframes trZoom { to { transform: scale(1.12) translateX(-2%); } }
.tr-shade { position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 90% at 50% 45%, rgba(5, 5, 9, 0.55), rgba(5, 5, 9, 0.93)); }

.tr-s { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 2.4cqw; padding: 5cqw; text-align: center; opacity: 0; visibility: hidden; transition: opacity 500ms, visibility 500ms; }
.tr-s.on { opacity: 1; visibility: visible; }

/* word reveals */
.tr-up { display: inline-block; opacity: 0; transform: translateY(1.4em) rotate(3deg); }
.tr-s.on .tr-up { animation: trUp 700ms calc(var(--i) * 170ms + 150ms) cubic-bezier(0.2, 1, 0.3, 1) forwards; }
@keyframes trUp { to { opacity: 1; transform: none; } }
.tr-big { font-size: 9.4cqw; font-weight: 900; line-height: 1.02; letter-spacing: -0.035em; }
.tr-hot { background: linear-gradient(100deg, var(--acc), var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 2.4cqw rgba(79, 240, 138, 0.45)); }

.tr-cap { position: absolute; bottom: 7.5cqw; left: 0; right: 0; font-size: 1.9cqw; font-weight: 700; letter-spacing: 0.02em; color: rgba(255, 255, 255, 0.72); opacity: 0; }
.tr-s.on .tr-cap { animation: trFade 700ms 1.3s forwards; }
@keyframes trFade { to { opacity: 1; } }

/* scene 2: the song and its line */
.s1 { gap: 3.4cqw; }
.tr-song { display: flex; align-items: center; gap: 1.8cqw; padding: 1.2cqw 2.4cqw 1.2cqw 1.2cqw; border-radius: 2cqw; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(10px); text-align: left; transform: translateY(-1cqw); }
.tr-s.on .tr-song { animation: trPop 600ms cubic-bezier(0.2, 1.3, 0.3, 1) backwards; }
@keyframes trPop { from { opacity: 0; transform: translateY(2cqw) scale(0.9); } }
.tr-art { display: block; flex: none; width: 6.6cqw; height: 6.6cqw; border-radius: 1.2cqw; background-size: cover; background-position: center; box-shadow: 0 1cqw 2.4cqw -0.8cqw #000; }
.tr-art.sm { width: 5.6cqw; height: 5.6cqw; border-radius: 0.8cqw; }
.tr-song b { display: block; font-size: 2.2cqw; } .tr-song small { font-size: 1.6cqw; color: rgba(255, 255, 255, 0.6); }
.tr-eq { display: flex; align-items: flex-end; gap: 0.35cqw; height: 3cqw; margin-left: 1cqw; }
.tr-eq u { width: 0.5cqw; border-radius: 1px; background: var(--acc); animation: trEq 900ms ease-in-out infinite alternate; }
.tr-eq u:nth-child(1) { height: 40%; animation-delay: 0s; } .tr-eq u:nth-child(2) { height: 90%; animation-delay: 0.15s; } .tr-eq u:nth-child(3) { height: 60%; animation-delay: 0.3s; } .tr-eq u:nth-child(4) { height: 80%; animation-delay: 0.45s; }
@keyframes trEq { to { transform: scaleY(0.3); } }
.tr-lyric { font-size: 6.2cqw; font-weight: 900; line-height: 1.08; letter-spacing: -0.03em; max-width: 90%; }
.tr-w { display: inline-block; color: rgba(255, 255, 255, 0.28); }
.tr-s.on .tr-w { animation: trWord 700ms calc(var(--i) * 480ms + 500ms) ease-out forwards; }
@keyframes trWord { 0% { color: rgba(255, 255, 255, 0.28); } 100% { color: #fff; text-shadow: 0 0 2.6cqw rgba(79, 240, 138, 0.9), 0 0 0.6cqw rgba(79, 240, 138, 0.7); transform: scale(1.04); } }
.tr-prog { width: 46cqw; height: 0.6cqw; border-radius: 9px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.tr-prog i { display: block; height: 100%; width: 0; border-radius: 9px; background: linear-gradient(90deg, var(--acc), var(--pink)); }
.tr-s.on .tr-prog i { animation: trProg 4.4s linear forwards; }
@keyframes trProg { to { width: 70%; } }

/* scene 3: Discord */
.s2 { gap: 0; }
.tr-dc { width: 34cqw; border-radius: 1.8cqw; overflow: hidden; text-align: left; background: #111214; border: 1px solid #26282c; box-shadow: 0 3cqw 7cqw -2cqw #000; }
.tr-s.on .tr-dc { animation: trRise 800ms cubic-bezier(0.2, 1, 0.3, 1) backwards; }
@keyframes trRise { from { opacity: 0; transform: translateY(8cqw) rotate(-2deg) scale(0.92); } }
.tr-dc-ban { height: 8cqw; background-size: cover; background-position: center; }
.tr-dc-body { position: relative; padding: 0 2cqw 2cqw; }
.tr-dc-av { display: block; width: 7.4cqw; height: 7.4cqw; margin-top: -3.7cqw; border-radius: 50%; border: 0.55cqw solid #111214; background: linear-gradient(140deg, #8ee7e1, #fcd3e8 55%, #b39bff); position: relative; }
.tr-dc-av::after { content: ""; position: absolute; right: -0.2cqw; bottom: -0.2cqw; width: 2cqw; height: 2cqw; border-radius: 50%; background: #23a55a; border: 0.4cqw solid #111214; }
.tr-dc-name { display: block; margin: 0.8cqw 0 1cqw; font-size: 2.2cqw; }
.tr-dc-st { display: inline-block; max-width: 100%; padding: 0.9cqw 1.5cqw; border-radius: 1.6cqw 1.6cqw 1.6cqw 0.3cqw; font-size: 1.55cqw; background: #1e1f22; border: 1px solid #2b2d31; }
.tr-type { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; max-width: 0; }
.tr-s.on .tr-type { animation: trTypeW 2s steps(31) 1s forwards; }
@keyframes trTypeW { to { max-width: 26cqw; } }
.tr-dc-act { margin-top: 1.4cqw; padding: 1.4cqw; border-radius: 1.2cqw; background: #1a1b1e; border: 1px solid #26282c; }
.tr-dc-act small { display: block; margin-bottom: 1cqw; font-size: 1.05cqw; font-weight: 800; letter-spacing: 0.08em; color: #b5bac1; }
.tr-dc-act > div { display: flex; gap: 1.3cqw; align-items: center; }
.tr-dc-act b { display: block; font-size: 1.6cqw; } .tr-dc-act em { display: block; font-style: normal; font-size: 1.35cqw; color: #b5bac1; }
.tr-dc-act u { display: block; width: 18cqw; height: 0.4cqw; margin-top: 1cqw; background: #4e5058; border-radius: 4px; overflow: hidden; text-decoration: none; }
.tr-dc-act s { display: block; height: 100%; width: 0; background: #fff; }
.tr-s.on .tr-dc-act s { animation: trProg2 4s linear 0.4s forwards; }
@keyframes trProg2 { to { width: 85%; } }

/* scene 4: the effects */
.s3 { gap: 1.4cqw; }
.tr-fxl { font-size: 6.4cqw; font-weight: 900; letter-spacing: -0.03em; opacity: 0; }
.tr-s.on .tr-fxl { animation: trFxIn 700ms cubic-bezier(0.2, 1, 0.3, 1) forwards; }
.tr-s.on .tr-fxl:nth-child(2) { animation-delay: 700ms; } .tr-s.on .tr-fxl:nth-child(3) { animation-delay: 1400ms; }
.tr-s.on .tr-fxl:nth-child(1) { animation-delay: 100ms; }
@keyframes trFxIn { from { opacity: 0; transform: translateY(3cqw) scale(0.9); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.tr-gr { background: linear-gradient(100deg, #ffb347, #ff4d4d); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tr-em { display: inline-block; font-size: 0.8em; -webkit-text-fill-color: initial; animation: trFloat 1.6s ease-in-out infinite; }
.tr-em.e2 { animation-delay: 0.3s; } .tr-em.e3 { animation-delay: 0.6s; }
@keyframes trFloat { 50% { transform: translateY(-1.2cqw) rotate(-10deg); } }

/* scene 5: the name */
.s4 { gap: 1.4cqw; }
.tr-logo { width: 13cqw; height: 13cqw; border-radius: 3cqw; box-shadow: 0 0 6cqw rgba(79, 240, 138, 0.35), 0 0 12cqw rgba(244, 114, 182, 0.25); }
.tr-s.on .tr-logo { animation: trLogo 900ms cubic-bezier(0.2, 1.4, 0.3, 1) backwards; }
@keyframes trLogo { from { opacity: 0; transform: scale(0.3) rotate(-25deg); } }
.tr-name { font-size: 7.6cqw; font-weight: 900; letter-spacing: -0.04em; }
.tr-s.on .tr-name { animation: trFxIn 700ms 350ms backwards; }
.tr-tag { font-size: 2.6cqw; font-weight: 700; color: var(--acc); }
.tr-s.on .tr-tag { animation: trFxIn 700ms 600ms backwards; }
.tr-pills { display: flex; gap: 1.2cqw; margin-top: 1.4cqw; }
.tr-pills span { padding: 0.8cqw 1.8cqw; border-radius: 99px; font-size: 1.5cqw; font-weight: 700; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.16); }
.tr-pills .pro { background: linear-gradient(100deg, #f472b6, #a855f7); border-color: transparent; }
.tr-s.on .tr-pills { animation: trFxIn 700ms 900ms backwards; }

.tr-dots { position: absolute; left: 0; right: 0; bottom: 2.4cqw; display: flex; justify-content: center; gap: 0.8cqw; }
.tr-dots i { width: 0.8cqw; height: 0.8cqw; min-width: 5px; min-height: 5px; border-radius: 99px; background: rgba(255, 255, 255, 0.25); transition: width 300ms, background 300ms; }
.tr-dots i.past { background: rgba(255, 255, 255, 0.55); }
.tr-dots i.on { width: 3cqw; background: var(--acc); }
.tr-btn { position: absolute; right: 1.6cqw; top: 1.6cqw; width: 4cqw; height: 4cqw; min-width: 30px; min-height: 30px; border-radius: 50%; border: 0; cursor: pointer; font-size: 1.9cqw; color: #fff; background: rgba(255, 255, 255, 0.12); opacity: 0.55; transition: opacity 200ms, transform 300ms; }
.tr-btn:hover { opacity: 1; transform: rotate(-90deg); }
@media (prefers-reduced-motion: reduce) { .tr-bg, .tr-eq u, .tr-em { animation: none !important; } }

.tr-w, .tr-up { margin: 0 0.1em; }
.s2 { padding-bottom: 11cqw; }
.tr-dc { width: 31cqw; }
.tr-dc-ban { height: 6.4cqw; }