/* =========================================================
   TRADEJOUR ANIMATION SYSTEM V1
   ========================================================= */

:root {

    --tj-motion-fast:
        140ms;

    --tj-motion-normal:
        260ms;

    --tj-motion-page:
        440ms;

    --tj-motion-ease:
        cubic-bezier(
            .22,
            .8,
            .24,
            1
        );

}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes tj-fade-in {

    from {
        opacity:
            0;
    }

    to {
        opacity:
            1;
    }

}


@keyframes tj-rise-in {

    from {
        opacity:
            0;

        transform:
            translateY(10px);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0);
    }

}


@keyframes tj-rise-soft {

    from {
        opacity:
            0;

        transform:
            translateY(6px);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0);
    }

}


@keyframes tj-pop-in {

    from {
        opacity:
            0;

        transform:
            translateY(-5px)
            scale(.985);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0)
            scale(1);
    }

}


@keyframes tj-modal-in {

    from {
        opacity:
            0;

        transform:
            translateY(10px)
            scale(.985);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0)
            scale(1);
    }

}


@keyframes tj-backdrop-in {

    from {
        opacity:
            0;
    }

    to {
        opacity:
            1;
    }

}


/* =========================================================
   PUBLIC LANDING
   ========================================================= */

.tj-landing-nav {

    animation:
        tj-fade-in
        420ms
        var(--tj-motion-ease)
        both;

}


.tj-landing-eyebrow {

    animation:
        tj-rise-in
        480ms
        var(--tj-motion-ease)
        60ms
        both;

}


.tj-landing-hero h1 {

    animation:
        tj-rise-in
        560ms
        var(--tj-motion-ease)
        110ms
        both;

}


.tj-landing-lead {

    animation:
        tj-rise-in
        520ms
        var(--tj-motion-ease)
        170ms
        both;

}


.tj-landing-hero-actions {

    animation:
        tj-rise-in
        500ms
        var(--tj-motion-ease)
        220ms
        both;

}


.tj-landing-grid
> .tj-landing-card {

    animation:
        tj-rise-soft
        480ms
        var(--tj-motion-ease)
        both;

}


.tj-landing-grid
> .tj-landing-card:nth-child(1) {

    animation-delay:
        120ms;

}


.tj-landing-grid
> .tj-landing-card:nth-child(2) {

    animation-delay:
        170ms;

}


.tj-landing-grid
> .tj-landing-card:nth-child(3) {

    animation-delay:
        220ms;

}


.tj-landing-grid
> .tj-landing-card:nth-child(4) {

    animation-delay:
        270ms;

}


.tj-landing-footer {

    animation:
        tj-fade-in
        450ms
        var(--tj-motion-ease)
        240ms
        both;

}


/* =========================================================
   AUTH
   ========================================================= */

.tj-auth-card {

    animation:
        tj-rise-in
        430ms
        var(--tj-motion-ease)
        both;

}


/* =========================================================
   INTERNAL PAGE ENTRANCE V1.1
   ========================================================= */

/*
   Animate ONLY the page shell.

   Important:
   final transform is NONE, not translateY(0).

   This prevents persistent stacking contexts and keeps
   dropdown z-index behavior intact.
*/

@keyframes tj-page-shell-in {

    from {

        opacity:
            0;

        transform:
            translateY(8px);

    }

    to {

        opacity:
            1;

        transform:
            none;

    }

}


@keyframes tj-page-shell-fade {

    from {

        opacity:
            0;

    }

    to {

        opacity:
            1;

    }

}


main.tj-motion-page {

    animation:
        tj-page-shell-in
        380ms
        var(--tj-motion-ease)
        both;

}


/*
   Mobile V5:
   opacity only.
   No transform, width, position or layout changes.
*/

@media (
    max-width: 700px
) {

    main.tj-motion-page {

        animation:
            tj-page-shell-fade
            280ms
            ease
            both;

    }

}


/* =========================================================
   STACKING SAFETY
   ========================================================= */

.tj-select.is-open {

    z-index:
        5000;

}


.tj-date-picker.is-open {

    z-index:
        5000;

}


/* INTERNAL PAGE ENTRANCE V1.1 END */


/* =========================================================
   ACCOUNT SWITCHER
   ========================================================= */

