/* NYCET student dashboard: immersive background and floating verification cards */
body.student-verification-page {
    position: relative;
    isolation: isolate;
    background:
        linear-gradient(125deg, rgba(2, 12, 32, .72), rgba(5, 34, 78, .48) 48%, rgba(3, 18, 43, .7)),
        url('student-portal-bg-v2.webp') center center / cover fixed no-repeat;
    color: #f5f9ff;
}

body.student-verification-page::before,
body.student-verification-page::after {
    content: "";
    position: fixed;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(12px);
}

body.student-verification-page::before {
    width: 34vw;
    height: 34vw;
    min-width: 320px;
    min-height: 320px;
    left: -12vw;
    top: 14vh;
    background: radial-gradient(circle, rgba(26, 213, 230, .2), rgba(26, 213, 230, 0) 68%);
    animation: portalOrbOne 12s ease-in-out infinite alternate;
}

body.student-verification-page::after {
    width: 30vw;
    height: 30vw;
    min-width: 280px;
    min-height: 280px;
    right: -8vw;
    bottom: -10vh;
    background: radial-gradient(circle, rgba(243, 185, 74, .18), rgba(243, 185, 74, 0) 68%);
    animation: portalOrbTwo 14s ease-in-out infinite alternate;
}

.student-verification-page .student-portal-header {
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 18px 55px rgba(1, 9, 25, .24);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.student-verification-page > .container-fluid:not(.student-verification-shell) {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.student-verification-page > .container-fluid:not(.student-verification-shell) > .row {
    display: block;
    margin: 0;
}

.student-verification-page > .container-fluid:not(.student-verification-shell) > .row > [class*="col-"] {
    float: none;
    width: 100%;
    margin: 0;
    padding: 0;
}

.student-verification-page > .student-verification-shell {
    position: relative;
    z-index: 2;
    perspective: 1300px;
}

.student-verification-page > .student-verification-shell > .row {
    display: grid !important;
    grid-template-columns: 320px minmax(0, 1fr) !important;
    gap: 24px !important;
    align-items: start;
    margin: 0 !important;
}

.student-verification-page > .student-verification-shell > .row > [class*="col-"] {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    left: auto !important;
    right: auto !important;
}

.student-verification-page > .student-verification-shell > .row > .col-md-3,
.student-verification-page > .student-verification-shell > .row > .col-md-6:first-child {
    grid-column: 1 !important;
    grid-row: 1 !important;
}

.student-verification-page > .student-verification-shell > .row > .col-md-9,
.student-verification-page > .student-verification-shell > .row > .col-md-6:last-child {
    grid-column: 2 !important;
    grid-row: 1 !important;
}

.student-verification-page .student-service-nav,
.student-verification-page .student-dashboard-feature,
.student-verification-page.verification-form-page .student-verification-shell > .row > .col-md-9.well,
.student-verification-page.verification-result-page .student-verification-shell > .row > .col-md-9.well {
    border: 1px solid rgba(255, 255, 255, .22) !important;
    box-shadow:
        0 32px 80px rgba(0, 10, 31, .42),
        inset 0 1px 0 rgba(255, 255, 255, .13) !important;
    backdrop-filter: blur(24px) saturate(135%);
    -webkit-backdrop-filter: blur(24px) saturate(135%);
    transform-style: preserve-3d;
    will-change: transform;
}

.student-verification-page .student-service-nav {
    background:
        radial-gradient(circle at 90% 5%, rgba(68, 224, 214, .2), transparent 28%),
        linear-gradient(145deg, rgba(4, 24, 54, .94), rgba(10, 70, 106, .84)) !important;
    animation: portalCardFloat 6.8s ease-in-out infinite;
}

.student-verification-page .student-dashboard-feature {
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .94), rgba(235, 248, 255, .86)) !important;
    animation: portalCardFloatAlt 7.4s ease-in-out .6s infinite;
}

.student-verification-page .student-verification-shell > .row > .col-md-9.well {
    background: linear-gradient(145deg, rgba(255, 255, 255, .95), rgba(235, 248, 255, .9)) !important;
    animation: none !important;
    transform: none !important;
}

