/*
 * Motion: page entrances and small interaction animations (script side: js/motion.js).
 *
 * Everything here is scaled by --memex-motion (1 = on, 0 = off): durations, delays and distances are
 * multiplied by it, so at 0 every animation is over before it starts. It's 0 for anyone whose system
 * asks for reduced motion, and a tenant can switch motion off for their portal by adding
 *     :root { --memex-motion: 0; }
 * to their Custom CSS (injected after this file, so it wins).
 *
 * Only opacity and the individual translate/scale properties are animated - those compose with any
 * transform Bootstrap or Masonry set inline, and don't cause layout. Colours come from the tenant's
 * --root-* variables.
 */

:root {
    --memex-motion: 1;
    --memex-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --memex-duration-fast: calc(var(--memex-motion) * 160ms);
    --memex-duration: calc(var(--memex-motion) * 250ms);
    --memex-duration-slow: calc(var(--memex-motion) * 450ms);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --memex-motion: 0 !important;
    }
}

/* Fade in, rising by --memex-rise */
@keyframes memex-rise {
    from {
        opacity: 0;
        translate: 0 calc(var(--memex-motion) * var(--memex-rise, 12px));
    }
}

/* ---- Moving between pages ---- */

/* Pages load as ordinary navigations: the browser keeps the old page on screen until the new one has
   painted, so the header and sidebar never blank. A cross-document view transition (@view-transition)
   was tried here and made the whole screen, header and sidebar included, flash white while the next
   page loaded - don't add it back. */

/* Progress bar along the bottom edge of the header while the next page loads (added by motion.js on
   link clicks). It's in the user-name colour, which tenants pick to stand out on their header -
   their primary/secondary are often the header colour itself. */
.memex-nav-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--root-banner-user-name);
    transform-origin: left center;
    scale: 0 1;
    pointer-events: none;
    animation: memex-nav-progress calc(var(--memex-motion) * 8s) var(--memex-ease-out) forwards;
}

@keyframes memex-nav-progress {
    to {
        scale: 0.92 1;
    }
}

/* ---- Sidebar ---- */

/* Labels fade in one after another as the sidebar widens (--i is each item's position, set in
   _Navigation), and fade straight out as it narrows */
#sidebar-container span {
    transition: opacity var(--memex-duration) ease-out, translate var(--memex-duration) var(--memex-ease-out);
    transition-delay: calc(var(--memex-motion) * min(40ms + var(--i, 0) * 20ms, 240ms));
}

#sidebar-container.sidebar-collapsed span {
    opacity: 0;
    translate: calc(var(--memex-motion) * -6px) 0;
    transition-duration: var(--memex-duration-fast);
    transition-delay: 0s;
}

#sidebar-container .list-group-item {
    transition: background-color var(--memex-duration-fast) ease-out;
}

    #sidebar-container .list-group-item:not(.active):hover {
        background-color: rgba(0, 0, 0, 0.04);
    }

    /* A tab's icon nudges towards its label on hover (tabs only - the collapse arrow has its own
       rotate transition) */
    #sidebar-container a.list-group-item > .d-flex > :first-child {
        transition: translate var(--memex-duration-fast) var(--memex-ease-out);
    }

    #sidebar-container a.list-group-item:hover > .d-flex > :first-child {
        translate: calc(var(--memex-motion) * 2px) 0;
    }

/* ---- Page content ---- */

/* Panels rise in one after another as the page opens (the grid's first item is an empty spacer). They
   start part-visible rather than invisible, so a new page never opens as a blank screen. */
