/*
  Підключити у головний input.css одним рядком (поруч з іншими @import),
  ПЕРЕД будь-якими @layer, потім перезібрати output.css:
    @import "./page-transition.css";
*/

@layer components {

    #page-transition {
        position: fixed;
        inset: 0;
        z-index: 9999;
        pointer-events: none;
    }

    #page-transition .pt-panel {
        position: absolute;
        left: 0;
        width: 100%;
        height: 50.5%;
        background: #ffffff;
    }

    #page-transition .pt-top {
        top: 0;
    }

    #page-transition .pt-bottom {
        bottom: 0;
    }

    #page-transition .pt-beam {
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
        height: 3px;
        transform: translateY(-50%);
        background: linear-gradient(to right, #E70F04 40%, #FEC366 100%);
        box-shadow: 0 0 30px 8px rgba(231, 15, 4, 0.65);
        opacity: 0;
    }

    /* Поважаємо prefers-reduced-motion — просто ховаємо оверлей без анімації */
    @media (prefers-reduced-motion: reduce) {
        #page-transition {
            display: none !important;
        }
    }
}