/* Transition screens (transition.js): site colours, --tr-color = the song's lyrics colour */

/* entergame / exitgame: tile wipe */
.trWipe { position: fixed; inset: 0; z-index: 1000; display: grid; pointer-events: all;
    grid-template-columns: repeat(var(--tr-cols), 1fr); grid-template-rows: repeat(var(--tr-rows), 1fr); }
.trWipe i { display: block; margin: -1px; transform: scale(0) rotate(-45deg); border-radius: 30%;
    background: linear-gradient(135deg, var(--accent, #ff3fa4), #b100ff);
    transition: transform .42s cubic-bezier(.6, 0, .3, 1) var(--d), border-radius .42s var(--d); }
.trWipe i { filter: hue-rotate(calc(var(--h) * 14deg)); }
.trWipe.in i { transform: none; border-radius: 0; }
.trWipe.in.out i { transform: scale(0) rotate(45deg); border-radius: 30%; }
.trWipe::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, var(--tr-color) 0, transparent 60%);
    opacity: 0; mix-blend-mode: screen; transition: opacity .3s; }
.trWipe.in::after { opacity: .35; transition-delay: .25s; }
.trWipe.in.out::after { opacity: 0; transition-delay: 0s; }

/* enterlobby: song screen */
.trSong { position: fixed; inset: 0; z-index: 1000; overflow: hidden; color: var(--text, #ece8f4); background: var(--bg, #0d0b14);
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: 4vw; padding: 6vh 7vw;
    clip-path: circle(0 at 50% 50%); transition: clip-path .6s cubic-bezier(.7, 0, .2, 1); }
.trSong.in { clip-path: circle(150% at 50% 50%); }
.trSong.in.done, .trSong.in.cancel { clip-path: circle(150% at 50% 50%); opacity: 0; transform: scale(1.04); transition: opacity .5s ease, transform .5s ease; }
.trSongBg { position: absolute; inset: -40px; background: center / cover no-repeat; filter: blur(28px) saturate(1.3) brightness(.45); transform: scale(1.1); }
.trSongBg::after { content: ""; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 25% 60%, color-mix(in srgb, var(--tr-color) 45%, transparent), transparent 60%),
                linear-gradient(100deg, #0d0b14cc 0%, #0d0b1488 45%, #0d0b14ee 100%); }
.trSongArt { position: relative; height: 82vh; display: flex; align-items: flex-end; justify-content: center; }
.trSongArt img { height: 100%; min-width: 0; max-width: calc(100% / var(--n) * 1.7); object-fit: contain; object-position: bottom; margin: 0 calc((var(--n) - 1) * -3%);
    filter: drop-shadow(0 18px 40px #000c); opacity: 0; transform: translateX(14vw);
    transition: opacity .5s ease calc(.25s + var(--i) * .08s), transform .7s cubic-bezier(.2, .8, .2, 1) calc(.25s + var(--i) * .08s); }
.trSong.in .trSongArt img { opacity: 1; transform: none; }
.trSongInfo { position: relative; min-width: 0; opacity: 0; transform: translateY(24px); transition: opacity .5s ease .4s, transform .6s cubic-bezier(.2, .8, .2, 1) .4s; }
.trSong.in .trSongInfo { opacity: 1; transform: none; }
.trEyebrow { color: #ff80c3; font-size: 13px; letter-spacing: 3px; font-weight: 700; text-transform: uppercase; margin: 0 0 12px; }
.trTitle { font-size: clamp(34px, 5vw, 72px); line-height: 1.02; letter-spacing: -1.5px; margin: 0; overflow-wrap: anywhere; }
.trArtist { color: #b1a8c3; font-size: clamp(16px, 1.8vw, 24px); margin: 10px 0 34px; }
.trProgress { height: 6px; border-radius: 3px; background: #ffffff18; overflow: hidden; max-width: 420px; }
.trProgress div { height: 100%; width: 4%; border-radius: inherit; background: linear-gradient(90deg, var(--accent, #ff3fa4), var(--tr-color));
    box-shadow: 0 0 14px var(--accent, #ff3fa4); transition: width .25s ease; }
.trStatus { color: #b1a8c3; font-size: 13px; margin: 10px 0 0; min-height: 1.4em; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
    .trSong { grid-template-columns: 1fr; grid-template-rows: 1fr auto; align-items: end; padding: 4vh 6vw 7vh; }
    .trSongArt { height: 52vh; }
}
@media (prefers-reduced-motion: reduce) {
    .trWipe i { transition: none; transform: none; border-radius: 0; opacity: 0; }
    .trWipe.in i { opacity: 1; transition: opacity .15s; }
    .trWipe.in.out i { opacity: 0; transform: none; }
    .trSong, .trSong .trSongArt img, .trSong .trSongInfo { transition: opacity .18s; clip-path: none; transform: none; }
    .trSong { opacity: 0; }
    .trSong.in { opacity: 1; }
}

/* project logo: centre of the tile wipe (pops in once covered), corner of the song screen */
.trWipeLogo { position: absolute; left: 50%; top: 50%; width: min(36vw, 340px); height: auto; z-index: 1; pointer-events: none;
    transform: translate(-50%, -50%) scale(.55) rotate(-8deg); opacity: 0; filter: drop-shadow(0 10px 30px #0009);
    transition: transform .35s cubic-bezier(.2, 1.5, .4, 1) .3s, opacity .2s ease .3s; }
.trWipe.in .trWipeLogo { transform: translate(-50%, -50%) scale(1) rotate(0); opacity: 1; }
.trWipe.in.out .trWipeLogo { transform: translate(-50%, -50%) scale(1.12); opacity: 0; transition: transform .25s ease-in, opacity .2s ease-in; }
.trSongLogo { position: absolute; right: 3vw; top: 3vh; width: clamp(110px, 12vw, 200px); height: auto; z-index: 2; pointer-events: none;
    opacity: 0; transform: translateY(-12px); filter: drop-shadow(0 6px 18px #000a); transition: opacity .5s ease .5s, transform .6s cubic-bezier(.2, .8, .2, 1) .5s; }
.trSong.in .trSongLogo { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .trWipeLogo, .trSongLogo { transition: opacity .15s; transform: translate(-50%, -50%); }
    .trSongLogo { transform: none; }
}