/* Coming soon page: one Moss surface with the spiral pattern, the looping intro, the copy and the contact footer. */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  min-height: 100svh;
  background: var(--moss);
  color: var(--cream);
  font-family: var(--font-body);
  overflow-x: clip;  /* nothing may scroll sideways, on any phone */
}

/* SpiralPattern background. The frame is exactly the screen and clips; the tile layer
   inside is one tile larger and drifts by one tile, so the loop has no jump. */
.pattern {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.pattern__tile {
  position: absolute;
  inset: calc(-1 * var(--tile, 720px)) 0 0 calc(-1 * var(--tile, 720px));
  animation: drift 140s linear infinite;
}
@keyframes drift { to { transform: translate(var(--tile, 720px), var(--tile, 720px)); } }

.page {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 32px;
  padding:
    max(24px, env(safe-area-inset-top))
    max(var(--gutter), env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(var(--gutter), env(safe-area-inset-left));
}

.hero {
  min-width: 0;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Intro stage, cropped to 1280 x 700 of the source canvas. Never wider than the screen,
   and on short landscape screens it shrinks so the copy and footer stay in view. */
#stage {
  width: min(100%, 720px, max(240px, calc((100svh - 320px) * 1.83)));
  aspect-ratio: 1280 / 700;
  transition: opacity 600ms var(--ease);
}
#stage svg { width: 100%; height: 100%; display: block; overflow: visible; }
#stage.is-out { opacity: 0; }
#stage.done { animation: float 4.2s ease-in-out infinite; }
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-1.1%) rotate(0.35deg); }
}

.copy {
  max-width: 100%;
  margin-block-start: clamp(12px, 3vw, 28px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}
.js .copy:not(.is-in) { opacity: 0; transform: translateY(12px); }

.copy__title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: clamp(2rem, min(9vw, 11svh), 5.5rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--lime);
  overflow-wrap: anywhere;
}
.copy__line {
  margin: 12px 0 0;
  font-size: clamp(1rem, 2.6vw, 1.25rem);
  line-height: 1.5;
}

.footer {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.contact { width: 100%; max-width: 760px; }
.contact__title {
  margin: 0 0 8px;
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lime);
}
.contact__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 24px;
}

/* ContactLink: icon on top, then a small label and the value, all on one center line. 44 px minimum tap target. */
.contact-link {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 20px;
  color: var(--cream);
  text-decoration: none;
  transition: background-color 200ms var(--ease);
}
.contact-link:hover { background-color: var(--forest); }
.contact-link:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }
.contact-link__icon { width: 22px; height: 22px; flex-shrink: 0; fill: currentColor; }
.contact-link__text { display: flex; flex-direction: column; align-items: center; line-height: 1.25; text-align: center; }
.contact-link__label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.contact-link__value { font-size: 0.9375rem; white-space: nowrap; }

.footer__line {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Phones: one contact per row, each centered. */
@media (max-width: 560px) {
  .contact__list { flex-direction: column; align-items: center; }
}

@media (prefers-reduced-motion: reduce) {
  .pattern__tile, #stage.done { animation: none; }
  #stage, .copy, .contact-link { transition: none; }
}