/* ============================================
   LOADER.CSS — Sticker Trail Loading Sequence
   ============================================ */

.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-loader);
  background-color: var(--color-canvas);
  overflow: hidden;
}

/* ── Sticker Trail Container ── */
.loader-sticker-trail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.loader-sticker {
  position: absolute;
  width: clamp(70px, 9vw, 140px);
  height: clamp(70px, 9vw, 140px);
  object-fit: contain;
  will-change: transform, opacity;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.08));
}

/* ── Counter (bottom-right) ── */
.loader-counter-wrap {
  position: absolute;
  bottom: clamp(24px, 4vh, 48px);
  right: clamp(24px, 4vw, 60px);
  z-index: 2;
}

.loader-counter {
  font-family: var(--font-display);
  font-size: clamp(4rem, 10vw, 12rem);
  font-weight: 600;
  line-height: 1;
  color: var(--color-ink);
  opacity: 0.12;
  letter-spacing: -0.04em;
}

/* ── Exit state ── */
.loader.hidden {
  pointer-events: none;
  visibility: hidden;
}

/* ── Mobile adjustments ── */
@media (max-width: 768px) {
  .loader-sticker {
    width: clamp(70px, 18vw, 120px);
    height: clamp(70px, 18vw, 120px);
  }

  .loader-counter {
    font-size: clamp(3rem, 15vw, 6rem);
  }
}