/* Motion design tokens (Emil Kowalski–style: purposeful, ease-out enters, transform/opacity) */
:root {
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
    --motion-duration-fast: 180ms;
    --motion-duration: 220ms;
    --motion-duration-slow: 420ms;
    --motion-duration-ring: 850ms;
    --motion-duration-check: 240ms;
    --motion-duration-check-mark: 280ms;
    --theme-fade-duration: 350ms;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --motion-duration-fast: 0ms;
        --motion-duration: 0ms;
        --motion-duration-slow: 0ms;
        --motion-duration-ring: 0ms;
        --motion-duration-check: 0ms;
        --motion-duration-check-mark: 0ms;
        --theme-fade-duration: 0ms;
    }
}

/* Dark / light theme: fullscreen surface crossfade (see applyDarkTheme in index.html) */
#theme-transition-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--theme-fade-duration) var(--ease-in-out);
    -webkit-transition: opacity var(--theme-fade-duration) var(--ease-in-out);
}

#theme-transition-overlay.is-active {
    pointer-events: auto;
}

#theme-transition-overlay.is-visible {
    opacity: 1;
}

/* Tab navigation — subtle enter (replaces generic fade-in on every tab) */
.tab-content {
    animation: none;
}

.tab-content.motion-tab-enter {
    animation: motion-tab-in var(--motion-duration) var(--ease-out) both;
}

/* Opacity only — transform on .tab-content breaks position:fixed headers inside the tab */
@keyframes motion-tab-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Full-screen overlays (About, Account, Zakat, Analytics, explanations) */
.motion-overlay-panel {
    opacity: 0;
    transform: translateY(10px);
    will-change: opacity, transform;
}

.motion-overlay-panel.is-motion-visible {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity var(--motion-duration) var(--ease-out),
        transform var(--motion-duration) var(--ease-out);
}

.motion-overlay-panel.is-motion-exiting {
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity var(--motion-duration-fast) var(--ease-in),
        transform var(--motion-duration-fast) var(--ease-in);
}

/* Quran surah detail push */
.motion-page-enter {
    animation: motion-page-in var(--motion-duration) var(--ease-out) both;
}

.motion-page-exit {
    animation: motion-page-out var(--motion-duration-fast) var(--ease-in) both;
}

