/* ==========================================================================
   Invitation page (invite.html)
   The page moves through states set on <body data-state="...">:
     closed  → envelope waiting to be opened
     opening → animation running (steps added as classes on <body>)
     open    → invitation card visible
   ========================================================================== */

.invite-page {
  min-height: 100vh;
  min-height: 100svh;
  background: #3b3f30; /* matches the artwork while it loads */
  overflow-x: hidden;
}

/* ---------- Background artwork ----------
   The artwork has lettering in its top quarter and leaves along the bottom,
   so the envelope is kept between those areas.
   Always anchored at its exact centre: when a screen crops the picture
   (phones crop the sides), it crops equally on both sides, so anything
   centred in the artwork stays centred on screen.                          */
.backdrop {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-color: #3b3f30;
  background-image: url("../images/bg-new.png");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  /* A very slow zoom + drift so the artwork feels alive. Kept above 100% so the
     edges never show; centred, so the artwork stays centred on every screen. */
  transform: scale(1.04);
  animation: backdropBreathe 38s ease-in-out infinite alternate;
}

@keyframes backdropBreathe {
  0%   { transform: scale(1.04) translate3d(0, 0, 0); }
  50%  { transform: scale(1.07) translate3d(-0.6%, -0.4%, 0); }
  100% { transform: scale(1.05) translate3d(0.5%, -0.6%, 0); }
}

/* Lace letter artwork: the lace band is ~118px deep in the source image,
   so it is sliced at 124px and the paper centre stretches with the content. */
.card,
.env-letter {
  border-image-source: url("../images/letter-lace.png");
  border-image-slice: 124 fill;
  border-image-repeat: stretch;
}

/* ---------- Stage ---------- */
.stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* full-width column, so the card's width is predictable */
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  /* The letter rises from below while opening; don't let that flash a scrollbar */
  overflow: hidden;
  overflow: clip;
}

/* Both views share the same grid cell so they can cross-fade */
.closed-view,
.card {
  grid-area: 1 / 1;
}

/* ---------- Closed view ----------
   Fills the screen and centres the envelope in the area below the
   artwork's lettering (top 25%) and above its bottom leaves (last 9%). */
.closed-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3svh, 28px);
  min-height: calc(100vh - 32px);
  min-height: calc(100svh - 32px);
  padding: calc(25vh - 16px) 0 calc(9vh - 16px);
  padding: calc(25svh - 16px) 0 calc(9svh - 16px);
  text-align: center;
  transition: opacity 0.6s var(--ease-out), transform 0.7s var(--ease-out);
}

.prompt {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.prompt-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.3rem, 4.2vw, 1.8rem);
  color: var(--white);
  line-height: 1.25;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

.hint {
  margin: -6px 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: rgba(226, 212, 193, 0.75);
}

.open-btn {
  background: var(--cream);
  color: var(--brown);
  min-width: 210px;
  box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.45);
}

.open-btn:hover {
  background: var(--white);
}

/* Entry animation for closed view elements */
.reveal-in {
  animation: fadeUp 0.9s var(--ease-out) both;
}

.open-btn.reveal-in { animation-delay: 0.35s; }
.hint.reveal-in { animation-delay: 0.5s; }

/* ---------- Envelope ---------- */
/* Height left for the envelope = the 66% band between the artwork's lettering
   and leaves, minus ~180px for the prompt, button and hint. */
.envelope {
  --env-w: min(84vw, 400px, calc((66vh - 180px) * 1.45));
  --env-w: min(84vw, 400px, calc((66svh - 180px) * 1.45));
  position: relative;
  width: var(--env-w);
  min-width: 220px;
  aspect-ratio: 1.45;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  perspective: 1400px;
  border-radius: 6px;
  filter: drop-shadow(0 24px 30px rgba(30, 22, 8, 0.35));
  animation: floatIn 1s var(--ease-out) 0.1s both, gentleFloat 5s ease-in-out 1.2s infinite;
  -webkit-tap-highlight-color: transparent;
}

.envelope:focus-visible {
  outline: 2px solid var(--cream);
  outline-offset: 8px;
}

.envelope > * {
  position: absolute;
  pointer-events: none;
}

