/* 卡塞尔学院开机动画 v2：桌面横向扫描 / 手机纵向碎片汇聚 */
#boot {
  --boot-x: 0px;
  --boot-y: 0px;
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  min-height: 100svh;
  background: #08090c;
  color: #e8e8ea;
  isolation: isolate;
}

#boot::before {
  display: none;
}

#boot.boot-done { animation: bootV2Out .72s cubic-bezier(.55,0,1,.45) forwards; }

.boot-kicker {
  position: absolute;
  top: 7.2vh;
  left: 4.1vw;
  z-index: 4;
  margin: 0;
  color: rgba(228,232,237,.6);
  font: 400 9px/1 "Cinzel", serif;
  letter-spacing: .48em;
  opacity: 0;
  animation: bootV2CopyIn .8s ease 1.55s forwards;
}

.boot-stage { position: absolute; inset: 0; }

.boot-visual {
  position: absolute;
  top: 48%;
  left: 50%;
  width: min(58vw, 820px);
  aspect-ratio: 1.5;
  transform: translate(-50%,-50%) translate(var(--boot-x),var(--boot-y));
  transition: transform .7s cubic-bezier(.2,.75,.2,1);
  background: transparent;
}

.boot-shards {
  --enter-x: 0px;
  --enter-y: 0px;
  --enter-rotate: 0deg;
  --drift-x: 0px;
  --drift-y: 0px;
  --drift-rotate: 0deg;
  --float-duration: 8s;
  --float-delay: 2s;
  position: absolute;
  inset: 50% auto auto 50%;
  display: block;
  pointer-events: none;
  object-fit: contain;
  user-select: none;
}

.boot-shards-desktop {
  width: 118%;
  height: auto;
  opacity: 0;
  animation: bootV2ShardLayerIn 1.8s cubic-bezier(.16,.84,.28,1) .12s forwards, bootV2ShardLayerFloat var(--float-duration) ease-in-out var(--float-delay) infinite alternate;
}

.boot-shards-desktop.boot-shard-a { --enter-x:-58px; --enter-y:-34px; --enter-rotate:-5deg; --drift-x:30px; --drift-y:-22px; --drift-rotate:4.2deg; --float-duration:5.4s; --float-delay:2.05s; }
.boot-shards-desktop.boot-shard-b { --enter-x:64px; --enter-y:-20px; --enter-rotate:6deg; --drift-x:-27px; --drift-y:25px; --drift-rotate:-3.8deg; --float-duration:6.7s; --float-delay:2.18s; }
.boot-shards-desktop.boot-shard-c { --enter-x:46px; --enter-y:42px; --enter-rotate:4deg; --drift-x:34px; --drift-y:18px; --drift-rotate:3.3deg; --float-duration:4.9s; --float-delay:2.12s; }
.boot-shards-desktop.boot-shard-d { --enter-x:-52px; --enter-y:36px; --enter-rotate:-6deg; --drift-x:-31px; --drift-y:-17px; --drift-rotate:-4.4deg; --float-duration:7.2s; --float-delay:2.26s; }

.boot-shards-mobile { display: none; }
.boot-crest-ghost { display: none; }

.boot-slice,
.boot-crest-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(25vw, 354px);
  aspect-ratio: 1;
  transform: translate(-50%,-50%);
}

.boot-slice {
  z-index: 2;
  display: block;
  overflow: hidden;
  opacity: 0;
  filter: grayscale(1) contrast(1.07) drop-shadow(0 18px 35px rgba(0,0,0,.75));
}

.boot-slice img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.boot-slice-a { clip-path: inset(0 0 69% 0); animation: bootV2SliceA 1.05s cubic-bezier(.2,.8,.2,1) .52s forwards, bootV2CrestRotate 16s linear 2.25s infinite; }
.boot-slice-b { clip-path: inset(32% 0 34% 0); animation: bootV2SliceB 1.12s cubic-bezier(.2,.8,.2,1) .66s forwards, bootV2CrestRotate 16s linear 2.25s infinite; }
.boot-slice-c { clip-path: inset(69% 0 0 0); animation: bootV2SliceC 1.05s cubic-bezier(.2,.8,.2,1) .8s forwards, bootV2CrestRotate 16s linear 2.25s infinite; }

.boot-crest-core {
  z-index: 1;
  object-fit: contain;
  opacity: 0;
  filter: grayscale(1) contrast(1.08) brightness(.7) drop-shadow(0 22px 42px rgba(0,0,0,.8));
  animation: bootV2CoreIn .95s ease 1.28s forwards, bootV2CrestRotate 16s linear 2.25s infinite;
}

