/* ==========================================================================
   Reel Unmute Affordance Component
   Shared across hero, /samples, and catalog Reel surfaces.
   Phase 92 — UI-SPEC UNMUTE-01..UNMUTE-06
   ========================================================================== */

/* Container: icon button + label pill side by side */
.reel-unmute {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* ==========================================================================
   Circular unmute button (UNMUTE-01: ≥64×64 hit target)
   ========================================================================== */

.reel-unmute__btn {
    /* Native button resets — prevent UA defaults (Safari padding, Firefox inner border) */
    appearance: none;
    font: inherit;
    line-height: 1;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--color-white);
    border: 1px solid var(--color-navy-900);
    box-shadow: 0 2px 8px rgb(0 0 0 / 40%);
    color: var(--color-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;

    /* No opacity transition — affordance persists until user action (UNMUTE-03) */
}

.reel-unmute__btn:hover {
    background: var(--color-navy-50);
}

/* Focus ring using project gold token (WCAG 2.4.7, UNMUTE-04) */
.reel-unmute__btn:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

/* ==========================================================================
   Visible label pill (UNMUTE-02: NOT a title attribute, NOT a ::after tooltip)
   ========================================================================== */

.reel-unmute__label {
    background: var(--color-burgundy);
    color: var(--color-white);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    line-height: 1.2;
    padding: var(--space-2) var(--space-3);
    border-radius: 9999px;
    white-space: nowrap;

    /* Visible on first paint; no reveal animation (UNMUTE-03) */
}

/* ==========================================================================
   Reduced-motion: identical visual treatment, no motion-dependent reveal
   (UNMUTE-06: affordance must be reachable, focusable, clickable)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .reel-unmute,
    .reel-unmute__btn,
    .reel-unmute__label {
        /* Ensure no animation or transition is applied even if inherited */
        animation: none;
        transition: none;
    }
}