/* =====================================================
   WAFFLE: dusk glass, mobile-first
   A slow sunset: indigo -> violet -> rose, with peach glow.
   Surfaces are smoked frosted glass. Live state is warm coral.
   ===================================================== */
:root {
    --dusk-0: #2a2263;
    --dusk-1: #5a3a99;
    --dusk-2: #a94d92;
    --dusk-3: #e0698c;
    --peach: #ffb08a;

    --tint: rgba(45, 25, 85, .28);
    --text: #fff8f6;
    --muted: rgba(255, 240, 245, .8);

    --live: #ff8fa3;
    --live-2: #ff7a8f;
    --live-glow: rgba(255, 143, 163, .6);
    --live-text: #ffe3d6;
    --danger: #ffc0c8;

    --font: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
    --ease: cubic-bezier(.22, 1, .36, 1);
    --sat: env(safe-area-inset-top, 0px);
    --sab: env(safe-area-inset-bottom, 0px);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

[hidden] {
    display: none !important;
}

html,
body {
    min-height: 100dvh;
}

body {
    background: var(--dusk-0);
    color: var(--text);
    font-family: var(--font);
    font-weight: 400;
    overflow-x: hidden;
}

/* ---------- background stage ---------- */
.stage {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: linear-gradient(180deg, var(--dusk-0) 0%, var(--dusk-1) 35%, var(--dusk-2) 70%, var(--dusk-3) 100%);
}

.aurora i {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    will-change: transform;
}

.aurora i:nth-child(1) {
    width: 80vmax;
    height: 80vmax;
    background: radial-gradient(circle, rgba(140, 110, 255, .7) 0%, transparent 65%);
    top: -30vmax;
    left: -30vmax;
    animation: drift1 30s ease-in-out infinite alternate;
}

.aurora i:nth-child(2) {
    width: 70vmax;
    height: 70vmax;
    background: radial-gradient(circle, rgba(255, 130, 160, .65) 0%, transparent 65%);
    bottom: -30vmax;
    right: -30vmax;
    animation: drift2 36s ease-in-out infinite alternate;
}

.aurora i:nth-child(3) {
    width: 55vmax;
    height: 55vmax;
    background: radial-gradient(circle, rgba(255, 176, 138, .55) 0%, transparent 60%);
    bottom: -10vmax;
    left: -10vmax;
    opacity: .8;
    animation: drift3 26s ease-in-out infinite alternate;
}

@keyframes drift1 {
    to {
        transform: translate(16vmax, 12vmax) scale(1.12);
    }
}

@keyframes drift2 {
    to {
        transform: translate(-14vmax, -10vmax) scale(1.1);
    }
}

@keyframes drift3 {
    to {
        transform: translate(12vmax, -8vmax) scale(1.25);
    }
}

/* station photo: fills the whole screen, sharp */
.photo {
    position: absolute;
    inset: 0;
    background: var(--photo) var(--focus, center) / cover no-repeat;
    opacity: 0;
    transform: scale(1.06);
    transition: opacity 1.4s var(--ease), transform 10s var(--ease);
}

body[data-photo="on"] .photo {
    opacity: 1;
    transform: scale(1);
}

/* keeps the dusk mood and text readable over any photo */
.scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(42, 34, 99, .45) 0%, rgba(42, 34, 99, 0) 24%, rgba(50, 20, 90, .1) 50%, rgba(50, 20, 90, .72) 100%);
    opacity: 0;
    transition: opacity 1.2s;
}

body[data-photo="on"] .scrim {
    opacity: 1;
}

/* ---------- layout ---------- */
.app {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 480px;
    min-height: 100dvh;
    margin: 0 auto;
    padding: calc(14px + var(--sat)) 16px calc(18px + var(--sab));
    display: flex;
}

.view {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: enter .8s var(--ease) both;
}

.view.center {
    justify-content: center;
    align-items: center;
    text-align: center;
}

@keyframes enter {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
}

/* ---------- glass panels (cards, top bar): single edge ---------- */
.glass {
    position: relative;
    background: linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04)), rgba(45, 25, 85, .2);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .35);
    box-shadow:
        inset 0 1.5px 1px rgba(255, 255, 255, .6),
        inset 0 -10px 18px -8px rgba(255, 255, 255, .12),
        0 20px 44px -16px rgba(30, 10, 70, .5);
    border-radius: 30px;
}

