/* Shared motion, loaded after the public and backend presentation layers. */
:root {
    --motion-fast: 160ms;
    --motion-base: 360ms;
    --motion-slow: 600ms;
    --motion-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --motion-distance: 12px;
}

/* Content is visible without JavaScript. Reveal effects use cancellable animations. */
body [data-anim] { will-change: auto; }
/* Added only after JS initialization; no-JS content remains fully visible. */
body [data-anim].gm-motion-pending {
    opacity: .2;
    transform: var(--gm-reveal-transform, none);
}
body :is(.gm-btn,.gm-card-favorite,.gm-public-view-all,.gm-action-icon) {
    transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease,
        border-color var(--motion-fast) ease, transform var(--motion-fast) var(--motion-ease),
        box-shadow var(--motion-fast) ease;
}
body :is(input,select,textarea) {
    transition: border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}
body :is(.gm-admin-nav a,.gm-pengguna-nav a,.gm-mobile-bottom-nav-item,.gm-topbar a,[role="tab"],.gm-backend-status-tabs a) {
    transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease, border-color var(--motion-fast) ease;
}
body :is(.gm-redesign-media-card,.gm-backend-kpi) {
    transition: box-shadow var(--motion-base) ease, border-color var(--motion-fast) ease;
}
body.gm-public-shell .gm-redesign-media-card { transition: box-shadow var(--motion-base) ease; }
body.gm-public-shell .gm-public-view-all { transition-duration: var(--motion-fast); }
body :is(.gm-btn,.gm-card-favorite):active:not(:disabled) { transform: scale(.98); }
body .gm-card-favorite svg { transition: transform var(--motion-fast) var(--motion-ease); }
body .gm-card-favorite.is-active svg { transform: scale(1.1); }

/* CSS entrances also cover content created after boot and native details widgets. */
/* Overlay animations are owned by GMMotion, including dynamically-created feedback. */
body :is(.gm-feedback-confirm,.gm-feedback-notify,.gm-feedback-backdrop,
.gm-home-quick-modal-panel,.gm-contributor-share-modal-panel,.gm-stats-custom-modal-panel) {
    animation: none !important;
}
.gm-site-popup[data-gm-overlay-state="opening"]::backdrop { animation: gm-overlay-backdrop-in 240ms ease both; }
.gm-site-popup[data-gm-overlay-state="closing"]::backdrop { animation: gm-overlay-backdrop-out 240ms ease both; }
@keyframes gm-overlay-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes gm-overlay-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
body :is([data-review-pane],[role="tabpanel"],[data-filter-body]):not([hidden]),
body details[open] > :not(summary) {
    animation: gm-motion-fade var(--motion-base) var(--motion-ease);
}
body .gm-backend-backdrop { backdrop-filter: none; }
@media (max-width: 1023px) {
    body.gm-backend-body.gm-backend-body .gm-backend-sidebar {
        transition: transform var(--motion-base) var(--motion-ease), visibility var(--motion-base);
    }
}
@media (hover: hover) and (pointer: fine) {
    body :is(.gm-btn,.gm-public-view-all):hover:not(:disabled) { transform: translateY(-2px); }
    body .gm-redesign-media-card:hover { box-shadow: 0 12px 26px #174da61c; }
}
@media (hover: none) {
    body :is(.gm-btn,.gm-public-view-all,.gm-media-card,.gm-card-favorite):hover { transform: none; }
    body :is(.gm-btn,.gm-card-favorite):active:not(:disabled) { transform: scale(.98); }
}
@media (max-width: 767px) { :root { --motion-distance: 6px; } }
@keyframes gm-motion-fade { from { opacity: .2; } to { opacity: 1; } }
@keyframes gm-motion-enter {
    from { opacity: 0; transform: translateY(var(--motion-distance)); }
    to { opacity: 1; transform: none; }
}
@keyframes gm-motion-confirm {
    from { opacity: 0; transform: translate(-50%, calc(-50% + var(--motion-distance))); }
    to { opacity: 1; transform: translate(-50%, -50%); }
}

/* Error pages intentionally require no application script or database access. */
body:has(.gm-error-code) main > :is(img,p,h1,div,aside) {
    animation: gm-motion-enter var(--motion-slow) var(--motion-ease);
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    body [data-anim].gm-motion-pending { opacity: 1; transform: none; }
    body *, body *::before, body *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}