/* ============================================================
   BUTTONS & CONTROLS
   ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    /* 44px floor keeps every button a comfortable tap target. */
    min-height: 44px;
    padding: var(--space-2) var(--space-5);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    border: var(--border-width) solid transparent;
    border-radius: var(--radius-pill);
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.55;
    pointer-events: none;
    transform: none;
}

/* --- Variants ---------------------------------------------- */

.btn-primary {
    color: var(--text-on-accent);
    background: linear-gradient(135deg, var(--accent), var(--secondary));
}

.btn-primary:hover {
    color: var(--text-on-accent);
    background: linear-gradient(135deg, var(--accent-hover), var(--secondary));
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    color: var(--text-primary);
    background: var(--bg-surface);
    border-color: var(--border-strong);
}

.btn-secondary:hover {
    color: var(--text-primary);
    background: var(--bg-surface-hover);
    border-color: var(--secondary);
    box-shadow: var(--shadow-sm);
}

.btn-ghost {
    color: var(--text-secondary);
    background: transparent;
}

.btn-ghost:hover {
    color: var(--text-primary);
    background: var(--bg-surface-hover);
}

/* --- Sizes -------------------------------------------------- */

.btn-sm {
    min-height: 36px;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
}

.btn-lg {
    min-height: 52px;
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-base);
}

/* --- Icon-only --------------------------------------------- */

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    color: var(--text-secondary);
    background: transparent;
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-md);
    transition: background-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}

.btn-icon:hover {
    color: var(--text-primary);
    background: var(--bg-surface-hover);
    border-color: var(--border-strong);
}

/* --- Chips (filters) --------------------------------------- */

.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: 36px;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--text-secondary);
    text-decoration: none;
    background: var(--bg-surface);
    border: var(--border-width) solid var(--border);
    border-radius: var(--radius-pill);
    transition: all var(--duration-fast) var(--ease-out);
}

.chip:hover {
    color: var(--secondary-contrast);
    background: var(--secondary-soft);
    border-color: var(--border-accent);
    transform: translateY(-1px);
}

.chip[aria-pressed="true"],
.chip.is-active {
    color: var(--text-on-accent);
    background: linear-gradient(135deg, var(--accent), var(--secondary));
    border-color: transparent;
    box-shadow: var(--glow-accent);
}

/* --- Tags --------------------------------------------------- */

.tag {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    color: var(--accent-contrast);
    background: var(--accent-soft);
    border-radius: var(--radius-pill);
}

.tag-gold {
    color: var(--accent-ink);
    background: var(--gold-soft);
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* ============================================================
   INTERACTION STATES
   Every control answers the same way: hover lifts, focus shows a
   ring, and pressing settles it back. Applied here once rather
   than per component.
   ============================================================ */ .btn:focus-visible,
.btn-icon:focus-visible,
.chip:focus-visible {
    outline: var(--border-width-thick) solid var(--secondary);
    outline-offset: 2px;
}

.btn:active,
.btn-icon:active,
.chip:active {
    transform: translateY(1px) scale(0.985);
}

.btn-icon,
.chip {
    transition: background-color var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out),
                color var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
}

.btn-icon:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

