/* ==========================================================================
   Preloader — huge logo on black that shrinks with progress,
   then flies into the header slot (driven by assets/js/preloader.js)
   ========================================================================== */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--c-black);
  transition: background-color 0.9s ease 0.35s;
}

.preloader.is-leaving { background-color: transparent; }

/* The logo wrapper is masked by the logo itself so the
   orange light sweep only ever shows on the logo shape. */
.preloader__logo {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(88vw, 1500px);
  aspect-ratio: 3511 / 873;
  transform: translate(-50%, -50%) scale(1);
  will-change: transform;
  -webkit-mask: url("../images/logo-white-1400.avif") center / 100% 100% no-repeat;
          mask: url("../images/logo-white-1400.avif") center / 100% 100% no-repeat;
}

.preloader__logo img {
  width: 100%;
  height: 100%;
  clip-path: inset(0 100% 0 0);
  animation: logo-reveal 0.7s var(--ease-in-out) forwards;
}

.preloader__logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    transparent 30%,
    rgba(255, 170, 120, 0.9) 48%,
    #fff 50%,
    rgba(255, 170, 120, 0.9) 52%,
    transparent 70%);
  background-size: 250% 100%;
  background-position: 150% 0;
  mix-blend-mode: screen;
  animation: logo-sweep 1.6s ease-in-out 0.6s infinite;
}

.preloader.is-done .preloader__logo::after { animation: none; opacity: 0; }

.preloader.is-flying .preloader__logo {
  transition: transform 1.15s var(--ease-in-out);
}

@keyframes logo-reveal {
  to { clip-path: inset(0 0 0 0); }
}

@keyframes logo-sweep {
  from { background-position: 150% 0; }
  to   { background-position: -50% 0; }
}

/* Progress meta */
.preloader__meta {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: clamp(24px, 5vh, 48px);
  display: flex;
  align-items: center;
  gap: 20px;
  transition: opacity 0.4s ease;
}

.preloader.is-done .preloader__meta { opacity: 0; }

.preloader__bar {
  position: relative;
  flex: 1;
  height: 1px;
  background: var(--c-line);
  overflow: hidden;
}

.preloader__bar i {
  position: absolute;
  inset: 0;
  background: var(--c-accent);
  transform-origin: left;
  transform: scaleX(0);
}

.preloader__count {
  font-family: var(--font-label);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2px;
  color: var(--c-text-dim);
  font-variant-numeric: tabular-nums;
  min-width: 3.5ch;
  text-align: right;
}

@media (prefers-reduced-motion: reduce) {
  .preloader__logo img { animation: none; clip-path: none; }
  .preloader__logo::after { display: none; }
}