/**
 * Cinematic page transitions.
 * Uses a controlled DOM stage so the frame and timing stay consistent.
 */
:root {
    --cpt-duration: 1700ms;
    --cpt-ease: cubic-bezier(0.76, 0, 0.24, 1);
    --cpt-frame-color: rgba(255, 255, 255, 0.92);
    --cpt-stage-bg: #050505;
    --cpt-frame-size: clamp(40px, 3vw, 80px);
    --cpt-frame-offset: 0px;
    --cpt-frame-weight: 2px;
}

@view-transition {
    navigation: none;
}

.cpt-frame {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    pointer-events: none;
    opacity: 0;
    transform: scale(1);
    transform-origin: center center;
}

.cpt-frame__corner {
    position: absolute;
    width: var(--cpt-frame-size);
    height: var(--cpt-frame-size);
}

.cpt-frame__corner--top-left {
    top: var(--cpt-frame-offset);
    left: var(--cpt-frame-offset);
    border-top: var(--cpt-frame-weight) solid var(--cpt-frame-color);
    border-left: var(--cpt-frame-weight) solid var(--cpt-frame-color);
}

.cpt-frame__corner--top-right {
    top: var(--cpt-frame-offset);
    right: var(--cpt-frame-offset);
    border-top: var(--cpt-frame-weight) solid var(--cpt-frame-color);
    border-right: var(--cpt-frame-weight) solid var(--cpt-frame-color);
}

.cpt-frame__corner--bottom-left {
    bottom: var(--cpt-frame-offset);
    left: var(--cpt-frame-offset);
    border-bottom: var(--cpt-frame-weight) solid var(--cpt-frame-color);
    border-left: var(--cpt-frame-weight) solid var(--cpt-frame-color);
}

.cpt-frame__corner--bottom-right {
    right: var(--cpt-frame-offset);
    bottom: var(--cpt-frame-offset);
    border-right: var(--cpt-frame-weight) solid var(--cpt-frame-color);
    border-bottom: var(--cpt-frame-weight) solid var(--cpt-frame-color);
}

html.cpt-frame-active .cpt-frame {
    animation: cpt-frame-pulse var(--cpt-duration) var(--cpt-ease) both;
}

.cpt-fallback-stage,
.cpt-fallback-current,
.cpt-fallback-next {
    position: fixed;
    inset: 0;
    overflow: hidden;
}

.cpt-fallback-stage {
    z-index: 2147483600;
    pointer-events: none;
    background: var(--cpt-stage-bg);
}

.cpt-fallback-stage .cpt-frame {
    position: absolute;
    opacity: 1;
    transform: scale(1);
    animation: cpt-frame-pulse var(--cpt-duration) var(--cpt-ease) both;
}

.cpt-fallback-current,
.cpt-fallback-next {
    background: var(--cpt-stage-bg);
    transform-origin: center center;
    will-change: transform, opacity;
}

.cpt-fallback-current {
    z-index: 2;
    animation: cpt-fallback-old-page var(--cpt-duration) var(--cpt-ease) both;
}

.cpt-fallback-next {
    z-index: 1;
    animation: cpt-fallback-new-page var(--cpt-duration) var(--cpt-ease) both;
}

.cpt-fallback-current > *,
.cpt-fallback-next > * {
    width: 100%;
    min-height: 100vh;
}

html.cpt-lock,
html.cpt-lock body {
    overflow: hidden !important;
}

@keyframes cpt-fallback-old-page {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    24% {
        opacity: 1;
        transform: translateY(0) scale(0.82);
    }
    66% {
        opacity: 1;
        transform: translateY(-112vh) scale(0.82);
    }
    100% {
        opacity: 1;
        transform: translateY(-112vh) scale(0.82);
    }
}

@keyframes cpt-fallback-new-page {
    0% {
        opacity: 1;
        transform: translateY(100vh) scale(0.82);
    }
    44% {
        opacity: 1;
        transform: translateY(100vh) scale(0.82);
    }
    45% {
        opacity: 1;
        transform: translateY(100vh) scale(0.82);
    }
    55% {
        opacity: 1;
        transform: translateY(0) scale(0.82);
    }
    70% {
        opacity: 1;
        transform: translateY(0) scale(0.82);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes cpt-frame-pulse {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    5% {
        opacity: 1;
        transform: scale(1);
    }
    24% {
        opacity: 1;
        transform: scale(0.90);
    }
    66% {
        opacity: 1;
        transform: scale(0.90);
    }
    95% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1);
    }
}

/* Stack section - scale when in fullscreen 100vh view */
.stack-box .stack-box-contain {
    transform-origin: center center;
    transition: none;
}

/* Stack cinematic layer (independent from page transition) */
.stack-box {
    transition: background-color 0.25s ease;
}

html.stack-cinematic-active .stack-box {
    background: var(--cpt-stage-bg);
}

html.stack-cinematic-active:not(.cpt-frame-active) .cpt-frame {
    opacity: var(--stack-frame-opacity, 0);
    transform: scale(var(--stack-frame-scale, 1));
    transition: none;
}

@media (max-width: 1199px) {
    .stack-box .stack-box-contain {
        transform: none !important;
    }
}

@media (max-width: 767px) {
    :root {
        --cpt-duration: 1200ms;
        --cpt-frame-size: clamp(32px, 11vw, 54px);
        --cpt-frame-offset: 0px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cpt-fallback-current,
    .cpt-fallback-next,
    html.cpt-frame-active .cpt-frame {
        animation: none !important;
    }
}