/* ==========================================================================
   QUICK SWING — Signature réactive
   Bouton mute de l'identité sonore (js/qs-sound.js) + helper de parallaxe
   d'inclinaison (--qs-tilt-x / --qs-tilt-y, posés par js/reactive-signature.js).
   ========================================================================== */

/* ── Bouton mute ───────────────────────────────────────────────────────────
   Masqué sur mobile : en position fixe bas-gauche, il chevauche les contrôles
   propres à certaines expériences plein écran (ex. music-line-rider) et
   bloque leurs clics ; sur mobile il suffit de couper le son du téléphone.
   Visible tablet+ (bas-gauche) : le toggle jour/nuit est en haut-droite et le
   bouton « retour en haut » en bas-droite — le bas-gauche est libre. */
.qs-sound-toggle {
    display: none;
}

@media (min-width: 768px) {
    .qs-sound-toggle {
        position: fixed;
        left: 16px;
        bottom: 16px;
        z-index: 9997;

        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        padding: 0;
        margin: 0;

        color: var(--qs-neon, #00ffcc);
        background: var(--qs-glass-bg, rgba(255, 255, 255, 0.06));
        border: 1px solid var(--qs-glass-border, rgba(0, 255, 204, 0.15));
        border-radius: 50%;
        -webkit-backdrop-filter: blur(8px);
        backdrop-filter: blur(8px);
        box-shadow: 0 0 0 1px var(--qs-neon-a10, rgba(0, 255, 204, 0.1)),
                    0 4px 18px rgba(0, 0, 0, 0.35);

        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
        transition: color .2s ease, border-color .2s ease,
                    box-shadow .2s ease, transform .2s cubic-bezier(0.23, 1, 0.32, 1),
                    opacity .3s ease;
        animation: qs-sound-appear .5s ease 0.9s both;
    }
}

.qs-sound-toggle svg {
    width: 20px;
    height: 20px;
    display: block;
}

.qs-sound-toggle:hover,
.qs-sound-toggle:focus-visible {
    border-color: var(--qs-neon-a40, rgba(0, 255, 204, 0.4));
    box-shadow: 0 0 0 1px var(--qs-neon-a25, rgba(0, 255, 204, 0.25)),
                0 0 18px var(--qs-neon-a30, rgba(0, 255, 204, 0.3)),
                0 4px 18px rgba(0, 0, 0, 0.35);
    transform: translateY(-2px);
    outline: none;
}

.qs-sound-toggle.is-muted {
    color: var(--qs-gray-500, #8892a0);
    border-color: var(--wp--preset--color--gray-700, rgba(255, 255, 255, 0.12));
}

.qs-sound-toggle.is-muted:hover,
.qs-sound-toggle.is-muted:focus-visible {
    color: var(--qs-contrast, #fff);
    box-shadow: 0 0 0 1px var(--wp--preset--color--gray-500, rgba(255, 255, 255, 0.2)),
                0 4px 18px rgba(0, 0, 0, 0.35);
}

@keyframes qs-sound-appear {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0);   }
}

@media (prefers-reduced-motion: reduce) {
    .qs-sound-toggle { animation: none; }
    .qs-sound-toggle:hover,
    .qs-sound-toggle:focus-visible { transform: none; }
}

/* ── Parallaxe d'inclinaison (opt-in) ─────────────────────────────────────
   Ajouter data-qs-tilt sur un élément de hero (image, forme SVG…) pour qu'il
   suive le vecteur d'inclinaison. L'amplitude par défaut est ~14px ; la régler
   par élément avec --qs-tilt-amp. */
[data-qs-tilt] {
    --qs-tilt-amp: 14px;
    transition: transform .35s cubic-bezier(0.23, 1, 0.32, 1);
    transform: translate3d(
        calc(var(--qs-tilt-x, 0) * var(--qs-tilt-amp)),
        calc(var(--qs-tilt-y, 0) * var(--qs-tilt-amp)),
        0
    );
    will-change: transform;
}

[data-qs-tilt="deep"]  { --qs-tilt-amp: 26px; }
[data-qs-tilt="subtle"] { --qs-tilt-amp: 7px; }

@media (prefers-reduced-motion: reduce) {
    [data-qs-tilt] { transform: none; }
}