@keyframes motion-page-in {
    from {
        opacity: 0;
        transform: translateX(12px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes motion-page-out {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(10px);
    }
}

/* Prayer / fast check feedback */
@keyframes motion-check-pop {
    0% {
        transform: scale(1);
    }
    45% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.prayer-check-button.motion-check-pop,
.fast-check-button.motion-check-pop {
    animation: motion-check-pop 0.28s var(--ease-out);
}

/* Prayer row check: fill fade + ring complete + check draw */
.prayer-check-button {
    overflow: hidden;
}

.prayer-check-fill {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    background: #34c759;
}

.prayer-check-fill.out-of-time,
.prayer-check-button.checked.out-of-time .prayer-check-fill {
    background: #8e8e93;
}

html.dark-theme .prayer-check-fill.out-of-time,
html.dark-theme .prayer-check-button.checked.out-of-time .prayer-check-fill {
    background: #8e8e93;
}

.prayer-check-mark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
}

.prayer-check-button.checked .prayer-check-fill {
    opacity: 1;
}

.prayer-check-button.checked .prayer-check-mark {
    opacity: 1;
}

/* Completed: no live-window progress ring (only solid fill + ✓). */
.prayer-check-button.checked svg {
    display: none;
}

/* Long-press late ↔ on-time: new fill color fades in over the old; ✓ unchanged */
.prayer-check-fill-flip-overlay {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
}

.prayer-check-button.motion-late-flip-active {
    overflow: hidden;
}

.prayer-check-button.checked::after {
    content: none;
    display: none;
}

.prayer-check-button.progress-indicator {
    background: transparent;
}

.prayer-check-button.progress-indicator.checked {
    background: transparent;
}

.prayer-check-button.progress-indicator svg {
    z-index: 1;
}

.prayer-check-button.motion-check-active .progress-ring-fill {
    transition: stroke-dashoffset var(--motion-duration-check) var(--ease-out) !important;
}

.prayer-check-button.motion-check-active .prayer-check-fill {
    transition: opacity var(--motion-duration-check) var(--ease-out);
}

.prayer-check-button.motion-check-active.motion-check-fade-out .prayer-check-fill {
    transition: opacity var(--motion-duration-check) var(--ease-in);
}

.prayer-check-mark.motion-check-draw-in {
    animation: motion-prayer-check-draw var(--motion-duration-check-mark) var(--ease-out) forwards;
}

.prayer-check-mark.motion-check-draw-out {
    animation: motion-prayer-check-draw-out var(--motion-duration-check-mark) var(--ease-in) forwards;
}

@keyframes motion-prayer-check-draw {
    0% {
        opacity: 0;
        clip-path: inset(50% 50% 50% 50%);
        transform: translate(-50%, -50%) scale(0.85);
    }
    100% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes motion-prayer-check-draw-out {
    0% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        clip-path: inset(50% 50% 50% 50%);
        transform: translate(-50%, -50%) scale(0.85);
    }
}

/* Social appreciation heart */
@keyframes motion-heart-pop {
    0% {
        transform: scale(1);
    }
    40% {
        transform: scale(1.22);
    }
    100% {
        transform: scale(1);
    }
}

.social-prayer-heart.motion-heart-pop {
    animation: motion-heart-pop 0.32s var(--ease-out);
}

/* Charts & graphs — appear and update */
.motion-graph-reveal {
    animation: motion-graph-in var(--motion-duration-slow) var(--ease-out) backwards;
    animation-delay: calc(var(--motion-stagger-i, 0) * 14ms);
}

@keyframes motion-graph-in {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.analytics-day.motion-graph-reveal {
    animation-duration: var(--motion-duration);
}

/* Progress rings & bars */
.completion-ring-green,
.completion-ring-grey,
.completion-ring-yellow,
.completion-ring-gold,
.combined-ring-yellow,
.combined-ring-green,
.combined-ring-grey,
.combined-ring-gold,
.mini-ring-yellow,
.mini-ring-green,
.mini-ring-grey,
.mini-ring-gold,
.social-ring-fg,
.prayer-check-button.progress-indicator .progress-ring-fill {
    transition:
        stroke-dashoffset var(--motion-duration-ring) var(--ease-out),
        stroke-dasharray var(--motion-duration-ring) var(--ease-out),
        stroke var(--motion-duration-fast) ease;
}

.zakat-progress-fill {
    transition: width var(--motion-duration-slow) var(--ease-out);
}

/* Qibla compass — smooth follow while tab is active */
body.motion-qibla-active .qibla-compass {
    transition: transform 80ms var(--ease-out);
}

body.motion-qibla-active .qibla-compass .qibla-kaaba-image {
    transition: transform 80ms var(--ease-out);
}

/* Settings toggles — slide + color crossfade (not checkbox ::before) */
.settings-toggle-track {
    transition: background-color 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.settings-toggle-thumb {
    transition: transform 0.35s cubic-bezier(0.36, 0.66, 0.04, 1);
    will-change: transform;
}

.settings-toggle-control:active .settings-toggle-thumb {
    transform: scale(0.94);
}

.settings-toggle-control:active .settings-toggle-switch:checked + .settings-toggle-track .settings-toggle-thumb {
    transform: translateX(20px) scale(0.94);
}

@media (prefers-reduced-motion: reduce) {
    .settings-toggle-track,
    .settings-toggle-thumb {
        transition-duration: 0.01ms;
    }
}

/* Press feedback */
.prayer-check-button:not(.disabled):not(.future):active,
.prayer-item.prayer-item--check-tappable:active .prayer-check-button:not(.disabled):not(.future),
.fast-check-button:not(.disabled):not(.future):active,
.social-prayer-heart:not(.social-prayer-heart--static):active,
.progress-card-info-btn:active,
.about-back-button:active,
.settings-account-btn:active {
    transform: scale(0.97);
    transition: transform 0.1s var(--ease-out);
}

.prayer-check-button,
.fast-check-button {
    transition:
        background var(--motion-duration-fast) var(--ease-out),
        border-color var(--motion-duration-fast) var(--ease-out),
        transform 0.1s var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
    .tab-content.motion-tab-enter,
    .motion-overlay-panel,
    .motion-page-enter,
    .motion-page-exit,
    .motion-graph-reveal,
    .prayer-check-button.motion-check-pop,
    .fast-check-button.motion-check-pop,
    .social-prayer-heart.motion-heart-pop {
        animation: none !important;
        transition: none !important;
    }

    .motion-overlay-panel.is-motion-visible,
    .motion-overlay-panel.is-motion-exiting {
        opacity: 1;
        transform: none;
    }

    body.motion-qibla-active .qibla-compass,
    body.motion-qibla-active .qibla-compass .qibla-kaaba-image {
        transition: none;
    }
}