.account-dropdown[open]
.account-dropdown-menu {

    transform-origin:
        top right;

    animation:
        tj-pop-in
        180ms
        var(--tj-motion-ease)
        both;

}


.account-dropdown-summary {

    transition:
        border-color
        var(--tj-motion-fast)
        ease,
        background
        var(--tj-motion-fast)
        ease,
        box-shadow
        var(--tj-motion-fast)
        ease;

}


/* =========================================================
   CUSTOM SELECT MENUS
   ========================================================= */

.tj-select-menu {

    transform-origin:
        top center;

}


.tj-select-menu:not([hidden]) {

    animation:
        tj-pop-in
        160ms
        var(--tj-motion-ease)
        both;

}


/* =========================================================
   SCREENSHOT CATEGORY MODAL
   ========================================================= */

.screenshot-category-modal.active {

    animation:
        tj-backdrop-in
        160ms
        ease
        both;

}


.screenshot-category-modal.active
.screenshot-category-dialog {

    animation:
        tj-modal-in
        230ms
        var(--tj-motion-ease)
        both;

}


/* =========================================================
   IMAGE VIEWER MODALS
   ========================================================= */

.modal.active
.modal-image-container,
.screenshot-modal.active
.modal-image-container {

    animation:
        tj-modal-in
        220ms
        var(--tj-motion-ease)
        both;

}


/* =========================================================
   INTERACTIVE ELEMENT TRANSITIONS
   ========================================================= */

.tj-nav-icon-link,
.tj-landing-primary,
.tj-landing-secondary,
.tj-landing-signin,
.tj-landing-register,
.accounts-archive-button,
.screenshot-category-add-button,
.screenshot-category-modal-close {

    transition:
        transform
        var(--tj-motion-fast)
        ease,
        border-color
        var(--tj-motion-fast)
        ease,
        background
        var(--tj-motion-fast)
        ease,
        color
        var(--tj-motion-fast)
        ease,
        opacity
        var(--tj-motion-fast)
        ease,
        box-shadow
        var(--tj-motion-fast)
        ease;

}


/* =========================================================
   DESKTOP HOVER POLISH V1.1
   ========================================================= */

@media (
    hover: hover
)
and (
    pointer: fine
) {

    .tj-nav-icon-link:hover {

        transform:
            translateY(-1px);

    }


    .tj-landing-primary:hover,
    .tj-landing-secondary:hover,
    .tj-landing-signin:hover,
    .tj-landing-register:hover {

        transform:
            translateY(-1px);

    }


    /*
       Landing cards are isolated and may move.
    */

    .tj-landing-card {

        transition:
            transform
            180ms
            var(--tj-motion-ease),
            border-color
            180ms
            ease,
            box-shadow
            180ms
            ease;

    }


    .tj-landing-card:hover {

        transform:
            translateY(-2px);

        border-color:
            rgba(
                255,
                255,
                255,
                .13
            );

        box-shadow:
            0
            16px
            38px
            rgba(
                0,
                0,
                0,
                .18
            );

    }


    /*
       Internal structural cards DO NOT move.

       Transform on these cards can create stacking contexts
       and interfere with selects, menus and overlays.
    */

    :is(
        .panel,
        .account-settings-card,
        .account-preview-card,
        .screenshot-category-card
    ) {

        transition:
            border-color
            180ms
            ease,
            box-shadow
            180ms
            ease;

    }


    :is(
        .panel,
        .account-settings-card,
        .account-preview-card,
        .screenshot-category-card
    ):hover {

        border-color:
            rgba(
                255,
                255,
                255,
                .13
            );

        box-shadow:
            0
            14px
            34px
            rgba(
                0,
                0,
                0,
                .14
            );

    }

}


/* DESKTOP HOVER POLISH V1.1 END */


/* =========================================================
   PRESS FEEDBACK
   ========================================================= */

@media (
    pointer: fine
) {

    .tj-landing-primary:active,
    .tj-landing-secondary:active,
    .tj-landing-signin:active,
    .tj-landing-register:active,
    .tj-nav-icon-link:active {

        transform:
            translateY(0)
            scale(.98);

    }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (
    prefers-reduced-motion: reduce
) {

    *,
    *::before,
    *::after {

        animation-duration:
            .01ms !important;

        animation-delay:
            0ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

        transition-duration:
            .01ms !important;

    }

}

/* TRADEJOUR ANIMATION SYSTEM V1 END */