@font-face{font-family:Geist;src:url("assets/geist.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{color-scheme:dark;--ink:#f2f4f4;--muted:#aeb9c2;--gold:#e0bd7e;--line:#b9d8ee2e;--deep:#02070a}
*{box-sizing:border-box}
body{margin:0;background:var(--deep);color:var(--ink);font-family:Geist,system-ui,sans-serif}
button,input{font:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
[hidden]{display:none!important}
.entry{position:relative;isolation:isolate;min-height:100svh;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);overflow:hidden;background:radial-gradient(ellipse at 88% -12%,#10314a 0,transparent 48%),radial-gradient(ellipse at -10% 92%,#192e3c 0,transparent 55%),var(--deep)}
.identity{position:relative;isolation:isolate;display:grid;grid-template-rows:auto 1fr auto;padding:clamp(28px,5vw,80px);min-height:660px}
.identity::before{content:"";position:absolute;z-index:-1;inset:8% -13% 2% -40%;border-radius:50%;transform:rotate(-29deg);border:1px solid #85ccf464;background:radial-gradient(ellipse at 48% 42%,#12324575,transparent 60%),linear-gradient(140deg,transparent 38%,#0297de26 75%,#fc734033);box-shadow:inset 0 -2px 16px #0297de39,0 0 45px #0297de22}
.identity-top,.access-header{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.8rem;color:var(--muted)}
.identity-home{color:var(--muted);text-underline-offset:4px}
.emblem{display:grid;place-items:center;padding:24px 0}
.emblem img{width:min(60%,310px);filter:drop-shadow(0 20px 25px #000a)}
.motto{margin:0;font-size:clamp(2.2rem,4.7vw,5rem);font-weight:540;letter-spacing:-.07em;line-height:.95}
.motto em{display:block;margin-top:.06em;color:var(--gold);font:italic .98em Georgia,serif;letter-spacing:-.065em}
.access{position:relative;display:grid;align-content:center;min-width:0;padding:clamp(28px,5.5vw,86px);background:linear-gradient(155deg,#152431aa,#080f16de 70%);border-left:1px solid var(--line)}
.access-header{margin-bottom:clamp(32px,6vh,64px)}
.text-button{min-height:44px;padding:7px 0;background:none;color:var(--ink);border:0;text-underline-offset:4px;font-size:.82rem}
.text-button:hover{text-decoration:underline}
.text-button span{margin-inline-start:5px}
.panel{width:min(100%,435px);margin-inline:auto}
.panel h1{font-size:clamp(2.55rem,4.7vw,5.2rem);font-weight:610;line-height:.99;letter-spacing:-.077em;margin:0}
.panel h1:focus{outline:none}
.panel h1 em{color:var(--gold);font:italic 1.04em Georgia,serif;letter-spacing:-.063em}
.panel>p{color:var(--muted);line-height:1.5;margin:16px 0 29px}
.field{margin:0 0 17px}
label{display:block;font-weight:520;font-size:.85rem;margin-bottom:8px}
input{width:100%;border:1px solid var(--line);color:var(--ink);background:#050d14b3;padding:0 15px;min-height:51px;border-radius:13px;font-size:16px}
.password{position:relative}
.password input{padding-right:90px}
.password button{position:absolute;right:14px;top:50%;transform:translateY(-50%)}
.hint{font-size:.78rem;line-height:1.5;color:var(--muted)}
.hint{margin:12px 0 0}

.intro{
  --reveal:1.95s;
  position:fixed;
  inset:0;
  margin:0;
  width:100%;
  height:100%;
  width:100dvw;
  height:100dvh;
  max-width:none;
  max-height:none;
  padding:24px;
  border:0;
  overflow:clip;
  isolation:isolate;
  background:radial-gradient(ellipse at 50% 86%,#191e27,transparent 64%),#030405;
  color:#f4f5f7;
}
.intro[open]{display:grid;place-items:center;animation:fade-out .28s 4s ease both}
.intro::before{
  content:"";
  position:absolute;
  inset:-20%;
  z-index:-1;
  pointer-events:none;
  background:conic-gradient(from 157deg at 50% -5%,transparent 0deg,#d8e6ff53 14deg,#eaf4ff78 23deg,#9cc1ff39 30deg,transparent 44deg);
  animation:spot 2s var(--reveal) both;
}
.intro-content{
  position:absolute;
  inset:0;
  display:grid;
  grid-template: minmax(0,1fr) / minmax(0,1fr);
  place-items:center;
  padding-inline:24px;
  text-align:center;
}
.intro-content>*{grid-area:1/1}
.intro-greeting{margin:0;animation:greeting-out 2.1s ease both}
.intro-greeting span{font-size:clamp(14px,2vw,26px);letter-spacing:.02em}
.intro-greeting strong{display:block;margin-top:.08em;color:var(--gold);font-size:clamp(28px,11vw,155px);font-weight:630;line-height:1;letter-spacing:-.075em}
.intro-wordmark{position:relative;width:min(64%,410px);animation:arrival 1.15s var(--reveal) cubic-bezier(.22,1,.36,1) both}
.intro-wordmark img{display:block;width:100%}
.intro-wordmark::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(112deg,transparent 29%,#fff1 43%,#fff8 49%,transparent 57%) 100% 0/270% 100%;
  mask:url(assets/ba-original-by-boss.webp) center/100% 100% no-repeat;
  mix-blend-mode:screen;
  opacity:0;
  animation:polish 1.5s calc(var(--reveal) + .42s) ease both;
  pointer-events:none;
}
.skip{position:absolute;right:clamp(24px,5vw,80px);bottom:max(24px,env(safe-area-inset-bottom))}
@keyframes greeting-out{0%{opacity:0;transform:translateY(9px)}18%,72%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-12px)}}
@keyframes arrival{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes polish{0%{opacity:0;background-position:100% 0}22%,68%{opacity:.85}100%{opacity:0;background-position:0 0}}
@keyframes spot{0%{opacity:0;transform:rotate(-11deg)}55%{opacity:.85}100%{opacity:.38;transform:rotate(6deg)}}
@keyframes fade-out{to{opacity:0}}
@media(max-width:760px){
 .entry{grid-template-columns:1fr}
 .identity{min-height:0;padding:22px 22px 28px;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;gap:22px 12px;align-items:center}
 .identity-top{grid-column:1/-1}
 .emblem{grid-column:2;grid-row:2;padding:0}
 .emblem img{width:clamp(64px,22vw,110px)}
 .motto{grid-column:1;grid-row:2;font-size:clamp(1.6rem,7.1vw,2.55rem)}
 .access{padding:16px 22px 25px;border-left:0;border-top:1px solid var(--line);align-content:start}
 .access-header{margin-bottom:23px}
 .panel>p{margin:13px 0 23px}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
 .intro-content{grid-template:auto auto / minmax(0,1fr);align-content:center;gap:24px}
 .intro-content>*{grid-area:auto}
}

.identity-top .member-label {
  color: var(--ink);
  font-size: clamp(.9rem, 1.2vw, 1.125rem);
  font-weight: 650;
  letter-spacing: -.02em;
  display: inline-flex;
  align-items: center;
  gap: .55em;
}
.member-label::before {
  content: "";
  width: .42em;
  height: .42em;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px #e0bd7e85;
}
@media (prefers-reduced-motion: reduce) {
  .primary::before { transition: none; }
}

#login h1 { margin-bottom: 28px; }
.field input { transition: border-color .25s ease, box-shadow .25s ease; }
.field input:focus {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 1px #e0bd7e48;
}
@media (prefers-reduced-motion: no-preference) {
  #login .field:first-child input { animation: field-cue .95s .25s ease both; }
  #login .field:nth-child(2) input { animation: field-cue .95s .55s ease both; }
  body:has(.intro[open]) #login .field input { animation-play-state: paused; }
}
@keyframes field-cue {
  0%,100% { box-shadow: inset 0 0 0 1px transparent; }
  48% { box-shadow: inset 0 0 0 1px #e0bd7e9c, inset 0 0 12px #e0bd7e18; }
}

.primary {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 58px;
  padding: 0 54px;
  isolation: isolate;
  overflow: clip;
  border: 1px solid #c3d0da64;
  border-radius: 999px;
  color: #fff9eb;
  background:
    radial-gradient(ellipse at 12% 112%, #dfab5266, transparent 52%),
    radial-gradient(ellipse at 86% -15%, #b2d7ff5c, transparent 48%),
    linear-gradient(180deg, #ffffff16, #ffffff04 48%, #ffffff0d);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
  box-shadow: inset 0 1px 1px #fff8, inset 0 -1px 2px #fff3, 0 9px 22px #0005;
  font-weight: 650;
  transition: transform 180ms ease, border-color 180ms ease;
}
.primary::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(110deg, transparent 32%, #ffdf9a66 50%, transparent 68%);
  transform: translateX(-100%);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
  transition: transform 620ms cubic-bezier(.22,1,.36,1), opacity 180ms ease;
}
.primary span {
  position: absolute;
  inset-inline-end: 9px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #ffffff13;
  border: 1px solid #ffffff32;
}
.primary:is(:hover, :focus-visible, :active) { border-color: #f6d49bba; }
.primary:is(:hover, :focus-visible, :active)::before {
  transform: translateX(30%);
  opacity: 1;
}
.primary:active { transform: scale(.98); }
@media (prefers-reduced-motion: reduce) {
  .primary:active { transform: none; }
}