/* @group className
------------------------------------ */
:root {
    --page-transition: 1;
}

:is(.page-transition, #wrapper) {
    
}

.page-transition {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 1;
    z-index: var(--z-index-highest);
}

.pattern-module {
    --_s: 13.3rem;
    background: url(../../img/global/repeatable_pattern.svg);
    background-size: var(--_s);
    background-position: calc(50% -(var(--_s) * 0.5)) calc(50% -(var(--_s) * 0.5));
    width: 100%;
    height: 100%;

    -webkit-mask-image: url('../../img/layout/header-main/mask.svg');
    mask-image: url('../../img/layout/header-main/mask.svg');


    will-change: mask;

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-size: 150% 150%;
    mask-size: 150% 150%;

    -webkit-mask-position: center;
    mask-position: center;
}

body[transition="start"] {
    overflow: hidden;
}

body:is([transition="start"], [transition="off"]) #wrapper {
    opacity: 0.00001;
}

body[transition="start"] .page-transition {
    opacity: 1;
}

body[transition="end"] .page-transition {
    -webkit-mask-size: 0% 0%;
    mask-size: 0% 0%;
}

@media only screen and (min-width : 961px) {}

@media only screen and (min-width : 0) and (max-width : 960px) {}

/* @end */