#page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(
    ellipse 80% 80% at 50% 50%,
    #1f0d12 0%,
    #0f0508 100%
  );
}

.loader-container {
  position: relative;
  display: flex;
  flex-direction: column;  /* hammer on top, block below — naturally stacked */
  align-items: center;
  justify-content: center;
}

/* Hammer sits directly above the block — no CSS transform offset */
.loader-hammer-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: -0.75rem;   /* pull block up so hammer visually hits the pad */
}

#loader-hammer,
#loader-block {
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}

#loader-hammer {
  display: block;
  width: 10rem;
  height: auto;
  opacity: 0;
  transform-origin: center bottom;
}

#loader-block {
  width: 12rem;
  height: auto;
  opacity: 0;
  transform-origin: center bottom;
}

.loader-message {
  margin: 0;
  margin-top: 2rem;
  text-align: center;
  font-family: var(--font-heading, "Playfair Display", Georgia, serif);
  letter-spacing: 0.12em;
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.loader-message-line:first-child {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--gold, #C6A75E);
}

.loader-message-line:last-child {
  font-size: 1rem;
  font-weight: 400;
  color: rgba(198, 167, 94, 0.75);
}

.loader-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0.25rem 0;
}

.loader-divider span {
  display: block;
  width: 32px;
  height: 1px;
  background-color: rgba(198, 167, 94, 0.5);
}

.loader-divider svg {
  width: 12px;
  height: 12px;
  opacity: 0.8;
}