/* Page transition overlays — shared by public site + admin preview */

.page-transition {
    --pt-progress: 0;
    --iris-scale: var(--pt-progress, 0);
    position: fixed;
    inset: 0;
    z-index: 100000;
    pointer-events: none;
    overflow: hidden;
    contain: strict;
}

.page-transition.is-active {
    pointer-events: auto;
}

.page-transition.is-covered {
    --pt-progress: 1;
    --iris-scale: 1;
}

.pt-layer {
    display: none;
    position: absolute;
    inset: 0;
}

.page-transition--iris .pt-layer--iris,
.page-transition--curtain .pt-layer--curtain,
.page-transition--slide .pt-layer--slide,
.page-transition--fade .pt-layer--fade,
.page-transition--zoom .pt-layer--zoom,
.page-transition--wipe .pt-layer--wipe,
.page-transition--blur .pt-layer--blur {
    display: block;
}

/* ── Iris (James Bond) ───────────────────────────────────────────────────── */
.page-iris__blades {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 320vmax;
    height: 320vmax;
    margin: -160vmax 0 0 -160vmax;
    background: repeating-conic-gradient(
        from -11deg,
        #070b14 0deg 24deg,
        #101827 24deg 27deg
    );
    opacity: calc(var(--iris-scale, 0) * 0.92);
    transform: rotate(0deg) scale(calc(0.35 + var(--iris-scale, 0) * 0.65));
    transition: none;
}

.page-transition.is-animating.page-transition--iris .page-iris__blades {
    transition: opacity 0.62s cubic-bezier(0.65, 0, 0.35, 1),
        transform 0.62s cubic-bezier(0.65, 0, 0.35, 1);
}