.env-back {
  inset: 0;
  z-index: 1;
  border-radius: 6px;
  background: linear-gradient(180deg, #cdbb9f 0%, #d9c8af 100%);
}

/* The letter tucked inside.
   It has the lace artwork's proportions (so its lace isn't stretched), which
   makes it taller than the envelope. This window clips it at the envelope's
   bottom edge, so the lower part stays hidden as if still in the pocket.
   The window reaches one envelope-width above the top, leaving room to rise. */
.env-letter-window {
  left: 0;
  right: 0;
  top: calc(var(--env-w) * -1);
  bottom: 0;
  z-index: 2;
  overflow: hidden;
}

.env-letter {
  position: absolute;
  left: 6%;
  right: 6%;
  top: calc(var(--env-w) * 1.048);                /* 7% down the envelope */
  height: calc(var(--env-w) * 0.88 * 1.4033);    /* letter width × 1197/853 */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Lace letter (shared border-image above): band = 14.54% of the letter width */
  border-image-width: calc(var(--env-w) * 0.88 * 0.1454);
  padding-top: calc(var(--env-w) * (0.88 * 0.1454 + 0.02));
  gap: 6px;
  filter: drop-shadow(0 -2px 6px rgba(76, 55, 19, 0.15));
  transition: transform 0.8s var(--ease-out);
}

.env-letter-logo {
  width: 17%;
  height: auto;
}

.env-letter-text {
  font-family: "Pinyon Script", "Snell Roundhand", cursive;
  font-size: calc(var(--env-w) * 0.065);
  line-height: 1.1;
  color: var(--olive);
}

.env-pocket {
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  border-radius: 6px;
  overflow: hidden;
}

.pocket-left { fill: #e3d5c1; }
.pocket-right { fill: #e0d1bc; }
.pocket-bottom { fill: #ebdfcd; }

/* Top flap, folds open around its top edge */
.env-flap {
  left: 0;
  right: 0;
  top: 0;
  height: 60%;
  z-index: 4;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(180deg, #e6d8c4 0%, #d6c4a8 100%);
  transform-origin: top center;
  transform: rotateX(0deg);
  transition: transform 0.7s cubic-bezier(0.55, 0, 0.25, 1);
}

/* Wax seal */
.env-seal {
  left: 50%;
  top: 60%;
  z-index: 5;
  width: 19%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 30%, #7d7c5c, var(--olive) 55%, #4f4e37);
  box-shadow: 0 3px 8px rgba(30, 22, 8, 0.35), inset 0 0 0 3px rgba(255, 253, 249, 0.12);
  transition: transform 0.4s var(--ease-out), opacity 0.35s;
}

.env-seal img {
  width: 66%;
  height: auto;
}

.envelope:hover .env-seal {
  transform: translate(-50%, -50%) scale(1.06);
}

/* ---------- Opening steps ---------- */
body.step-seal .env-seal {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.6);
}

body.step-flap .env-flap {
  transform: rotateX(180deg);
}

/* Fade the text around the envelope so the opening letter has room */
.prompt,
.open-btn,
.hint {
  transition: opacity 0.4s;
}

body.step-flap .prompt,
body.step-flap .open-btn,
body.step-flap .hint {
  opacity: 0;
}

/* Once the flap passes upright it must sit behind the letter */
body.step-flap-behind .env-flap {
  z-index: 1;
}

body.step-letter .env-letter {
  transform: translateY(-52%);
}

body:not([data-state="closed"]) .envelope {
  animation: none;
  cursor: default;
}

body.step-out .closed-view {
  opacity: 0;
  transform: translateY(40px) scale(0.96);
  pointer-events: none;
}

/* ---------- Invitation card ----------
   The card is the lace letter. It always keeps the lace artwork's proportions
   (853 × 1197) and its lace band is 14.54% of its width, exactly as in the
   artwork, so the lace is only ever scaled evenly and never stretched.
   The letter is as large as the screen allows (max 440px wide), and everything
   inside is sized in cqw (1% of the letter's inner width), so the contents
   scale with the letter like a printed card. Minimum sizes keep the text
   readable and buttons easy to tap on small phones.                         */
.card {
  --w: min(440px, 100vw - 32px, (100vh - 32px) * 0.7126);
  --w: min(440px, 100vw - 32px, (100svh - 32px) * 0.7126);
  --font-script: "Pinyon Script", "Snell Roundhand", "Apple Chancery", cursive;
  --font-letter: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  container-type: inline-size;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--w);
  aspect-ratio: 853 / 1197;
  /* Longhands on purpose: the `border` shorthand would reset the lace border-image */
  border-style: solid;
  border-color: transparent;
  border-width: calc(var(--w) * 0.1454);
  padding: 0;
  filter: drop-shadow(0 24px 30px rgba(20, 15, 5, 0.45));
  text-align: center;
}

.card[hidden],
.closed-view[hidden] {
  display: none;
}

body[data-state="open"] .card,
body.step-out .card {
  animation: cardIn 0.9s var(--ease-out) both;
}

.card-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0 2cqw;
}

/* Calligraphy greeting, in the same spirit as the background lettering */
.card-greeting {
  margin: 0 0 1cqw;
  font-family: var(--font-script);
  font-size: 9.5cqw;
  line-height: 1.15;
  color: var(--olive);
}

.card-title {
  margin-bottom: 2cqw;
  line-height: 0;
}

/* Official logo (assets/images/logo.png) */
.card-logo {
  width: auto;
  height: 30cqw;
}

.card-tagline {
  margin: 0;
  font-family: var(--font-letter);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(14px, 6cqw, 22px);
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--brown);
}

/* Ornamental divider: two fine lines with a small diamond in the middle */
.card-rule {
  position: relative;
  display: block;
  width: 34cqw;
  height: 7px;
  margin: 4cqw auto;
  background: linear-gradient(90deg, transparent, var(--sage) 30%, var(--sage) 42%, transparent 42%, transparent 58%, var(--sage) 58%, var(--sage) 70%, transparent) center / 100% 1px no-repeat;
}

.card-rule::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5px;
  height: 5px;
  background: var(--olive);
  transform: translate(-50%, -50%) rotate(45deg);
}

