/* Shared motion + ambient shapes for a modern feel */

@view-transition {
    navigation: auto;
}

::view-transition-old(root) {
    animation: sq-page-fade-out .22s ease-out both;
}

::view-transition-new(root) {
    animation: sq-page-fade-in .34s cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes sq-page-fade-out {
    to {
        opacity: 0;
        transform: translateY(-8px) scale(.992);
        filter: blur(2px);
    }
}

@keyframes sq-page-fade-in {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.992);
        filter: blur(2px);
    }
    to {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

@keyframes sq-float-a {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    50% { transform: translate3d(12px, -18px, 0) rotate(8deg); }
}

@keyframes sq-float-b {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50% { transform: translate3d(-16px, 14px, 0) scale(1.06); }
}

@keyframes sq-enter {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

body.is-page-entering .page-enter-target {
    animation: sq-enter .48s cubic-bezier(.22, 1, .36, 1) both;
}

body.is-page-exiting {
    opacity: .55;
    transform: translateY(-6px);
    filter: blur(1px);
    transition: opacity .18s ease, transform .18s ease, filter .18s ease;
}

.ambient-shapes {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.ambient-shapes__blob {
    position: absolute;
    border-radius: 40% 60% 55% 45% / 50% 40% 60% 50%;
    filter: blur(2px);
    opacity: .55;
    will-change: transform;
}

.ambient-shapes__blob--a {
    width: 22rem;
    height: 22rem;
    inset-block-start: -6rem;
    inset-inline-end: -5rem;
    background: radial-gradient(circle at 35% 35%, rgba(200, 149, 83, .35), rgba(200, 149, 83, .05) 68%, transparent 72%);
    animation: sq-float-a 14s ease-in-out infinite;
}

.ambient-shapes__blob--b {
    width: 26rem;
    height: 26rem;
    inset-block-end: -8rem;
    inset-inline-start: -7rem;
    background: radial-gradient(circle at 60% 40%, rgba(22, 103, 125, .28), rgba(22, 103, 125, .06) 65%, transparent 72%);
    animation: sq-float-b 17s ease-in-out infinite;
}

.ambient-shapes__ring {
    position: absolute;
    inset-block-start: 18%;
    inset-inline-end: 8%;
    width: 9rem;
    height: 9rem;
    border: 2px solid rgba(22, 103, 125, .14);
    border-radius: 50%;
    animation: sq-float-a 20s ease-in-out infinite reverse;
}

.ambient-shapes__ring::after {
    content: "";
    position: absolute;
    inset: .9rem;
    border: 2px dashed rgba(200, 149, 83, .28);
    border-radius: 50%;
}

.ambient-shapes__dot {
    position: absolute;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: #c89553;
    box-shadow:
        3.5rem 2rem 0 rgba(22, 103, 125, .35),
        -2rem 4rem 0 rgba(200, 149, 83, .28),
        6rem -1rem 0 rgba(22, 103, 125, .18);
    inset-block-start: 42%;
    inset-inline-start: 6%;
    opacity: .7;
    animation: sq-float-b 12s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }

    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation: none !important;
    }

    .ambient-shapes__blob,
    .ambient-shapes__ring,
    .ambient-shapes__dot,
    body.is-page-entering .page-enter-target {
        animation: none !important;
    }

    body.is-page-exiting {
        transition: none !important;
        opacity: 1;
        transform: none;
        filter: none;
    }
}