/* The RSVP: the reply, set afloat.

   At sunset a long marble water channel runs away to the pavilion (assets/rsvp/scene-*.webp),
   and the reply card, on the letter's handmade paper, lies on its carved edge in front. Where the
   card is taller than the picture, the carved jaali wall carries on down (.rs-below).

   On a phone, an upright tablet and the laptop column the picture is as wide as the section and
   the card starts at the channel's edge; on a sideways tablet the picture covers the section, the
   channel runs away on the left, and the card stands on the terrace on the right.

   The rosebuds are the hero's rose (its five stages, one fading into the next). Sending folds the
   card into a paper boat (.rs-fold, then the boat), which is set on the water and floats away up
   the channel (js/rsvp.js; assets/rsvp/rsvp.css says where the water is on each picture). */

.rsvp {
  --card-at: .525;               /* where the card starts, down the picture: the channel's edge */
  --card-w: 90cqw;
  --edge: clamp(14px, 3.6cqw, 26px);
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding-bottom: 9cqw;
  overflow: hidden;
  background: #efe2da;
  color: var(--ink);
  container-type: inline-size;
}

.rsvp p { margin: 0; }

/* ------------------------------------------------------------ the channel at sunset */

.rs-scene {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  aspect-ratio: var(--scene-r);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.rs-below {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100cqw / var(--scene-r) - 2px);
  bottom: 0;
  background-position: center top;
  background-size: 100% auto;
  background-repeat: repeat-y;
}

