:root {
  color-scheme: light;
  /* Wedding palette: Botanic #0e3e28, Cactus #8c9e62, Cream #f0ecd1, Coral #e08057,
     Pink #eab7bf, Neutral #70665b, Royal #121557, Sky #a9cce9, Black #2a2a2a */
  --page: #f0ecd1;         /* cream */
  --glow: #f8f6e8;
  --ink: #2a2a2a;          /* black */
  --muted: #70665b;        /* neutral */
  --rule: #8c9e62;         /* cactus */
  --accent: #e08057;       /* coral: hover borders, focus rings */
  --accent-dark: #c2653f;
  --paper: #f2dcc2;        /* envelope (peach, from the invite) */
  --paper-shade: #e8ccad;
  --flap: #f6e3cc;
  --address: #4a3326;
  --seal-hi: #eb9a77; --seal: #e08057; --seal-lo: #c2653f; --seal-ink: #f0ecd1;   /* coral */
  --btn: #0e3e28; --btn-dark: #082a1b; --btn-ink: #f0ecd1;                          /* botanic */
  --amp: #e08057;          /* the "&" in the names */
  --count: #0e3e28;        /* countdown number */
  --w: min(84vw, 400px, 46vh);   /* envelope width; the card is 5:7 */
  --ease: cubic-bezier(.65, 0, .35, 1);
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--glow) 0%, transparent 60%),
    var(--page);
  color: var(--ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 19px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: max(56px, 9vh) 16px 64px;
}

/* ---------- Envelope ---------- */

.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}

.envelope {
  position: relative;
  width: var(--w);
  aspect-ratio: 5 / 7;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  perspective: 1400px;
  -webkit-tap-highlight-color: transparent;
  transition: transform .6s var(--ease);
}
.envelope:not(.open):hover { transform: translateY(-4px) rotate(-.4deg); }
.envelope:focus-visible { outline: 2px solid var(--accent); outline-offset: 8px; border-radius: 4px; }

.env-back, .env-front, .env-flap, .flap-out, .flap-in {
  position: absolute;
  inset: 0;
  display: block;
}

/* Inside of the envelope: a floral liner made from the invite itself */
.env-back {
  z-index: 1;
  border-radius: 6px;
  background:
    linear-gradient(rgba(253, 243, 224, .25), rgba(253, 243, 224, .25)),
    url("assets/liner.webp") center / cover;
  box-shadow: 0 30px 60px -25px rgba(90, 50, 20, .45), 0 8px 20px -10px rgba(90, 50, 20, .3);
  transition: opacity .7s ease, transform .9s var(--ease);
}

.card {
  position: absolute;
  z-index: 2;
  inset: 3%;
  display: block;
  transition: transform 1.1s var(--ease), box-shadow 1s ease;
}
.card img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(70, 40, 15, .18);
}

/* Front pocket: everything except the top V */
.env-front {
  z-index: 3;
  border-radius: 6px;
  background:
    linear-gradient(to top right, transparent 49.6%, rgba(120, 70, 30, .07) 50%, transparent 50.6%),
    linear-gradient(to top left, transparent 49.6%, rgba(120, 70, 30, .07) 50%, transparent 50.6%),
    linear-gradient(170deg, var(--paper) 0%, var(--paper-shade) 100%);
  clip-path: polygon(0 0, 50% 40%, 100% 0, 100% 100%, 0 100%);
  transition: opacity .7s ease, transform .9s var(--ease);
}

.addressee {
  position: absolute;
  left: 0; right: 0;
  top: 58%;
  padding: 0 10%;
  text-align: center;
  font-family: "Pinyon Script", cursive;
  font-size: clamp(26px, 8vw, 38px);
  line-height: 1.15;
  color: var(--address);
}

