.department-transition {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 24px;
    border: 0;
    background: #f7fafc;
    color: #0d2b45;
}
.department-transition[open] { display: grid; place-items: center; }
.department-transition::backdrop { background: #f7fafc; }
.department-transition-content { width: min(100%, 560px); text-align: center; }
.department-transition-mascot {
    display: block;
    width: auto;
    height: min(44dvh, 360px);
    max-width: 100%;
    margin: 0 auto 24px;
    object-fit: contain;
}
.department-transition h2 { margin: 0; font: 700 clamp(24px, 6vw, 32px)/1.25 'Space Grotesk', system-ui, sans-serif; letter-spacing: -.03em; }
.department-transition .department-transition-welcome { margin: 12px 0 0; color: #526174; font-size: clamp(15px, 4vw, 19px); line-height: 1.5; }
.department-transition-dots { display: flex; justify-content: center; gap: 7px; margin-top: 10px; color: #c65100; font: 700 36px/1 system-ui, sans-serif; }
.department-transition-dots span { animation: department-dot 1.2s ease-in-out infinite; }
.department-transition-dots span:nth-child(2) { animation-delay: .2s; }
.department-transition-dots span:nth-child(3) { animation-delay: .4s; }
body.department-transition-open { overflow: hidden; }
@keyframes department-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) {
    .department-transition-dots span { animation: none; }
}