/* A standalone entrance screen. The campus film is ambient scenery behind the design. */
#schoolIntro {
    position: fixed;
    z-index: 2147483100;
    inset: 0;
    display: grid;
    width: 100%;
    height: 100%;
    height: 100dvh;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    background: #071a2e;
    color: #f6f1e7;
    font-family: "Poppins", Arial, sans-serif;
    opacity: 1;
    transition: opacity .6s ease, transform .6s ease;
}
#schoolIntro[hidden] { display: none; }
#schoolIntro.is-leaving { opacity: 0; transform: scale(1.025); pointer-events: none; }
html.school-intro-pending,html.school-intro-pending body { height: 100%; overflow: hidden !important; }
#schoolIntro .school-intro__video,
#schoolIntro .school-intro__backdrop,
#schoolIntro .school-intro__light,
#schoolIntro .school-intro__particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#schoolIntro .school-intro__video { z-index: -4; object-fit: cover; object-position: 58% center; opacity: .52; filter: saturate(.62) brightness(.7); transform: scale(1.025); }
#schoolIntro .school-intro__backdrop { z-index: -3; background: radial-gradient(ellipse at 50% 36%, rgba(25,94,77,.3), transparent 56%), linear-gradient(90deg,rgba(3,16,30,.78),rgba(5,27,42,.28) 50%,rgba(3,16,30,.78)),linear-gradient(0deg,#041321 0%,rgba(5,23,37,.2) 48%,rgba(5,23,37,.72)); }
#schoolIntro .school-intro__light { z-index: -2; inset: -50%; width: 200%; height: 200%; background: conic-gradient(from 35deg, transparent 0deg,rgba(234,212,156,.055) 30deg,transparent 65deg,transparent 200deg,rgba(90,160,128,.045) 230deg,transparent 260deg); animation: welcome-light 40s linear infinite; }
#schoolIntro .school-intro__orbit { position: absolute; z-index: -1; top: 50%; left: 50%; width: min(660px,85vw); aspect-ratio: 1; border: 1px solid rgba(201,164,92,.13); border-radius: 50%; transform: translate(-50%,-50%); animation: welcome-orbit 55s linear infinite; pointer-events: none; }
#schoolIntro .school-intro__orbit::before { content: ""; position: absolute; inset: -28px; border: 1px dashed rgba(201,164,92,.11); border-radius: 50%; }
#schoolIntro .school-intro__orbit span { position: absolute; top: 6%; left: 25%; width: 10px; height: 10px; border: 1px solid #c9a45c; background: #123b3d; transform: rotate(45deg); box-shadow: 0 0 24px rgba(201,164,92,.3); }
#schoolIntro .school-intro__particles { z-index: -1; }
#schoolIntro .school-intro__particles span { position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px; border-radius: 50%; background: #ead49c; box-shadow: 0 0 12px rgba(234,212,156,.5); opacity: .45; animation: welcome-particle 7s ease-in-out var(--delay) infinite; }
#schoolIntro .school-intro__topline { position: absolute; top: calc(30px + env(safe-area-inset-top,0px)); right: max(36px,env(safe-area-inset-right,0px)); left: max(36px,env(safe-area-inset-left,0px)); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
#schoolIntro .school-intro__topline p { margin: 0; color: #f6f1e7b3; font-size: .64rem; font-weight: 500; letter-spacing: .17em; text-transform: uppercase; }
#schoolIntro .school-intro__topline p span { padding: 0 10px; color: #c9a45c; }
#schoolIntro .school-intro__skip { display: inline-flex; min-height: 44px; align-items: center; gap: 16px; padding: 10px 17px; border: 1px solid #c9a45c45; border-radius: 999px; background: #071a2e40; color: #f6f1e7c9; font: 500 .72rem/1.4 "Poppins",Arial,sans-serif; cursor: pointer; }
#schoolIntro .school-intro__skip span { color: #c9a45c; font-size: 1.1rem; }
#schoolIntro .school-intro__skip:hover { color: #fff; border-color: #c9a45c; }
#schoolIntro .school-intro__content { display: grid; justify-items: center; width: min(900px,calc(100% - 64px)); padding: 96px 0; text-align: center; }
#schoolIntro .school-intro__seal { display: grid; width: 144px; height: 144px; place-items: center; margin-bottom: 26px; border: 1px solid rgba(234,212,156,.85); border-radius: 50%; background: #fff; box-shadow: 0 0 0 9px rgba(234,212,156,.035),0 0 0 10px rgba(234,212,156,.12),0 20px 70px #0005; animation: welcome-rise .9s ease both; }
#schoolIntro .school-intro__crest { position: relative; width: 74px; height: 112px; overflow: hidden; }
#schoolIntro .school-intro__crest img { position: absolute; top: -39px; left: -8px; width: 190px; height: 198px; max-width: none; object-fit: contain; }
#schoolIntro .school-intro__eyebrow { display: flex; align-items: center; gap: 16px; margin: 0 0 17px; color: #c9a45c; font-size: .63rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; animation: welcome-rise .9s .1s ease both; }
#schoolIntro .school-intro__eyebrow span { width: 38px; height: 1px; background: linear-gradient(90deg,transparent,#c9a45c); }
#schoolIntro .school-intro__eyebrow span:last-child { transform: rotate(180deg); }
#schoolIntro #school-intro-title { margin: 0; padding-left: .16em; color: #f6f1e7; font: 400 clamp(3.6rem,7.7vw,7rem)/1.1 Georgia,"Times New Roman",serif; letter-spacing: .16em; text-transform: uppercase; text-shadow: 0 4px 35px #0003; animation: welcome-title 1.2s .2s ease both; }
#schoolIntro .school-intro__subtitle { margin: 17px 0 0; padding-left: .45em; color: #ead49c; font-size: .8rem; font-weight: 500; letter-spacing: .45em; line-height: 1.6; text-transform: uppercase; animation: welcome-rise .9s .3s ease both; }
#schoolIntro .school-intro__message { margin: 29px 0 0; color: #f6f1e7ba; font-size: .88rem; line-height: 1.8; animation: welcome-rise .9s .4s ease both; }
#schoolIntro .school-intro__message em { color: #ead49c; font-family: Georgia,"Times New Roman",serif; font-size: 1.15em; }
#schoolIntro .school-intro__enter { position: relative; display: inline-flex; min-height: 58px; align-items: center; gap: 30px; margin-top: 34px; padding: 8px 9px 8px 28px; overflow: hidden; border: 1px solid #e4c98e; border-radius: 999px; background: linear-gradient(115deg,#b99048,#dfc083); color: #071a2e; box-shadow: 0 10px 35px #0003; font: 600 .82rem/1.4 "Poppins",Arial,sans-serif; cursor: pointer; animation: welcome-rise .9s .5s ease both; transition: box-shadow .2s ease; }
#schoolIntro .school-intro__enter::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35),transparent 70%); transform: translateX(-120%); animation: welcome-shine 6s 2s ease-in-out infinite; pointer-events: none; }
#schoolIntro .school-intro__enter:hover { box-shadow: 0 12px 45px #c9a45c35; }
#schoolIntro .school-intro__enter-arrow { display: grid; width: 38px; height: 38px; place-items: center; border: 1px solid #071a2e38; border-radius: 50%; }
#schoolIntro button:focus-visible { outline: 2px solid #ead49c; outline-offset: 5px; }
#schoolIntro .school-intro__bottomline { position: absolute; right: 30px; bottom: calc(30px + env(safe-area-inset-bottom,0px)); left: 30px; display: flex; align-items: center; justify-content: center; gap: 20px; }
#schoolIntro .school-intro__bottomline p { margin: 0; color: #f6f1e77a; font-size: .58rem; letter-spacing: .24em; text-transform: uppercase; }
#schoolIntro .school-intro__bottomline span { width: 70px; height: 1px; background: #c9a45c35; }
@keyframes welcome-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes welcome-title { from { opacity: 0; transform: translateY(14px); letter-spacing: .22em; } to { opacity: 1; transform: translateY(0); letter-spacing: .16em; } }
@keyframes welcome-orbit { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes welcome-light { to { transform: rotate(360deg); } }
@keyframes welcome-particle { 50% { opacity: .15; transform: translateY(-22px); } }
@keyframes welcome-shine { 0%,65% { transform: translateX(-120%); } 90%,100% { transform: translateX(120%); } }
@media(max-width:600px) {
    #schoolIntro .school-intro__topline { top: calc(20px + env(safe-area-inset-top,0px)); right: 22px; left: 22px; gap: 8px; }
    #schoolIntro .school-intro__topline p { max-width: 145px; font-size: .51rem; letter-spacing: .08em; }
    #schoolIntro .school-intro__topline p span { padding: 0 5px; }
    #schoolIntro .school-intro__skip { gap: 8px; padding: 9px 12px; font-size: .64rem; }
    #schoolIntro .school-intro__content { width: calc(100% - 40px); padding: 100px 0 80px; }
    #schoolIntro .school-intro__seal { width: 112px; height: 112px; margin-bottom: 29px; }
    #schoolIntro .school-intro__crest { width: 56px; height: 90px; }
    #schoolIntro .school-intro__crest img { top: -30px; left: -5px; width: 150px; height: 156px; }
    #schoolIntro #school-intro-title { font-size: clamp(2.1rem,10.5vw,3.8rem); }
    #schoolIntro .school-intro__eyebrow { font-size: .55rem; gap: 12px; }
    #schoolIntro .school-intro__eyebrow span { width: 24px; }
    #schoolIntro .school-intro__subtitle { font-size: .65rem; letter-spacing: .34em; }
    #schoolIntro .school-intro__message { max-width: 280px; margin-top: 25px; font-size: .78rem; }
    #schoolIntro .school-intro__enter { min-height: 56px; margin-top: 30px; font-size: .78rem; }
    #schoolIntro .school-intro__orbit { width: 108vw; }
    #schoolIntro .school-intro__bottomline { bottom: calc(23px + env(safe-area-inset-bottom,0px)); gap: 14px; }
    #schoolIntro .school-intro__bottomline span { width: 36px; }
}
@media(max-height:650px) {
    #schoolIntro .school-intro__content { padding: 76px 0 55px; }
    #schoolIntro .school-intro__seal { width: 96px; height: 96px; margin-bottom: 20px; }
    #schoolIntro .school-intro__crest { transform: scale(.75); }
    #schoolIntro #school-intro-title { font-size: clamp(2rem,7vw,4rem); }
    #schoolIntro .school-intro__eyebrow { margin-bottom: 10px; }
    #schoolIntro .school-intro__subtitle { margin-top: 10px; }
    #schoolIntro .school-intro__message { margin-top: 16px; }
    #schoolIntro .school-intro__enter { margin-top: 20px; }
}
@media(max-height:450px) and (min-width:600px) {
    #schoolIntro .school-intro__content { padding: 58px 0 42px; }
    #schoolIntro .school-intro__seal { display: none; }
    #schoolIntro .school-intro__topline { top: 12px; }
    #schoolIntro .school-intro__bottomline { bottom: 14px; }
    #schoolIntro .school-intro__message { margin-top: 12px; }
}
@media(prefers-reduced-motion:reduce) {
    #schoolIntro,#schoolIntro * { animation: none !important; transition: none !important; }
}