@font-face {
  font-family: "Seige Loading";
  font-style: normal;
  font-weight: 500 900;
  /* Wait briefly for the preloaded face rather than paint a fallback and swap. */
  font-display: block;
  src: url("./fonts/archivo-latin.woff2") format("woff2");
}
.seige-loading {
  min-height: 100svh;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 24px;
  background: #16141c;
  color: #ff8f73;
}
.seige-loading-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 8vh, 64px);
}
/* The product name labels its mark, so the two sit together below the wordmark. */
.seige-loading-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.seige-loading .seige-loading-product {
  display: flex;
  margin: 0;
  color: #f3f1ec;
  font:
    600 clamp(15px, 3.6vw, 18px) / 1 "Seige Loading",
    sans-serif;
  letter-spacing: -0.01em;
}
.seige-loading .logo {
  display: inline-flex;
  flex-direction: column;
  gap: 0.13em;
  font-size: clamp(52px, 12vw, 80px);
  color: #ff8f73;
}
.seige-loading .logo-wall {
  display: block;
  width: 3.15em;
  height: 0.36em;
  fill: currentColor;
}
.seige-loading .logo-word {
  font-family: "Seige Loading", Archivo, sans-serif;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.9;
}
.seige-loading-icon {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
}
/* A faint coral glow behind the app mark. */
.seige-loading-icon::before {
  content: "";
  position: absolute;
  inset: -75%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgb(255 143 115 / 20%),
    rgb(255 143 115 / 0%) 65%
  );
  pointer-events: none;
}
/* Folded-paper app marks, matching AppIcon.svelte on the always-dark loader. */
.seige-loading,
.fold-dark {
  --fold-plane: #f3f1ec;
  --fold-coral: #ff8f73;
  --fold-deep: #c9573b;
  --fold-deeper: #b0452a;
  --fold-paper: #34323f;
  --fold-shade: rgb(0 0 0 / 14%);
}
.seige-loading-icon svg {
  width: clamp(56px, 14vw, 80px);
  height: clamp(56px, 14vw, 80px);
  overflow: visible;
  stroke: none;
}
.seige-loading-icon .plane {
  fill: var(--fold-plane);
}
.seige-loading-icon .coral {
  fill: var(--fold-coral);
}
.seige-loading-icon .deep {
  fill: var(--fold-deep);
}
.seige-loading-icon .deeper {
  fill: var(--fold-deeper);
}
.seige-loading .seige-loading-status,
.seige-loading #notice {
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  /* The app's status line draws a box; the loader's status is plain text. */
  box-shadow: none;
  color: rgb(243 241 236 / 72%);
  font:
    500 13px/1.5 "Seige Loading",
    sans-serif;
}
/* While the account opens, the merlons of the wordmark's own wall grow and
   settle in a wave from left to right. Without motion it rests as the logo. */
.seige-loading .logo-wall {
  overflow: visible;
}
.seige-loading .logo-wall .merlon {
  transform-box: fill-box;
  /* Grow from the base so a merlon never separates from the wall. */
  transform-origin: 50% 100%;
  animation: seige-loading-merlon 1.8s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
.seige-loading .logo-wall .merlon:nth-of-type(3) {
  animation-delay: 0.12s;
}
.seige-loading .logo-wall .merlon:nth-of-type(4) {
  animation-delay: 0.24s;
}
.seige-loading .logo-wall .merlon:nth-of-type(5) {
  animation-delay: 0.36s;
}
.seige-loading .logo-wall .merlon:nth-of-type(6) {
  animation-delay: 0.48s;
}
.seige-loading .logo-wall .merlon:nth-of-type(7) {
  animation-delay: 0.6s;
}
@keyframes seige-loading-merlon {
  0%,
  45%,
  100% {
    transform: none;
  }
  20% {
    transform: scaleY(1.45);
  }
}
@media (prefers-reduced-motion: reduce) {
  .seige-loading .logo-wall .merlon {
    animation: none;
  }
}

.seige-loading [hidden] {
  display: none !important;
}

/* Static loaders carry every product. loading-destination.js names one on <html>
   before the first paint, so the page never shifts when scripts run. */
:root:not([data-loading]) .seige-loading [data-loading-any],
:root:not([data-loading="calendar"]) .seige-loading [data-destination="calendar"],
:root:not([data-loading="tasks"]) .seige-loading [data-destination="tasks"],
:root:not([data-loading="mail"]) .seige-loading [data-destination="mail"],
:root:not([data-loading="storage"]) .seige-loading [data-destination="storage"],
:root:not([data-loading="notes"]) .seige-loading [data-destination="notes"],
:root:not([data-loading="assistant"])
  .seige-loading
  [data-destination="assistant"] {
  display: none;
}