/* Shared controls that sit above the three animated product experiences. */

.site-motion-toggle {
    position: fixed;
    z-index: 900;
    right: max(0.85rem, env(safe-area-inset-right));
    bottom: max(0.85rem, env(safe-area-inset-bottom));
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.65rem 0.9rem;
    border: 1px solid #f4f1e9;
    border-radius: 999px;
    color: #fffaf1;
    background: #191917;
    box-shadow: 0 0 0 1px rgba(25, 25, 23, 0.42), 0 0.45rem 1.3rem rgba(25, 25, 23, 0.2);
    font-family: "Geist Mono", "SFMono-Regular", Consolas, monospace;
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1;
    letter-spacing: 0.035em;
    cursor: pointer;
}

/* Product pages set a page-wide button color with greater selector
   specificity. Keep this site-level control readable in every theme. */
[data-motion-toggle].site-motion-toggle {
    color: #fffaf1;
}

[data-motion-toggle].site-motion-toggle > span {
    color: inherit;
}

.site-motion-toggle::before {
    content: "";
    width: 0.62rem;
    height: 0.62rem;
    flex: 0 0 auto;
    border: 2px solid currentColor;
    border-radius: 50%;
}

.site-motion-toggle[aria-pressed="true"]::before {
    border-radius: 1px;
    background: currentColor;
}

.site-motion-toggle:hover {
    color: #fffaf1;
    background: #8c3018;
}

.site-motion-toggle:focus-visible {
    outline: 3px solid #fffaf1 !important;
    outline-offset: 3px !important;
}

.site-motion-toggle[hidden] {
    display: none !important;
}

.site-field-error {
    margin: 0.1rem 0 0;
    color: #8c3018;
    font-size: 0.8rem;
    font-weight: 650;
    line-height: 1.4;
}

.ua3-page .site-field-error {
    color: #ffc1ac;
}

html.site-motion-paused {
    scroll-behavior: auto !important;
}

html.site-motion-paused *,
html.site-motion-paused *::before,
html.site-motion-paused *::after {
    animation-play-state: paused !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
}

@media (max-width: 30rem) {
    .site-motion-toggle {
        right: max(0.65rem, env(safe-area-inset-right));
        bottom: max(0.65rem, env(safe-area-inset-bottom));
        min-height: 2.75rem;
        padding-inline: 0.8rem;
    }
}

@media (forced-colors: active) {
    .site-motion-toggle {
        color: ButtonText;
        background: ButtonFace;
        border: 2px solid ButtonText;
        box-shadow: none;
        forced-color-adjust: auto;
    }

    .site-motion-toggle[aria-pressed="true"] {
        outline: 3px solid Highlight;
        outline-offset: 2px;
    }
}

@media print {
    .site-motion-toggle {
        display: none !important;
    }
}