/* ---------- fluid glass: one shared recipe (look only, no sizes) ---------- */
.btn,
.icon-btn,
.orb-core,
.mic-btn {
    position: relative;
    cursor: pointer;
    color: #fff;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .06)),
        rgba(45, 25, 85, .26);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .45);
    box-shadow:
        inset 0 1.5px 1px rgba(255, 255, 255, .65),
        inset 0 -8px 14px -8px rgba(255, 255, 255, .2),
        0 14px 30px -12px rgba(20, 5, 50, .55);
    transition: transform .25s var(--ease), box-shadow .1s linear, background .4s, color .3s;
}

/* specular glint across the top of every glass piece */
.btn::after,
.icon-btn::after,
.orb-core::after,
.mic-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(120% 70% at 30% 0%, rgba(255, 255, 255, .4), transparent 55%);
}

.btn i,
.icon-btn i,
.orb-core i {
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 1px 5px rgba(30, 10, 70, .55));
}

.card {
    width: 100%;
    padding: 34px 24px 26px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.logo {
    width: 68px;
    height: 68px;
    border-radius: 24px;
    display: grid;
    place-items: center;
    font-size: 32px;
    color: #fff;
    background: linear-gradient(160deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .06));
    border: 1px solid rgba(255, 255, 255, .45);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    50% {
        transform: translateY(-5px);
    }
}

.wordmark {
    font-weight: 500;
    font-size: 42px;
    letter-spacing: -.02em;
}

.wordmark.small {
    font-size: 22px;
}

.tagline {
    color: var(--muted);
    line-height: 1.5;
    max-width: 280px;
    font-weight: 300;
    font-size: 17px;
}

.gate {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 6px;
}

/* frosted field */
.gate input {
    width: 100%;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .3);
    outline: 0;
    border-radius: 20px;
    background: rgba(255, 255, 255, .12);
    color: var(--text);
    font: 500 16px var(--font);
    /* 16px stops iOS zoom */
    letter-spacing: 3px;
    text-align: center;
    transition: border-color .25s, background .25s, box-shadow .25s;
}

.gate input::placeholder {
    letter-spacing: 0;
    color: var(--muted);
    font-weight: 300;
}

.gate input:focus {
    border-color: rgba(255, 255, 255, .7);
    background: rgba(255, 255, 255, .18);
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .12);
}

.error {
    color: var(--danger);
    font-size: 15px;
}

/* ---------- buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: auto;
    min-height: 58px;
    padding: 16px 22px;
    border-radius: 999px;
    font: 500 17px var(--font);
    text-shadow: 0 1px 8px rgba(30, 10, 70, .45);
}

.btn:active {
    transform: scale(.97);
}

.btn-block {
    width: 100%;
}

/* active "stop" state: warm coral glass */
.btn[data-on="true"] {
    background: rgba(255, 143, 163, .3);
    border-color: rgba(255, 205, 215, .85);
    box-shadow:
        inset 0 2px 1px rgba(255, 255, 255, .8),
        inset 0 -12px 20px -8px rgba(255, 255, 255, .2),
        0 0 26px -6px var(--live-glow),
        0 16px 34px -12px rgba(20, 5, 50, .6);
}

.icon-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 18px;
}

.icon-btn:active {
    transform: scale(.9);
}

.btn:focus-visible,
.icon-btn:focus-visible,
.pill-btn:focus-visible,
.mic-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* ---------- top bar ---------- */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 6px 8px 6px 16px;
    border-radius: 999px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.brand i {
    font-size: 22px;
}

.topbar-actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

.studio-title {
    font-size: 19px;
    font-weight: 500;
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border-radius: 999px;
    font: 500 13px var(--font);
    white-space: nowrap;
    flex-shrink: 0;
    color: #fff;
    background: rgba(255, 122, 143, .35);
    border: 1px solid rgba(255, 190, 200, .6);
}

.pill i {
    color: #ffc0c8;
    animation: blink 1.8s ease-in-out infinite;
}

.pill-btn {
    cursor: pointer;
}

@keyframes blink {
    50% {
        opacity: .35;
    }
}

/* ---------- home: station sits low, in thumb reach ---------- */
.home {
    flex: 1;
}

.stations {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.station {
    padding: 0 4px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    animation: rise 1s .1s var(--ease) both;
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(34px);
    }
}

.station .btn {
    width: 100%;
    max-width: 320px;
}

/* name first, then a quiet subtitle, like a now-playing screen */
.station-head {
    display: flex;
    flex-direction: column-reverse;
    gap: 2px;
}

.eyebrow {
    font-size: 15px;
    font-weight: 300;
    color: var(--text);
    text-shadow: 0 1px 10px rgba(30, 10, 70, .6);
}

