:root {
  --ivory: #f5efe6;
  --midnight: #060b18;
  --charcoal: #0c0a0b;
  --burgundy: #6b3038;
  --warm-white: #eee8dc;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--charcoal); }

.holding-page {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  padding: clamp(28px, 5vw, 72px);
  transition: background-color 500ms ease;
}

.holding-page::after {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  content: "";
  inset: 0;
  opacity: .025;
  pointer-events: none;
  position: fixed;
}

.theme-light { background: var(--ivory); color: var(--burgundy); }
.theme-dark { background: var(--charcoal); color: var(--warm-white); }
.theme-midnight { background: var(--midnight); color: var(--warm-white); }
.is-loading { background: var(--charcoal); }

.heart-composition {
  align-items: center;
  animation: arrive 900ms ease-out both;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: min(92vw, 860px);
}

.heart-frame {
  animation: heartbeat 4.8s ease-in-out 1.1s infinite;
  height: min(61svh, 610px);
  max-width: min(82vw, 610px);
  transform-origin: 50% 58%;
}

.heart-frame-wide {
  align-items: center;
  display: flex;
  height: auto;
  margin-block: clamp(70px, 12svh, 120px);
  max-width: min(86vw, 920px);
  width: min(86vw, 920px);
}

.heart-image {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.heart-composition p {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(.72rem, 1.35vw, 1.2rem);
  font-weight: 400;
  letter-spacing: clamp(.25em, .65vw, .52em);
  line-height: 1.4;
  margin: clamp(28px, 4svh, 52px) 0 0;
  padding-left: .52em;
  text-align: center;
  white-space: nowrap;
}

@keyframes arrive {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes heartbeat {
  0%, 82%, 100% { transform: scale(1); }
  85% { transform: scale(1.026); }
  88% { transform: scale(1.008); }
  91% { transform: scale(1.019); }
  96% { transform: scale(1); }
}

@media (max-width: 640px) {
  .heart-frame { height: min(54svh, 480px); max-width: 88vw; }
  .heart-frame-wide { height: auto; margin-block: 18svh; max-width: 92vw; width: 92vw; }
}

@media (prefers-reduced-motion: reduce) {
  .heart-composition, .heart-frame { animation: none; }
}