/* ═══════════════════════════════════════════════════════════════
   iTrans — Website Animations (faithfully ported from Remotion)
   ═══════════════════════════════════════════════════════════════ */

/* ── Entry Preloader ─────────────────────────────────────────── */
#itrans-preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #FF5E14;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}


#itrans-preloader .pl-svg {
    width: min(88vw, 720px);
    height: auto;
    overflow: visible;
    display: block;
}

/* Preloader exit: slide up */
#itrans-preloader.pl-exit {
    animation: pl-exit 0.5s cubic-bezier(0.7, 0, 1, 1) both;
}
@keyframes pl-exit {
    from { transform: translateY(0);     }
    to   { transform: translateY(-100%); }
}

/* ── Page Transition Overlay ─────────────────────────────────── */
#itrans-transition {
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: #FF5E14;
    clip-path: circle(0px at 116px 45px);
    transition: clip-path 0.52s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    overflow: hidden;
}

#itrans-transition.tr-active {
    clip-path: circle(160vmax at 116px 45px);
    pointer-events: all;
}

/* Small truck logo in top-left during transition */
#itrans-tr-logo {
    position: absolute;
    top: 14px;
    left: 24px;
    width: 190px;
    height: 74px;
    opacity: 0;         /* JS sets to 1 when driving starts */
    will-change: transform;
}

/* Truck drives off — cubic ease-in matches Remotion Easing.in(Easing.cubic) */
#itrans-tr-logo.tr-driving {
    animation: tr-drive-off 580ms cubic-bezier(0.55, 0, 1, 1) forwards;
}
@keyframes tr-drive-off {
    from { transform: translateX(0);      }
    to   { transform: translateX(130vw);  }
}

/* ── Strip Reveal (new page entry after transition) ─────────── */
.itrans-strip {
    position: fixed;
    left: 0;
    width: 100%;
    background: #FF5E14;
    z-index: 99997;
    will-change: transform;
    /* animation applied inline by JS so delay/duration match truck exactly */
}

@keyframes strip-exit {
    from { transform: translateX(0);    }
    to   { transform: translateX(100%); }
}