/* Design: Donya's "Ari & Donya · Save the date" mockup. */
:root {
  --paper: #F8F6F0;
  --ink: #2A2D26;
  --ink-soft: #3E4537;
  --olive: #545F48;
  --leaf: #4F5A45;
  --sage: #6F7865;
  --rule: #D7D9CC;
  --rule-soft: #DAD9D2;
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh; /* phones: the visible height, not counting the browser's toolbars */
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
}
main { flex: 1 0 auto; } /* fill the leftover height so the footer sits at the bottom of short pages */
a { color: var(--olive); }
a:hover { color: var(--ink); }
p { margin: 0; }
[hidden] { display: none !important; }

/* Type */
.eyebrow { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--olive); }
.serif-italic { font-family: var(--serif); font-style: italic; color: var(--ink-soft); }
.small { font-size: 13px; color: var(--olive); }

/* Header */
.site-header {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: center;
  min-height: 84px;
  padding: 0 64px;
  border-bottom: 1px solid var(--rule);
}
.monogram { font-family: var(--serif); font-size: 28px; letter-spacing: 0.06em; color: var(--ink); text-decoration: none; }

/* Hero */
.hero { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 42px 24px 38px; text-align: center; }
.hero h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(56px, 8vw, 92px); line-height: 1.1; }
.hero .serif-italic { font-size: 26px; }

/* Film: the envelope (tap the seal) and the full-screen player */
.film { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 8px 24px 0; }
.envelope-wrap { width: 560px; max-width: 100%; container-type: inline-size; }

/* Positions are fractions of the envelope artwork: a 1600 × 1040 body, its flap 880 tall (incl. lace).
   Layers back to front: back panel, photo in the pocket, Save the Date card, front flaps, top flap, bouquet, seal. */
.envelope {
  position: relative;
  aspect-ratio: 1600 / 1040;
  perspective: 2400px;
  transition: margin 1.1s cubic-bezier(0.65, 0, 0.35, 1);
}
.envelope.is-open { margin-top: 55cqw; } /* room for the opened flap above */
.env-back, .liner-pocket, .env-front { position: absolute; left: 0; top: 0; width: 100%; height: auto; pointer-events: none; }
.env-back { z-index: 0; filter: drop-shadow(0 10px 16px rgba(122, 78, 64, 0.16)); }
.liner-pocket { z-index: 1; opacity: 0; transition: opacity 0.3s ease; } /* hidden while closed: it would show through the lace */
.envelope.is-open .liner-pocket { opacity: 1; }
.env-front { z-index: 3; }

