/* =========================================================
   Pré-loader — "Feliz aniversário" com adesivos ao redor
   Tudo é posicionado a partir do centro do título (em unidades --p).
   Desktop: medidas do frame de 1440px do Figma.
   Mobile: os adesivos se reorganizam acima e abaixo do título.
   ========================================================= */

/* Sem JS não há pré-loader (o conteúdo aparece direto) */
.preloader { display: none; }

.js .preloader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--c-bg);
  color: var(--c-text);
}

/* Trava a rolagem enquanto carrega */
html.is-loading,
html.is-loading body { overflow: hidden; }

.preloader__stage {
  --p: min(calc(100vw / 1440), calc(100svh / 1024));
  --p: clamp(0.62px, min(calc(100vw / 1440), calc(100svh / 1024)), 1.2px);
  position: relative;
  width: 0;
  height: 0;            /* (0,0) = centro do título */
}
/* Conteúdo escondido até a animação assumir (evita "piscar" montado) */
.preloader:not(.is-ready) .preloader__stage { visibility: hidden; }

.preloader__title,
.preloader__date {
  position: absolute;
  left: 0;
  margin: 0;
  white-space: nowrap;
  text-align: center;
  transform: translateX(-50%);
}

.preloader__title {
  top: calc(-38 * var(--p));
  font-family: var(--f-display);
  font-weight: 700;
  font-size: calc(64 * var(--p));
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.preloader__accent { color: var(--c-accent); }

.preloader__date {
  top: calc(48 * var(--p));
  font-family: "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: calc(21 * var(--p));
  letter-spacing: 0.01em;
  color: #e6e6e6;
}

.preloader__sticker {
  position: absolute;
  left: calc(var(--x) * var(--p));
  top: calc(var(--y) * var(--p));
  width: calc(var(--w) * var(--p));
  height: auto;
  max-width: none;
  user-select: none;
  pointer-events: none;
  filter: drop-shadow(0 8px 18px rgb(0 0 0 / 0.6));
  will-change: transform;
}

/* Posições do Figma (relativas ao centro do título) */
.preloader__sticker--20   { --x: -500; --y: -130; --w: 120; }
.preloader__sticker--hat  { --x: 408;  --y: -118; --w: 80; }
.preloader__sticker--girl { --x: -440; --y: 77;   --w: 205; }
.preloader__sticker--hb   { --x: 168;  --y: 37;   --w: 262; }

/* ---------- Mobile: adesivos acima e abaixo do título ---------- */
@media (max-width: 699.98px) {
  .preloader__stage { --p: min(calc(100vw / 390), 1.25px); }

  .preloader__title { top: calc(-56 * var(--p)); font-size: calc(40 * var(--p)); line-height: 1.15; }
  .preloader__line  { display: block; }   /* título em duas linhas */
  .preloader__date  { top: calc(50 * var(--p)); font-size: calc(15 * var(--p)); }

  /* Adesivos menores e mais próximos do título: composição mais sutil */
  .preloader__sticker--20   { --x: -146; --y: -160; --w: 72; }
  .preloader__sticker--hat  { --x: 98;   --y: -148; --w: 48; }
  .preloader__sticker--girl { --x: -150; --y: 104;  --w: 118; }
  .preloader__sticker--hb   { --x: 36;   --y: 96;   --w: 116; }
}