/* Fixed framing matches the original castle background while the form scrolls. */
#gate-form .auth-switch {flex-wrap:wrap;gap:4px 8px;margin-top:16px;font-size:14px;line-height:1.5;color:#e0e2e3}
#gate-form .auth-switch button {min-height:44px;padding:4px 6px;font-size:14px;color:#fff;text-decoration:underline;text-underline-offset:3px}
#account-gate {position:relative;isolation:isolate}
.gate-video {position:fixed;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2;pointer-events:none;opacity:0;transition:opacity .6s}
.gate-video.ready {opacity:1}
#account-gate::before {content:"";position:fixed;inset:0;background:linear-gradient(90deg,#0a131b80,#0a131b10 55%,#0a131b15);z-index:-1;pointer-events:none}
.gate-motion-toggle {position:fixed;right:16px;top:16px;z-index:2;padding:8px 12px;border:1px solid #d0b27c88;border-radius:6px;background:#121d22e8;color:#f5e9d3;font:12px var(--sans);cursor:pointer}
.gate-motion-toggle:focus-visible {outline:2px solid #ead099;outline-offset:3px}
.gate-motion-toggle[hidden],.gate-video[hidden] {display:none}
@media(prefers-reduced-motion:reduce){.gate-video{display:none;transition:none}}

/* Mobile uses the existing still artwork with a light black overlay. */
#account-gate.gate-static-mobile {background:none}
#account-gate.gate-static-mobile::before {background:linear-gradient(#0006,#0006),url('/assets/castle-english.png') 62% center/cover no-repeat}
.gate-static-mobile .gate-video,.gate-static-mobile .gate-motion-toggle {display:none}

/* Give the school entrance its own clear view above the form on phones. */
.gate-school-preview {display:none}
@media(max-width:760px){
  .gate-school-preview {display:block;width:100%;max-width:450px;aspect-ratio:16/9;margin:22px auto 0;overflow:hidden;border:1px solid #ffffff30;border-radius:8px;background:#101112;box-shadow:0 12px 32px #0005}
  .gate-school-preview img {display:block;width:100%;height:100%;object-fit:cover;transform:scale(1.8);transform-origin:92% 30%}
}

/* Stack the tablet entrance instead of squeezing the headline beside the form. */
@media(min-width:761px) and (max-width:1000px){
  body.signed-out #account-gate {grid-template-columns:minmax(0,1fr);gap:28px;padding:36px 24px}
  body.signed-out .gate-intro {grid-column:1;grid-row:auto;display:block;min-height:0;max-width:560px;margin:0 auto;padding:0;text-align:center}
  body.signed-out .gate-intro h1 {font-size:38px;margin:0 0 16px}
  body.signed-out .gate-intro p {max-width:450px;margin:0 auto}
  body.signed-out .gate-mobile-logo {display:block;width:180px;height:auto;margin:0 auto 24px}
  body.signed-out #gate-form {grid-column:1;grid-row:auto;margin:auto}
  body.signed-out #gate-form .modal-crest {display:none}
}