.rs-water {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* the heading, in the sunset sky */
.rs-head {
  position: absolute;
  left: 0;
  right: 0;
  top: 3.2cqw;
  z-index: 2;
  text-align: center;
  padding: 0 5cqw;
}

.rs-head > * { text-shadow: 0 0 14px rgba(255, 244, 238, .95), 0 0 3px rgba(255, 244, 238, .9); }

.rs-kicker {
  font: 600 max(11px, 3.1cqw)/1.3 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .3em;
  padding-left: .3em;
  text-transform: uppercase;
  color: var(--sage-deep);
}

.rs-title {
  margin: 0;
  font: 700 11cqw/1.05 "Corinthia", cursive;
  padding: 0 .2em .04em;
  white-space: nowrap;
  color: var(--rose);
}

.rs-by { font: italic 500 max(14px, 3.9cqw)/1.3 "Cormorant Garamond", Georgia, serif; color: var(--ink); }

/* ------------------------------------------------------------ the card */

.rs-stage {
  position: relative;
  z-index: 1;
  width: var(--card-w);
  margin: 0 auto;
  padding-top: calc(100cqw / var(--scene-r) * var(--card-at));
}

.rs-paper {
  position: relative;
  border: var(--edge) solid transparent;
  border-image: url(../assets/letter/paper.webp) 54 fill / var(--edge) round;
  filter: drop-shadow(0 2px 3px rgba(90, 50, 45, .22)) drop-shadow(0 10px 22px rgba(90, 50, 45, .18));
  container-type: inline-size;
}

.rs-card-in {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4.6cqw;
  padding: 3cqw 3.5cqw 4cqw;
  text-align: center;
}

.rs-label {
  display: block;
  font: 700 max(10px, 3.3cqw)/1.4 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .2em;
  padding-left: .2em;
  text-transform: uppercase;
  color: var(--sage-deep);
}

.rs-label em { font-style: italic; text-transform: none; letter-spacing: .02em; font-weight: 500; }

.rs-field { display: block; }

.rs-name,
.rs-wishes {
  display: block;
  width: 100%;
  margin-top: 1.2cqw;
  padding: 1.6cqw 1cqw;
  border: 0;
  border-bottom: 1px solid rgba(168, 100, 106, .55);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 500 max(16px, 5.2cqw)/1.35 "Cormorant Garamond", Georgia, serif;
  text-align: center;
  outline: none;
}

.rs-wishes {
  min-height: 5.5em;
  resize: vertical;
  text-align: left;
  font-size: max(16px, 4.6cqw);
  border: 1px solid rgba(168, 100, 106, .3);
  border-radius: 6px;
  background: rgba(255, 252, 247, .5);
  padding: 2cqw 2.4cqw;
}

.rs-name::placeholder { color: rgba(91, 60, 64, .45); font-style: italic; }
.rs-name:focus { border-bottom-color: var(--rose); box-shadow: 0 1px 0 var(--rose); }
.rs-wishes:focus { border-color: var(--rose); box-shadow: 0 0 0 2px rgba(168, 100, 106, .18); }

.rs-events {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.rs-events > legend { width: 100%; padding: 0; }

.rs-help {
  margin-top: .6cqw !important;
  font: italic 500 max(13px, 3.9cqw)/1.3 "Cormorant Garamond", Georgia, serif;
  color: rgba(91, 60, 64, .78);
}

/* four rosebuds in a row (or fewer, for a guest asked to fewer) */
.rs-buds {
  display: grid;
  grid-template-columns: repeat(var(--n, 4), 1fr);
  gap: 1.4cqw;
  margin-top: 2.4cqw;
}

.rs-ev { display: flex; flex-direction: column; align-items: center; min-width: 0; }

.rs-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.rs-rose {
  position: relative;
  display: block;
  width: min(100%, 20cqw);
  aspect-ratio: 1;
  filter: saturate(.85) drop-shadow(0 2px 3px rgba(110, 60, 55, .22));
}

.rs-rose img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.rs-ev:not(.is-on) .rs-rose img:first-child,
.rs-ev.is-on .rs-rose img:last-child { opacity: 1; }

.rs-toggle:focus-visible { outline: none; }
.rs-toggle:focus-visible .rs-rose { outline: 2px solid var(--rose); outline-offset: 2px; border-radius: 50%; }

.rs-ev-name {
  margin-top: .4cqw;
  font: 700 max(14px, 4.4cqw)/1.15 "Cormorant Garamond", Georgia, serif;
  color: var(--ink);
}

.rs-ev-date { font: italic 500 max(11px, 3.2cqw)/1.2 "Cormorant Garamond", Georgia, serif; color: rgba(91, 60, 64, .75); }

.rs-ev-state { font: 700 max(10px, 2.9cqw)/1.4 "Cormorant Garamond", Georgia, serif; letter-spacing: .06em; }
.rs-ev-state .rs-yes { color: var(--rose); }
.rs-ev-state .rs-no { color: rgba(91, 60, 64, .55); font-weight: 500; font-style: italic; }
.rs-ev.is-on .rs-no,
.rs-ev:not(.is-on) .rs-yes { display: none; }

.rs-summary {
  min-height: 1.3em;
  margin-top: 2cqw !important;
  font: italic 500 max(13.5px, 4cqw)/1.3 "Cormorant Garamond", Georgia, serif;
  color: var(--rose);
  text-wrap: balance;
}

/* how many */
.rs-party[hidden] { display: none; }

.rs-stepper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5cqw;
  margin-top: 1.6cqw;
}

.rs-stepper[hidden] { display: none; }

.rs-step {
  width: max(38px, 10cqw);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(168, 100, 106, .55);
  border-radius: 50%;
  background: rgba(255, 251, 246, .7);
  color: var(--rose);
  font: 600 max(18px, 5.4cqw)/1 "Cormorant Garamond", Georgia, serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.rs-step:disabled { opacity: .35; cursor: default; }

.rs-count { min-width: 1.4em; font: 600 max(24px, 7.4cqw)/1 "Cormorant Garamond", Georgia, serif; color: var(--ink); }

.rs-seats {
  margin-top: 1.6cqw !important;
  font: italic 500 max(13px, 3.8cqw)/1.3 "Cormorant Garamond", Georgia, serif;
  color: rgba(91, 60, 64, .8);
}

.rs-seats-n { font-style: normal; font-weight: 600; }

.rs-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.rs-error:empty { display: none; }
.rs-error { font: italic 600 max(13.5px, 4cqw)/1.3 "Cormorant Garamond", Georgia, serif; color: #a13e4a; }

.rs-send,
.rs-change {
  align-self: center;
  min-height: 46px;
  padding: 10px 28px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(#b87078, #9e5a61);
  box-shadow: 0 2px 6px rgba(120, 60, 60, .3), inset 0 1px 0 rgba(255, 255, 255, .25);
  color: #fff8f4;
  font: 700 max(15px, 4.6cqw)/1 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .06em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.rs-send:hover,
.rs-change:hover { filter: brightness(1.06); }

.rs-send:focus-visible,
.rs-change:focus-visible,
.rs-step:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; }

.rs-send[aria-busy="true"] { opacity: .7; cursor: progress; }

/* ------------------------------------------------------------ thank you, and closed */

.rs-thanks,
.rs-closed {
  padding: 6cqw 6cqw 7cqw;
  text-align: center;
}

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

.rs-thanks-lead {
  font: 600 max(11px, 3.3cqw)/1.3 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .26em;
  padding-left: .26em;
  text-transform: uppercase;
  color: var(--sage-deep);
}

.rs-thanks-title {
  margin: .1em 0 .15em;
  font: 700 11cqw/1.1 "Corinthia", cursive;
  color: var(--rose);
  outline: none;
  text-wrap: balance;
}

.rs-thanks-text {
  font: italic 500 max(15px, 4.6cqw)/1.35 "Cormorant Garamond", Georgia, serif;
  color: var(--ink);
  text-wrap: balance;
}

.rs-summary-list {
  list-style: none;
  margin: 5cqw auto 0;
  padding: 0;
  width: min(100%, 460px);
  text-align: left;
}

.rs-sum {
  display: grid;
  grid-template-columns: 10cqw 1fr auto;
  align-items: center;
  gap: 2.4cqw;
  padding: 1.4cqw 0;
  border-top: 1px solid rgba(168, 100, 106, .2);
}

.rs-sum:first-child { border-top: 0; }

.rs-sum-rose {
  width: 10cqw;
  aspect-ratio: 1;
  background: center / contain no-repeat;
  filter: saturate(.85);
}

.rs-sum-ev { font: 700 max(15px, 4.6cqw)/1.2 "Cormorant Garamond", Georgia, serif; color: var(--ink); }
.rs-sum-ans { font: italic 500 max(13.5px, 4cqw)/1.2 "Cormorant Garamond", Georgia, serif; color: var(--rose); text-align: right; }
.rs-sum.is-no .rs-sum-ans { color: rgba(91, 60, 64, .6); }

.rs-thanks-when:empty { display: none; }
.rs-thanks-when { margin-top: 3cqw !important; font: italic 500 max(13px, 3.8cqw)/1.3 "Cormorant Garamond", Georgia, serif; color: rgba(91, 60, 64, .7); }

.rs-change {
  margin-top: 5cqw;
  background: rgba(255, 251, 246, .8);
  border: 1px solid rgba(168, 100, 106, .55);
  box-shadow: 0 1px 2px rgba(120, 60, 60, .12);
  color: var(--ink);
}

/* ------------------------------------------------------------ folding, and the boat */

/* the paper, folding into a boat (js/rsvp.js places it over the card) */
.rs-fold {
  position: absolute;
  z-index: 3;
  left: 0;
  top: 0;
  border: var(--edge) solid transparent;
  border-image: url(../assets/letter/paper.webp) 54 fill / var(--edge) round;
  filter: drop-shadow(0 4px 8px rgba(90, 50, 45, .25));
  transform-origin: 50% 50%;
  pointer-events: none;
}

.rs-fold[hidden] { display: none; }

/* The boat: its waterline where it is placed; it bobs, it is turned to sail away from us, and
   its reflection lies under it. */
.rs-boat {
  --boat-w: 21cqw;
  position: absolute;
  z-index: 4;
  left: 0;
  top: 0;
  width: var(--boat-w);
  aspect-ratio: var(--boat-r);
  pointer-events: none;
  transform-origin: 50% 90%;
}

.rs-boat { perspective: 520px; }

.rs-boat-turn,
.rs-boat-bob {
  position: absolute;
  inset: 0;
  transform-origin: 50% 90%;
}

.rs-boat-turn { transform-style: preserve-3d; }

.rs-boat-img,
.rs-boat-ref {
  position: absolute;
  inset: 0;
  background-size: 100% 100%;
}

.rs-boat-img { filter: drop-shadow(0 2px 3px rgba(80, 40, 50, .25)); }

.rs-boat-ref {
  top: 88%;
  bottom: -76%;
  transform: scaleY(-1);
  opacity: .32;
  filter: blur(1.5px) saturate(1.2);
  -webkit-mask-image: linear-gradient(to top, #000, transparent 70%);
          mask-image: linear-gradient(to top, #000, transparent 70%);
}

.rs-ripple {
  position: absolute;
  left: 0;
  top: 0;
  width: 26cqw;
  aspect-ratio: 4;
  border: 1px solid rgba(255, 246, 240, .55);
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(255, 240, 235, .35), inset 0 0 3px rgba(255, 240, 235, .3);
  filter: blur(.4px);
  pointer-events: none;
}

/* waiting to be seen (js/rsvp.js) */
.rsvp.is-ready:not(.is-seen) .rs-head > *,
.rsvp.is-ready:not(.is-seen) .rs-stage { opacity: 0; }

.rs-head > *,
.rs-stage { transition: opacity 1.1s ease, transform 1.3s cubic-bezier(.2, .7, .2, 1); }
.rsvp.is-ready:not(.is-seen) .rs-stage { transform: translateY(18px); }

/* ------------------------------------------------------------ the shapes */

@media (min-aspect-ratio: 5/8) {
  html:root .rsvp {
    --card-at: .545;
    --card-w: 66cqw;
    padding-bottom: 7cqw;
  }
  html:root .rs-head { top: 2.4cqw; }
  html:root .rs-kicker { font-size: max(11px, 1.9cqw); }
  html:root .rs-title { font-size: 8.5cqw; }
  html:root .rs-by { font-size: max(14px, 2.4cqw); }
  html:root .rs-boat { --boat-w: 15cqw; }
  html:root .rs-ripple { width: 19cqw; }
}

/* a sideways tablet: the picture covers the section; the card stands on the terrace on the right */
@media (min-aspect-ratio: 6/5) {
  html.is-tablet .rsvp {
    --card-w: 36cqw;
    height: 100svh;
    min-height: 600px;
    padding: 0;
  }
  html.is-tablet .rs-scene {
    left: 50%;
    top: 50%;
    width: max(100%, max(100svh, 600px) * var(--scene-r));
    translate: -50% -50%;
  }
  html.is-tablet .rs-below { display: none; }
  html.is-tablet .rs-head { left: 4cqw; right: auto; width: 52cqw; top: 1.6cqw; }
  html.is-tablet .rs-kicker { font-size: max(11px, 1.2cqw); }
  html.is-tablet .rs-title { font-size: 5.4cqw; }
  html.is-tablet .rs-by { font-size: max(14px, 1.45cqw); }
  html.is-tablet .rs-stage {
    position: absolute;
    right: 4cqw;
    top: 50%;
    translate: 0 -50%;
    margin: 0;
    padding: 0;
    max-height: calc(100% - 3cqw);
  }
  html.is-tablet .rs-card-in { gap: 3.4cqw; }
  html.is-tablet .rs-boat { --boat-w: 10cqw; }
  html.is-tablet .rs-ripple { width: 13cqw; }
}

/* ------------------------------------------------------------ calm */

@media (prefers-reduced-motion: reduce) {
  .rs-head > *,
  .rs-stage { transition: none; }
  .rsvp.is-ready:not(.is-seen) .rs-head > *,
  .rsvp.is-ready:not(.is-seen) .rs-stage { opacity: 1; transform: none; }
}