/* ========================================
   IT-RANKS — page transition

   Leaving a page:  black fades in, the IT-RANKS mark assembles out of dots,
                    holds, then scatters back apart, then the browser navigates.
   Arriving:        the overlay is already black and fades away.

   The arrival fade is a pure CSS animation, so the page still becomes usable
   even if page-transition.js never runs. JavaScript only drives the exit.
======================================== */

.itr-pt {
    --itr-pt-bg: #020a18;
    --itr-pt-in: 480ms;
    /* arrival fade-out */
    --itr-pt-out: 260ms;
    /* exit fade-in     */

    position: fixed;
    inset: 0;
    z-index: 2147483000;
    background: var(--itr-pt-bg);
    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* ── Arrival: visible on paint, fades itself out ─────────────────────── */
.itr-pt.is-enter {
    animation: itr-pt-reveal var(--itr-pt-in) ease-out forwards;
}

@keyframes itr-pt-reveal {
    from {
        opacity: 1;
        visibility: visible;
    }

    99% {
        visibility: visible;
    }

    to {
        opacity: 0;
        visibility: hidden;
    }
}

/* ── Exit: JS turns this on, black fades in over the current page ────── */
.itr-pt.is-out {
    animation: none;
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transition: opacity var(--itr-pt-out) ease-in;
}

/* Set by JS one frame before .is-out so the opacity change animates. */
.itr-pt.is-arming {
    animation: none;
    opacity: 0;
    visibility: visible;
    transition: opacity var(--itr-pt-out) ease-in;
}

/* Killed outright — bfcache restore, reduced motion, or the safety timeout. */
.itr-pt.is-off {
    animation: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: none !important;
}

/* ── The dot mark ────────────────────────────────────────────────────── */
.itr-pt__mark {
    position: relative;
    /* Matches main-logo.png (812x1139) so the dots fill the box. 300px wide is
       the point where the "TECHNOLOGY" sub-line still resolves as dots. */
    width: min(62vw, 300px);
    aspect-ratio: 812 / 1139;
    opacity: 0;
    transition: opacity 200ms ease;
}

.itr-pt__mark.is-live {
    opacity: 1;
}

/* Source artwork — read by the sampler, never shown. */
.itr-pt__src {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    visibility: hidden;
}

.itr-pt__src svg,
.itr-pt__src img {
    width: 80%;
    height: 80%;
    object-fit: contain;
}

.itr-pt__canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* ── Reduced motion: no dot animation, just a plain quick fade ───────── */
@media (prefers-reduced-motion: reduce) {
    .itr-pt {
        --itr-pt-in: 160ms;
        --itr-pt-out: 120ms;
    }

    .itr-pt__mark {
        display: none;
    }
}

/* Never cover the Elementor editor canvas. */
.elementor-editor-active .itr-pt,
.elementor-editor-preview .itr-pt {
    display: none !important;
}