/* Page transition overlays — fixed palette (independent of admin brand/theme colors) */

.page-transition {
    --pt-progress: 0;
    --iris-scale: var(--pt-progress, 0);
    --pt-bg: #f7f7fb;
    --pt-surface: #ffffff;
    --pt-line: #cbd5e1;
    --pt-accent: #8b5cf6;
    --pt-accent-soft: #c4b5fd;
    --pt-accent-gold: #d4af37;
    --pt-ink: #0f172a;
    --pt-overlay: #070b14;
    --pt-overlay-mid: #111827;
    --pt-overlay-accent: #1e1b4b;
    --pt-wipe-edge: color-mix(in srgb, #94a3b8 55%, #334155 45%);
    --pt-blur-strength: calc(var(--pt-progress, 0) * 0.22);
    position: fixed;
    inset: 0;
    z-index: 100000;
    pointer-events: none;
    overflow: hidden;
    contain: strict;
    isolation: isolate;
}

html.dark .page-transition {
    --pt-bg: #0f172a;
    --pt-surface: #1e293b;
    --pt-line: #475569;
    --pt-accent: #a78bfa;
    --pt-accent-soft: #8b5cf6;
    --pt-accent-gold: #d4af37;
    --pt-ink: #f1f5f9;
    --pt-overlay: #020617;
    --pt-overlay-mid: #0f172a;
    --pt-overlay-accent: #312e81;
    --pt-wipe-edge: color-mix(in srgb, #334155 55%, #94a3b8 45%);
    --pt-blur-strength: calc(var(--pt-progress, 0) * 0.38);
}

.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,
        var(--pt-overlay) 0deg 24deg,
        var(--pt-overlay-mid) 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%,
        var(--pt-overlay-mid) 0%,
        var(--pt-overlay) 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 color-mix(in srgb, var(--pt-accent) 55%, var(--pt-accent-gold) 45%),
        0 0 28px color-mix(in srgb, var(--pt-accent) 35%, transparent),
        0 0 80px color-mix(in srgb, var(--pt-accent) 18%, transparent);
    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 color-mix(in srgb, var(--pt-accent) 40%, var(--pt-accent-gold) 60%);
}

.pt-curtain--bottom {
    bottom: 0;
    transform: translateY(calc((1 - var(--pt-progress, 0)) * 100%));
    border-top: 3px solid color-mix(in srgb, var(--pt-accent) 40%, var(--pt-accent-gold) 60%);
}

.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,
        var(--pt-overlay) 0%,
        var(--pt-overlay-mid) 55%,
        var(--pt-overlay-accent) 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: var(--pt-bg);
    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%,
        var(--pt-overlay-mid) 0%,
        var(--pt-overlay) 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: var(--pt-bg);
    clip-path: polygon(
        0 0,
        calc(var(--pt-progress, 0) * 140%) 0,
        calc(var(--pt-progress, 0) * 100% - 12%) 100%,
        0 100%
    );
    transition: none;
}

.pt-layer--wipe::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        135deg,
        transparent calc(var(--pt-progress, 0) * 100% - 14%),
        var(--pt-wipe-edge) calc(var(--pt-progress, 0) * 100% - 12%),
        transparent calc(var(--pt-progress, 0) * 100% - 8%)
    );
    opacity: calc(var(--pt-progress, 0) * 0.85);
}

/* Light mode: neutral shadow/grey fold (no brand tint) */
html:not(.dark) .page-transition .pt-layer--wipe::after {
    background: linear-gradient(
        135deg,
        transparent calc(var(--pt-progress, 0) * 100% - 14%),
        rgba(15, 23, 42, 0.36) calc(var(--pt-progress, 0) * 100% - 13%),
        rgba(148, 163, 184, 0.7) calc(var(--pt-progress, 0) * 100% - 12%),
        rgba(30, 41, 59, 0.3) calc(var(--pt-progress, 0) * 100% - 10.5%),
        transparent calc(var(--pt-progress, 0) * 100% - 8%)
    );
}

.pt-wipe__logo {
    display: none;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    width: clamp(9rem, 32vw, 15rem);
    height: clamp(9rem, 32vw, 15rem);
    object-fit: contain;
    pointer-events: none;
    opacity: clamp(0, calc((var(--pt-progress, 0) - 0.12) * 1.35), 1);
    transform: translate(-50%, -50%) scale(calc(0.55 + var(--pt-progress, 0) * 0.65));
    filter: drop-shadow(0 14px 36px rgba(15, 23, 42, 0.14));
    transition: none;
}

html.dark .pt-wipe__logo {
    filter: drop-shadow(0 14px 40px rgba(0, 0, 0, 0.55));
}

.page-transition--wipe .pt-wipe__logo {
    display: block;
}

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

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

/* ── Focus blur (frosted backdrop clears into sharp page) ───────────────── */
.pt-layer--blur {
    background: color-mix(in srgb, var(--pt-bg) calc(var(--pt-blur-strength) * 100%), transparent);
    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;
}

/* ── Admin design mini demos (fixed palette — matches live transitions) ───── */
.admin-transition-demo {
    --pt-bg: #f7f7fb;
    --pt-surface: #ffffff;
    --pt-line: #cbd5e1;
    --pt-accent: #8b5cf6;
    --pt-overlay: #070b14;
    --pt-overlay-mid: #111827;
    --pt-overlay-accent: #1e1b4b;
    display: block;
    margin-top: 0.55rem;
    height: 2.2rem;
    border-radius: 0.45rem;
    border: 1px solid color-mix(in srgb, var(--admin-muted, #64748b) 35%, transparent);
    background: var(--pt-overlay-mid);
    overflow: hidden;
    position: relative;
}

html.dark .admin-transition-demo {
    --pt-bg: #0f172a;
    --pt-surface: #1e293b;
    --pt-line: #475569;
    --pt-accent: #a78bfa;
    --pt-overlay: #020617;
    --pt-overlay-mid: #0f172a;
    --pt-overlay-accent: #312e81;
}

.admin-transition-demo--iris::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        circle at 50% 50%,
        transparent 34%,
        var(--pt-accent) 35%,
        var(--pt-overlay-accent) 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,
        var(--pt-overlay-mid) 55%,
        var(--pt-accent) 55%
    );
}

.admin-transition-demo--fade {
    background: linear-gradient(
        90deg,
        var(--pt-bg),
        var(--pt-line)
    );
}

.admin-transition-demo--zoom {
    background: radial-gradient(
        circle at 50% 50%,
        var(--pt-accent) 0%,
        var(--pt-overlay-mid) 72%
    );
}

.admin-transition-demo--wipe {
    background: linear-gradient(135deg, var(--pt-bg) 46%, var(--pt-overlay-mid) 46%);
}

.admin-transition-demo--wipe::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0.85rem;
    height: 0.85rem;
    transform: translate(-50%, -50%);
    border-radius: 0.2rem;
    background: var(--pt-accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--pt-bg) 90%, transparent);
}

.admin-transition-demo--blur {
    background: var(--pt-bg);
    filter: blur(2px);
    opacity: 0.88;
}

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