/* Pressed-state controls (theme toggle, filters) read as switched on. */
[aria-pressed="true"].btn-icon {
    color: var(--accent-ink);
    background: var(--gold-soft);
    border-color: color-mix(in srgb, var(--gold) 45%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .btn:active,
.btn-icon:active,
.chip:active,
.btn-icon:hover,
.chip:hover {
        transform: none;
    }
}

/* ============================================================
   MAGIC BUTTON
   For the one gesture on a page that should feel like casting
   something: an aurora that drifts under the label, a halo that
   breathes, and four stars that come out to meet the cursor.

   A band of light used to sweep across on hover. It read as a
   glitch rather than as a shimmer, so it is gone.

   Everything animates `transform`, `opacity` and
   `background-position` only, so none of it forces layout.
   ============================================================ */

.btn-magic {
    position: relative;
    /* The stars are drawn in front of the aurora but behind the label. */
    isolation: isolate;
    color: var(--text-on-accent);
    border-color: transparent;
    /* Three stops over twice the width: moving the position slides the
       aurora across without repainting a gradient every frame. */
    background-image: linear-gradient(
        100deg,
        var(--accent),
        var(--secondary),
        var(--accent)
    );
    background-size: 220% 100%;
    background-position: 0% 50%;
    box-shadow: var(--ring-gold-strong), var(--shadow-md);
    animation: magic-drift 9s linear infinite,
               magic-breathe 4.5s var(--ease-in-out) infinite;
}

@keyframes magic-drift {
    to { background-position: 220% 50%; }
}

@keyframes magic-breathe {
    0%, 100% {
        box-shadow: var(--ring-gold-strong), var(--shadow-md),
                    0 0 14px color-mix(in srgb, var(--secondary) 35%, transparent);
    }
    50% {
        box-shadow: var(--ring-gold-strong), var(--shadow-md),
                    0 0 28px color-mix(in srgb, var(--secondary) 60%, transparent),
                    0 0 10px color-mix(in srgb, var(--gold) 35%, transparent);
    }
}

/* --- Stars around the edge ----------------------------------- */

.btn-magic::before {
    content: "";
    position: absolute;
    /* Spills past the pill so the stars ring it rather than sit inside. */
    inset: -9px;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    background-color: var(--gold-bright);
    mask-image: var(--sparkle-star), var(--sparkle-star),
                var(--sparkle-star), var(--sparkle-star);
    -webkit-mask-image: var(--sparkle-star), var(--sparkle-star),
                        var(--sparkle-star), var(--sparkle-star);
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: 4% 14%, 95% 22%, 12% 88%, 88% 84%;
    -webkit-mask-position: 4% 14%, 95% 22%, 12% 88%, 88% 84%;
    mask-size: 13px, 10px, 9px, 12px;
    -webkit-mask-size: 13px, 10px, 9px, 12px;
    transition: opacity var(--duration-base) var(--ease-out);
}

@media (hover: hover) {
    .btn-magic:hover::before,
    .btn-magic:focus-visible::before {
        opacity: 1;
        animation: magic-twinkle 1.5s var(--ease-in-out) infinite;
    }
}

.btn-magic:focus-visible::before {
    opacity: 1;
}

@keyframes magic-twinkle {
    0%, 100% { transform: scale(0.9) rotate(-6deg); opacity: 0.55; }
    50%      { transform: scale(1.06) rotate(6deg); opacity: 1; }
}

/* --- Hover and press ----------------------------------------- */

.btn-magic:hover,
.btn-magic:focus-visible {
    color: var(--text-on-accent);
    transform: translateY(-2px);
}

.btn-magic:active {
    transform: translateY(0) scale(0.98);
}

.btn-magic .material-symbols-rounded {
    color: var(--gold-bright);
}

/* Nothing disappears; it simply holds still. */
@media (prefers-reduced-motion: reduce) {
    .btn-magic {
        animation: none;
        box-shadow: var(--ring-gold-strong), var(--shadow-md),
                    0 0 18px color-mix(in srgb, var(--secondary) 45%, transparent);
    }

    .btn-magic:hover::before,
    .btn-magic:focus-visible::before {
        animation: none;
    }

    .btn-magic:hover,
    .btn-magic:focus-visible,
    .btn-magic:active {
        transform: none;
    }
}

/* --- Sound toggle ------------------------------------------------
   One button, two icons: the one that matches the state is shown.
   Doing it in CSS from `aria-pressed` keeps the state in one place,
   the attribute a screen reader already reads.
   ------------------------------------------------------------------ */

.sound-toggle__on { display: none; }

.sound-toggle[aria-pressed="true"] .sound-toggle__on { display: inline-flex; }
.sound-toggle[aria-pressed="true"] .sound-toggle__off { display: none; }

.sound-toggle[aria-pressed="true"] {
    color: var(--accent-ink);
}