.boot-progress {
  position: absolute;
  left: 50%;
  bottom: 3%;
  z-index: 4;
  width: 168px;
  height: 1px;
  overflow: hidden;
  transform: translateX(-50%);
  background: rgba(255,255,255,.13);
  opacity: 0;
  animation: bootV2CopyIn .5s ease .42s forwards;
}

.boot-progress i {
  display: block;
  width: 0;
  height: 100%;
  background: rgba(245,247,250,.82);
  animation: bootV2Progress 1.45s cubic-bezier(.25,.8,.25,1) .46s forwards;
}

.boot-copy {
  position: absolute;
  left: 5.9vw;
  bottom: 11.8vh;
  z-index: 4;
  opacity: 0;
  transform: translateY(10px);
  animation: bootV2CopyIn .8s ease 1.35s forwards;
}

.boot-title {
  max-width: 48vw;
  margin: 0;
  color: rgba(235,237,240,.72);
  font: 400 clamp(30px,4vw,58px)/1.05 "Cinzel", serif;
  letter-spacing: .22em;
  text-indent: .22em;
  text-shadow: none;
  white-space: nowrap;
}

.boot-motto {
  margin: 18px 0 0;
  color: rgba(226,228,232,.48);
  font: 400 13px/1.5 "Noto Serif SC", serif;
  letter-spacing: .34em;
}

.boot-actions {
  position: absolute;
  right: 4.5vw;
  bottom: 6.5vh;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 9px;
  opacity: 0;
  transform: translateY(9px);
  animation: bootV2CopyIn .75s ease 1.82s forwards;
}

.boot-auth {
  min-height: 44px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: rgba(238,240,244,.65);
  font: 400 11px/1 "Noto Sans SC", sans-serif;
  letter-spacing: .16em;
  text-indent: .16em;
  text-decoration: none;
  cursor: pointer;
  transition: color .22s ease, transform .22s ease, filter .22s ease;
}

.boot-auth {
  display: inline-flex;
  min-width: 92px;
  align-items: center;
  justify-content: center;
  padding: 0;
  appearance: none;
}

.boot-auth-primary { color: rgba(250,250,251,.92); }

.boot-auth:hover,
.boot-auth:focus-visible {
  color: #fff;
  outline: none;
  transform: translateY(-2px);
  filter: brightness(1.14);
}

.boot-auth:active { transform: translateY(0); }

/* Originkit Starfield Button 的静态站原生适配：轨道光沿边框移动，悬停时显现像素星场。 */
@property --starfield-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.starfield-button {
  --starfield-angle: 0deg;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 1px;
  box-shadow: 0 0 0 1px rgba(225,235,248,.12), 0 10px 30px rgba(0,0,0,.18);
}

.starfield-button::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from var(--starfield-angle),
    rgba(156,190,224,.08) 0 54%,
    rgba(235,246,255,.96) 64%,
    rgba(155,202,239,.34) 70%,
    rgba(156,190,224,.08) 78% 100%);
  animation: starfieldButtonOrbit 4.8s linear infinite;
}

.starfield-button > span {
  position: relative;
  z-index: 1;
  display: inline-flex;
  box-sizing: border-box;
  width: 100%;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0 16px;
  border-radius: 3px;
  background: rgba(8,9,12,.96);
  box-shadow: inset 0 0 0 1px rgba(238,241,245,.08);
}

.starfield-button > span::before,
.starfield-button > span::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .28s ease;
}

.starfield-button > span::before {
  background-image:
    radial-gradient(circle, rgba(240,247,255,.92) 0 1px, transparent 1.35px),
    radial-gradient(circle, rgba(157,205,242,.72) 0 .8px, transparent 1.2px),
    radial-gradient(circle, rgba(238,243,250,.52) 0 .7px, transparent 1.05px);
  background-position: 2px 4px, 8px 1px, 4px 10px;
  background-size: 13px 13px, 17px 17px, 19px 19px;
  transform: translate3d(0,2px,0);
}

.starfield-button > span::after {
  background: radial-gradient(ellipse at 50% 120%, rgba(128,185,231,.2), transparent 70%);
}

.starfield-button:hover > span::before,
.starfield-button:hover > span::after,
.starfield-button:focus-visible > span::before,
.starfield-button:focus-visible > span::after { opacity: 1; }

.starfield-button:hover > span::before,
.starfield-button:focus-visible > span::before { animation: starfieldButtonDrift 2.6s linear infinite; }

