/* Orb component — hero centerpiece on the playlist card.
   Self-contained, no dependencies on styles.css beyond CSS vars. */

/* ── Hero slot: centered above the tile row ───────────────────────── */
.orb-hero {
    display: flex;
    justify-content: center;
    padding: 2.1rem 0 1.5rem;
    position: relative;
}
/* Inside the standalone panel the panel owns the outer spacing. */
.orb-panel .orb-hero {
    padding: 0.4rem 0 0;
}
/* Radial backdrop bleed — tints the card behind the orb. */
.orb-hero::before {
    content: "";
    position: absolute;
    width: 340px;
    height: 340px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(180, 106, 255, 0.10) 0%, rgba(255, 110, 168, 0.06) 40%, transparent 70%);
    pointer-events: none;
}
/* Rail-color tint: warm sessions get amber bleed, cool get blue. */
.rail-warm .orb-hero::before {
    background: radial-gradient(circle, rgba(240, 136, 62, 0.12) 0%, rgba(255, 170, 50, 0.05) 40%, transparent 70%);
}
.rail-cool-purple .orb-hero::before {
    background: radial-gradient(circle, rgba(188, 140, 255, 0.12) 0%, rgba(140, 100, 220, 0.05) 40%, transparent 70%);
}
.rail-cool-blue .orb-hero::before {
    background: radial-gradient(circle, rgba(88, 166, 255, 0.12) 0%, rgba(60, 140, 240, 0.05) 40%, transparent 70%);
}

