/* ==========================================================================
   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 ───────────────────────────────────────────────────────────
   Bas-gauche : le toggle jour/nuit est en haut-droite (tablet+) et le bouton
   « retour en haut » en bas-droite — le bas-gauche est libre sur tous les formats. */
.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; }
}