/* Flap: closed it points down over the pocket; it flips up to open */
.env-flap {
  z-index: 4;
  height: 44%;
  transform-origin: top center;
  transform-style: preserve-3d;
  transition: transform .7s var(--ease), z-index 0s .35s;
}
.flap-out, .flap-in {
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  backface-visibility: hidden;
  border-radius: 6px 6px 0 0;
}
.flap-out {
  background: linear-gradient(180deg, var(--flap) 0%, var(--paper) 100%);
  filter: drop-shadow(0 3px 3px rgba(90, 50, 20, .25));
}
.flap-in {
  /* Mirrored by its own rotateX and again by the opened flap, so its
     triangle is drawn point-up to come out point-up when open */
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  border-radius: 0 0 6px 6px;
  transform: rotateX(180deg);
  background:
    linear-gradient(rgba(253, 243, 224, .25), rgba(253, 243, 224, .25)),
    url("assets/liner.webp") center top / cover;
}

.seal {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 44%;
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--seal-hi) 0%, var(--seal) 45%, var(--seal-lo) 100%);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .12), inset 0 -3px 6px rgba(0, 0, 0, .2), 0 4px 10px rgba(120, 50, 10, .35);
  color: var(--seal-ink);
  font-family: "Cinzel", serif;
  font-size: 18px;
  letter-spacing: .02em;
  transition: transform .5s var(--ease), opacity .4s ease;
}
.seal em { font-family: "Pinyon Script", cursive; font-style: normal; font-size: 20px; margin: 0 1px; }

.hint {
  margin: 0;
  font-family: "Cinzel", serif;
  font-size: 13px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
  animation: breathe 2.4s ease-in-out infinite;
  transition: opacity .4s ease;
}
@keyframes breathe { 50% { opacity: .45; } }

/* ---------- Opening sequence (classes added by app.js) ---------- */

/* While open, the envelope drops so the flap and rising card stay on screen */
.envelope.open { cursor: default; transform: translateY(calc(var(--w) * .55)); transition: transform .8s var(--ease); }
.envelope.reveal { transform: none; transition: transform 1.1s var(--ease); }
.envelope.open .seal { transform: scale(.6); opacity: 0; }
.envelope.open .env-flap { transform: rotateX(180deg); z-index: 1; }

.envelope.rise .card { transform: translateY(-45%); }

.envelope.reveal .card {
  z-index: 6;
  transform: translateY(0) scale(1.06);
  box-shadow: 0 40px 80px -30px rgba(90, 50, 20, .5);
}
.envelope.reveal .env-back,
.envelope.reveal .env-front,
.envelope.reveal .env-flap { opacity: 0; transform: translateY(45%); }
.envelope.reveal .env-flap { transition: opacity .7s ease, transform .9s var(--ease); }

.stage.opened .hint { opacity: 0; animation: none; }

/* ---------- Details ---------- */

.details {
  max-width: 560px;
  margin-top: 64px;
  text-align: center;
  opacity: 0;
  transform: translateY(16px);
  visibility: hidden;
  transition: opacity .9s ease, transform .9s var(--ease), visibility 0s .9s;
}
.details.show {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity .9s ease, transform .9s var(--ease);
}

.eyebrow {
  margin: 0 0 6px;
  font-family: "Cinzel", serif;
  font-size: 13px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--muted);
}
h1 {
  margin: 0;
  font-family: "Pinyon Script", cursive;
  font-weight: 400;
  font-size: clamp(48px, 13vw, 72px);
  line-height: 1.1;
}
h1 span { color: var(--amp); }
.when {
  margin: 14px 0 0;
  font-family: "Cinzel", serif;
  font-size: 18px;
  letter-spacing: .14em;
}
.where { margin: 4px 0 0; font-style: italic; color: var(--muted); }

.countdown {
  margin: 28px auto 0;
  padding: 14px 0;
  max-width: 340px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-size: 20px;
}
.countdown strong {
  display: block;
  font-family: "Cinzel", serif;
  font-weight: 500;
  font-size: 40px;
  line-height: 1.1;
  color: var(--count);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 32px;
}
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 20px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  color: var(--ink);
  font-family: "Cinzel", serif;
  font-size: 13px;
  letter-spacing: .1em;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.btn:hover { background: #fff; border-color: var(--accent); transform: translateY(-1px); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.btn.primary { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.btn.primary:hover { background: var(--btn-dark); border-color: var(--btn-dark); }

.note { margin: 30px 0 0; font-style: italic; color: var(--muted); }

@media (max-width: 480px) {
  .actions { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; }
}

/* No animation: show the card and details straight away */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}