.page-iris__blades.is-spinning {
    animation: page-iris-blades-spin 0.62s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes page-iris-blades-spin {
    from { transform: rotate(0deg) scale(calc(0.35 + var(--iris-scale, 0) * 0.65)); }
    to { transform: rotate(36deg) scale(calc(0.35 + var(--iris-scale, 0) * 0.65)); }
}

.page-iris__shade {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, #0c1220 0%, #05070d 72%);
    clip-path: circle(calc(var(--iris-scale, 0) * 150%) at 50% 50%);
    transition: none;
}

.page-transition.is-animating.page-transition--iris .page-iris__shade {
    transition: clip-path 0.62s cubic-bezier(0.65, 0, 0.35, 1);
}

.page-iris__ring {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 300vmax;
    height: 300vmax;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(var(--iris-scale, 0));
    box-shadow:
        inset 0 0 0 3px rgba(212, 175, 55, 0.92),
        0 0 28px rgba(212, 175, 55, 0.28),
        0 0 80px rgba(79, 70, 229, 0.12);
    opacity: calc(0.35 + var(--iris-scale, 0) * 0.65);
    transition: none;
    pointer-events: none;
}

.page-transition.is-animating.page-transition--iris .page-iris__ring {
    transition: transform 0.62s cubic-bezier(0.65, 0, 0.35, 1),
        opacity 0.42s ease;
}

/* ── Theatre curtain ───────────────────────────────────────────────────────── */
.pt-curtain {
    position: absolute;
    left: 0;
    width: 100%;
    height: 52%;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent 18%),
        repeating-linear-gradient(90deg, #4a1020 0 28px, #6b1830 28px 56px);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.45);
    transition: none;
}

.pt-curtain--top {
    top: 0;
    transform: translateY(calc((var(--pt-progress, 0) - 1) * 100%));
    border-bottom: 3px solid rgba(212, 175, 55, 0.55);
}

.pt-curtain--bottom {
    bottom: 0;
    transform: translateY(calc((1 - var(--pt-progress, 0)) * 100%));
    border-top: 3px solid rgba(212, 175, 55, 0.55);
}

.page-transition.is-animating.page-transition--curtain .pt-curtain {
    transition: transform 0.62s cubic-bezier(0.65, 0, 0.35, 1);
}

/* ── Horizontal slide ────────────────────────────────────────────────────── */
.pt-layer--slide {
    background: linear-gradient(135deg, #0c1220 0%, #111827 55%, #1e1b4b 100%);
    transform: translateX(calc((1 - var(--pt-progress, 0)) * 100%));
    transition: none;
}

.page-transition.is-animating.page-transition--slide .pt-layer--slide {
    transition: transform 0.62s cubic-bezier(0.65, 0, 0.35, 1);
}

/* ── Fade ────────────────────────────────────────────────────────────────── */
.pt-layer--fade {
    background: #070b14;
    opacity: var(--pt-progress, 0);
    transition: none;
}

.page-transition.is-animating.page-transition--fade .pt-layer--fade {
    transition: opacity 0.55s ease;
}

/* ── Zoom ────────────────────────────────────────────────────────────────── */
.pt-layer--zoom {
    background: radial-gradient(circle at 50% 50%, #111827 0%, #05070d 100%);
    transform: scale(calc(1 + var(--pt-progress, 0) * 0.22));
    opacity: var(--pt-progress, 0);
    transition: none;
}

.page-transition.is-animating.page-transition--zoom .pt-layer--zoom {
    transition: transform 0.62s cubic-bezier(0.65, 0, 0.35, 1),
        opacity 0.55s ease;
}

/* ── Diagonal wipe ───────────────────────────────────────────────────────── */
.pt-layer--wipe {
    background: linear-gradient(135deg, #0a1020 0%, #1e1b4b 100%);
    clip-path: polygon(
        0 0,
        calc(var(--pt-progress, 0) * 140%) 0,
        calc(var(--pt-progress, 0) * 100% - 12%) 100%,
        0 100%
    );
    transition: none;
}

.page-transition.is-animating.page-transition--wipe .pt-layer--wipe {
    transition: clip-path 0.62s cubic-bezier(0.65, 0, 0.35, 1);
}

/* ── Focus blur (frosted backdrop clears into sharp page) ───────────────── */
.pt-layer--blur {
    background: rgba(248, 250, 252, calc(var(--pt-progress, 0) * 0.22));
    backdrop-filter: blur(calc(var(--pt-progress, 0) * 22px));
    -webkit-backdrop-filter: blur(calc(var(--pt-progress, 0) * 22px));
    opacity: var(--pt-progress, 0);
    transition: none;
}

.page-transition.is-animating.page-transition--blur .pt-layer--blur {
    transition: backdrop-filter 0.62s cubic-bezier(0.65, 0, 0.35, 1),
        -webkit-backdrop-filter 0.62s cubic-bezier(0.65, 0, 0.35, 1),
        opacity 0.55s ease,
        background 0.55s ease;
}

.dark .pt-layer--blur {
    background: rgba(15, 23, 42, calc(var(--pt-progress, 0) * 0.38));
}

/* ── Admin design mini demos ───────────────────────────────────────────────── */
.admin-transition-demo {
    display: block;
    margin-top: 0.55rem;
    height: 2.2rem;
    border-radius: 0.45rem;
    border: 1px solid rgba(148, 163, 184, 0.35);
    background: #0f172a;
    overflow: hidden;
    position: relative;
}

.admin-transition-demo--iris::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, transparent 34%, #6366f1 35%, #312e81 100%);
}

.admin-transition-demo--curtain::before,
.admin-transition-demo--curtain::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(90deg, #6b1830, #4a1020);
}

.admin-transition-demo--curtain::before { top: 0; }
.admin-transition-demo--curtain::after { bottom: 0; }

.admin-transition-demo--slide {
    background: linear-gradient(90deg, #111827 55%, #6366f1 55%);
}

.admin-transition-demo--fade {
    background: linear-gradient(90deg, #111827, #64748b);
}

.admin-transition-demo--zoom {
    background: radial-gradient(circle at 50% 50%, #6366f1 0%, #111827 72%);
}

.admin-transition-demo--wipe {
    background: linear-gradient(135deg, #6366f1 42%, #111827 42%);
}

.admin-transition-demo--blur {
    background: #111827;
    filter: blur(2px);
    opacity: 0.88;
}

@media (prefers-reduced-motion: reduce) {
    .page-transition,
    .page-transition * {
        transition: none !important;
        animation: none !important;
    }
}