/* SwingRoma — placeholder
   Palette: Crema #faf4dc · Rosso #b11226 · Caffé #5a3e1b */

:root {
  --crema: #faf4dc;
  --rosso: #b11226;
  --caffe: #5a3e1b;
}

*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  font-family: "Jost", "Futura", "Century Gothic", sans-serif;
  color: var(--caffe);
  background: var(--crema);
  overflow-x: hidden;
}

/* ---------- content ---------- */

.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: clamp(1.5rem, 5vw, 3rem);
}

.eyebrow {
  margin: 0 0 1.1em;
  font-size: clamp(0.7rem, 2vw, 0.85rem);
  font-weight: 600;
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--caffe);
  animation: rise 0.7s 0.15s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

#logo h1 {
  margin: 0;
  font-family: "Limelight", "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(2.25rem, 13vw, 9rem);
  line-height: 1.05;
  letter-spacing: 0.05em;
  color: var(--rosso);
  white-space: nowrap;
  animation: settle 0.9s 0.05s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.info { margin-top: clamp(1.6rem, 4.5vh, 2.8rem); }

.tagline {
  margin: 0;
  max-width: 34rem;
  font-size: clamp(1.05rem, 3.2vw, 1.5rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  animation: rise 0.7s 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

.note {
  margin: 0.55em 0 0;
  font-size: clamp(0.7rem, 2vw, 0.8rem);
  font-weight: 600;
  letter-spacing: 0.25em;
  text-indent: 0.25em;
  text-transform: uppercase;
  color: var(--caffe);
  animation: rise 0.7s 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

@keyframes settle {
  from { opacity: 0; transform: scale(0.965); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .eyebrow, #logo h1, .tagline, .note { animation: none; }
}