.page-loading {
  --step: 24px;
  --dot-size: 10px;
  --page-loading-cycle: 2.8s;
  --page-loading-step-delay: 0.466666s;
  --page-loading-dot-count: 6;
  --dots-width: calc(
    var(--page-loading-dot-count) * var(--dot-size) +
      (var(--page-loading-dot-count) - 1) * (var(--step) - var(--dot-size))
  );

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  animation: page-loading-enter 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.page-loading--boot,
.page-loading--no-enter {
  animation: none;
}

.page-loading--overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
}

.page-loading--leaving {
  animation: none;
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  opacity: 0;
  pointer-events: none;
}

.page-loading-dots {
  --step: 24px;
  --dot-size: 10px;
  --page-loading-cycle: 2.8s;
  --page-loading-step-delay: 0.466666s;
  --page-loading-dot-count: 6;
  --dots-width: calc(
    var(--page-loading-dot-count) * var(--dot-size) +
      (var(--page-loading-dot-count) - 1) * (var(--step) - var(--dot-size))
  );

  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.page-loading-dots--leaving {
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1);
  opacity: 0;
}

.page-loading-dots--inline {
  position: relative;
  inset: auto;
  z-index: auto;
  width: 100%;
  min-height: 120px;
  padding: 48px 0 120px;
  pointer-events: auto;
}

.page-loading-dots .page-loading__dot {
  /* Same 145deg light→dark treatment as the brand loader dots, with editor beiges + soft pinks. */
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--site-cream-100, #fdf4eb) 58%, var(--site-peach-100, #ffe0d1)) 0%,
    color-mix(in srgb, var(--sand, #f3e6db) 52%, var(--light-pink, #eda28d)) 100%
  );
  box-shadow: 0 1px 6px color-mix(in srgb, var(--light-pink, #eda28d) 34%, transparent);
}

.page-loading__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.page-loading__mesh {
  position: absolute;
  inset: -25%;
  background:
    radial-gradient(ellipse 58% 52% at 18% 72%, #fbf1e8 0%, transparent 68%),
    radial-gradient(ellipse 52% 48% at 78% 22%, #fe917d 0%, transparent 62%),
    radial-gradient(ellipse 62% 56% at 48% 48%, #ff664a 0%, transparent 58%),
    radial-gradient(ellipse 48% 42% at 88% 68%, #f36924 0%, transparent 54%),
    radial-gradient(ellipse 50% 46% at 12% 28%, #eda28d 0%, transparent 52%),
    radial-gradient(ellipse 55% 50% at 62% 82%, #f3ccab 0%, transparent 60%),
    linear-gradient(145deg, #fffaf5 0%, #fde0c7 45%, #f6a382 100%);
  animation: page-loading-mesh-breathe 9s ease-in-out infinite alternate;
  will-change: transform, filter;
}

.page-loading__grain {
  position: absolute;
  inset: 0;
  opacity: 0.42;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

.page-loading__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-loading__copy {
  position: absolute;
  z-index: 1;
  left: 50%;
  bottom: 10vh;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  width: min(90vw, 36rem);
  padding: 0 16px;
  text-align: center;
  box-sizing: border-box;
}

.page-loading__dots {
  position: relative;
  width: var(--dots-width);
  height: 48px;
}

.page-loading__dot {
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--dot-size);
  height: var(--dot-size);
  margin-top: calc(var(--dot-size) / -2);
  border-radius: 50%;
  background: linear-gradient(145deg, #fe917d 0%, #d44d35 100%);
  box-shadow: 0 1px 6px rgba(212, 77, 53, 0.35);
  animation: page-loading-dot var(--page-loading-cycle) linear infinite;
  animation-delay: calc(var(--index) * var(--page-loading-step-delay) * -1);
  will-change: transform, opacity;
}

.page-loading__message {
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: #a85a45;
  text-align: center;
}

.page-loading__char {
  display: inline-block;
  will-change: transform;
}

.page-loading__tip {
  margin: 0;
  font-family: var(--site-font-sans, 'Source Sans 3', sans-serif);
  font-size: 0.95rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.45;
  color: #c48a72;
  text-align: center;
  transition: opacity 0.28s ease;
}

.page-loading__tip--hidden {
  opacity: 0;
}

.page-loading__cancel {
  margin-top: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1.5px solid rgba(212, 77, 53, 0.45);
  background: rgba(255, 253, 250, 0.88);
  color: var(--site-ink-700, #6a2a2c);
  font-family: var(--site-font-sans, 'Source Sans 3', sans-serif);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 200ms ease;
}

.page-loading__cancel:hover {
  background: rgba(255, 250, 245, 0.98);
}

.page-loading__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@keyframes page-loading-enter {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes page-loading-mesh-breathe {
  0% {
    transform: scale(1) translate(0, 0);
    filter: brightness(1) saturate(1);
  }
  33% {
    transform: scale(1.06) translate(2.5%, -1.5%);
    filter: brightness(1.06) saturate(1.08);
  }
  66% {
    transform: scale(1.03) translate(-1.5%, 2%);
    filter: brightness(1.03) saturate(1.04);
  }
  100% {
    transform: scale(1.08) translate(1.5%, 1%);
    filter: brightness(1.08) saturate(1.1);
  }
}

@keyframes page-loading-dot {
  0% {
    transform: translate(-32px, 28px) rotate(-95deg);
    opacity: 0;
  }
  9% {
    transform: translate(-16px, 10px) rotate(-52deg);
    opacity: 0.55;
  }
  19% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 1;
  }
  31.4% {
    transform: translate(calc(1 * var(--step)), 0) rotate(0deg);
    opacity: 1;
  }
  43.8% {
    transform: translate(calc(2 * var(--step)), 0) rotate(0deg);
    opacity: 1;
  }
  56.2% {
    transform: translate(calc(3 * var(--step)), 0) rotate(0deg);
    opacity: 1;
  }
  68.6% {
    transform: translate(calc(4 * var(--step)), 0) rotate(0deg);
    opacity: 1;
  }
  81% {
    transform: translate(calc(5 * var(--step)), 0) rotate(0deg);
    opacity: 1;
  }
  90% {
    transform: translate(calc(5 * var(--step) + 16px), 10px) rotate(52deg);
    opacity: 0.55;
  }
  100% {
    transform: translate(calc(5 * var(--step) + 32px), 28px) rotate(95deg);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-loading {
    animation: none;
  }

  .page-loading--leaving {
    transition: none;
    opacity: 0;
  }

  .page-loading-dots--leaving {
    transition: none;
    opacity: 0;
  }

  .page-loading__mesh,
  .page-loading__dot {
    animation: none;
  }

  .page-loading__dot {
    opacity: 1;
    transform: translate(calc(var(--index) * var(--step)), 0);
  }

  .page-loading__tip {
    transition: none;
  }
}