.station-name {
    font-weight: 600;
    font-size: 32px;
    letter-spacing: -.01em;
    text-shadow: 0 2px 16px rgba(30, 10, 70, .6);
}

/* ---------- the dial ---------- */
.orb,
.mic-btn {
    --level: 0;
    position: relative;
}

.orb {
    --rip: 1.5;
    width: 128px;
    height: 128px;
    margin: 4px 0;
    display: grid;
    place-items: center;
}

.orb-core {
    z-index: 2;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 50px;
}

/* rings swell with the voice via --level (0..1) */
.ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    border: 1.5px solid rgba(255, 255, 255, .7);
    opacity: calc(.1 + var(--level) * .7);
    transform: scale(calc(1.05 + var(--level) * .3));
    transition: transform .09s linear, opacity .09s linear;
}

.ring.r2,
.ring.r3 {
    opacity: 0;
    transform: scale(1);
}

.orb[data-state="live"] .orb-core {
    background: rgba(255, 143, 163, .28);
    border-color: rgba(255, 210, 218, .9);
    box-shadow:
        inset 0 2px 1px rgba(255, 255, 255, .8),
        inset 0 -12px 20px -8px rgba(255, 255, 255, .2),
        0 0 calc(24px + var(--level) * 50px) var(--live-glow),
        0 16px 34px -12px rgba(20, 5, 50, .6);
}

.orb[data-state="live"] .ring {
    border-color: var(--live);
}

.orb[data-state="live"] .ring.r2 {
    animation: ripple 3s var(--ease) infinite;
}

.orb[data-state="waiting"] .orb-core,
.orb[data-state="connecting"] .orb-core {
    animation: breathe 3.2s ease-in-out infinite;
}

.orb[data-state="waiting"] .ring.r2,
.orb[data-state="connecting"] .ring.r2 {
    animation: ripple 3.8s ease-out infinite;
}

@keyframes ripple {
    0% {
        opacity: .55;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(var(--rip, 1.6));
    }
}

@keyframes breathe {
    50% {
        transform: scale(.975);
    }
}

/* ---------- status ---------- */
.status {
    color: var(--text);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.4;
    min-height: 22px;
    text-shadow: 0 1px 10px rgba(30, 10, 70, .6);
    transition: color .3s;
}

.status.live {
    color: var(--live-text);
    font-weight: 500;
}

.status.failed {
    color: var(--danger);
}

.hint {
    color: var(--muted);
    font-size: 14px;
    font-weight: 300;
    text-align: center;
    padding: 14px 8px 0;
    text-shadow: 0 1px 10px rgba(40, 15, 80, .6);
}

/* ---------- studio ---------- */
.studio {
    flex: 1;
}

.mic-stage {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
}

/* a big round glass button, like a play button */
.mic-btn {
    width: 164px;
    height: 164px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 58px;
    margin-bottom: 14px;
}

.mic-btn:active {
    transform: scale(.96);
}

.mic-btn i {
    position: relative;
    z-index: 2;
}

.mic-btn[data-state="live"] {
    background: rgba(255, 143, 163, .4);
    border-color: rgba(255, 215, 222, .95);
    box-shadow:
        inset 0 2px 1px rgba(255, 255, 255, .8),
        inset 0 -12px 20px -8px rgba(255, 255, 255, .2),
        0 0 calc(30px + var(--level) * 60px) var(--live-glow);
}

.mic-btn[data-state="live"] .ring {
    border-color: var(--live);
}

.mic-btn[data-state="live"] .ring.r2 {
    animation: ripple 2.8s var(--ease) infinite;
}

.mic-btn[data-state="live"] .ring.r3 {
    animation: ripple 2.8s .9s var(--ease) infinite;
}

.mic-btn[data-state="muted"] {
    color: var(--muted);
    border-color: rgba(255, 190, 200, .7);
}

.mic-btn[data-state="off"] .ring {
    opacity: 0;
}

.mic-caption {
    font-size: 25px;
    font-weight: 500;
}

.listeners {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    font-weight: 500;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .35);
}

/* ---------- sleep mode ---------- */
.dim {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: #000;
    display: grid;
    place-items: end center;
    padding-bottom: calc(40px + var(--sab));
    cursor: pointer;
}

.dim p {
    color: #3a3550;
    font-size: 14px;
}

@media (min-width: 600px) {
    .app {
        padding-top: 32px;
        padding-bottom: 32px;
    }
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation: none !important;
        transition-duration: .01ms !important;
    }
}