.flap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  aspect-ratio: 1600 / 880;
  z-index: 5;
  transform-origin: 50% 0;
  transform-style: preserve-3d;
  /* the flap drops behind the pocket's contents halfway through turning over */
  transition: transform 1.1s cubic-bezier(0.65, 0, 0.35, 1), z-index 0s linear 0.55s;
  pointer-events: none;
}
.envelope.is-open .flap { transform: rotateX(180deg); z-index: 0; }
.flap-face { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.flap-face img { position: absolute; inset: 0; width: 100%; height: 100%; }
.flap-in { transform: rotateX(180deg); }
.flap-title, .flap-names { position: absolute; left: 0; right: 0; text-align: center; margin: 0; white-space: nowrap; }
.flap-title { top: 8.86%; font-family: "Cormorant SC", var(--serif); font-size: 3.3cqw; letter-spacing: 0.02em; color: #8F7A63; }
.flap-names { top: 15.57%; font-family: "Pinyon Script", cursive; font-size: 6.6cqw; color: #85714F; }
.flap-names .amp { font-family: var(--serif); font-style: italic; font-size: 1.05em; }

.seal {
  position: absolute;
  left: 43.25%;
  top: 51.4%;
  width: 13.5%;
  z-index: 7;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  cursor: pointer;
  filter: drop-shadow(0 4px 5px rgba(122, 78, 64, 0.28));
  animation: seal-breathe 2.8s ease-in-out infinite;
}
.seal img { display: block; width: 100%; height: auto; }
.seal:disabled { cursor: default; animation: none; }
.seal:not(:disabled):hover { transform: scale(1.03); }
.seal:focus-visible { outline: 2px solid var(--olive); outline-offset: 4px; }
@keyframes seal-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}

/* The Save the Date card peeks out of the pocket; it is the film. It rises out, then becomes the player. */
.std-card {
  position: absolute;
  left: 34.375%;
  top: 22.1%;
  width: 31.25%;
  z-index: 2;
  aspect-ratio: 500 / 720;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0;
  filter: drop-shadow(0 3px 6px rgba(42, 45, 38, 0.16));
  transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}
.std-card img { display: block; width: 100%; height: 100%; }
.std-text {
  position: absolute;
  inset: 9% 0 auto;
  font-family: "Pinyon Script", cursive;
  font-size: 6.4cqw;
  line-height: 0.95;
  color: var(--ink-soft);
  text-align: center;
}
.envelope.is-open .std-card { opacity: 1; }
.envelope.card-out .std-card { transform: translateY(-72%); }
.std-card:hover { transform: translateY(-4%); }
.envelope.card-out .std-card:hover { transform: translateY(-74%); }
.std-card.lifted { visibility: hidden; }
.std-card:focus-visible { outline: 2px solid var(--olive); outline-offset: 3px; }

.bouquet {
  position: absolute;
  z-index: 6;
  left: -4%;
  top: -4%;
  width: 30%;
  height: auto;
  opacity: 0;
  transform: translateY(6%);
  transition: opacity 0.8s ease 0.3s, transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(42, 45, 38, 0.18));
}
.envelope.is-open .bouquet { opacity: 1; transform: none; }

.player {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background: var(--paper);
  transition: top 0.7s cubic-bezier(0.65, 0, 0.35, 1), left 0.7s cubic-bezier(0.65, 0, 0.35, 1),
              width 0.7s cubic-bezier(0.65, 0, 0.35, 1), height 0.7s cubic-bezier(0.65, 0, 0.35, 1), background 0.7s ease;
}
.player.full { background: #1E211C; }
/* Hidden until played, so the first frame can't give anything away before guests press play. */
.player video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; visibility: hidden; }
.player.playing video { visibility: visible; }
.player-play { position: absolute; inset: 0; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; }
.player-close {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(248, 246, 240, 0.5);
  border-radius: 50%;
  background: rgba(30, 33, 28, 0.4);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.player.full .player-close { opacity: 1; transition-delay: 0.5s; }
.player-close:focus-visible, .player-play:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.no-scroll { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .envelope, .flap, .std-card, .bouquet, .player, .player-close { transition-duration: 0.01s !important; transition-delay: 0s !important; }
  .seal { animation: none; }
  body .save-date:not([hidden]) { animation: none; }
}

.play-button {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 1px solid rgba(248,246,240,0.85);
  background: rgba(248,246,240,0.12);
  backdrop-filter: blur(4px);
  display: grid;
  place-items: center;
  transition: transform 0.2s ease, background 0.2s ease;
}
.player-play:hover .play-button { transform: scale(1.06); background: rgba(248,246,240,0.24); }
.film-caption { width: 405px; max-width: 100%; text-align: center; letter-spacing: 0.15em; }

/* Save the date */
.save-date:not([hidden]) { animation: reveal 0.9s ease 0.8s both; }
@keyframes reveal { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.save-date { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 56px 24px 28px; text-align: center; }
.divider { display: flex; align-items: center; gap: 44px; }
.divider span { width: 216px; max-width: 22vw; height: 2px; background: var(--rule-soft); }
.countdown { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 0 4px; }
.countdown-units { display: flex; align-items: flex-start; gap: clamp(6px, 2vw, 14px); }
.countdown-units > div { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 2ch; }
.countdown .num, .countdown .sep {
  font-family: var(--serif);
  font-size: clamp(40px, 9vw, 60px);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: lining-nums tabular-nums;
}
.countdown .sep { color: var(--sage); }
.rings { color: #7C7F74; margin: 2px 0 4px; }
.countdown .unit { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--olive); }
.save-date .small { font-size: 12px; }
.cta { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; text-underline-offset: 6px; }

/* Footer */
.site-footer { width: 100%; max-width: 1120px; margin: 0 auto; padding: 24px 24px 40px; }
.site-footer p { border-top: 1px solid var(--rule); padding-top: 24px; font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--olive); }

/* Address page */
.page { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 56px 24px 40px; text-align: center; }
.page h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 6vw, 56px); line-height: 1.15; }
.page .serif-italic { font-size: 22px; }
.form { display: grid; gap: 20px; width: 100%; max-width: 420px; margin-top: 24px; text-align: left; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form label { display: grid; gap: 6px; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--olive); }
.form input {
  font: 16px var(--sans); /* 16px stops iOS zooming in on focus */
  color: var(--ink);
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
}
.form input:focus { outline: none; border-bottom-color: var(--olive); }
.form button {
  margin-top: 8px;
  padding: 14px;
  border: 0;
  background: var(--olive);
  color: var(--paper);
  font: 500 11px var(--sans);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease;
}
.form button:hover { background: var(--ink); }
.form button:disabled { opacity: 0.6; cursor: default; }
.form .note { text-align: center; font-size: 13px; color: var(--olive); }
.error { min-height: 1.2em; text-align: center; font-size: 13px; color: #9A3B2E; }

@media (max-width: 640px) {
  .site-header { padding: 16px; }

  .divider { gap: 24px; }
  .form .row { grid-template-columns: 1fr; }
}