/*
 * Klangwolke (Modal) – gemeinsam für Einstellungen und Sphere (seit 2026-10-05 ausgelagert aus
 * pages/settings/styles.php). Markup + Skript: partials/sound-cloud-dialog.php.
 * Zwei Wolken (Du / Partner) driften beim Öffnen zusammen (--merge 0 → 1), in der Überlappung
 * leuchtet Gemeinsames golden. Keine Zahlen.
 */

@property --merge {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

.sound-cloud-dialog {
    width: min(520px, calc(100vw - 32px));
    max-width: none;
    box-sizing: border-box;
    padding: 0;
    border: 1px solid #ffe1aa80;
    border-radius: 20px;
    background: #091c2b;
    color: #FAFAF8;
    box-shadow: 0 24px 55px #0008;
    /* Die Wolken starten beim Öffnen außerhalb und gleiten herein – ohne Scrollbalken */
    overflow-x: hidden;
    overflow-y: auto;
}

.sound-cloud-dialog::backdrop {
    background: rgba(4, 13, 27, .8);
}

.sound-cloud-inner {
    position: relative;
    padding: 22px 20px 20px;
}

.sound-cloud-dialog h2 {
    margin: 0 0 4px;
    font-size: 1.15rem;
    letter-spacing: -.02em;
}

.sound-cloud-sub {
    margin: 0 0 18px;
    color: #bbcad3;
    font-size: .82rem;
}

.sound-cloud-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #bbcad3;
    font-size: 1.1rem;
    cursor: pointer;
}

.sound-cloud-close:hover {
    color: #FAFAF8;
}

/* Wolke ↔ Balken, links neben dem Schließen-Kreuz */
.sound-cloud-view {
    position: absolute;
    top: 12px;
    right: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 211, 74, .12);
    color: #FFD34A;
    font-size: 1rem;
    cursor: pointer;
}

.sound-cloud-view:hover {
    background: rgba(255, 211, 74, .22);
}

.sound-cloud-view:focus-visible {
    outline: 2px solid #FFD34A;
    outline-offset: 3px;
}

/* Balkenansicht (seit 2026-10-05, vorher als Box in den Einstellungen): gemeinsame Genres, ohne Zahlen */
.sound-cloud-bars {
    display: grid;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 16px;
    background: #1b2d42;
}

/* Wolke und Balken übereinander in einer Zelle: das Modal ist in beiden Ansichten gleich hoch,
   die inaktive Ansicht ist nur unsichtbar (auch für Screenreader) */
.sound-cloud-views {
    display: grid;
}

.sound-cloud-views > * {
    grid-area: 1 / 1;
    min-width: 0;
}

.sound-cloud-views.is-bars .sound-cloud-cloudview,
.sound-cloud-views:not(.is-bars) .sound-cloud-bars {
    visibility: hidden;
}

/* Balken oben im (ggf. höheren) Kasten; ist der Balkenkasten höher (mobil), steht die Wolke mittig */
.sound-cloud-bars {
    align-content: start;
}

.sound-cloud-cloudview {
    align-self: center;
}

/* Skript setzt die Animationen ohne Übergang auf „Start“ zurück (Wolke ↔ Balken) */
.sound-cloud-views.is-resetting .sound-cloud-stage,
.sound-cloud-views.is-resetting .sound-cloud-bar > span {
    transition: none;
}

.sound-cloud-bars-heading {
    margin: 0;
    font-size: .95rem;
    font-weight: 700;
}

.sound-cloud-bars-empty {
    margin: 0;
    color: #9eacbb;
    font-size: .88rem;
}

.sound-cloud-bar-label {
    margin-bottom: 6px;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.25;
}

.sound-cloud-bar {
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .10);
}

/* wächst beim Zeigen von 0 auf --w (Skript setzt .is-grown) */
.sound-cloud-bar > span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: #FFD34A;
    transition: width 1.1s cubic-bezier(.22, .8, .3, 1);
}

.sound-cloud-bars.is-grown .sound-cloud-bar > span {
    width: var(--w);
}

