/* Animations CSS — migrated from Angular animations */

/* =============================================
   Route Transition Surface Layout (global — not scoped)
   ============================================= */

.content-area-route-stack {
    width: 100%;
    min-height: 100%;
    position: relative;
}

.content-area-current,
.content-area-previous {
    width: 100%;
    min-height: 100%;
    position: relative;
}

.content-area-previous {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.content-area-route-stack.content-area-navigating {
    height: 100vh;
    overflow: hidden;
}

/* Hide scrollbar on html during transitions to prevent layout jump */
html:has(.content-area-navigating) {
    overflow-y: scroll;
    overflow-x: hidden;
}

.content-area-route-stack.content-area-navigating .content-area-current,
.content-area-route-stack.content-area-navigating .content-area-previous {
    position: absolute;
    inset: 0;
    height: 100vh;
    overflow: hidden;
}

/* Reset leftcol from position:fixed back to flow during transitions.
   !important needed to override scoped .leftcol[b-xxxx] selectors
   in each page's .razor.css which have higher specificity. */
.content-area-route-stack.content-area-navigating .leftcol {
    position: relative !important;
    left: auto !important;
    width: 50% !important;
    height: 100vh;
    max-height: 100vh;
    pointer-events: auto !important;
}

.content-area-route-stack.content-area-navigating .rightcol {
    margin-left: 0 !important;
    width: 50% !important;
    flex: 0 0 50% !important;
}

/* =============================================
   Scissors Route Transition Keyframes
   ============================================= */

@keyframes scissorDownLeft {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, -100vh, 0); }
}

@keyframes scissorDownLeftEnter {
    from { transform: translate3d(0, 100vh, 0); }
    to   { transform: translate3d(0, 0, 0); }
}

@keyframes scissorDownLeftHandoff {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, -100vh, 0); }
}

@keyframes scissorDownRight {
    from { transform: translate3d(0, -100vh, 0); }
    to   { transform: translate3d(0, 0, 0); }
}

@keyframes scissorDownRightLeave {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, 100vh, 0); }
}

@keyframes scissorUpLeft {
    from { transform: translate3d(0, -100vh, 0); }
    to   { transform: translate3d(0, 0, 0); }
}

@keyframes scissorUpLeftLeave {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, 100vh, 0); }
}

@keyframes scissorUpRight {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(0, -100vh, 0); }
}

@keyframes scissorUpRightEnter {
    from { transform: translate3d(0, 100vh, 0); }
    to   { transform: translate3d(0, 0, 0); }
}

.content-area-current.scissor-down-enter .leftcol {
    animation: scissorDownLeftEnter 600ms cubic-bezier(.35, 0, .25, 1) both;
}

.content-area-previous.scissor-down-leave .leftcol {
    animation: scissorDownLeft 600ms cubic-bezier(.35, 0, .25, 1) both;
}

.content-area-current.scissor-down-enter .rightcol {
    animation: scissorDownRight 600ms cubic-bezier(.35, 0, .25, 1) both;
}

.content-area-previous.scissor-down-leave .rightcol {
    animation: scissorDownRightLeave 600ms cubic-bezier(.35, 0, .25, 1) both;
}

.content-area-current.scissor-up-enter .leftcol {
    animation: scissorUpLeft 600ms cubic-bezier(.35, 0, .25, 1) both;
}

.content-area-previous.scissor-up-leave .leftcol {
    animation: scissorUpLeftLeave 600ms cubic-bezier(.35, 0, .25, 1) both;
}

.content-area-current.scissor-up-enter .rightcol {
    animation: scissorUpRightEnter 600ms cubic-bezier(.35, 0, .25, 1) both;
}

.content-area-previous.scissor-up-leave .rightcol {
    animation: scissorUpRight 600ms cubic-bezier(.35, 0, .25, 1) both;
}

.content-area-current.scissor-down-delay-enter .leftcol {
    animation: scissorDownLeftEnter 600ms 100ms cubic-bezier(.35, 0, .25, 1) both;
}

.content-area-previous.scissor-down-delay-leave .leftcol {
    animation: scissorDownLeftHandoff 600ms 100ms cubic-bezier(.35, 0, .25, 1) both;
}

