/* ---------------------------------------------------------
   Melissa's Baby Shower
   Palette, type scale and layout tokens live here.
--------------------------------------------------------- */

:root {
  --blush-50:  #fffbfc;
  --blush-100: #fdf2f5;
  --blush-200: #fbe4ea;
  --blush-300: #f6cdd8;
  --rose-400:  #eaa8ba;
  --rose-500:  #dd8ba3;
  --rose-600:  #c26b89;
  --rose-700:  #a95573;

  --gold-300: #e8d3a2;
  --gold-400: #d4b473;
  --gold-500: #bd9a52;

  --ink:      #5e4753;
  --ink-soft: #715c68;

  --shadow-sm: 0 2px 10px rgba(160, 110, 130, .07);
  --shadow-md: 0 12px 40px rgba(160, 110, 130, .13);

  --col: 30rem;          /* content column */
  --pad: 1.5rem;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--blush-50);
  color: var(--ink);
  font-family: "Jost", system-ui, sans-serif;
  font-size: 1.0625rem;   /* 17px base, these invitations get read on phones by older eyes */
  font-weight: 400;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* ---------------------------------------------------------
   Backdrop: two watercolor washes pinned top and bottom of
   the viewport so every section sits inside the same paper.
--------------------------------------------------------- */

.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(85% 17% at 50% 0%,   #f6bcd3 0%, rgba(246, 188, 211, 0) 100%),
    radial-gradient(85% 17% at 50% 100%, #f6b9d1 0%, rgba(246, 185, 209, 0) 100%),
    radial-gradient(62% 52% at -8% 62%,  #fcdfea 0%, rgba(252, 223, 234, 0) 100%),
    radial-gradient(62% 52% at 108% 36%, #fcdde9 0%, rgba(252, 221, 233, 0) 100%),
    linear-gradient(180deg, #f9cddf 0%, #fffcfd 20%, #fffcfd 80%, #f9cbde 100%);
}

.backdrop__wash {
  position: absolute;
  left: 0;
  width: 100%;
  height: 28vh;
  background: url("../assets/watercolor-bg.png") no-repeat center / cover;
  opacity: .95;
  mix-blend-mode: multiply;
}

.backdrop__wash--top {
  top: 0;
  mask-image: linear-gradient(#000 30%, transparent);
  -webkit-mask-image: linear-gradient(#000 30%, transparent);
}

.backdrop__wash--bottom {
  bottom: 0;
  transform: rotate(180deg);
  mask-image: linear-gradient(#000 30%, transparent);
  -webkit-mask-image: linear-gradient(#000 30%, transparent);
}

/* Gold veins. These sit only in the pink bands at the very top and
   bottom of the screen, so they never cut across the words. */
.gold {
  position: absolute;
  left: -2%;
  width: 104%;
  height: 26vh;
  opacity: .72;
}

.gold--top {
  top: 0;
  mask-image: linear-gradient(#000 55%, transparent);
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
}

.gold--bottom {
  bottom: 0;
  mask-image: linear-gradient(transparent, #000 45%);
  -webkit-mask-image: linear-gradient(transparent, #000 45%);
}

/* scattered gold flecks, the same speckling as the original artwork */
.flecks {
  position: absolute;
  left: 0;
  width: 100%;
  height: 24vh;
  opacity: .55;
  background-repeat: repeat-x;
  background-size: 240px 100%;
  background-image:
    radial-gradient(2.5px 2.5px at 18px 24%,  #c9a45c, transparent),
    radial-gradient(1.5px 1.5px at 62px 62%,  #d9b56d, transparent),
    radial-gradient(2px 2px     at 104px 36%, #bd9a52, transparent),
    radial-gradient(1.5px 1.5px at 138px 74%, #e0c07d, transparent),
    radial-gradient(2.5px 2.5px at 186px 48%, #c9a45c, transparent),
    radial-gradient(1.5px 1.5px at 214px 18%, #d9b56d, transparent);
}

.flecks--top {
  top: 0;
  mask-image: linear-gradient(#000 40%, transparent);
  -webkit-mask-image: linear-gradient(#000 40%, transparent);
}

.flecks--bottom {
  bottom: 0;
  mask-image: linear-gradient(transparent, #000 60%);
  -webkit-mask-image: linear-gradient(transparent, #000 60%);
}

/* ---------------------------------------------------------
   Drifting butterflies
--------------------------------------------------------- */

.drifters { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }

.drifter {
  position: absolute;
  opacity: 0;
  will-change: transform;
  animation: drift linear forwards;
}

.drifter .bfly__half { filter: drop-shadow(0 6px 12px rgba(190, 130, 155, .14)); }

.drift-heart {
  display: block;
  margin-inline: auto;
  animation: pulse ease-in-out infinite;
}

@keyframes drift {
  0%   { opacity: 0;   transform: translate3d(0, 0, 0) rotate(-6deg); }
  12%  { opacity: .42; }
  50%  { transform: translate3d(14vw, -46vh, 0) rotate(8deg); }
  88%  { opacity: .28; }
  100% { opacity: 0;   transform: translate3d(-6vw, -105vh, 0) rotate(-4deg); }
}

/* ---------------------------------------------------------
   Language toggle
--------------------------------------------------------- */

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  display: flex;
  justify-content: flex-end;
  padding: max(0.9rem, env(safe-area-inset-top)) var(--pad) 0;
}

.lang {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  border: 1px solid rgba(212, 180, 115, .55);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--rose-700);
  font: 500 .88rem/1 "Jost", sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), background .25s, color .25s;
}

.lang:hover { transform: translateY(-1px); background: #fff; }
.lang__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-400); }

/* ---------------------------------------------------------
   Panels
--------------------------------------------------------- */

main { position: relative; z-index: 2; }

/* Sections flow one into the next. Only the hero claims a full
   screen; the rest are sized by their content with breathing
   room around them. */
.panel {
  display: grid;
  place-items: center;
  padding: clamp(3rem, 10vw, 5rem) var(--pad);
  position: relative;
}

.panel__inner {
  width: 100%;
  max-width: var(--col);
  text-align: center;
}

.panel--hero {
  min-height: 100svh;
  padding-top: 5rem;
  padding-bottom: 4rem;
}

/* extra room below the signoff so it clears the gold band at the
   foot of the screen instead of sitting on top of it */
.panel--close { padding-bottom: clamp(6rem, 20vw, 10rem); }

/* ---------------------------------------------------------
   Type
--------------------------------------------------------- */

.script {
  font-family: "Great Vibes", cursive;
  font-weight: 400;
  color: var(--rose-500);
  line-height: .95;
  margin: 0;
  text-shadow: 0 2px 18px rgba(221, 139, 163, .22);
}

/* script headings have tall ascenders, so when one follows a lead
   line the two nearly touch. A little air fixes it everywhere except
   the hero, which is spaced by hand. */
.panel:not(.panel--hero) .lead + .script { margin-top: .35rem; }

.script--xl { font-size: clamp(4.2rem, 22vw, 7.5rem); }
.script--lg { font-size: clamp(3rem, 14vw, 4.6rem); }
.script--md { font-size: clamp(2.2rem, 10vw, 3.2rem); }

.eyebrow {
  margin: 0 0 .2rem;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.65rem, 6.6vw, 2.2rem);
  font-weight: 400;
  font-style: italic;
  color: var(--rose-600);
  letter-spacing: .02em;
}

.eyebrow--soft { margin: .5rem 0 0; color: var(--ink-soft); }

.lead {
  margin: 0 auto;
  max-width: 22ch;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.45rem, 5.8vw, 1.8rem);
  font-weight: 400;
  color: var(--ink);
  letter-spacing: .01em;
}

.lead--wide { max-width: 26ch; }
.lead--after { margin-top: .8rem; }

/* smaller than a lead, larger than card body. For the longer,
   more conversational lines that would look shouty at lead size. */
.blurb {
  margin: 1.1rem auto 0;
  max-width: 34ch;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--ink);
}

.blurb--tight { margin-top: 1rem; font-size: .98rem; color: var(--ink-soft); }

/* .displaced lived here. It was the gold small caps "BABY SHOWER"
   line under Melissa's name, and the invitation section it belonged
   to is gone, so the rule went with it. */

/* in Spanish the small caps line sits above the script name */

/* the signoff sits on the pink band at the foot of the page, so it
   needs the deep rose rather than the pale one to stay readable */
.signoff {
  margin-top: 1.2rem;
  color: var(--rose-700);
  text-shadow: 0 1px 10px rgba(255, 255, 255, .75);
}

/* ---------------------------------------------------------
   Hero art
--------------------------------------------------------- */

.hero__wing { margin: 1.8rem auto 0; }
.hero__wing .bfly { --size: min(58vw, 14rem); --beat: 2.5s; }

.ornament { --size: min(34vw, 7.5rem); --beat: 3s; margin-bottom: 1.4rem; }

/* a little row of hearts, the middle one sitting proud */
.hearts {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  margin-top: 1.5rem;
}

.hearts__h { width: 2.5rem; opacity: .9; animation: pulse 4.4s ease-in-out infinite; }

.hearts__h--sm {
  width: 1.3rem;
  opacity: .6;
  transform: translateY(.45rem);
}

.hearts__h--sm:first-child { animation-delay: -1.4s; }
.hearts__h--sm:last-child  { animation-delay: -2.8s; }

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* the small hearts keep their offset while they breathe */
.hearts__h--sm { animation-name: pulse-sm; }

@keyframes pulse-sm {
  0%, 100% { transform: translateY(.45rem) scale(1); }
  50%      { transform: translateY(.45rem) scale(1.1); }
}

/* closing: three butterflies rising in an arc rather than two in a row */
/* The butterfly PNGs carry a lot of empty margin, so the slots
   overlap to bring the painted wings close together, and each one
   tilts a little so the group reads as flight, not a shelf. */
.wings {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin-bottom: 1.8rem;
}

.wings__slot { display: block; }

.wings__slot--l {
  margin-right: -1.6rem;
  transform: translateY(-1.5rem) rotate(-10deg);
}

.wings__slot--mid { transform: translateY(.5rem); }

.wings__slot--r {
  margin-left: -1.3rem;
  transform: translateY(-2.6rem) rotate(11deg);
}

.wings .bfly { margin-inline: 0; }
.wings__slot--l .bfly, .wings__slot--r .bfly { opacity: .82; }

/* ---------------------------------------------------------
   Flapping butterfly

   Each butterfly is the same PNG drawn twice. One copy is
   clipped to its left half, the other to its right half, and
   the two halves swing on the shared centre line under a
   perspective, so the wings really open and close.
--------------------------------------------------------- */

.bfly {
  position: relative;
  display: block;
  width: var(--size, 10rem);
  aspect-ratio: var(--ar, 1);
  margin-inline: auto;
  perspective: 30rem;
  animation: bob var(--bob, 6s) ease-in-out infinite;
}

.bfly--a { --ar: 444 / 394; }
.bfly--b { --ar: 458 / 423; }

.bfly__half {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  animation: flap var(--beat, 2.7s) ease-in-out infinite;
  filter: drop-shadow(0 8px 14px rgba(196, 132, 158, .18));
}

/* a hair of overlap on the seam so no gap shows between halves */
.bfly__half--l { clip-path: inset(0 49.7% 0 0); }
.bfly__half--r { clip-path: inset(0 0 0 49.7%); animation-name: flap-r; }

@keyframes flap {
  0%, 100% { transform: rotateY(5deg);  }
  42%      { transform: rotateY(52deg); }
  58%      { transform: rotateY(48deg); }
}

@keyframes flap-r {
  0%, 100% { transform: rotateY(-5deg);  }
  42%      { transform: rotateY(-52deg); }
  58%      { transform: rotateY(-48deg); }
}

/* the whole body rises a little on each downstroke */
@keyframes bob {
  0%, 100% { transform: translateY(0)     rotate(0deg); }
  25%      { transform: translateY(-11px) rotate(-1.2deg); }
  50%      { transform: translateY(-3px)  rotate(0deg); }
  75%      { transform: translateY(-14px) rotate(1.2deg); }
}

/* ---------------------------------------------------------
   Cards
--------------------------------------------------------- */

.card {
  margin: 2.2rem auto 0;
  padding: 2rem 1.6rem 1.8rem;
  max-width: 24rem;
  border: 1px solid rgba(212, 180, 115, .35);
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-md);
}

.card__label {
  margin: 0 0 .8rem;
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-500);
}

.card__date {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.75rem, 6.8vw, 2.15rem);
  font-weight: 600;
  color: var(--rose-700);
  letter-spacing: .01em;
}

.card__time {
  margin: .3rem 0 0;
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
}

/* .card__venue lived here, for the big venue name on the old location
   card. That section is gone, and the venue now sits in .card__addr
   inside the thank you card instead. */

.card__addr { margin: .6rem 0 0; font-size: 1.1rem; color: var(--ink); line-height: 1.65; }
.card__note { margin: 0 0 1.2rem; font-size: 1.05rem; color: var(--ink); }

/* when the note is the last thing in a card there is no button
   below it, so the trailing gap would dangle */
.card__note--last { margin-bottom: 0; }
.card__heart { width: 2.8rem; margin: 0 auto 1rem; opacity: .9; animation: pulse 4.4s ease-in-out infinite; }

/* gold divider with a small diamond */
.rule {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 1.3rem 0;
}

.rule::before, .rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-300), transparent);
}

.rule__gem {
  width: 6px; height: 6px;
  transform: rotate(45deg);
  background: var(--gold-400);
}

.rule__heart { width: 1.1rem; opacity: .9; }

.rule--narrow { width: 12rem; margin: 1.7rem auto .3rem; }

/* ---------------------------------------------------------
   Countdown
--------------------------------------------------------- */

.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .4rem;
  margin-bottom: 1.5rem;
}

.unit b {
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.85rem, 7.6vw, 2.35rem);
  font-weight: 600;
  color: var(--rose-600);
  font-variant-numeric: tabular-nums;
}

.unit span {
  display: block;
  font-size: .74rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------
   Buttons
--------------------------------------------------------- */

.btn {
  display: block;
  width: 100%;
  margin-top: .7rem;
  padding: 1.05rem 1.4rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--rose-500), var(--rose-600));
  color: #fff;
  font: 500 .95rem/1 "Jost", sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(221, 139, 163, .3);
  transition: transform .25s var(--ease), box-shadow .25s, background .25s;
}

.btn:hover  { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(221, 139, 163, .38); }
.btn:active { transform: translateY(0); }

.btn--ghost {
  background: rgba(255, 255, 255, .5);
  color: var(--rose-700);
  border-color: rgba(189, 154, 82, .7);
  box-shadow: none;
}

.btn--ghost:hover { background: #fff; box-shadow: var(--shadow-sm); }

.btn--sm { width: auto; flex: 1; padding: .82rem .9rem; font-size: .88rem; margin-top: 0; }

/* quieter than the action buttons, it is an offer rather than a step */
.btn--share {
  width: auto;
  margin: 2.2rem auto 0;
  padding: .8rem 1.6rem;
  font-size: .82rem;
  background: rgba(255, 255, 255, .66);
}

.is-hidden { display: none; }

/* ---------------------------------------------------------
   Contacts
--------------------------------------------------------- */

.contacts { display: grid; gap: 1rem; margin-top: 2.2rem; }

.contact {
  padding: 1.4rem 1.2rem;
  border: 1px solid rgba(212, 180, 115, .35);
  border-radius: 1.25rem;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow-sm);
}

.contact__name {
  margin: 0;
  font-family: "Great Vibes", cursive;
  font-size: 2.2rem;
  color: var(--rose-600);
  line-height: 1.1;
}

.contact__num {
  margin: .3rem 0 1rem;
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: .05em;
  color: var(--ink);
}

.contact__actions { display: flex; gap: .6rem; }

/* ---------------------------------------------------------
   Scroll cue
--------------------------------------------------------- */

.scrollcue {
  position: absolute;
  bottom: 1.8rem;
  left: 50%;
  transform: translateX(-50%);
  width: 2.5rem;
  height: 3rem;
  display: grid;
  place-items: center;
}

.scrollcue__line {
  width: 1px;
  height: 2.4rem;
  background: linear-gradient(var(--gold-300), transparent);
  animation: cue 2.4s ease-in-out infinite;
}

@keyframes cue {
  0%, 100% { opacity: .25; transform: scaleY(.6); transform-origin: top; }
  50%      { opacity: 1;   transform: scaleY(1);  transform-origin: top; }
}

/* ---------------------------------------------------------
   Toast
--------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 1.6rem;
  z-index: 60;
  transform: translate(-50%, 1.5rem);
  padding: .75rem 1.3rem;
  border-radius: 999px;
  background: rgba(94, 71, 83, .96);
  color: #fff;
  font-size: .95rem;
  letter-spacing: .04em;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .3s var(--ease);
}

.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------------------------------------------------------
   Reveal on scroll
--------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}

.reveal.is-in { opacity: 1; transform: none; }

.reveal[data-delay="1"] { transition-delay: .12s; }
.reveal[data-delay="2"] { transition-delay: .24s; }
.reveal[data-delay="3"] { transition-delay: .36s; }
.reveal[data-delay="4"] { transition-delay: .48s; }

/* focus visibility for keyboard users */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--rose-500);
  outline-offset: 3px;
}

/* ---------------------------------------------------------
   Larger screens: keep the invitation as a calm centred
   column instead of stretching it edge to edge.
--------------------------------------------------------- */

@media (min-width: 48rem) {
  .panel { padding: 5.5rem 2rem; }
  .contacts { grid-template-columns: 1fr 1fr; }
  .backdrop__wash { height: 34vh; }
}

/* ---------------------------------------------------------
   Print. Some guests will want this on paper stuck to the
   fridge, so give them the facts on one clean page.
--------------------------------------------------------- */

.printout { display: none; }

@media print {
  .backdrop, .drifters, .topbar, .scrollcue, .toast,
  .countdown, .btn, .hearts, .wings, .ornament, .rule { display: none !important; }

  body { background: #fff; color: #000; font-size: 12pt; }

  .panel {
    min-height: 0;
    padding: 0 0 .6rem;
    page-break-inside: avoid;
  }

  .panel--hero { padding-top: 0; }
  .card { border: none; box-shadow: none; background: none; padding: 0; margin: .4rem auto 0; }
  .script { color: #000; text-shadow: none; }
  .script--xl { font-size: 46pt; }
  .script--lg, .script--md { font-size: 26pt; }
  .lead, .eyebrow, .blurb, .card__date, .card__label,
  .card__time, .card__addr, .card__note, .contact__name, .contact__num { color: #000; }
  .contact { border: none; box-shadow: none; background: none; padding: .2rem 0; }
  .reveal { opacity: 1 !important; transform: none !important; }

  .printout {
    display: block;
    margin-top: 1rem;
    padding-top: .8rem;
    border-top: 1pt solid #999;
    text-align: center;
    font-size: 10pt;
  }

  .printout__line { margin: .15rem 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bfly, .bfly__half, .scrollcue__line, .drifter,
  .hearts__h, .card__heart { animation: none; }
  .bfly__half--l { transform: rotateY(6deg); }
  .bfly__half--r { transform: rotateY(-6deg); }
  .drifters { display: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
}