/*
  ----------------------------------------
  Transitions
  ----------------------------------------
*/

@layer styles {
    /* Crossfade main content (different IDs prevent cross-layout transitions) */
    #user-main {
        view-transition-name: user-main;
    }
    #admin-main {
        view-transition-name: admin-main;
    }
    ::view-transition-old(user-main),
    ::view-transition-new(user-main),
    ::view-transition-old(admin-main),
    ::view-transition-new(admin-main) {
        animation-duration: 300ms;
        animation-timing-function: ease-in-out;
    }

    /* Active nav underline animation */
    .nav-link.active::after {
        view-transition-name: active-nav;
    }
    ::view-transition-group(active-nav) {
        /* Sweet easing function (source: https://easingwizard.com) */
        animation-timing-function: linear(
            0,
            0.383 7.5%,
            0.68 15.5%,
            0.891 24%,
            0.969 28.6%,
            1.027 33.4%,
            1.061 37.4%,
            1.084 41.7%,
            1.097 46.2%,
            1.1 51.2%,
            1.085 59.9%,
            1.014 84.2%,
            1
        );
        animation-duration: 320ms;
    }
    ::view-transition-old(active-nav),
    ::view-transition-new(active-nav) {
        height: 100%;
    }

    /* Fade in */
    .fade-in {
        animation: fade-in ease 400ms;
    }
    @keyframes fade-in {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    /* Fade out */
    .fade-out {
        animation: fade-out ease 300ms forwards;
    }
    @keyframes fade-out {
        from {
            opacity: 1;
        }
        to {
            opacity: 0;
        }
    }

    /* Ephemeral (fade in quickly, then fade out after n seconds) */
    @keyframes ephemeral {
        0%,
        100% {
            opacity: 0;
        }
        5%,
        70% {
            opacity: 1;
        }
    }

    /* Grow out */
    .grow-out {
        animation: grow-out ease-in-out 200ms;
    }
    @keyframes grow-out {
        from {
            transform: scaleX(0);
            transform-origin: center;
        }
        to {
            transform: scaleX(1);
            transform-origin: center;
        }
    }

    /* Fly in */
    .fly-in {
        animation: fly-in ease-out 400ms;
    }
    @keyframes fly-in {
        from {
            opacity: 0;
            transform: translateY(-3%);
            transform-origin: center;
        }

        to {
            opacity: 1;
            transform: translateY(0);
            transform-origin: center;
        }
    }

    /* Ping dot effect */
    @keyframes ping {
        75%,
        100% {
            transform: scale(2);
            opacity: 0;
        }
    }
    .ping-dot {
        animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
    }

    /* Ambient background glows — large, blurred, drifting blobs behind content.
       Parent must have `position: relative` and `isolation: isolate` so the
       z-index: -1 stays behind siblings without falling behind the page bg. */
    .ambient-glows {
        position: absolute;
        inset: 0;
        overflow: hidden;
        pointer-events: none;
        z-index: -1;
    }
    .ambient-glow {
        position: absolute;
        width: 55vw;
        height: 55vw;
        border-radius: 9999px;
        filter: blur(100px);
        will-change: transform, opacity;
    }
    .ambient-glow-blue {
        top: -15%;
        left: -15%;
        background: rgb(58 123 213 / 0.22); /* #3a7bd5 — punchier so the movement reads */
        animation: ambient-drift-blue 14s ease-in-out infinite;
    }
    .ambient-glow-cyan {
        bottom: -15%;
        right: -15%;
        background: rgb(0 210 255 / 0.22); /* #00d2ff */
        animation: ambient-drift-cyan 16s ease-in-out infinite;
        animation-delay: -6s; /* offset so the two blobs breathe out of sync */
    }

    /* Blue blob drifts down-right and scales up, then returns */
    @keyframes ambient-drift-blue {
        0%, 100% {
            transform: translate(0, 0) scale(1);
            opacity: 0.9;
        }
        33% {
            transform: translate(25%, 15%) scale(1.15);
            opacity: 0.5;
        }
        66% {
            transform: translate(10%, 30%) scale(0.95);
            opacity: 1;
        }
    }

    /* Cyan blob drifts up-left with a different path so they cross */
    @keyframes ambient-drift-cyan {
        0%, 100% {
            transform: translate(0, 0) scale(1);
            opacity: 0.6;
        }
        40% {
            transform: translate(-30%, -20%) scale(1.2);
            opacity: 1;
        }
        70% {
            transform: translate(-10%, -10%) scale(0.9);
            opacity: 0.5;
        }
    }
}