@keyframes starfieldButtonOrbit { to { --starfield-angle: 360deg; } }
@keyframes starfieldButtonDrift { to { background-position: 15px -9px, -9px 18px, 23px -9px; } }

.boot-login-panel[hidden] { display: none; }

.boot-login-panel {
  position: fixed;
  top: 50%;
  right: 4.5vw;
  z-index: 12;
  width: min(370px, calc(100vw - 40px));
  padding: 28px;
  border: 1px solid rgba(238,241,245,.22);
  border-radius: 3px;
  background: #08090c;
  color: rgba(238,240,244,.82);
  transform: translateY(-50%);
  animation: bootV2LoginIn .32s cubic-bezier(.2,.8,.2,1) both;
}

#boot.boot-login-open .boot-actions {
  opacity: 0 !important;
  animation: none;
  pointer-events: none;
}

.boot-login-close {
  position: absolute;
  top: 16px;
  right: 17px;
  padding: 5px 0;
  border: 0;
  background: transparent;
  color: rgba(238,240,244,.46);
  font: 400 11px/1 "Noto Sans SC", sans-serif;
  letter-spacing: .14em;
  cursor: pointer;
}

.boot-login-close:hover,
.boot-login-close:focus-visible { color: #fff; outline: none; }

.boot-login-kicker {
  margin: 0 0 12px;
  color: rgba(238,240,244,.42);
  font: 400 9px/1 "Cinzel", serif;
  letter-spacing: .38em;
}

.boot-login-panel h2 {
  margin: 0;
  color: rgba(245,246,248,.92);
  font: 400 27px/1.2 "Noto Serif SC", serif;
  letter-spacing: .18em;
}

.boot-login-intro {
  margin: 10px 0 24px;
  color: rgba(238,240,244,.45);
  font: 400 12px/1.7 "Noto Sans SC", sans-serif;
  letter-spacing: .06em;
}

.boot-login-field {
  display: block;
  margin: 0 0 16px;
}

.boot-login-field > span:first-child {
  display: block;
  margin-bottom: 7px;
  color: rgba(238,240,244,.58);
  font: 400 11px/1.4 "Noto Sans SC", sans-serif;
  letter-spacing: .1em;
}

.boot-login-field input {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(238,241,245,.18);
  border-radius: 2px;
  outline: none;
  background: #08090c;
  color: rgba(248,249,250,.9);
  font: 400 14px/1 "Noto Sans SC", sans-serif;
  box-sizing: border-box;
}

.boot-login-field input::placeholder { color: rgba(238,240,244,.26); }

.boot-login-field input:focus {
  border-color: rgba(238,241,245,.58);
  box-shadow: 0 0 0 1px rgba(238,241,245,.08);
}

.boot-password-wrap { position: relative; display: block; }
.boot-password-wrap input { padding-right: 54px; }

.boot-password-wrap button {
  position: absolute;
  top: 50%;
  right: 10px;
  padding: 5px;
  border: 0;
  background: transparent;
  color: rgba(238,240,244,.45);
  font: 400 11px/1 "Noto Sans SC", sans-serif;
  cursor: pointer;
  transform: translateY(-50%);
}

.boot-login-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 12px;
  color: rgba(238,240,244,.45);
  font: 400 11px/1.5 "Noto Sans SC", sans-serif;
}

