/* ============================================================
   Palette — warm parchment, dusty blush, antique gold
   ============================================================ */
:root {
  /* Indian invitation palette — ivory, rich antique gold, emerald, peacock, ruby */
  --paper: #fbf5e7;
  --paper-2: #f5e9c9;
  --paper-3: #ecd9a5;
  --cream: #fff9ec;
  --gold: #d4a84b;
  --gold-deep: #a8842f;
  --gold-rich: #b88c2c;
  --gold-soft: #e8cf8a;
  --gold-foil-1: #c79a3a;
  --gold-foil-2: #f0d680;
  --gold-foil-3: #8a6a1c;
  --emerald: #2f7a4a;
  --emerald-deep: #1f5132;
  --peacock: #1e6b8c;
  --peacock-deep: #103e55;
  --ruby: #b0263a;
  --ruby-deep: #761a26;
  /* PRIMARY ACCENT — sage / olive green */
  --rose: #6e7d4e;
  --rose-deep: #4d5a35;
  --ink: #2b1d10;
  --ink-soft: #5a4220;
  --ink-mute: #8a7245;

  /* Type system — Belleza (display sans) + Pinyon Script + Cormorant body */
  --serif-display: 'Belleza', 'Cormorant Garamond', serif;
  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --label: 'Belleza', sans-serif;
  --script: 'Pinyon Script', cursive;
  --script-flourish: 'Pinyon Script', cursive;
  --engraved: 'Belleza', sans-serif;
  --sans: 'Belleza', sans-serif;

  --shadow-sm: 0 6px 20px -8px rgba(60, 30, 20, 0.18);
  --shadow:    0 24px 60px -22px rgba(80, 35, 25, 0.28);
  --shadow-lg: 0 40px 80px -28px rgba(80, 35, 25, 0.35);

  --gold-foil: linear-gradient(135deg,
    #8a6a1c 0%, #c79a3a 18%, #f0d680 38%,
    #e8cf8a 52%, #c79a3a 70%, #8a6a1c 100%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga", "dlig";
  overflow-x: hidden;
}

body {
  background: #ffffff;
  min-height: 100vh;
}

::selection { background: var(--blush); color: var(--ink); }

.hidden { display: none !important; }

/* Subtle paper grain */
.grain { display: none; }

/* Falling sakura petals */
.petals { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
/* Olive / orange-tree leaves drifting down */
.petal {
  position: absolute; top: -10vh;
  width: 14px; height: 26px;
  background: radial-gradient(120% 90% at 35% 30%, #c8d6a8, #9aa874 55%, #6e7d4e 100%);
  /* Pointed-oval leaf silhouette */
  clip-path: path("M7 0 C 2 6, 0 14, 0 18 C 0 23, 3 26, 7 26 C 11 26, 14 23, 14 18 C 14 14, 12 6, 7 0 Z");
  border-radius: 0;
  opacity: 0.7;
  filter: drop-shadow(0 1px 1.5px rgba(80,100,60,0.18));
  animation: sakuraFall linear infinite;
}
.petal::before {
  /* leaf vein */
  content: ""; position: absolute; left: 50%; top: 10%; width: 1px; height: 80%;
  background: linear-gradient(to bottom, transparent, rgba(60,80,40,0.4), transparent);
  transform: translateX(-50%);
}
@keyframes sakuraFall {
  0%   { transform: translate3d(0,                       -10vh, 0) rotate(0deg); }
  25%  { transform: translate3d(calc(var(--drift, 4vw) *  0.7),  25vh, 0) rotate(140deg); }
  50%  { transform: translate3d(calc(var(--drift, 4vw) * -0.4),  50vh, 0) rotate(280deg); }
  75%  { transform: translate3d(calc(var(--drift, 4vw) *  0.9),  75vh, 0) rotate(420deg); }
  100% { transform: translate3d(calc(var(--drift, 4vw) *  0.3), 110vh, 0) rotate(560deg); }
}


/* ============================================================
   INTRO — full-screen envelope cover
   ============================================================ */
.intro {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center;
  position: relative; z-index: 3; padding: 2vh 1.5rem;
  transition: min-height 1s cubic-bezier(.2,.7,.2,1),
              padding 1s cubic-bezier(.2,.7,.2,1);
}
.cover-stage {
  position: relative;
  height: min(92vh, 92dvh);
  aspect-ratio: 430 / 615;
  max-width: 96vw;
  cursor: pointer;
  outline: none;
  /* gentle hover lift before opening */
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
}
.cover-stage:hover { transform: translateY(-6px); }
.cover-envelope, .cover-card {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  user-select: none; -webkit-user-drag: none; pointer-events: none;
  filter: drop-shadow(0 24px 50px rgba(80,40,30,0.28))
          drop-shadow(0 6px 12px rgba(80,40,30,0.18));
}
.cover-envelope {
  opacity: 1;
  transform: scale(1);
  transition: opacity 1s cubic-bezier(.4,.1,.4,1),
              transform 1.1s cubic-bezier(.4,.1,.4,1);
  z-index: 2;
}
.cover-card {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 1.1s cubic-bezier(.2,.7,.2,1) 0.25s,
              transform 1.2s cubic-bezier(.2,.7,.2,1) 0.25s;
  z-index: 3;
}

/* Cover hint — floating below the envelope */
.cover-hint {
  position: absolute; bottom: 3vh; left: 0; right: 0;
  text-align: center;
  font-family: var(--script); font-weight: 400;
  font-size: 1.6rem; letter-spacing: 0;
  color: var(--ink-mute);
  pointer-events: none;
  opacity: 0;
  animation: hintPulse 2.4s ease-in-out 1s infinite;
}
@keyframes hintPulse {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50%      { opacity: 0.85; transform: translateY(-3px); }
}

/* Open state — envelope fades + lifts away, card scales up into view */
body.opened .cover-envelope {
  opacity: 0;
  transform: scale(1.08) translateY(-8%);
}
body.opened .cover-card {
  opacity: 1;
  transform: scale(1);
}
body.opened .cover-hint { display: none; }
body.opened .cover-stage { cursor: default; }

/* Once opened, the intro condenses so main flows directly underneath */
body.opened .intro {
  min-height: auto;
  padding: 4rem 1.5rem 4rem;
}
body.opened .cover-stage { height: min(78vh, 78dvh); }

/* ====== Mobile — envelope fills the entire viewport ====== */
@media (max-width: 768px) {
  .intro {
    padding: 0;
    width: 100vw;
    height: 100vh; height: 100dvh;
    min-height: 100vh; min-height: 100dvh;
  }
  .cover-stage {
    width: 100vw;
    height: 100vh; height: 100dvh;
    max-width: none;
    aspect-ratio: auto;
  }
  .cover-envelope {
    object-fit: cover;            /* fill the whole screen even if it crops */
    width: 100%; height: 100%;
    filter: drop-shadow(0 8px 16px rgba(80,40,30,0.18));
  }
  .cover-card {
    object-fit: contain;          /* card stays whole when revealed */
    padding: 4vw;
  }
  .cover-hint {
    bottom: 5vh;
    font-size: 1.4rem;
    /* contrast against the white envelope paper */
    color: rgba(80,30,30,0.7);
    text-shadow: 0 1px 2px rgba(255,255,255,0.6);
  }
  /* After opening — keep card filling most of the viewport, then page flows below */
  body.opened .intro {
    height: auto;
    min-height: auto;
    padding: 0 0 3rem;
  }
  body.opened .cover-stage {
    width: 100vw;
    height: 100vh; height: 100dvh;
  }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
/* Editorial buttons — outlined, italic, no harsh fills */
.btn-primary, .btn-ghost {
  font-family: var(--serif-display); font-weight: 400;
  letter-spacing: 0.32em; text-transform: uppercase;
  font-size: 0.85rem;
  padding: 1rem 2.6rem;
  border-radius: 0;
  cursor: pointer;
  transition: color 0.45s ease, background 0.45s ease, border-color 0.45s ease;
  display: inline-flex; align-items: center; gap: 0.6rem;
  text-decoration: none;
  position: relative;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
/* Top + bottom hairlines extending beyond the button — editorial frame */
.btn-primary::before, .btn-primary::after,
.btn-ghost::before, .btn-ghost::after {
  content: ""; position: absolute; left: -14px; right: -14px;
  height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: center;
  transition: transform 0.5s cubic-bezier(.2,.7,.2,1);
}
.btn-primary::before, .btn-ghost::before { top: 50%; }
.btn-primary::after,  .btn-ghost::after  { bottom: 50%; }
.btn-primary:hover::before, .btn-ghost:hover::before { transform: scaleX(1) translateY(-12px); }
.btn-primary:hover::after,  .btn-ghost:hover::after  { transform: scaleX(1) translateY(12px);  }
.btn-primary:hover, .btn-ghost:hover {
  background: var(--ink); color: #fff;
}

.diamond-tiny { width: 7px; height: 7px; color: currentColor; opacity: 0.5; }

.hint {
  font-family: var(--serif); font-style: italic;
  color: var(--ink-mute); font-size: 0.82rem; margin-top: 0.8rem;
  opacity: 0; animation: fadeUp 1.2s ease 1.4s forwards;
}

/* ============================================================
   MAIN
   ============================================================ */
.main { position: relative; z-index: 3; }

/* HERO — quiet section below the opened envelope */
.hero {
  min-height: auto; display: grid; place-items: center;
  padding: 4rem 1.5rem 6rem; position: relative; overflow: visible;
}

.hero-frame {
  text-align: center; max-width: 760px; width: 100%;
  padding: 0 1.5rem; background: transparent; position: relative;
}
.hero-frame > * + * { margin-top: 1.4rem; }

.eyebrow {
  font-family: var(--label); font-weight: 400;
  letter-spacing: 0.6em; text-transform: uppercase;
  font-size: 0.78rem; color: var(--ink-mute);
  line-height: 1.6;
}
.ornament-sprig {
  width: 130px; height: 32px; color: var(--rose);
  display: block; margin: 2rem auto; opacity: 0.55;
}

.countdown {
  display: flex; gap: 2rem; align-items: stretch;
  justify-content: center; flex-wrap: wrap;
  margin: 3rem 0 3rem;
}
.countdown > i {
  width: 1px; background: linear-gradient(180deg, transparent, var(--rose), transparent);
  align-self: stretch; opacity: 0.4;
}
.countdown > div {
  min-width: 100px; padding: 0.6rem 0.8rem; line-height: 1;
}
.countdown strong {
  display: block; font-family: var(--serif-display); font-weight: 400;
  font-style: italic;
  font-size: clamp(2.2rem, 5vw, 2.8rem);
  color: var(--rose); line-height: 1;
  /* Stable digit width so seconds don't jiggle */
  font-feature-settings: "lnum", "tnum";
  font-variant-numeric: lining-nums tabular-nums;
}
.countdown span {
  font-family: var(--label); font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.5em; text-transform: uppercase;
  color: var(--ink-mute); margin-top: 0.9rem; display: block;
}
@media (max-width: 480px) {
  .countdown > i { display: none; }
}

/* SECTIONS */
.section {
  max-width: 1040px; margin: 0 auto;
  padding: 8rem 1.5rem; text-align: center;
  position: relative;
}
.kicker {
  font-family: var(--label); font-weight: 400;
  letter-spacing: 0.55em; text-transform: uppercase;
  font-size: 0.78rem; color: var(--rose);
  margin-bottom: 1.6rem;
}
.section-title {
  font-family: var(--serif-display); font-weight: 400;
  font-style: normal;
  font-size: clamp(2.4rem, 5.5vw, 3.6rem);
  color: var(--ink); letter-spacing: 0.03em;
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: 0.4rem;
}
/* DETAILS — clean modern cards with sage iconography */
.detail-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 4rem;
}
@media (max-width: 920px) { .detail-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .detail-grid { grid-template-columns: 1fr; } }

.detail-card {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(110, 125, 78, 0.18);
  border-radius: 18px;
  padding: 2.4rem 1.4rem 2rem;
  text-align: center;
  box-shadow: 0 4px 22px -10px rgba(50, 60, 30, 0.10);
  transition:
    transform 0.4s cubic-bezier(.2,.7,.2,1),
    box-shadow 0.4s ease,
    border-color 0.4s ease;
}
.detail-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 48px -16px rgba(50, 60, 30, 0.22);
  border-color: rgba(110, 125, 78, 0.4);
}

.detail-icon {
  width: 60px; height: 60px;
  margin: 0 auto 1.6rem;
  border-radius: 50%;
  background: linear-gradient(140deg, rgba(110,125,78,0.12), rgba(110,125,78,0.06));
  display: grid; place-items: center;
  color: var(--rose);                /* sage green */
  transition: background 0.4s ease, color 0.4s ease, transform 0.4s ease;
}
.detail-icon svg { width: 28px; height: 28px; display: block; }
.detail-card:hover .detail-icon {
  background: var(--rose);
  color: #ffffff;
  transform: scale(1.05);
}

.detail-card h4 {
  font-family: var(--label); font-weight: 400;
  font-size: 0.74rem;
  color: var(--ink-mute);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
}
.detail-lead {
  font-family: var(--serif-display); font-weight: 400;
  font-size: clamp(1.2rem, 1.6vw, 1.4rem);
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 0.5rem;
}
.detail-meta {
  font-family: var(--serif); color: var(--ink-soft);
  line-height: 1.7; font-size: 1rem;
  font-style: italic;
  margin: 0;
}
.link {
  display: inline-block; margin-top: 1.4rem;
  color: var(--rose); text-decoration: none;
  font-family: var(--label); font-size: 0.74rem;
  letter-spacing: 0.4em; text-transform: uppercase;
  border-bottom: 1px solid var(--rose);
  padding-bottom: 4px;
  transition: color 0.3s;
}
.link:hover { color: var(--rose-deep); border-color: var(--rose-deep); }

.actions {
  margin-top: 4rem;
  display: flex; gap: 1.2rem; justify-content: center; flex-wrap: wrap;
}

/* RSVP */
.rsvp-form {
  max-width: 620px; margin: 4rem auto 0;
  display: grid; gap: 2rem; text-align: left;
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(255,248,235,0.7));
  padding: 3.6rem 3rem;
  border: 1px solid rgba(216,128,72,0.35);
  border-radius: 4px;
  box-shadow: var(--shadow);
  position: relative;
}
.rsvp-form::before, .rsvp-form::after {
  content: ""; position: absolute; width: 20px; height: 20px;
  border: 1px solid var(--gold); opacity: 0.7;
}
.rsvp-form::before { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.rsvp-form::after  { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }

.form-row { display: grid; gap: 2rem; grid-template-columns: 1fr 1fr; }
@media (max-width: 540px) { .form-row { grid-template-columns: 1fr; } }

.field { display: grid; gap: 0.7rem; }
.field > span, .response legend {
  font-family: var(--label); font-weight: 400;
  font-size: 0.72rem; letter-spacing: 0.45em;
  text-transform: uppercase; color: var(--ink-mute);
}
.field input, .field textarea {
  font-family: var(--serif); font-size: 1.1rem;
  padding: 0.7rem 0; border: 0;
  border-bottom: 1px solid rgba(216,128,72,0.55);
  background: transparent; color: var(--ink);
  border-radius: 0; transition: border 0.3s;
}
.field input::placeholder, .field textarea::placeholder {
  color: var(--ink-mute); font-style: italic; opacity: 0.7;
}
.field input:focus, .field textarea:focus {
  outline: none; border-bottom-color: var(--rose);
}

.response { border: 0; padding: 0; }
.response legend { margin-bottom: 1.2rem; }
.pill { display: inline-block; margin: 0 0.6rem 0.6rem 0; cursor: pointer; }
.pill input { position: absolute; opacity: 0; pointer-events: none; }
.pill span {
  display: inline-block; padding: 0.85rem 1.6rem;
  border: 1px solid rgba(216,128,72,0.6);
  border-radius: 999px;
  font-family: var(--serif-display); font-style: italic;
  font-size: 1.05rem;
  background: transparent;
  color: var(--ink);
  transition: all 0.3s;
}
.pill:hover span { background: rgba(184,153,104,0.12); }
.pill input:checked + span {
  background: linear-gradient(135deg, var(--rose), var(--rose-deep));
  color: var(--paper);
  border-color: var(--rose-deep);
  box-shadow: 0 8px 20px -10px rgba(128,60,51,0.6);
}

.btn-primary.submit { justify-self: center; margin-top: 0.6rem; }
.form-msg {
  font-family: var(--serif); font-style: italic;
  min-height: 1.4em; color: var(--rose);
  text-align: center; font-size: 1.05rem;
}

/* Big visible confirmation that replaces the form on success */
.rsvp-thanks {
  max-width: 620px; margin: 4rem auto 0;
  text-align: center;
  padding: 4rem 2.5rem;
  background: #ffffff;
  border: 1px solid rgba(110, 125, 78, 0.25);
  border-radius: 18px;
  box-shadow: 0 18px 48px -16px rgba(50, 60, 30, 0.18);
  animation: thanksIn 0.6s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes thanksIn {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}
.thanks-check {
  width: 76px; height: 76px;
  color: var(--rose);
  margin: 0 auto 1.6rem;
  display: block;
}
.thanks-check circle { animation: checkCircle 0.6s ease-out both; }
.thanks-check path   { animation: checkTick 0.5s 0.4s ease-out both; stroke-dasharray: 60; stroke-dashoffset: 60; }
@keyframes checkCircle {
  from { stroke-dasharray: 200; stroke-dashoffset: 200; }
  to   { stroke-dasharray: 200; stroke-dashoffset: 0; }
}
@keyframes checkTick { to { stroke-dashoffset: 0; } }

.thanks-script {
  font-family: var(--script);
  font-size: clamp(2.2rem, 5vw, 2.8rem);
  color: var(--rose); line-height: 1;
  margin: 0 0 0.6rem;
}
.thanks-headline {
  font-family: var(--serif-display); font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2rem);
  color: var(--ink); letter-spacing: 0.02em;
  text-transform: none; line-height: 1.3;
  margin: 0 0 1.2rem;
}
.thanks-meta {
  font-family: var(--serif); font-style: italic;
  color: var(--ink-soft); font-size: 1.05rem;
  line-height: 1.6;
  margin: 0 0 2rem;
  max-width: 420px;
  margin-left: auto; margin-right: auto;
}
.rsvp-thanks .btn-ghost { margin-top: 0.4rem; }

/* FOOTER */
.footer {
  text-align: center; padding: 5rem 1.5rem 6rem;
  border-top: 1px solid rgba(216,160,100,0.25);
  margin-top: 4rem;
  background: transparent;
}
.footer-script { font-family: var(--script); font-weight: 400; color: var(--rose); font-size: 2.4rem; line-height: 1; margin-top: 1rem; }
.footer-names {
  font-family: var(--serif-display); font-weight: 400; font-style: italic;
  font-size: 1.9rem; margin: 0.8rem 0;
  letter-spacing: 0.02em; line-height: 1.3;
  font-feature-settings: "liga", "dlig", "swsh";
}
.footer-meta {
  font-family: var(--label); font-weight: 400;
  font-size: 0.74rem; letter-spacing: 0.5em;
  text-transform: uppercase; color: var(--ink-mute);
  margin-top: 1.2rem;
}

/* Reveal */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 1s ease, transform 1s ease; }
.reveal.in { opacity: 1; transform: none; }

/* Confetti */
#confetti { position: fixed; inset: 0; pointer-events: none; z-index: 9; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    transition-duration: 0.001s !important;
  }
  .petals { display: none; }
}

/* Print — when guests hit Cmd+P, print the card alone */
@media print {
  body { background: #fff !important; }
  .petals, #confetti, .grain, .envelope-shadow,
  #intro .crest, .intro-eyebrow, .intro-sub,
  #openBtn, .hint, .envelope__back, .envelope__front,
  .envelope__flap, .postmark, .seal, .ribbon,
  .hero, .section, footer, .countdown, .reveal { display: none !important; }
  #intro, #main { display: block !important; padding: 0 !important; }
  .envelope, .envelope-wrap {
    width: 100% !important; height: auto !important;
    overflow: visible !important; filter: none !important;
    background: transparent !important;
  }
  .envelope__letter {
    position: static !important; transform: none !important;
    box-shadow: none !important; width: 100% !important; height: auto !important;
  }
  .letter-card-img { width: 100% !important; height: auto !important; }
}