/* ── Logo Spinner Loader ── */
body.is-loading { overflow: hidden; }
body.is-loading > *:not(#loader-overlay):not(style):not(script):not(link) {
  visibility: hidden;
}

#loader-overlay {
  position: fixed;
  inset: 0;
  background-color: #f6f1e9;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
}

#loader-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../../paper-texture.jpeg');
  background-size: cover;
  background-position: center;
  opacity: 0.25;
  mix-blend-mode: multiply;
}

#loader-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 300px 300px;
  opacity: 0.038;
}

.logo-spinner {
  position: relative;
  z-index: 1;
  width: 288px;
  height: 288px;
  opacity: 0;
  animation: logo-appear 0.4s ease forwards, logo-spin 1.2s linear 0.4s infinite;
  will-change: transform, opacity;
}

.logo-spinner img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes logo-spin {
  to { transform: rotate(360deg); }
}

@keyframes logo-appear {
  to { opacity: 1; }
}

#loaderText {
  position: relative;
  z-index: 1;
  font-family: 'Caveat', cursive;
  font-size: 1.375rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #5e5448;
  height: 32px;
  text-align: center;
  min-width: 300px;
  transition: opacity 0.16s ease;
}

#loader-overlay.exit {
  transition: opacity 0.5s ease-out;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .logo-spinner {
    animation: none !important;
    opacity: 1 !important;
  }
  #loader-overlay.exit {
    transition-duration: 0.01s !important;
  }
}