/* Mixterverse Radio — LoFi-Girl-style always-on radio. Minimal + beautiful.
   Paired with radio.php + js/radio.js. Spec: mixterversePublic/landingPageRadio.md */

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
    font-family: 'Ubuntu', sans-serif;
    background: #0f0d0c;
    color: #f2ede9;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ---- Full-bleed crossfading slideshow ---- */
.radio-stage { position: fixed; inset: 0; z-index: 0; background: #0f0d0c; }
.slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 2.4s ease-in-out;
    transform: scale(1.03);          /* slight zoom so the crossfade feels alive */
    will-change: opacity;
}
.slide.show { opacity: 1; }
/* Until images load, a calm gradient rather than black. */
.radio-stage::before {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(130% 100% at 50% 15%, #2a2233 0%, #14100f 65%, #0f0d0c 100%);
}
.radio-scrim {
    position: absolute; inset: 0;
    /* Legibility wash top + bottom, image stays bright in the middle. */
    background:
        linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 26%),
        linear-gradient(to top,    rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 34%);
}

/* ---- Wordmark ---- */
.radio-brand {
    position: fixed;
    top: 22px; left: 26px;
    z-index: 3;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.82);
    text-shadow: 0 1px 10px rgba(0,0,0,0.6);
    pointer-events: none;
}

/* ---- Centered UI (station picker + player) ---- */
.radio-ui {
    position: fixed;
    inset: 0;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 24px;
    text-align: center;
}

.station-picker {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    max-width: 640px;
}
.station {
    font-family: inherit;
    font-size: 1.02rem;
    font-weight: 700;
    color: #f2ede9;
    /* Smallest crisp black outline so labels stay legible on near-white images. */
    text-shadow:
        -1px -1px 0 rgba(0,0,0,0.85),  1px -1px 0 rgba(0,0,0,0.85),
        -1px  1px 0 rgba(0,0,0,0.85),  1px  1px 0 rgba(0,0,0,0.85);
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.22);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    padding: 12px 24px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.station:hover { background: rgba(255,255,255,0.18); transform: translateY(-1px); }
.station.active {
    background: #E77D42;
    border-color: #E77D42;
    color: #fff;
    box-shadow: 0 6px 22px rgba(231,125,66,0.4);
}

/* Player row is hidden until a station is picked. */
.player-row {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 90vw;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}
body.has-station .player-row { opacity: 1; transform: none; pointer-events: auto; }

.play-toggle {
    flex: 0 0 auto;
    width: 56px; height: 56px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.14);
    color: #fff;
    font-size: 1.1rem;
    line-height: 56px;
    cursor: pointer;
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    transition: background 0.15s ease, transform 0.1s ease;
}
.play-toggle:hover { background: rgba(255,255,255,0.24); }
.play-toggle:active { transform: scale(0.94); }

.now-playing {
    font-size: 0.98rem;
    color: rgba(255,255,255,0.9);
    /* 1px black outline (legibility on near-white images) + a soft glow for depth. */
    text-shadow:
        -1px -1px 0 rgba(0,0,0,0.85),  1px -1px 0 rgba(0,0,0,0.85),
        -1px  1px 0 rgba(0,0,0,0.85),  1px  1px 0 rgba(0,0,0,0.85),
        0 1px 8px rgba(0,0,0,0.6);
    min-height: 1.2em;
    max-width: 60vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.now-playing .np-title { font-weight: 700; }
.now-playing .np-by    { opacity: 0.6; }
.now-playing .np-artist { opacity: 0.85; }

/* ---- Favorites heart (player row) ----
   Text-free toggle. Outline when unsaved, filled + library-coloured when saved: ccMixter green,
   MixterPlus blue — the mixterverse-wide "which library is this from?" convention. */
.fav-toggle {
    flex: 0 0 auto;
    font-family: inherit;
    font-size: 1.5rem;
    line-height: 1;
    background: none;
    border: none;
    padding: 4px 2px;
    cursor: pointer;
    color: rgba(255,255,255,0.75);
    /* Same 1px black outline the rest of the row uses, so it survives a near-white image. */
    text-shadow:
        -1px -1px 0 rgba(0,0,0,0.85),  1px -1px 0 rgba(0,0,0,0.85),
        -1px  1px 0 rgba(0,0,0,0.85),  1px  1px 0 rgba(0,0,0,0.85);
    transition: color 0.15s ease, transform 0.1s ease, opacity 0.15s ease;
}
.fav-toggle:hover { color: #fff; transform: scale(1.08); }
.fav-toggle:active { transform: scale(0.92); }
.fav-toggle.on.src-ccm { color: #191; }        /* ccMixter */
.fav-toggle.on.src-mp  { color: #518BA1; }     /* MixterPlus */
/* Signed out, or nothing playing yet — present but receding. */
.fav-toggle.muted { opacity: 0.5; }

/* The sign-in nudge: a quiet line, never a modal. */
.fav-signin {
    flex: 0 0 auto;
    font-size: 0.8rem;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.25);
    text-shadow: 0 1px 8px rgba(0,0,0,0.7);
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.fav-signin:hover { color: #fff; border-color: #E77D42; }
/* A single soft pulse when someone taps the heart while signed out — a nudge, not a nag. */
.fav-signin.nudge { animation: favNudge 1.1s ease; }
@keyframes favNudge {
    0%, 100% { color: rgba(255,255,255,0.7); }
    35%      { color: #E77D42; border-color: #E77D42; }
}

/* ---- Close / back ---- */
.radio-home {
    position: fixed;
    top: 20px; right: 22px;
    z-index: 5;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,0.75);
    text-decoration: none;
    font-size: 1.1rem;
    border-radius: 50%;
    transition: background 0.15s ease, color 0.15s ease;
}
.radio-home:hover { background: rgba(255,255,255,0.14); color: #fff; }

/* ---- DOC-style "certified human" stamp ---- */
.doc-stamp {
    position: fixed;
    right: 26px; bottom: 26px;
    z-index: 5;
    width: 276px; height: 276px;                 /* quadrupled area (2x w, 2x h) */
    display: flex; align-items: center; justify-content: center;
    text-align: center;
    padding: 26px;
    transform: rotate(-8deg);
    border: 5px double #eaa07f;
    border-radius: 50%;
    color: #f6c9b2;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
    pointer-events: none;
    text-shadow: 0 1px 8px rgba(0,0,0,0.6);
    box-shadow: inset 0 0 0 1px rgba(246,201,178,0.35);
    transition: opacity 0.6s ease;               /* fade during the phrase swap */
}
/* Momentary fade-out while radio.js swaps in the next phrase (on each image change). */
.doc-stamp.swapping { opacity: 0; }

/* ---- Mobile ---- */
@media (max-width: 640px) {
    .radio-brand { font-size: 0.82rem; top: 16px; left: 18px; }
    .station { font-size: 0.94rem; padding: 11px 20px; }
    .doc-stamp { width: 208px; height: 208px; font-size: 1.1rem; padding: 20px; right: 16px; bottom: 16px; }
    /* Heart + nudge share the row now, so the title gets less of it. */
    .now-playing { max-width: 46vw; }
    .fav-signin { font-size: 0.72rem; }
}