.sound-cloud-stage {
    --merge: 0;
    position: relative;
    aspect-ratio: 1.6;
    container-type: inline-size;
    transition: --merge 1.6s cubic-bezier(.22, .8, .3, 1);
}

.sound-cloud-stage.is-merged {
    --merge: 1;
}

.sound-cloud {
    position: absolute;
    top: 0;
    box-sizing: border-box;
    width: 62.5%;
    height: 100%;
    border-radius: 50%;
    border: 1px dashed #ffffff30;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .3em;
    font-size: clamp(.7rem, 4.2cqi, .92rem);
    color: #d6e2ea;
}

.sound-cloud span,
.sound-cloud-overlap span {
    font-size: calc(var(--s, 1) * 1em);
    line-height: 1.1;
}

/* Lose verteilt: --x (Kante zur Schnittmenge hin) / --y (Mitte) setzt partials/sound-cloud-dialog.php */
.sound-cloud span {
    position: absolute;
    left: var(--x, 50%);
    top: var(--y, 50%);
    translate: -100% -50%;
    white-space: nowrap;
    opacity: .7;
    filter: blur(.4px);
}

/* Gemeinsame Genres jenseits der Mitte (seit 2026-10-05): in beiden Seitenwolken, golden getönt */
.sound-cloud span.is-shared {
    color: #ffd389;
    opacity: .85;
}

.sound-cloud-a {
    left: 0;
    align-items: flex-start;
    padding-left: 9%;
    background: radial-gradient(closest-side, #5d9ccc4d, #5d9ccc1c 65%, transparent);
    translate: calc((1 - var(--merge)) * -14%) 0;
}

/* rechte Wolke gespiegelt: linke Kante zur Schnittmenge */
.sound-cloud-b span {
    translate: 0 -50%;
}

.sound-cloud-b {
    right: 0;
    align-items: flex-end;
    padding-right: 9%;
    text-align: right;
    border-color: #ffab4866;
    background: radial-gradient(closest-side, #ff9f2442, #ff9f2418 65%, transparent);
    translate: calc((1 - var(--merge)) * 14%) 0;
}

.sound-cloud-overlap {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .3em;
    font-size: clamp(.74rem, 4.4cqi, .95rem);
    font-weight: 700;
    text-align: center;
    color: #ffd389;
    text-shadow: 0 0 14px #ffab4899;
    background: radial-gradient(closest-side, #ffab4833, transparent 70%) center / 40% 80% no-repeat;
    opacity: var(--merge);
    scale: calc(.9 + var(--merge) * .1);
}

/* drei Spalten: „Gemeinsam“ exakt mittig, egal wie lang der Partnername ist (vorher space-between) */
.sound-cloud-legend {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    margin: 12px 4px 0;
    font-size: .75rem;
    font-weight: 600;
}

.sound-cloud-legend .is-you { color: #8fbde0; justify-self: start; }
.sound-cloud-legend .is-shared { color: #ffd389; justify-self: center; }
.sound-cloud-legend .is-partner { color: #ffb86b; justify-self: end; text-align: right; }

.sound-cloud-note {
    margin: 16px 0 0;
    color: #aebcc7;
    font-size: .7rem;
    line-height: 1.45;
    text-align: center;
}

/* 4–5 gemeinsame Begriffe: etwas kleiner und enger, damit sie senkrecht in die Linse passen */
.sound-cloud-overlap.is-dense {
    gap: .2em;
    font-size: clamp(.68rem, 3.8cqi, .85rem);
}

/* Mobil: die schmale Linse braucht kleinere gemeinsame Namen */
@media (max-width: 700px) {
    .sound-cloud-overlap {
        font-size: clamp(.64rem, 3.5cqi, .8rem);
    }

    .sound-cloud-overlap.is-dense {
        font-size: clamp(.6rem, 3.2cqi, .74rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sound-cloud-stage,
    .sound-cloud-bar > span {
        transition: none;
    }
}

.sound-cloud-close:focus-visible {
    outline: 2px solid #FFD34A;
    outline-offset: 3px;
}