/* ==========================================================================
   MAX BAGS MALL — PRELOADER
   Stack: vanilla CSS, paired with preloader.js (GSAP)
   ========================================================================== */

/* Uses --max-red / --max-indigo already defined in variables.css.
   --max-bg maps to this site's --void token. */

/* Lock the page underneath while the preloader owns the screen */
html.max-loading,
html.max-loading body {
  overflow: hidden;
  height: 100%;
}

#max-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--void);
  overflow: hidden;
}

/* Faint diagonal beam echoing the logo's X-beam motif, drifting in the background */
#max-preloader::before {
  content: "";
  position: absolute;
  top: -20%;
  left: 50%;
  width: 2px;
  height: 140%;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(227, 30, 36, 0.35) 35%,
    rgba(43, 27, 101, 0.35) 65%,
    transparent 100%
  );
  transform: translateX(-50%) rotate(18deg);
  transform-origin: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease-out;
}

#max-preloader.max-preloader--beam-on::before {
  opacity: 1;
}

.max-preloader__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 5vh, 48px);
}

/* ---------- Logo + ring ---------- */

.max-preloader__ring-wrap {
  position: relative;
  width: clamp(200px, 26vw, 300px);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.max-preloader__ring-wrap svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg); /* start the stroke at 12 o'clock */
}

.max-preloader__ring-track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 2;
}

.max-preloader__ring-progress {
  fill: none;
  stroke: url(#maxRingGradient);
  stroke-width: 2;
  stroke-linecap: round;
  /* stroke-dasharray/dashoffset are set inline by JS once we know the radius */
}

.max-preloader__logo {
  position: relative;
  width: 62%;
  will-change: transform, opacity, filter;
}

/* Drop-shadow lives on its own wrapper layer so it doesn't create a
   stacking context around .max-preloader__sheen — an ancestor `filter`
   isolates mix-blend-mode children into a context with nothing to blend
   against, which renders the sheen as a flat gray box instead of a
   soft light streak. */
.max-preloader__logo-glow {
  position: relative;
  filter: drop-shadow(0 0 24px rgba(227, 30, 36, 0.18))
          drop-shadow(0 0 46px rgba(43, 27, 101, 0.22));
  opacity: 0;
}

.max-preloader__logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* Sheen sweep across the logo */
.max-preloader__sheen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
}

.max-preloader__sheen::after {
  content: "";
  position: absolute;
  top: -120%;
  left: -25%;
  width: 14%;
  height: 340%;
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 45%,
    rgba(255, 255, 255, 0.4) 55%,
    transparent 100%
  );
  transform: translateX(-200%) skewX(-18deg);
  filter: blur(6px);
  transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
}

.max-preloader__sheen.is-sweeping::after {
  transform: translateX(900%) skewX(-18deg);
}

/* ---------- Counter ---------- */

.max-preloader__counter-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-family: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  color: #F5F5F7;
}

.max-preloader__counter {
  font-size: clamp(2.75rem, 6vw, 4.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  min-width: 2.6ch;
  text-align: right;
}

.max-preloader__percent {
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 500;
  color: var(--max-red);
  transform: translateY(-0.15em);
}

/* ---------- Status label ---------- */

.max-preloader__label {
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(0.75rem, 1.4vw, 0.95rem);
  letter-spacing: 0.08em;
  color: rgba(245, 245, 247, 0.55);
  text-transform: uppercase;
  overflow: hidden;
  height: 1.4em;
}

.max-preloader__label-inner {
  display: block;
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .max-preloader__logo-glow,
  .max-preloader__sheen::after,
  #max-preloader::before {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- Small screens ---------- */

@media (max-width: 480px) {
  .max-preloader__stage {
    gap: 24px;
  }
}