/* ── Orb stage: the interactive container ─────────────────────────── */
.orb-stage {
    position: relative;
    margin: 0 auto;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.orb-stage:focus { outline: none; }
.orb-stage:focus-visible {
    outline: 2px solid #ff6ea8;
    outline-offset: 6px;
    border-radius: 50%;
}

/* ── The orb sphere ───────────────────────────────────────────────── */
.orb {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    filter: url(#liquify);
    transition: filter 800ms ease, transform 800ms ease;
    background: radial-gradient(circle at 30% 30%, #2a1d40 0%, #1a1029 60%, #0a0612 100%);
}

/* Glow ring — pulsing ambient halo that makes the orb pop. */
@keyframes glow-breathe {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 0.85; }
}
.orb-stage::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    box-shadow:
        inset 0 0 28px rgba(0, 0, 0, 0.55),
        0 0 24px rgba(180, 106, 255, 0.25),
        0 0 56px rgba(255, 110, 168, 0.15),
        0 0 96px rgba(180, 106, 255, 0.08);
    pointer-events: none;
    animation: glow-breathe 4s ease-in-out infinite;
}
/* Rail-colored glow ring overrides */
.rail-warm .orb-stage::after {
    box-shadow:
        inset 0 0 28px rgba(0, 0, 0, 0.55),
        0 0 24px rgba(240, 136, 62, 0.30),
        0 0 56px rgba(255, 170, 50, 0.15),
        0 0 96px rgba(240, 136, 62, 0.08);
}
.rail-cool-purple .orb-stage::after {
    box-shadow:
        inset 0 0 28px rgba(0, 0, 0, 0.55),
        0 0 24px rgba(188, 140, 255, 0.30),
        0 0 56px rgba(140, 100, 220, 0.15),
        0 0 96px rgba(188, 140, 255, 0.08);
}
.rail-cool-blue .orb-stage::after {
    box-shadow:
        inset 0 0 28px rgba(0, 0, 0, 0.55),
        0 0 24px rgba(88, 166, 255, 0.30),
        0 0 56px rgba(60, 140, 240, 0.15),
        0 0 96px rgba(88, 166, 255, 0.08);
}

/* ── Cover blobs ──────────────────────────────────────────────────── */
.covers-blob {
    position: absolute;
    inset: -8%;
    animation: drift 22s ease-in-out infinite;
}
@keyframes drift {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25%      { transform: translate(2%, -3%) rotate(1.5deg); }
    50%      { transform: translate(-1%, 2%) rotate(-1deg); }
    75%      { transform: translate(-2%, -1%) rotate(0.5deg); }
}
.blob-cover {
    position: absolute;
    border-radius: 50%;
    overflow: hidden;
    mix-blend-mode: screen;
}
.blob-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.92;
}
.blob-cover.b1 {
    width: 62%; height: 62%; top: 6%; left: 8%;
    background: radial-gradient(circle at 50% 50%, #ff8a3d 0%, #ff3d8b 70%, transparent 100%);
}
.blob-cover.b2 {
    width: 56%; height: 56%; top: 4%; right: 6%;
    background: radial-gradient(circle at 50% 50%, #ff3d8b 0%, #b46aff 70%, transparent 100%);
}
.blob-cover.b3 {
    width: 60%; height: 60%; top: 32%; left: 18%;
    background: radial-gradient(circle at 50% 50%, #5ee0c0 0%, #4a8ed8 70%, transparent 100%);
}
.blob-cover.b4 {
    width: 54%; height: 54%; bottom: 4%; left: 4%;
    background: radial-gradient(circle at 50% 50%, #b46aff 0%, #6e3da8 70%, transparent 100%);
}
.blob-cover.b5 {
    width: 50%; height: 50%; bottom: 6%; right: 8%;
    background: radial-gradient(circle at 50% 50%, #ff6ea8 0%, #b03050 70%, transparent 100%);
}
.blob-cover.b6 {
    width: 44%; height: 44%; top: 26%; right: 26%;
    background: radial-gradient(circle at 50% 50%, #ffd166 0%, #ff8a3d 70%, transparent 100%);
}

/* ── Hint label ───────────────────────────────────────────────────── */
.orb-hint {
    position: absolute;
    bottom: -30px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(180, 106, 255, 0.6);
    text-shadow: 0 0 12px rgba(180, 106, 255, 0.2);
    pointer-events: none;
    opacity: 0.85;
    transition: opacity 400ms ease, color 400ms ease;
}
.rail-warm .orb-hint {
    color: rgba(240, 136, 62, 0.6);
    text-shadow: 0 0 12px rgba(240, 136, 62, 0.2);
}
.rail-cool-blue .orb-hint {
    color: rgba(88, 166, 255, 0.6);
    text-shadow: 0 0 12px rgba(88, 166, 255, 0.2);
}

/* ── Hero treatment: larger, glowing centerpiece that invites a tap ── */
/* A slow idle float gives the orb life at rest so it reads as touchable.
   Safe on the sampler orb — it never enters the .peeking state, and active
   sampler states animate the inner .orb, not the stage, so no conflict. */
.orb-stage--hero {
    animation: orb-idle-float 5.5s ease-in-out infinite;
}
@keyframes orb-idle-float {
    0%, 100% { transform: scale(1) translateY(0); }
    50%      { transform: scale(1.04) translateY(-4px); }
}
/* Quiet the idle float once a sampler state takes over the orb. */
.orb-stage--hero.orb-rendering,
.orb-stage--hero.orb-playing,
.orb-stage--hero.orb-paused { animation: none; }

/* Deeper, wider halo + a brighter breathe. Box-shadow color is left to the
   base/rail rules so warm/cool theming still shows through. */
.orb-stage--hero::after {
    inset: -10px;
    animation: glow-breathe-hero 3.2s ease-in-out infinite;
}
@keyframes glow-breathe-hero {
    0%, 100% { opacity: 0.62; transform: scale(1); }
    50%      { opacity: 1;    transform: scale(1.03); }
}
.orb-stage--hero .orb-hint {
    bottom: -32px;
    font-size: 0.7rem;
    opacity: 1;
    color: rgba(214, 180, 255, 0.95);
    text-shadow: 0 0 14px rgba(180, 106, 255, 0.5);
}
.rail-warm .orb-stage--hero .orb-hint {
    color: rgba(255, 196, 130, 0.95);
    text-shadow: 0 0 14px rgba(240, 136, 62, 0.5);
}
.rail-cool-blue .orb-stage--hero .orb-hint {
    color: rgba(150, 200, 255, 0.95);
    text-shadow: 0 0 14px rgba(88, 166, 255, 0.5);
}

@media (prefers-reduced-motion: reduce) {
    .orb-stage--hero { animation: none; }
    .orb-stage--hero::after { animation: none; opacity: 0.85; }
}

/* ── Peek state ───────────────────────────────────────────────────── */
.orb-stage.peeking { transform: scale(1.06); }
.orb-stage.peeking .orb {
    filter: url(#liquify-light);
    transform: scale(1.04);
}
.orb-stage.peeking .blob-cover {
    mix-blend-mode: normal;
    transition: transform 700ms cubic-bezier(0.4, 0, 0.2, 1), border-radius 700ms ease;
    border-radius: 18%;
}
.orb-stage.peeking .b1 { transform: translate(-12%, -10%); }
.orb-stage.peeking .b2 { transform: translate( 14%, -12%); }
.orb-stage.peeking .b3 { transform: translate(-14%,   8%); }
.orb-stage.peeking .b4 { transform: translate(-16%,  16%); }
.orb-stage.peeking .b5 { transform: translate( 16%,  14%); }
.orb-stage.peeking .b6 { transform: translate( 12%,  -2%); }
.orb-stage.peeking .orb-hint { opacity: 0; }

/* ── Sampler mode states ──────────────────────────────────────────── */
@keyframes orb-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}
@keyframes orb-breathe {
    0%, 100% { transform: scale(1.02); filter: brightness(1.05); }
    50%      { transform: scale(1.06); filter: brightness(1.18); }
}

/* Rendering: gentle pulse while API works */
.orb-stage.orb-rendering .orb {
    animation: orb-pulse 1.4s ease-in-out infinite;
    filter: url(#liquify-light);
}
.orb-stage.orb-rendering .orb-hint {
    opacity: 1;
    color: #b46aff;
    text-shadow: 0 0 16px rgba(180, 106, 255, 0.35);
}
.orb-stage.orb-rendering::after {
    animation: glow-breathe 1.2s ease-in-out infinite;
}

/* Playing: breathing glow, green hint */
.orb-stage.orb-playing .orb {
    animation: orb-breathe 2.6s ease-in-out infinite;
    filter: url(#liquify-light);
}
.orb-stage.orb-playing .orb-hint {
    opacity: 1;
    color: #5ee0c0;
    text-shadow: 0 0 16px rgba(94, 224, 192, 0.35);
}
.orb-stage.orb-playing::after {
    box-shadow:
        inset 0 0 28px rgba(0, 0, 0, 0.55),
        0 0 24px rgba(94, 224, 192, 0.30),
        0 0 56px rgba(94, 224, 192, 0.15),
        0 0 96px rgba(94, 224, 192, 0.08);
}

/* Paused: dimmed, muted hint */
.orb-stage.orb-paused .orb {
    filter: url(#liquify-light) brightness(0.7);
    transform: scale(0.98);
}
.orb-stage.orb-paused .orb-hint {
    opacity: 1;
    color: #8a7aa8;
    text-shadow: none;
}
.orb-stage.orb-paused::after {
    animation: none;
    opacity: 0.3;
}