/* Minimal preparation screen. It remains opaque until the live hero paints. */
.preloader {
  --loader-progress: 0;
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  color: #edf7fd;
  background: #040c15;
  overflow: hidden;
  cursor: wait;
  isolation: isolate;
  opacity: 1;
  visibility: visible;
  transition: opacity .42s cubic-bezier(.22,1,.36,1), visibility 0s .42s;
  animation: loaderSafetyExit 0s 8s forwards;
}
@keyframes loaderSafetyExit { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.preloader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.preloader[hidden] { display: none; }
body.loader-active { overflow: hidden; }

.loader-ambient {
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 47%, rgba(28,103,151,.16), transparent 35%),
    #040c15;
}

.loader-topline {
  position: absolute;
  top: 28px;
  left: 50%;
  display: flex;
  justify-content: center;
  transform: translateX(-50%);
}
.loader-brand { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.loader-brand img { width: 48px; height: 36px; object-fit: contain; }
.loader-brand > span { font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.loader-brand small { display: none; }
.loader-signature,.loader-bottomline,.loader-visual,.loader-copy p,.loader-stops { display: none; }

.loader-content {
  width: min(360px,86vw);
  text-align: center;
  transition: opacity .3s, transform .42s cubic-bezier(.22,1,.36,1), filter .36s;
}
.loader-copy { margin: 0 0 42px; }
.loader-copy h2 {
  margin: 0;
  color: #f4faff;
  font-size: clamp(34px,4.2vw,52px);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -.05em;
}
.loader-copy h2 em { display: block; color: #94d7f8; font-style: normal; }
.loader-meter { width: 100%; text-align: left; }
.loader-meter-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 12px; }
[data-loader-status] { color: #91aabd; font-size: 11px; line-height: 1.4; }
.loader-percentage { display: flex; align-items: baseline; gap: 3px; color: #eaf9ff; font-variant-numeric: tabular-nums; }
.loader-percentage b { font-size: 18px; font-weight: 400; line-height: 1; letter-spacing: -.04em; }
.loader-percentage small { color: #789caf; font-size: 9px; }
.preloader-track { position: relative; height: 1px; background: rgba(182,222,245,.18); }
.preloader-track > span {
  position: absolute;
  inset: 0;
  transform: scaleX(var(--loader-progress));
  transform-origin: left;
  background: linear-gradient(90deg,#e95c1e,#f58a43 30%,#7ad8ff 82%,#d8f8ff);
  box-shadow: 0 0 12px rgba(92,199,255,.38);
}
.preloader-track > i {
  position: absolute;
  left: calc(var(--loader-progress) * 100%);
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  transform: translate(-50%,-50%);
  background: #e9fbff;
  box-shadow: 0 0 7px #b5f3ff,0 0 18px #52b7ff;
}
.preloader.is-done .loader-content { opacity: 0; transform: scale(.985); filter: blur(4px); }

@media(max-width:700px) {
  .preloader { padding: 20px; }
  .loader-topline { top: 22px; }
  .loader-brand { gap: 9px; }
  .loader-brand img { width: 42px; height: 32px; }
  .loader-brand > span { font-size: 14px; }
  .loader-content { width: min(320px,86vw); }
  .loader-copy { margin-bottom: 34px; }
  .loader-copy h2 { font-size: clamp(32px,9vw,42px); }
}
@media(max-height:600px) {
  .loader-copy { margin-bottom: 24px; }
  .loader-copy h2 { font-size: 30px; }
}
@media(prefers-reduced-motion:reduce) {
  .preloader { transition: opacity .12s,visibility 0s .12s; }
  .loader-content { transition: none; }
  .preloader.is-done .loader-content { transform: none; filter: none; }
}