.card-message {
  max-width: 94cqw;
  margin: 0 0 4.5cqw;
  font-family: var(--font-letter);
  font-size: clamp(14px, 5.5cqw, 19px);
  line-height: 1.42;
  color: var(--ink);
}

.card-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.card-actions .btn-primary {
  width: 78cqw;
  min-height: clamp(44px, 13cqw, 52px);
  padding: 0 4cqw;
  font-size: clamp(14px, 4.6cqw, 16px);
}

/* Secondary link in the letter's typeface */
.card-actions .btn-link {
  min-height: clamp(36px, 10cqw, 44px);
  font-family: var(--font-letter);
  font-style: italic;
  font-size: clamp(15px, 5cqw, 18px);
  color: var(--olive);
}

.replay {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: clamp(30px, 8cqw, 36px);
  padding: 2px 12px;
  border: 0;
  background: none;
  font-size: clamp(11px, 3.4cqw, 12.5px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.2s;
}

.replay:hover {
  opacity: 1;
}

.replay svg {
  width: 15px;
  height: 15px;
}

/* Staggered reveal of card contents */
.reveal-item {
  opacity: 0;
}

body[data-state="open"] .reveal-item {
  animation: fadeUp 0.75s var(--ease-out) both;
  animation-delay: calc(var(--i) * 110ms + 250ms);
}

/* ---------- Living botanical layer ----------
   White line art like the artwork: swaying olive branches from the corners,
   plus leaves and olives drifting slowly down the screen.                   */
.botanicals {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  /* small mouse-parallax offset, set by invite.js (0 when the mouse isn't used) */
  transform: translate3d(calc(var(--px, 0) * 14px), calc(var(--py, 0) * 10px), 0);
  transition: transform 0.6s var(--ease-out);
}

.botanicals svg {
  overflow: visible;
  fill: rgba(243, 235, 221, 0.07);
  stroke: rgba(243, 235, 221, 0.78);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Swaying branches. Each box's stem base is at 7% / 93%, which is also the
   pivot, so the branch rocks from its stem like a real twig in a breeze.     */
.sway {
  --w: clamp(150px, 30vmin, 330px);
  position: absolute;
  width: var(--w);
  height: var(--w);
  transform-origin: 7% 93%;
  opacity: 0.85;
}

.sway svg {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 7% 93%;
  animation: branchSway var(--sway-dur, 7s) ease-in-out var(--sway-delay, 0s) infinite alternate;
}

/* Top-left corner, growing down and to the right */
.sway-1 {
  left: calc(var(--w) * -0.07 - 6px);
  top: calc(var(--w) * -0.93 - 6px);
  transform: rotate(80deg);
  --sway-dur: 7.5s;
}

/* Bottom-right corner, growing up and to the left */
.sway-2 {
  left: calc(100% - var(--w) * 0.07 + 6px);
  bottom: calc(var(--w) * -0.07 - 6px);
  transform: scaleX(-1) rotate(-6deg);
  --sway-dur: 8.5s;
  --sway-delay: -3s;
}

/* Right edge, a little above the middle, reaching up and in */
.sway-3 {
  --w: clamp(110px, 20vmin, 220px);
  left: calc(100% - var(--w) * 0.07 + 4px);
  top: calc(30% - var(--w) * 0.93);
  transform: scaleX(-1) rotate(18deg);
  opacity: 0.6;
  --sway-dur: 6.5s;
  --sway-delay: -1.5s;
}

/* Bottom edge, left of centre, a small sprig */
.sway-4 {
  --w: clamp(100px, 17vmin, 190px);
  left: calc(24% - var(--w) * 0.07);
  bottom: calc(var(--w) * -0.07 - 4px);
  transform: rotate(-14deg);
  opacity: 0.55;
  --sway-dur: 6s;
  --sway-delay: -4s;
}

@keyframes branchSway {
  from { transform: rotate(-3.5deg); }
  to   { transform: rotate(3deg); }
}

/* Drifting leaves and olives: the outer span falls, the inner drawing rocks */
.drift {
  --scale: 1.7;   /* one place to make all drifting leaves bigger or smaller */
  position: absolute;
  top: 0;
  left: var(--x);
  width: calc(var(--size) * var(--scale));
  height: calc(var(--size) * var(--scale));
  opacity: 0;
  animation: driftFall var(--dur) linear var(--delay) infinite;
  will-change: transform, opacity;
}

.drift svg {
  display: block;
  width: 100%;
  height: 100%;
  stroke-width: 2.2;
  animation: driftRock var(--sway) ease-in-out infinite alternate;
}

.drift.olive {
  --scale: 1.4;
}

.drift.olive svg {
  stroke-width: 1.8;
}

@keyframes driftFall {
  0%   { opacity: 0;    transform: translate3d(0, -12vh, 0); }
  8%   { opacity: 0.85; }
  88%  { opacity: 0.85; }
  100% { opacity: 0;    transform: translate3d(var(--drift), 112vh, 0); }
}

@keyframes driftRock {
  from { transform: translateX(-12px) rotate(-28deg); }
  to   { transform: translateX(12px) rotate(32deg); }
}

/* Phones: fewer drifting pieces and smaller corner branches, so it stays calm */
@media (max-width: 600px) {
  .drift:nth-of-type(n + 8) { display: none; }
  .sway { --w: clamp(130px, 38vmin, 200px); }
  .sway-3 { --w: 110px; }
  .sway-4 { display: none; }
}

/* ---------- Keyframes ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes floatIn {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes gentleFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(70px) scale(0.86); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- Short screens ---------- */
@media (max-height: 640px) {
  .hint { display: none; }
  .closed-view { gap: 14px; }
  .envelope {
    --env-w: min(84vw, 360px, calc((66vh - 140px) * 1.45));
    --env-w: min(84vw, 360px, calc((66svh - 140px) * 1.45));
  }
}

/* ---------- Reduced motion ---------- */
/* Visitors who prefer less motion get a still scene: branches stay, nothing drifts */
@media (prefers-reduced-motion: reduce) {
  .envelope { animation: none; }
  .backdrop,
  .sway svg { animation: none; }
  .drift { display: none; }
  .botanicals { transform: none; transition: none; }
}