/* Page transition — paleta minimalista (slate / azul-acinzentado) */
#page-transition-overlay.page-transition {
    /* Tokens: mesma família cromática, pouco contraste entre si = aspecto “produto” */
    --pt-bg: #0a0f18;
    --pt-bg-glow: #121a2a;
    --pt-silhouette: #141c2c;
    --pt-edge-1: #3d4a5c;
    --pt-edge-2: #5c6b7e;
    --pt-edge-3: #7a8b9e;
    --pt-edge-4: #5c6b7e;

    --page-transition-silhouette-fill: var(--pt-silhouette);

    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background:
        radial-gradient(ellipse 72% 58% at 50% 38%, var(--pt-bg-glow) 0%, transparent 68%),
        var(--pt-bg);
    backdrop-filter: blur(22px) saturate(1.04);
    -webkit-backdrop-filter: blur(22px) saturate(1.04);
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transition:
        opacity 0.55s cubic-bezier(0.33, 1, 0.68, 1),
        visibility 0.55s step-end;
}

#page-transition-overlay.page-transition.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 0.5s cubic-bezier(0.33, 1, 0.68, 1),
        visibility 0.5s step-start;
}

.page-transition__wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}

.page-transition__stack {
    position: relative;
    display: inline-block;
    line-height: 0;
    width: min(140px, 32vw);
    max-width: 100%;
}

.page-transition__masked-gradient {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    -webkit-mask-image: url("../img/logozn.png");
    mask-image: url("../img/logozn.png");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-mode: alpha;
    mask-mode: alpha;
    overflow: hidden;
}

/* Contorno: conic suave, sem cores saturadas — leitura “metal / luz fria” */
.page-transition__spin {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 220%;
    height: 220%;
    background: conic-gradient(
        from 210deg,
        var(--pt-edge-1),
        var(--pt-edge-2),
        var(--pt-edge-3),
        var(--pt-edge-4),
        var(--pt-edge-1)
    );
    animation: pageTransitionSpin 1.85s linear infinite;
    will-change: transform;
}

.page-transition__sizer {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: top;
    object-fit: contain;
    opacity: 0;
    pointer-events: none;
    user-select: none;
}

.page-transition__silhouette-fill {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    box-sizing: border-box;
    background-color: var(--page-transition-silhouette-fill);
    -webkit-mask-image: url("../img/logozn.png");
    mask-image: url("../img/logozn.png");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-mode: alpha;
    mask-mode: alpha;
    transform: scale(0.95);
    transform-origin: center center;
    pointer-events: none;
}

@keyframes pageTransitionSpin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    #page-transition-overlay.page-transition {
        transition-duration: 0.01ms;
    }
    .page-transition__spin {
        animation: none;
        transform: translate(-50%, -50%) rotate(0deg);
    }
}