#preloader {
      position: fixed;
      inset: 0;
      z-index: 9999;
      background: #d2cdc1;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      transition: opacity 1s ease;
    }
    #preloader.fade-out {
      opacity: 0;
      pointer-events: none;
    }

    /* ─── Spinner ────────────────────────────────── */
    #spinner-wrap {
      position: relative;
      width: 64px;
      height: 64px;
      transition: opacity 0.15s ease, transform 0.15s ease;
      z-index: 2;
    }
    #spinner-wrap.hidden {
      opacity: 0;
      transform: scale(0.5);
    }

    .spinner-ring {
      position: absolute;
      inset: 0;
      border-radius: 50%;
      border: 1.5px solid transparent;
      border-top-color: #232323;
      border-right-color: rgba(244,167,195,0.2);
      animation: spin 1s cubic-bezier(0.55,0.15,0.45,0.85) infinite;
    }
    .spinner-ring::after {
      content: '';
      position: absolute;
      inset: 7px;
      border-radius: 50%;
      border: 1px solid transparent;
      border-top-color: rgba(244,167,195,0.3);
      animation: spin 1.8s linear infinite reverse;
    }
    .spinner-dot {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .spinner-dot::after {
      content: '';
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #232323;
      box-shadow: 0 0 8px 3px rgba(244,167,195,0.5);
      animation: pulse 1.1s ease-in-out infinite;
    }

    @keyframes spin  { to { transform: rotate(360deg); } }
    @keyframes pulse {
      0%,100% { opacity: 0.5; transform: scale(1);   }
      50%     { opacity: 1;   transform: scale(1.5); }
    }

    /* ─── Puff container ─────────────────────────── */
    #puff-container {
      position: absolute;
      inset: 0;
      pointer-events: none;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* ─── Individual puff ────────────────────────── */
    /*
      Each .puff is a blurred soft circle.
      --tx / --ty  : direction it drifts on explosion
      --scale      : how large it grows
      --dur        : animation duration (varied per puff)
      --delay      : stagger delay
    */
    .puff {
      position: absolute;
      border-radius: 50%;
      width: 80px;
      height: 80px;
      filter: blur(22px);
      opacity: 0;
      transform: scale(0) translate(0, 0);
      will-change: transform, opacity;  /* hint browser to GPU-composite */
    }

    /* Triggered by JS adding .explode */
    .puff.explode {
      animation:
        puff-move  var(--dur, 1.6s) var(--delay, 0s) ease-out forwards,
        puff-fade  var(--dur, 1.6s) var(--delay, 0s) ease-out forwards;
    }

    /* Movement — expand outward in its direction */
    @keyframes puff-move {
      0%   { transform: scale(0)   translate(0, 0); }
      25%  { transform: scale(0.8) translate(calc(var(--tx) * 0.4), calc(var(--ty) * 0.4)); }
      100% { transform: scale(1.6) translate(var(--tx), var(--ty)); }
    }

    /* Opacity — blooms in, fades out like real powder */
    @keyframes puff-fade {
      0%   { opacity: 0;    }
      18%  { opacity: 0.75; }
      65%  { opacity: 0.5;  }
      100% { opacity: 0;    }
    }