/* =====================================================================
   landing.css: the cover screen (partials/landing.html)
   ---------------------------------------------------------------------
   Monogram, names, the three "10 · 06 · 2027" photos, short text and
   the Enter button. js/router.js adds .is-leaving to fade it out when
   the guest presses Enter (the fade lasts .45s, and router.js waits
   450ms to match), and .is-entering when they come back to it.
   ===================================================================== */

.landing {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 32px; padding: 56px 24px; text-align: center;
  --names-size: clamp(60px, 8vw, 104px);
  transition: opacity .45s ease, transform .45s ease;
}
.landing.is-leaving { opacity: 0; transform: translateY(-16px); }
/* Coming back from the website: the cover settles down into place */
.landing.is-entering { animation: landing-in .6s ease backwards; }
@keyframes landing-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.landing__monogram { width: 150px; height: 150px; }
.names {
  font: 400 var(--names-size)/1.2 var(--script);
  color: var(--ink);
}
/* Three equal columns, up to 280px each. They shrink to fit narrower windows. */
.date-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 280px)); gap: 28px; width: min(100%, 896px); justify-content: center; }
.date-photos .photo { aspect-ratio: 4 / 5; }
.date-photos__num {
  position: absolute; right: 16px; bottom: 12px;
  font: 400 56px/1 var(--serif); color: var(--ink);
}
.photo:has(img) .date-photos__num { color: var(--paper); text-shadow: 0 1px 14px rgba(0, 0, 0, .35); }
/* Enter: a large ghost pill (hairline olive outline, faint tint) with an arrow
   that slides right; it fills olive only on hover. Sizes scale with the
   window: phone size (~375px wide) up to full size from ~960px. */
.landing__enter {
  display: inline-flex; align-items: center; justify-content: center; gap: clamp(12px, 9px + 1vw, 18px);
  /* The script title leaves empty space under its letters, which makes the
     title-to-photos gap look bigger than 32px; match it here so the space
     above and below the photos looks the same at every title size */
  margin-top: calc(var(--names-size) * .3);
  min-width: clamp(200px, 160px + 12.5vw, 280px); height: clamp(52px, 44px + 2.5vw, 68px);
  padding: 0 clamp(26px, 20px + 1.6vw, 36px) 0 clamp(32px, 24px + 2vw, 44px); border-radius: 999px;
  border: 1px solid rgba(94, 107, 71, .45); background: rgba(94, 107, 71, .06);
  color: var(--olive-dark); text-decoration: none;
  font: 400 clamp(13px, 12px + .3vw, 15px)/1 var(--sans); letter-spacing: .3em; text-transform: uppercase;
  transition: background-color .3s, border-color .3s, color .3s;
}
.landing__enter .icon { width: clamp(18px, 16px + .6vw, 22px); height: clamp(18px, 16px + .6vw, 22px); stroke-width: 1.25; transition: transform .3s ease; }
/* Only on real hover devices: on touch screens :hover sticks after a tap */
@media (hover: hover) {
  .landing__enter:hover { background: var(--olive); border-color: var(--olive); color: var(--paper); }
  .landing__enter:hover .icon { transform: translateX(6px); }
}