/*
  base.css: layout and mechanics only (positioning, show/hide states, animation timing).
  Every colour, font and decorative choice comes from variables in theme.css,
  so a redesign normally only touches theme.css and assets/.
*/

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100svh;
  background: var(--page-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
}
body.is-locked { overflow: hidden; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }

/* ---------- Envelope intro ---------- */
.envelope-screen {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--envelope-screen-bg);
  transition: opacity .7s ease .9s, visibility 0s linear 1.6s;
}
.envelope-screen.is-open { opacity: 0; visibility: hidden; }

.envelope {
  position: relative;
  width: min(86vw, 360px);
  aspect-ratio: var(--envelope-ratio);
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  perspective: 1200px;
  -webkit-tap-highlight-color: transparent;
}
.envelope > span { position: absolute; display: block; }
.envelope__back, .envelope__front, .envelope__flap { inset: 0; }
.envelope__back { z-index: 1; }
.envelope__letter {
  z-index: 2;
  left: 7%; right: 7%; top: 6%; bottom: 6%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .8s cubic-bezier(.2,.7,.2,1) .7s;
}
.envelope__front {
  z-index: 3;
  clip-path: polygon(0 0, 50% var(--flap-depth), 100% 0, 100% 100%, 0 100%);
}
.envelope__flap {
  z-index: 4;
  clip-path: polygon(0 0, 100% 0, 50% var(--flap-depth));
  transform-origin: top center;
  transition: transform .7s ease .15s, z-index 0s linear .5s;
}
.envelope__seal {
  z-index: 5;
  left: 50%;
  top: var(--flap-depth);
  width: var(--seal-size);
  height: var(--seal-size);
  translate: -50% -50%;
  display: grid;
  place-items: center;
  transition: transform .35s ease, opacity .35s ease;
}
.envelope.is-open .envelope__seal { transform: scale(.4); opacity: 0; }
.envelope.is-open .envelope__flap { transform: rotateX(180deg); z-index: 0; }
.envelope.is-open .envelope__letter { transform: translateY(-38%); }

/* ---------- Page sections ---------- */
.invite {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
  overflow-x: clip;
}
.section {
  padding: var(--space-6) 0;
  text-align: center;
}
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  position: relative;
}
.names { margin: var(--space-3) 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .25em; }
.names__amp { display: inline-block; }
.scroll-hint { position: absolute; bottom: var(--space-4); left: 50%; translate: -50% 0; }

/* Scratch card */
.scratch {
  position: relative;
  width: min(100%, 320px);
  aspect-ratio: var(--scratch-ratio);
  margin: var(--space-4) auto 0;
  overflow: hidden;
}
.scratch__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3);
}
.scratch__cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: grab;
  transition: opacity .6s ease;
}
.scratch__cover.is-cleared { opacity: 0; pointer-events: none; }

/* Countdown */
.countdown__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  margin-top: var(--space-4);
}
.countdown__unit { display: flex; flex-direction: column; align-items: center; padding: var(--space-3) 0; }

/* Events */
.events__days { display: grid; gap: var(--space-5); margin-top: var(--space-4); }
.day__events { display: grid; gap: var(--space-3); margin-top: var(--space-3); }
.event {
  display: grid;
  grid-template-columns: var(--event-icon-size) 1fr;
  align-items: center;
  gap: var(--space-3);
  text-align: left;
}
.event__icon { width: var(--event-icon-size); height: var(--event-icon-size); }
@media (min-width: 720px) {
  .events__days { grid-template-columns: 1fr 1fr; }
}

/* Venue */
.venue__address { font-style: normal; margin: var(--space-2) 0 var(--space-4); }

/* Buttons */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 48px;
  padding: .75em 1.6em;
  text-decoration: none;
  cursor: pointer;
}
.button:disabled { cursor: progress; }
.link-button { background: none; border: 0; padding: var(--space-2); cursor: pointer; text-decoration: underline; }

/* RSVP form */
.rsvp__form, .rsvp__already, .thanks { text-align: left; margin-top: var(--space-4); }
.rsvp__already, .thanks { text-align: center; display: grid; gap: var(--space-3); justify-items: center; }
.field { margin: 0 0 var(--space-4); padding: 0; border: 0; min-width: 0; }
.field label:not(.choice), .field legend { display: block; margin-bottom: var(--space-1); padding: 0; }
.field :is(input:not([type="checkbox"]):not([type="radio"]), textarea) {
  width: 100%;
  min-height: 48px;
  padding: .7em .85em;
  font: inherit;
  font-size: max(16px, 1rem); /* 16px stops iOS zooming into inputs */
}
.field textarea { resize: vertical; min-height: 96px; }
.field-row { display: grid; gap: 0 var(--space-3); }
@media (min-width: 520px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field__hint { margin: calc(var(--space-3) * -1) 0 var(--space-4); }
.field__error { margin: var(--space-1) 0 0; min-height: 0; }
.field__error:empty { display: none; }
.choices { display: grid; gap: var(--space-2); }
.choices--inline { grid-template-columns: 1fr 1fr; }
.choice {
  display: flex;
  align-items: center;
  gap: .65em;
  min-height: 48px;
  padding: .55em .85em;
  cursor: pointer;
}
.choice input { width: 20px; height: 20px; margin: 0; flex: none; }
.rsvp__submit { width: 100%; margin-top: var(--space-2); }
.form__error { margin: 0 0 var(--space-3); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Footer */
.footer { text-align: center; padding: var(--space-5) 0 calc(var(--space-6) + env(safe-area-inset-bottom)); }

/* Music toggle */
.music-toggle {
  position: fixed;
  top: calc(var(--space-3) + env(safe-area-inset-top));
  right: var(--space-3);
  z-index: 40;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  cursor: pointer;
}

/* Scroll-in animation (only when motion is OK) */
@media (prefers-reduced-motion: no-preference) {
  .section.will-reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
  .section.will-reveal.is-visible { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}