.boot-login-options label { display: inline-flex; align-items: center; gap: 6px; }
.boot-login-options input { accent-color: #aeb5bf; }
.boot-login-options a,
.boot-login-register a { color: rgba(238,240,244,.68); text-decoration: none; }
.boot-login-options a:hover,
.boot-login-register a:hover { color: #fff; }

.boot-login-message {
  min-height: 20px;
  margin: 0 0 10px;
  color: rgba(238,240,244,.54);
  font: 400 11px/1.6 "Noto Sans SC", sans-serif;
}

.boot-login-message.is-error { color: #d98d88; }
.boot-login-message.is-success { color: #8dbda4; }

.boot-login-submit {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(238,241,245,.38);
  border-radius: 2px;
  background: rgba(255,255,255,.035);
  color: rgba(248,249,250,.9);
  font: 400 12px/1 "Noto Sans SC", sans-serif;
  letter-spacing: .2em;
  cursor: pointer;
}

.boot-login-submit:hover,
.boot-login-submit:focus-visible { border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.07); outline: none; }
.boot-login-submit:disabled { cursor: wait; opacity: .58; }

.boot-login-register {
  margin: 18px 0 0;
  color: rgba(238,240,244,.42);
  text-align: center;
  font: 400 11px/1.6 "Noto Sans SC", sans-serif;
}

@keyframes bootV2Out {
  55% { opacity: .38; filter: blur(2px); }
  100% { opacity: 0; visibility: hidden; filter: blur(10px); }
}

@keyframes bootV2ShardLayerIn {
  0% { opacity: 0; transform: translate(-50%,-50%) translate(var(--enter-x),var(--enter-y)) scale(1.34) rotate(var(--enter-rotate)); }
  42% { opacity: .9; }
  100% { opacity: .88; transform: translate(-50%,-50%) scale(1) rotate(0); }
}

@keyframes bootV2ShardLayerFloat {
  from { opacity: .86; transform: translate(-50%,-50%) scale(1) rotate(0); }
  to { opacity: .98; transform: translate(-50%,-50%) translate(var(--drift-x),var(--drift-y)) scale(1.042) rotate(var(--drift-rotate)); }
}

@keyframes bootV2SliceA {
  from { opacity: 0; transform: translate(calc(-50% - 48px),calc(-50% - 2px)); }
  to { opacity: 1; transform: translate(calc(-50% - 2px),-50%); }
}

@keyframes bootV2SliceB {
  from { opacity: 0; transform: translate(calc(-50% + 62px),-50%); }
  to { opacity: 1; transform: translate(calc(-50% + 3px),-50%); }
}

@keyframes bootV2SliceC {
  from { opacity: 0; transform: translate(calc(-50% - 38px),calc(-50% + 3px)); }
  to { opacity: 1; transform: translate(calc(-50% - 1px),-50%); }
}

@keyframes bootV2CoreIn { to { opacity: .38; } }
@keyframes bootV2CrestRotate {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to { transform: translate(-50%,-50%) rotate(360deg); }
}
@keyframes bootV2Progress { to { width: 100%; } }

@keyframes bootV2LoginIn {
  from { opacity: 0; transform: translateY(calc(-50% + 12px)); }
  to { opacity: 1; transform: translateY(-50%); }
}

@keyframes bootV2CopyIn {
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 680px) {
  #boot {
    min-height: 100svh;
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  }

  .boot-kicker {
    top: calc(env(safe-area-inset-top) + 52px);
    left: 22px;
    writing-mode: vertical-rl;
    letter-spacing: .36em;
    font-size: 8px;
  }

  .boot-stage { inset: env(safe-area-inset-top) 0 calc(env(safe-area-inset-bottom) + 184px); }

  .boot-visual {
    top: 44%;
    left: 55%;
    width: min(118vw, 610px);
    aspect-ratio: .67;
    transform: translate(-50%,-50%) translate(var(--boot-x),var(--boot-y));
  }

  .boot-shards-desktop,
  .boot-slice { display: none; }

  .boot-shards-mobile {
    --boot-crest-hole: clamp(62px, 18.5vw, 82px);
    display: block;
    width: 103%;
    height: auto;
    z-index: 1;
    opacity: 0;
    transform-origin: 48% 46%;
    -webkit-mask-image: radial-gradient(circle var(--boot-crest-hole) at 48% 46%, transparent 0 calc(var(--boot-crest-hole) - 6px), #000 var(--boot-crest-hole));
    mask-image: radial-gradient(circle var(--boot-crest-hole) at 48% 46%, transparent 0 calc(var(--boot-crest-hole) - 6px), #000 var(--boot-crest-hole));
    animation: bootV2MobileShardIn 1.7s cubic-bezier(.16,.84,.28,1) .12s forwards, bootV2MobileShardFloat var(--float-duration) ease-in-out var(--float-delay) infinite alternate;
  }

  .boot-shards-mobile.boot-shard-a { --enter-x:-38px; --enter-y:-70px; --enter-rotate:-7deg; --drift-x:22px; --drift-y:29px; --drift-rotate:4.5deg; --float-duration:5.2s; --float-delay:1.95s; }
  .boot-shards-mobile.boot-shard-b { --enter-x:34px; --enter-y:62px; --enter-rotate:6deg; --drift-x:-24px; --drift-y:-27px; --drift-rotate:-4.2deg; --float-duration:6.4s; --float-delay:2.08s; }
  .boot-shards-mobile.boot-shard-c { --enter-x:52px; --enter-y:-38px; --enter-rotate:5deg; --drift-x:-19px; --drift-y:25px; --drift-rotate:3.4deg; --float-duration:5.8s; --float-delay:2.02s; }
  .boot-shards-mobile.boot-shard-d { --enter-x:-46px; --enter-y:54px; --enter-rotate:-6deg; --drift-x:25px; --drift-y:-22px; --drift-rotate:-4.8deg; --float-duration:7.1s; --float-delay:2.16s; }

  .boot-crest-ghost {
    position: absolute;
    top: 9%;
    right: -35%;
    display: block;
    width: 103%;
    height: auto;
    object-fit: contain;
    opacity: 0;
    filter: grayscale(1) brightness(.26) contrast(1.2);
    transform: rotate(8deg) scale(1.08);
    animation: bootV2GhostIn 1.25s ease .55s forwards;
  }

  .boot-crest-core {
    left: 48%;
    top: 46%;
    width: min(31.5vw, 138px);
    z-index: 3;
    opacity: 0;
    filter: grayscale(1) contrast(1.08) brightness(.84) drop-shadow(0 18px 34px rgba(0,0,0,.85));
    animation: bootV2MobileCoreIn 1s cubic-bezier(.16,.84,.28,1) .68s forwards, bootV2CrestRotate 14s linear 1.72s infinite;
  }

  .boot-progress {
    bottom: 8.5%;
    width: 118px;
  }

  .boot-copy {
    left: 30px;
    bottom: 5.5%;
    width: 230px;
  }

  .boot-title {
    max-width: 205px;
    font-size: clamp(24px, 8.4vw, 38px);
    line-height: 1.42;
    letter-spacing: .2em;
    text-indent: 0;
    white-space: normal;
  }

  .boot-motto {
    margin-top: 12px;
    font-size: 11px;
    letter-spacing: .2em;
  }

  .boot-actions {
    right: max(18px, env(safe-area-inset-right));
    bottom: max(18px, env(safe-area-inset-bottom));
    left: max(18px, env(safe-area-inset-left));
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .boot-auth {
    width: 100%;
    min-height: 48px;
    min-width: 0;
    padding: 0 10px;
    border-radius: 3px;
    font-size: 12px;
  }

  .boot-auth-primary { color: rgba(250,250,251,.92); }

  .starfield-button > span { min-height: 46px; padding: 0 8px; }

  .boot-login-panel {
    top: 50%;
    right: max(18px, env(safe-area-inset-right));
    left: max(18px, env(safe-area-inset-left));
    width: auto;
    max-height: calc(100svh - 44px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    padding: 23px 20px 21px;
    overflow-y: auto;
  }

  .boot-login-panel h2 { font-size: 24px; }
  .boot-login-intro { margin-bottom: 18px; }
  .boot-login-field input,
  .boot-login-submit { min-height: 48px; font-size: 16px; }
  .boot-login-submit { font-size: 12px; }
}

@media (max-width: 680px) and (max-height: 680px) {
  .boot-stage { bottom: calc(env(safe-area-inset-bottom) + 154px); }
  .boot-visual { top: 42%; width: min(92vw, 510px); }
  .boot-copy { bottom: 2%; }
  .boot-title { font-size: 24px; line-height: 1.15; max-width: 280px; white-space: nowrap; }
  .boot-motto { display: none; }
  .boot-kicker { top: calc(env(safe-area-inset-top) + 28px); }
}

@keyframes bootV2MobileShardIn {
  0% { opacity: 0; transform: translate(-50%,-50%) translate(var(--enter-x),var(--enter-y)) scale(1.25) rotate(var(--enter-rotate)); }
  45% { opacity: .92; }
  100% { opacity: .86; transform: translate(-50%,-50%) scale(1) rotate(0); }
}

@keyframes bootV2MobileShardFloat {
  from { opacity: .86; transform: translate(-50%,-50%) scale(1) rotate(0); }
  to { opacity: .98; transform: translate(-50%,-50%) scale(1) rotate(var(--drift-rotate)); }
}

@keyframes bootV2GhostIn { to { opacity: .16; transform: rotate(3deg) scale(1); } }

@keyframes bootV2MobileCoreIn {
  from { opacity: 0; transform: translate(-50%,-50%) scale(.55) rotate(-14deg); }
  to { opacity: .96; transform: translate(-50%,-50%) scale(1) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  #boot *,
  #boot *::before,
  #boot *::after { animation-duration: .001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition: none !important; }
}

@media (prefers-reduced-motion: reduce) and (max-width: 680px) {
  .boot-auth { width: 100% !important; }
}