/* ======================================================
   ENIGMA MOTION SYSTEM
   Page transitions, viewport reveals and home intro.
   The longhand `translate` property keeps existing hover
   transforms and transitions completely independent.
====================================================== */

:root{
    --motion-duration: 820ms;
    --motion-page-duration: 760ms;
    --motion-exit-duration: 260ms;
    --motion-distance: 18px;
    --motion-ease: cubic-bezier(.22, 1, .36, 1);
    --motion-page-ease: cubic-bezier(.16, 1, .3, 1);
}

/* Page entrance is progressive enhancement. The inline
   bootstrap in <head> adds .motion-enabled before paint. */

html.motion-enabled body > main,
html.motion-enabled body > .admin-shell{
    transition:
        opacity var(--motion-page-duration) var(--motion-page-ease),
        translate var(--motion-page-duration) var(--motion-page-ease);
}

html.motion-enabled body:not(.motion-page-ready) > main,
html.motion-enabled body:not(.motion-page-ready) > .admin-shell{
    opacity:0;
    translate:0 14px;
}

html.motion-enabled body.motion-page-ready > main,
html.motion-enabled body.motion-page-ready > .admin-shell{
    opacity:1;
    translate:none;
}

html.motion-enabled body.motion-page-leaving > main,
html.motion-enabled body.motion-page-leaving > .admin-shell{
    opacity:0;
    translate:0 -8px;
    transition-duration:var(--motion-exit-duration);
    transition-timing-function:cubic-bezier(.4, 0, 1, 1);
}

html.motion-enabled .top-bar,
html.motion-enabled .header{
    transition:
        opacity 620ms var(--motion-page-ease),
        translate 720ms var(--motion-page-ease);
}

html.motion-enabled body:not(.motion-page-ready) .top-bar,
html.motion-enabled body:not(.motion-page-ready) .header{
    opacity:0;
    translate:0 -10px;
}

html.motion-enabled body.motion-page-ready .top-bar,
html.motion-enabled body.motion-page-ready .header{
    opacity:1;
    translate:none;
}

html.motion-enabled body.motion-page-leaving .top-bar,
html.motion-enabled body.motion-page-leaving .header{
    opacity:0;
    translate:0 -5px;
    transition-duration:var(--motion-exit-duration);
}

/* Viewport reveal. JS only adds this class to curated
   content elements, never to menus, modals or gallery images. */

html.motion-enabled .motion-reveal:not(.motion-visible){
    opacity:0;
    translate:0 var(--motion-distance);
    visibility:hidden;
}

html.motion-enabled .motion-reveal.motion-visible{
    visibility:visible;
}

/* Remove the three legacy page-intro timelines on auth pages.
   Form switching still uses its existing hover/state transitions. */

html.motion-enabled .auth-container,
html.motion-enabled .auth-panel,
html.motion-enabled .auth-preview,
html.motion-enabled .auth-brand,
html.motion-enabled .auth-heading,
html.motion-enabled .auth-slider,
html.motion-enabled .auth-toggle,
html.motion-enabled .auth-preview-card,
html.motion-enabled .login-slide,
html.motion-enabled .register-slide{
    animation-name:none;
}

/* Home wordmark intro. It appears once per browser session;
   the main page begins to surface while the mark fades away. */

.home-intro{
    position:fixed;
    inset:0;
    z-index:20000;

    display:grid;
    place-items:center;

    overflow:hidden;
    background:#fffdfd;

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:
        opacity 760ms cubic-bezier(.4, 0, .2, 1),
        visibility 0s linear 760ms;
}

body.home-intro-active{
    overflow:hidden;
}

.home-intro::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(183, 125, 134, .07),
            transparent 48%
        );
}

.home-intro__brand{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:24px;
    padding-left:clamp(12px, 2.5vw, 36px);
}

.home-intro__wordmark{
    color:#3e3131;
    font-size:clamp(38px, 8vw, 116px);
    font-weight:300;
    line-height:1;
    letter-spacing:clamp(12px, 2.5vw, 38px);
    white-space:nowrap;
}

.home-intro__line{
    width:min(220px, 35vw);
    height:1px;
    background:rgba(62, 49, 49, .42);
    transform:scaleX(0);
    transform-origin:center;
}

body.home-intro-active .home-intro{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transition:none;
}

body.home-intro-active .home-intro__wordmark{
    animation:
        enigma-wordmark-in
        1.35s
        .12s
        both
        var(--motion-page-ease);
}

body.home-intro-active .home-intro__line{
    animation:
        enigma-intro-line
        1.15s
        .48s
        both
        var(--motion-page-ease);
}

body.home-intro-exiting .home-intro{
    opacity:0;
    visibility:hidden;
    transition:
        opacity 760ms cubic-bezier(.4, 0, .2, 1),
        visibility 0s linear 760ms;
}

body.home-intro-exiting .home-intro__brand{
    opacity:0;
    translate:0 -5px;
    transition:
        opacity 560ms cubic-bezier(.4, 0, .2, 1),
        translate 700ms var(--motion-page-ease);
}

@keyframes enigma-wordmark-in{
    from{
        opacity:0;
        translate:0 12px;
        letter-spacing:clamp(17px, 3.25vw, 50px);
    }

    to{
        opacity:1;
        translate:none;
        letter-spacing:clamp(12px, 2.5vw, 38px);
    }
}

@keyframes enigma-intro-line{
    from{
        opacity:0;
        transform:scaleX(0);
    }

    to{
        opacity:1;
        transform:scaleX(1);
    }
}

/* If the external motion script cannot initialize, the inline
   fail-safe restores the page instead of leaving it hidden. */

html.motion-fallback body > main,
html.motion-fallback body > .admin-shell,
html.motion-fallback .top-bar,
html.motion-fallback .header,
html.motion-fallback .motion-reveal{
    opacity:1 !important;
    translate:none !important;
    visibility:visible !important;
    transition:none !important;
    animation:none !important;
}

html.motion-fallback .home-intro{
    display:none !important;
}

html.motion-fallback body{
    overflow:visible !important;
}

@media(max-width:700px){
    :root{
        --motion-distance:12px;
        --motion-duration:700ms;
        --motion-page-duration:640ms;
    }

    .home-intro__brand{
        gap:18px;
        padding-left:12px;
    }

    .home-intro__wordmark{
        font-size:clamp(34px, 12vw, 58px);
        letter-spacing:clamp(9px, 3vw, 16px);
    }

    @keyframes enigma-wordmark-in{
        from{
            opacity:0;
            translate:0 9px;
            letter-spacing:clamp(12px, 4vw, 22px);
        }

        to{
            opacity:1;
            translate:none;
            letter-spacing:clamp(9px, 3vw, 16px);
        }
    }
}

@media(prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto !important;
    }

    html.motion-enabled body > main,
    html.motion-enabled body > .admin-shell,
    html.motion-enabled .top-bar,
    html.motion-enabled .header,
    html.motion-enabled .motion-reveal{
        opacity:1 !important;
        translate:none !important;
        visibility:visible !important;
        transition:none !important;
        animation:none !important;
    }

    .slide,
    .auth-page *,
    .auth-page *::before,
    .auth-page *::after,
    .main-image{
        animation:none !important;
        transition:none !important;
    }

    .home-intro{
        display:none !important;
    }
}