.content-area-current.scissor-down-delay-enter .rightcol {
    animation: scissorDownRight 600ms 100ms cubic-bezier(.35, 0, .25, 1) both;
}

.content-area-previous.scissor-down-delay-leave .rightcol {
    animation: scissorDownRightLeave 600ms 100ms cubic-bezier(.35, 0, .25, 1) both;
}

.content-area-current.scissor-down-enter .rightcol,
.content-area-current.scissor-down-delay-enter .rightcol,
.content-area-previous.scissor-up-leave .rightcol {
    position: relative;
    z-index: 5;
    background-color: #fff;
}

.content-area-previous.scissor-down-leave .rightcol,
.content-area-previous.scissor-down-delay-leave .rightcol,
.content-area-current.scissor-up-enter .rightcol {
    position: relative;
    z-index: 8;
    background-color: #fff;
}

/* Prevent overflow during route transitions — only on rightcol.
   Leftcol must NOT be clipped so both images stay visible. */
.content-area-current.scissor-down-enter .rightcol,
.content-area-current.scissor-up-enter .rightcol,
.content-area-current.scissor-down-delay-enter .rightcol,
.content-area-previous.scissor-down-leave .rightcol,
.content-area-previous.scissor-up-leave .rightcol,
.content-area-previous.scissor-down-delay-leave .rightcol {
    overflow: hidden;
}

/* For scissor-up (backward nav): leftcol and rightcol need opposite
   z-index stacking. Use per-element z-index instead of surface-level
   to avoid creating a stacking context that traps child z-indexes. */
.content-area-previous.scissor-up-leave .leftcol {
    z-index: 2;
}
.content-area-current.scissor-up-enter .leftcol {
    z-index: 1;
}

/* =============================================
   Element Slide Animations
   ============================================= */

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: none;
        opacity: 1;
    }
}

@keyframes slideDown {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }
    to {
        transform: none;
        opacity: 1;
    }
}

@keyframes slideRight {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: none;
        opacity: 1;
    }
}

@keyframes slideUpOut {
    from {
        transform: translateY(0%);
        opacity: 1;
    }
    to {
        transform: translateY(-100%);
        opacity: 0;
    }
}

@keyframes slideDownOut {
    from {
        transform: translateY(0%);
        opacity: 1;
    }
    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

@keyframes slideLeftOut {
    from {
        transform: translateX(0%);
        opacity: 1;
    }
    to {
        transform: translateX(-100%);
        opacity: 0;
    }
}

/* Utility classes for element entrance animations */
.animate-slide-up,
.animate-slide-down,
.animate-slide-right {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    opacity: 0;
}

.animate-slide-up {
    animation: slideUp 1000ms 200ms cubic-bezier(.35, 0, .25, 1) both;
}

.animate-slide-down {
    animation: slideDown 1000ms 200ms cubic-bezier(.35, 0, .25, 1) both;
}

.animate-slide-right {
    animation: slideRight 1000ms 200ms cubic-bezier(.35, 0, .25, 1) both;
}

.animate-slide-up-out {
    animation: slideUpOut 200ms cubic-bezier(.35, 0, .25, 1) both;
}

.animate-slide-down-out {
    animation: slideDownOut 200ms cubic-bezier(.35, 0, .25, 1) both;
}

.animate-slide-left-out {
    animation: slideLeftOut 200ms cubic-bezier(.35, 0, .25, 1) both;
}

/* Home page element exit animations — reverse order of entrance.
   Social bar exits first, profession second, name last.
   Must complete before the scissor transition dominates (~300ms). */
.content-area-previous .social-slot {
    animation: slideDownOut 150ms 0ms cubic-bezier(.35, 0, .25, 1) both !important;
}

.content-area-previous .profession {
    animation: slideLeftOut 150ms 50ms cubic-bezier(.35, 0, .25, 1) both !important;
}

.content-area-previous .name .name-red {
    animation: slideDownOut 150ms 100ms cubic-bezier(.35, 0, .25, 1) both !important;
}

.content-area-previous .name .name-black {
    animation: slideUpOut 150ms 100ms cubic-bezier(.35, 0, .25, 1) both !important;
}

.content-area-previous .name-left .name-red {
    animation: slideDownOut 150ms 100ms cubic-bezier(.35, 0, .25, 1) both !important;
}