.student-verification-page .student-verification-shell > .row > .col-md-9.well > .panel {
    animation: portalContentFloat 7.4s ease-in-out .6s infinite;
    will-change: transform;
}

.student-verification-page .student-service-link {
    position: relative;
    overflow: hidden;
    background: linear-gradient(115deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .045));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    animation: serviceCardDrift 5.2s ease-in-out infinite;
}

.student-verification-page .student-service-link:nth-child(2) {
    animation-delay: .55s;
}

.student-verification-page .student-service-link:nth-child(3) {
    animation-delay: 1.1s;
}

.student-verification-page .student-service-link::after {
    content: "";
    position: absolute;
    inset: -50% auto -50% -40%;
    width: 34%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .2), transparent);
    transform: rotate(18deg) translateX(-220%);
    transition: transform .65s ease;
}

.student-verification-page .student-service-link:hover {
    transform: translate3d(8px, -3px, 18px) !important;
    box-shadow: 0 16px 32px rgba(0, 8, 28, .26), inset 0 1px 0 rgba(255, 255, 255, .14);
}

.student-verification-page .student-service-link:hover::after {
    transform: rotate(18deg) translateX(520%);
}

.student-verification-page .student-service-link > i:first-child {
    box-shadow: 0 10px 22px rgba(0, 8, 28, .24);
    animation: portalIconPulse 3.8s ease-in-out infinite;
}

.student-verification-page .student-welcome-visual {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 22px 45px rgba(7, 26, 51, .12);
    animation: welcomeVisualFloat 6.4s ease-in-out infinite;
}

.student-verification-page .footer_section {
    position: relative;
    z-index: 2;
    background: rgba(3, 18, 43, .86) !important;
    border-top: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

@keyframes portalCardFloat {
    0%, 100% { transform: translate3d(0, 0, 0) rotateX(0) rotateY(0); }
    50% { transform: translate3d(0, -10px, 22px) rotateX(.35deg) rotateY(-.45deg); }
}

@keyframes portalCardFloatAlt {
    0%, 100% { transform: translate3d(0, 0, 0) rotateX(0) rotateY(0); }
    50% { transform: translate3d(0, -8px, 18px) rotateX(-.3deg) rotateY(.4deg); }
}

@keyframes portalContentFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes serviceCardDrift {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -3px; }
}

@keyframes portalIconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08) rotate(-2deg); }
}

@keyframes welcomeVisualFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

@keyframes portalOrbOne {
    to { transform: translate3d(9vw, 5vh, 0) scale(1.12); }
}

@keyframes portalOrbTwo {
    to { transform: translate3d(-7vw, -6vh, 0) scale(.9); }
}

@media (max-width: 900px) {
    body.student-verification-page {
        background-attachment: scroll;
    }

    .student-verification-page > .student-verification-shell > .row {
        grid-template-columns: 1fr !important;
    }

    .student-verification-page > .student-verification-shell > .row > .col-md-3,
    .student-verification-page > .student-verification-shell > .row > .col-md-6:first-child {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }

    .student-verification-page > .student-verification-shell > .row > .col-md-9,
    .student-verification-page > .student-verification-shell > .row > .col-md-6:last-child {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }

    .student-verification-page .student-service-nav,
    .student-verification-page .student-dashboard-feature,
    .student-verification-page .student-verification-shell > .row > .col-md-9.well > .panel {
        animation-duration: 8s;
    }
}

@media (prefers-reduced-motion: reduce) {
    .student-verification-page .student-service-nav,
    .student-verification-page .student-dashboard-feature,
    .student-verification-page .student-verification-shell > .row > .col-md-9.well > .panel,
    .student-verification-page .student-service-link,
    .student-verification-page .student-service-link > i:first-child,
    .student-verification-page .student-welcome-visual,
    body.student-verification-page::before,
    body.student-verification-page::after {
        animation: none !important;
        transform: none !important;
    }
}