/* Bendras „premium“ mesh + veil portalų puslapiams (savitarna, mokejimai, sek) – kaip index.html */

:root {

    --portal-cta-rgb: 249, 115, 22;

}

.page-ambient-mesh {

    position: fixed;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    background-image:

        linear-gradient(

            -52deg,

            rgba(var(--portal-cta-rgb), 0.32),

            rgba(124, 58, 237, 0.22),

            rgba(56, 189, 248, 0.26),

            rgba(165, 182, 141, 0.16),

            rgba(var(--portal-cta-rgb), 0.28),

            rgba(15, 23, 42, 0.38)

        ),

        radial-gradient(ellipse 95% 85% at 12% 18%, rgba(var(--portal-cta-rgb), 0.38) 0%, transparent 52%),

        radial-gradient(ellipse 90% 80% at 88% 82%, rgba(56, 189, 248, 0.3) 0%, transparent 50%),

        radial-gradient(circle at 48% 52%, rgba(165, 182, 141, 0.14) 0%, transparent 55%);

    background-size: 450% 450%, 210% 210%, 210% 210%, 190% 190%;

    background-position: 0% 50%, 0% 0%, 100% 100%, 50% 50%;

    background-repeat: no-repeat;

    animation: portalMeshShift 7s ease-in-out infinite alternate, portalMeshHue 8.5s ease-in-out infinite;

}

@keyframes portalMeshShift {

    0% { background-position: 0% 40%, 0% 0%, 100% 100%, 50% 50%; }

    50% { background-position: 72% 58%, 85% 25%, 18% 78%, 42% 62%; }

    100% { background-position: 100% 55%, 100% 90%, 0% 12%, 55% 38%; }

}

@keyframes portalMeshHue {

    0% { filter: hue-rotate(0deg) saturate(1.58); }

    20% { filter: hue-rotate(48deg) saturate(1.95); }

    40% { filter: hue-rotate(-32deg) saturate(1.82); }

    60% { filter: hue-rotate(62deg) saturate(2.05); }

    80% { filter: hue-rotate(-24deg) saturate(1.88); }

    100% { filter: hue-rotate(0deg) saturate(1.58); }

}

.portal-readability-veil {

    position: fixed;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background: linear-gradient(

        165deg,

        rgba(5, 6, 8, 0.52) 0%,

        rgba(5, 8, 12, 0.64) 45%,

        rgba(4, 6, 9, 0.76) 100%

    );

}

.portal-premium-bg .bg-video::after {

    display: none !important;

}

@media (max-width: 767px) {

    .portal-readability-veil {

        background: linear-gradient(

            180deg,

            rgba(5, 8, 12, 0.64) 0%,

            rgba(4, 6, 9, 0.8) 100%

        );

    }

}

@media (prefers-reduced-motion: reduce) {

    .page-ambient-mesh {

        animation: none;

        filter: none;

    }

}



/* Modalų overlay – tas pats mesh + veil (klasė ant fono div) */

.modal-premium-backdrop {

    background: transparent !important;

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    isolation: isolate;

}

.modal-premium-backdrop::before {

    content: '';

    position: absolute;

    inset: 0;

    z-index: 0;

    pointer-events: none;

    background-image:

        linear-gradient(

            -52deg,

            rgba(var(--portal-cta-rgb), 0.28),

            rgba(124, 58, 237, 0.18),

            rgba(56, 189, 248, 0.22),

            rgba(165, 182, 141, 0.13),

            rgba(var(--portal-cta-rgb), 0.24),

            rgba(15, 23, 42, 0.36)

        ),

        radial-gradient(ellipse 95% 85% at 12% 18%, rgba(var(--portal-cta-rgb), 0.34) 0%, transparent 52%),

        radial-gradient(ellipse 90% 80% at 88% 82%, rgba(56, 189, 248, 0.26) 0%, transparent 50%),

        radial-gradient(circle at 48% 52%, rgba(165, 182, 141, 0.12) 0%, transparent 55%);

    background-size: 450% 450%, 210% 210%, 210% 210%, 190% 190%;

    background-position: 0% 50%, 0% 0%, 100% 100%, 50% 50%;

    background-repeat: no-repeat;

    animation: portalMeshShift 7s ease-in-out infinite alternate, portalMeshHue 8.5s ease-in-out infinite;

}

.modal-premium-backdrop::after {

    content: '';

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background: linear-gradient(

        165deg,

        rgba(5, 6, 8, 0.52) 0%,

        rgba(5, 8, 12, 0.64) 45%,

        rgba(4, 6, 9, 0.74) 100%

    );

}

.modal-premium-backdrop > * {

    position: relative;

    z-index: 2;

}

@media (max-width: 767px) {

    .modal-premium-backdrop::after {

        background: linear-gradient(

            180deg,

            rgba(5, 8, 12, 0.64) 0%,

            rgba(4, 6, 9, 0.8) 100%

        );

    }

}

@media (prefers-reduced-motion: reduce) {

    .modal-premium-backdrop::before {

        animation: none;

        filter: none;

    }

}



/* OAuth (savitarna / demo) – stiklas, be „juodos dėžės“ ant mesh */

.portal-premium-bg .login-oauth-btn.login-oauth-apple,

.portal-premium-bg .login-oauth-btn.login-oauth-google {

    background: rgba(255, 255, 255, 0.055) !important;

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    border: 1px solid rgba(255, 255, 255, 0.12) !important;

    color: rgba(236, 246, 255, 0.94) !important;

    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.04) inset !important;

}

.portal-premium-bg .login-oauth-btn:hover {

    background: rgba(255, 255, 255, 0.085) !important;

    border-color: rgba(56, 189, 248, 0.38) !important;

    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(56, 189, 248, 0.12) inset !important;

}

.portal-premium-bg .login-oauth-btn .login-oauth-label {

    color: rgba(236, 246, 255, 0.95) !important;

}

.portal-premium-bg .login-oauth-btn .oauth-social-icon {

    color: #38bdf8 !important;

}