/* Opening screen: the same panel as the sign-in page, filling the screen while the site loads */
html.loading body{overflow:hidden}
.intro{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;padding:32px 24px 28px;overflow:hidden;color:#fff;
  background:linear-gradient(125deg,#13213c 0%,#1f2a40 22%,#26262a 42%,#33231a 62%,#40220f 80%,#4a250c 100%);
  background-size:240% 240%;background-position:20% 20%;animation:intro-shift 30s ease-in-out infinite alternate;
  transition:opacity 1s cubic-bezier(.16,1,.3,1),visibility 1s}
html:not(.loading) .intro{opacity:0;visibility:hidden}
@keyframes intro-shift{0%{background-position:20% 20%}35%{background-position:70% 70%}100%{background-position:100% 100%}}
.intro canvas{position:absolute;inset:0;width:100%;height:100%}
.intro > :not(canvas){position:relative;z-index:1}

/* The crest block takes all the free space and centres itself in it; the NPO lines sit below it. */
.intro-center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;min-height:0;text-align:center}
.intro-mark{display:grid;place-items:center;width:136px;height:136px;border-radius:50%;background:#fff;flex:none;
  box-shadow:0 0 0 10px rgba(255,255,255,.05),0 20px 60px -20px rgba(0,0,0,.5);animation:intro-rise 1.4s cubic-bezier(.16,1,.3,1) both}
.intro-mark img{width:86px;height:86px;object-fit:contain}
.intro h2{max-width:14ch;margin:12px 0 0;font-family:"Cormorant Garamond",Georgia,serif;font-weight:500;font-size:clamp(32px,4vw,54px);line-height:1.04;animation:intro-rise 1.4s cubic-bezier(.16,1,.3,1) .2s both}
.intro-center p{margin:0;font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:#e8dcc4;animation:intro-rise 1.4s cubic-bezier(.16,1,.3,1) .35s both}
.intro-foot{flex:none;width:100%;margin-top:24px;text-align:center;font-size:10.5px;line-height:1.85;letter-spacing:.12em;color:rgba(255,255,255,.55);animation:intro-rise 1.4s cubic-bezier(.16,1,.3,1) .5s both}
.intro-foot p{margin:0}
@keyframes intro-rise{from{opacity:0;transform:translateY(18px)}}

@media (max-width:700px),(max-height:620px){
  .intro-mark{width:104px;height:104px}
  .intro-mark img{width:66px;height:66px}
  .intro h2{font-size:clamp(28px,7vw,40px)}
  .intro-foot{font-size:9px;letter-spacing:.06em}
}
@media (prefers-reduced-motion:reduce){
  .intro,.intro-mark,.intro h2,.intro-center p,.intro-foot{animation:none}
}