.masonry-grid > .masonry-grid-item {
    animation: memex-panel-in calc(var(--memex-motion) * 300ms) var(--memex-ease-out) backwards;
}

    .masonry-grid > .masonry-grid-item:nth-child(3) {
        animation-delay: calc(var(--memex-motion) * 30ms);
    }

    .masonry-grid > .masonry-grid-item:nth-child(4) {
        animation-delay: calc(var(--memex-motion) * 60ms);
    }

    .masonry-grid > .masonry-grid-item:nth-child(5) {
        animation-delay: calc(var(--memex-motion) * 90ms);
    }

    .masonry-grid > .masonry-grid-item:nth-child(n+6) {
        animation-delay: calc(var(--memex-motion) * 120ms);
    }

@keyframes memex-panel-in {
    from {
        opacity: 0.5;
        translate: 0 calc(var(--memex-motion) * 8px);
    }
}

/* A panel's content settling in as its skeleton placeholder goes (MemexMotion.reveal). It starts
   part-visible - from fully transparent every loaded panel would blink empty first. */
.memex-reveal {
    animation: memex-reveal var(--memex-duration) var(--memex-ease-out);
}

@keyframes memex-reveal {
    from {
        opacity: 0.4;
        translate: 0 calc(var(--memex-motion) * 4px);
    }
}

/* ---- Header ---- */

/* Profile, notification and message dropdowns open out of the corner they hang from */
.navbar .dropdown-menu.show {
    transform-origin: top right;
    animation: memex-pop var(--memex-duration-fast) var(--memex-ease-out);
}

@keyframes memex-pop {
    from {
        opacity: 0;
        scale: calc(1 - var(--memex-motion) * 0.04);
        translate: 0 calc(var(--memex-motion) * -4px);
    }
}

/* Unread dots send out one ripple when they appear */
#unreadDotNotifications::after,
#unreadDotMessages::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: inherit;
    opacity: 0;
    pointer-events: none;
    animation: memex-ping calc(var(--memex-motion) * 1s) ease-out;
}

@keyframes memex-ping {
    from {
        opacity: 0.6;
        scale: 1;
    }

    to {
        opacity: 0;
        scale: 2.8;
    }
}

/* ---- Login ---- */

/* Welcome text, then the login panel, rise in */
.memex-enter {
    animation: memex-rise var(--memex-duration-slow) var(--memex-ease-out) backwards;
}

.memex-enter-delay {
    animation-delay: calc(var(--memex-motion) * 120ms);
}

/* Tenants without a background image get soft shapes in their colours drifting over the gradient -
   lighter shades only, so on a light part of the gradient they glow rather than smudge */
.login-hero {
    position: relative;
    isolation: isolate;
}

.login-aurora {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

    .login-aurora > span {
        position: absolute;
        width: 70%;
        aspect-ratio: 1;
        border-radius: 50%;
        opacity: 0.6;
        animation: memex-aurora 28s ease-in-out infinite alternate;
    }

        .login-aurora > span:nth-child(1) {
            top: -25%;
            left: -20%;
            background: radial-gradient(closest-side, var(--root-primary-lighten-25), transparent);
        }

        .login-aurora > span:nth-child(2) {
            right: -15%;
            bottom: -30%;
            background: radial-gradient(closest-side, var(--root-secondary-lighten-25), transparent);
            animation-duration: 34s;
            animation-direction: alternate-reverse;
        }

        .login-aurora > span:nth-child(3) {
            top: 35%;
            left: 30%;
            width: 50%;
            background: radial-gradient(closest-side, var(--root-primary-lighten), transparent);
            animation-duration: 40s;
            animation-delay: -12s;
        }

@keyframes memex-aurora {
    50% {
        translate: calc(var(--memex-motion) * 12%) calc(var(--memex-motion) * 8%);
        scale: calc(1 + var(--memex-motion) * 0.08);
    }

    100% {
        translate: calc(var(--memex-motion) * -6%) calc(var(--memex-motion) * 14%);
    }
}

/* Login button while we redirect to the sign-in page (motion.js) - working, not disabled-looking */
.memex-login-btn.is-loading,
.memex-login-btn.is-loading:disabled {
    opacity: 1;
    cursor: progress;
}