/* Afya theme — ink-spread enter / leave */

:root {
    --theme-fx-duration: 1400ms;
    --theme-fx-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --theme-ink-x: 92%;
    --theme-ink-y: 48px;
    --theme-ink-radius: 150vmax;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --theme-fx-duration: 1ms;
    }

    .theme-fx-overlay,
    .theme-toggle-btn [data-theme-icon],
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
        transition: none !important;
    }
}

/* Expanding ink blot (fallback + decorative edge) */
.theme-fx-overlay {
    position: fixed;
    inset: 0;
    z-index: 20000;
    pointer-events: none;
    clip-path: circle(0px at var(--theme-ink-x) var(--theme-ink-y));
    will-change: clip-path, opacity;
}

.theme-fx-overlay[data-direction="to-dark"] {
    background:
        radial-gradient(circle at var(--theme-ink-x) var(--theme-ink-y),
            #1e293b 0%,
            #0f172a 42%,
            #020617 78%);
}

.theme-fx-overlay[data-direction="to-light"] {
    background:
        radial-gradient(circle at var(--theme-ink-x) var(--theme-ink-y),
            #ffffff 0%,
            #f8fafc 40%,
            #eef2ff 78%);
}

.theme-fx-overlay.is-spreading {
    animation: theme-ink-spread var(--theme-fx-duration) var(--theme-fx-ease) both;
}

.theme-fx-overlay.is-settling {
    animation: theme-ink-settle 220ms ease-out both;
}

@keyframes theme-ink-spread {
    0% {
        clip-path: circle(0px at var(--theme-ink-x) var(--theme-ink-y));
        filter: contrast(1.08) saturate(1.05);
    }
    55% {
        filter: contrast(1.04) saturate(1.02);
    }
    100% {
        clip-path: circle(var(--theme-ink-radius) at var(--theme-ink-x) var(--theme-ink-y));
        filter: contrast(1) saturate(1);
    }
}

@keyframes theme-ink-settle {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* View Transitions API — new theme spreads like ink over the old page */
@supports (view-transition-name: none) {
    ::view-transition-group(root) {
        animation-duration: var(--theme-fx-duration);
        animation-timing-function: var(--theme-fx-ease);
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none;
        mix-blend-mode: normal;
        height: 100%;
        width: 100%;
        object-fit: cover;
    }

    ::view-transition-image-pair(root) {
        isolation: isolate;
    }

    html.theme-ink-spreading::view-transition-old(root) {
        z-index: 1;
    }

    html.theme-ink-spreading::view-transition-new(root) {
        z-index: 2;
        animation: theme-ink-spread var(--theme-fx-duration) var(--theme-fx-ease) both;
    }
}

/* Theme toggle icon swap */
.theme-toggle-btn [data-theme-icon] {
    display: inline-block;
    transform-origin: center;
    transition: transform 280ms var(--theme-fx-ease), opacity 220ms ease;
}

.theme-toggle-btn.is-theme-spinning [data-theme-icon] {
    animation: theme-icon-swap 520ms var(--theme-fx-ease) both;
}

@keyframes theme-icon-swap {
    0%   { transform: rotate(0deg) scale(1); opacity: 1; }
    40%  { transform: rotate(-80deg) scale(0.5); opacity: 0; }
    60%  { transform: rotate(80deg) scale(0.5); opacity: 0; }
    100% { transform: rotate(0deg) scale(1); opacity: 1; }
}