/* ============================================================
   loader.css — Loading Screen

   Fullscreen cream-coloured overlay shown on first page load.
   Displays a centered palette that fills with colour as assets
   load (frames 0 → 10), with a black/white overlay blinking on top
   every 0.4s for a flicker/wobble effect.

   Sits above everything (z-index max) until dismissed.
   Dismissed instantly (display:none) once all assets loaded AND
   minimum duration has elapsed.
   ============================================================ */

.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-surface-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Prevent scroll behind the loader */
  overflow: hidden;
}

.loader--hidden {
  display: none;
}

/* Wrapper — sized per breakpoint, maintains palette aspect ratio */
.loader__palette-wrapper {
  position: relative;
  width: 280px;
  aspect-ratio: 3675 / 2387;
}

@media (max-width: 1199px) {
  .loader__palette-wrapper {
    width: 240px;
  }
}

@media (max-width: 767px) {
  .loader__palette-wrapper {
    width: 180px;
  }
}

/* All palette images stack on top of each other */
.loader__palette {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

/* Overlay sits on top and blinks */
.loader__palette--overlay {
  z-index: 1;
}


/* ============================================================
   Exit transition

   Single stage: cream background disappears so the hero reveals
   behind the still-blinking palette, which lingers for a beat and
   then is yanked out entirely (handled in JS via --hidden).
   ============================================================ */

.loader--transparent {
  background: transparent;
}