/* The RSVP: the reply, sent by dove.

   On the ivory marble, between bands of gold, mirror and emerald: the heading,
   then the reply on a scroll of illuminated paper (a border-image made of one
   repeat of its vine, assets/rsvp/paper.webp; .rs-paper), with a white dove
   perched on its top edge. The thank you and "replies have closed" are on the
   same paper.

   Which celebrations: a stand for each function (.rs-ev, which also carries
   the events' tone: .ev-mehndi and so on). The bangle is placed where it rests
   on the stand; off (not .is-on), it lies at the stand's foot. It is drawn
   three times: whole (in front of everything, when it is not on the rod), and
   split where the ring is widest into its back (behind the rod) and its front
   (before it). js/rsvp.js swaps them at the top of its flight.

   Sending: .rs-roll (the paper rolled, with .rs-ribbon) and .rs-flyer (the
   dove flying, a sprite) are placed and moved on the stage by js/rsvp.js.

   Phones: one column. Upright tablets and laptop columns: a wider scroll.
   Sideways tablets: the heading on the left, the scroll on the right. */

.rsvp {
  --band-h: 20px;
  --gold-deep: #86662a;
  position: relative;
  z-index: 1;                      /* its bands, and the dove, over the sections either side */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--band-h) + 40px) 16px calc(var(--band-h) + 52px);
  background: url(../assets/letter/marble.webp) center top / 100% auto repeat-y, #f2ede3;
  color: var(--ink);
  text-align: center;
  container: rsvp / inline-size;
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
}

html.is-tablet .rsvp,
html:not(.is-tablet) .card .rsvp { --band-h: 26px; }

/* ------------------------------------------------------------ heading */

.rs-head > * { margin: 0; }

.rs-kicker {
  font: 600 clamp(11px, 3cqi, 14px)/1.3 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .28em;
  padding-left: .28em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.rs-title {
  font: 400 clamp(38px, 10.6cqi, 68px)/1.15 "Alex Brush", cursive;
  padding: 0 .3em .1em;
  background:
    linear-gradient(180deg, rgba(255, 240, 200, .25), transparent 40%, rgba(70, 42, 8, .42)),
    url(../assets/hero/gold.webp) 0 0 / 4em 4em;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .8)) drop-shadow(0 1px 1.5px rgba(60, 36, 6, .45));
}

.rs-by {
  font: italic 500 clamp(16px, 4.6cqi, 20px)/1.3 "Cormorant Garamond", Georgia, serif;
  color: var(--gold-deep);
}

/* ------------------------------------------------------------ the stage and the paper */

.rs-stage {
  position: relative;
  width: min(100%, 600px);
  margin-top: clamp(64px, 17cqi, 96px);   /* room for the dove on the paper's edge */
}

.rs-paper {
  --pb: clamp(34px, 10cqi, 56px);
  position: relative;
  width: 100%;
  margin: 0;
  border: var(--pb) solid transparent;
  border-image: url(../assets/rsvp/paper.webp) var(--paper-slice) fill / var(--pb) round;
  filter: drop-shadow(0 1px 1px rgba(60, 40, 10, .18)) drop-shadow(0 14px 20px rgba(50, 35, 10, .22));
  container-type: inline-size;
}

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

.rs-card-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(16px, 5cqi, 24px);
  padding: 6px clamp(2px, 2cqi, 16px) 8px;
}

.rs-card-in > *,
.rs-thanks > *,
.rs-closed > * { margin: 0; }

.rs-lead {
  font: italic 500 clamp(17px, 5.6cqi, 22px)/1.3 "Cormorant Garamond", Georgia, serif;
  color: var(--gold-deep);
}

.rs-label {
  display: block;
  font: 700 clamp(10.5px, 3.6cqi, 13px)/1.4 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

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

.rs-field { display: block; width: 100%; }

.rs-name,
.rs-wishes {
  display: block;
  width: 100%;
  margin-top: 6px;
  border: 0;
  border-bottom: 1.5px solid rgba(134, 102, 42, .55);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-align: center;
  font: italic 500 clamp(19px, 6.4cqi, 26px)/1.3 "Cormorant Garamond", Georgia, serif;
  padding: 4px 2px 5px;
  outline: none;
}

.rs-wishes {
  border: 1.5px solid rgba(134, 102, 42, .4);
  border-radius: 10px;
  background: rgba(255, 253, 246, .6);
  text-align: left;
  font-size: clamp(16px, 5cqi, 19px);
  padding: 8px 10px;
  resize: vertical;
}

.rs-name::placeholder { color: rgba(11, 61, 49, .35); }
.rs-name:focus,
.rs-wishes:focus { border-color: var(--gold-deep); box-shadow: 0 2px 0 -0.5px var(--gold-deep); }
.rs-wishes:focus { box-shadow: 0 0 0 2px rgba(134, 102, 42, .25); }

/* ------------------------------------------------------------ the bangles */

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

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

.rs-help {
  margin: 2px 0 0;
  font: italic 500 clamp(14px, 4.4cqi, 17px)/1.3 "Cormorant Garamond", Georgia, serif;
  color: rgba(11, 61, 49, .7);
}

.rs-stands {
  display: grid;
  grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  gap: 4px;
  width: 100%;
  max-width: 460px;
  margin: clamp(16px, 5cqi, 26px) auto 0;
}

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

.rs-ev > p { margin: 0; }

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

.rs-toggle:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: 12px; }

/* the rig: the stand, and the bangle's place on it (sizes in units of the bangle's width) */
.rs-rig {
  --bw: min(84cqi, 96px);
  position: relative;
  display: block;
  width: var(--bw);
  height: calc(var(--bw) * 1.74);
}

/* on: its colour glows behind the stand */
.rs-rig::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 22%;
  width: 150%;
  aspect-ratio: 1;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, var(--tone-glow), transparent);
  opacity: 0;
  transition: opacity .6s ease .35s;
  z-index: 0;
}

.rs-ev.is-on .rs-rig::before { opacity: .9; }

.rs-stand {
  position: absolute;
  left: 50%;
  top: 0;
  width: calc(var(--bw) * .55);
  aspect-ratio: var(--stand-r);
  translate: calc(var(--stand-rod-x) * -1) 0;
  background: url(../assets/rsvp/stand.webp) center / 100% 100% no-repeat;
  filter: drop-shadow(0 3px 3px rgba(60, 40, 10, .3));
  z-index: 2;
}

/* The bangle: its three layers (the wrapper is only a list of them, so they stack among the
   stand's). Each is placed where the bangle rests on the stand, its widest line just above the
   dome of the base; off, it lies at the stand's foot. */
.rs-bangle { display: contents; }

.rs-bangle > i {
  position: absolute;
  left: 0;
  width: var(--bw);
  aspect-ratio: var(--bangle-r);
  top: calc(var(--bw) * .55 / var(--stand-r) * var(--stand-base-f) - var(--bw) / var(--bangle-r) * var(--bangle-split-f) - var(--bw) * .02);
  transform: translateY(110%);
  background: center / 100% 100% no-repeat;
  filter: drop-shadow(0 2px 2px rgba(60, 30, 10, .28));
  pointer-events: none;
}

.rs-ev.is-on .rs-bangle > i { transform: none; }

.ev-mehndi .rs-bangle > i { background-image: url(../assets/rsvp/bangle-mehndi.webp); }
.ev-nikah .rs-bangle > i { background-image: url(../assets/rsvp/bangle-nikah.webp); }
.ev-baraat .rs-bangle > i { background-image: url(../assets/rsvp/bangle-baraat.webp); }
.ev-walima .rs-bangle > i { background-image: url(../assets/rsvp/bangle-walima.webp); }

/* the back of the ring behind the rod, its front before it, and the whole in front of all */
.rs-rig { isolation: isolate; }
.rs-b-back { clip-path: inset(0 0 calc(100% - var(--bangle-split)) 0); z-index: 1; opacity: 0; }
.rs-b-front { clip-path: inset(var(--bangle-split) 0 0 0); z-index: 3; opacity: 0; }
.rs-b-whole { z-index: 4; }
.rs-ev.is-on .rs-b-back,
.rs-ev.is-on .rs-b-front { opacity: 1; }
.rs-ev.is-on .rs-b-whole { opacity: 0; }

/* off, a little dim, waiting */
.rs-ev:not(.is-on) .rs-bangle > i { filter: drop-shadow(0 2px 2px rgba(60, 30, 10, .18)) saturate(.5) opacity(.72); }
.rs-bangle > i { transition: filter .5s ease; }

.rs-ev-name {
  margin-top: 4px;
  font: 400 clamp(22px, 30cqi, 32px)/1.1 "Alex Brush", cursive;
  color: var(--ink);
  white-space: nowrap;
}

.rs-ev-date {
  font: 600 clamp(9.5px, 12.5cqi, 12px)/1.3 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .06em;
  color: rgba(11, 61, 49, .7);
}

.rs-ev-state {
  margin-top: 3px !important;
  min-height: 1.3em;
  font: italic 500 clamp(12px, 15cqi, 15px)/1.3 "Cormorant Garamond", Georgia, serif;
}

.rs-yes { display: none; font-style: normal; font-weight: 700; color: var(--tone-ink); }
.rs-yes::before { content: "\2713\00a0"; }
.rs-no { color: rgba(11, 61, 49, .5); }
.rs-ev.is-on .rs-yes { display: inline; }
.rs-ev.is-on .rs-no { display: none; }
.rs-ev.is-on .rs-ev-name { color: var(--tone-ink); }

.rs-summary {
  min-height: 1.35em;
  margin: 14px 0 0;
  font: italic 500 clamp(15px, 4.8cqi, 18px)/1.35 "Cormorant Garamond", Georgia, serif;
  color: var(--ink);
  text-wrap: balance;
}

/* ------------------------------------------------------------ how many, and the note */

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

.rs-stepper {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-top: 8px;
}

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

.rs-step {
  width: 40px;
  height: 40px;
  border: 1.5px solid rgba(134, 102, 42, .6);
  border-radius: 50%;
  background: rgba(255, 252, 244, .8);
  color: var(--gold-deep);
  font: 600 24px/1 "Cormorant Garamond", Georgia, serif;
  cursor: pointer;
}

.rs-step:disabled { opacity: .35; cursor: default; }
.rs-step:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

.rs-count {
  min-width: 1.4em;
  font: 600 34px/1 "Cormorant Garamond", Georgia, serif;
  font-variant-numeric: lining-nums;
  color: var(--ink);
}

.rs-seats {
  margin: 6px 0 0;
  font: italic 500 clamp(14px, 4.4cqi, 16px)/1.3 "Cormorant Garamond", Georgia, serif;
  color: rgba(11, 61, 49, .75);
}

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

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

.rs-error {
  min-height: 0;
  font: italic 600 clamp(14px, 4.4cqi, 16px)/1.35 "Cormorant Garamond", Georgia, serif;
  color: #9b2a2a;
}

.rs-error:empty { display: none; }

.rs-send,
.rs-change {
  min-height: 48px;
  padding: 10px 30px;
  border: 1.5px solid rgba(201, 164, 92, .9);
  border-radius: 999px;
  background: linear-gradient(180deg, #125a47, var(--emerald-deep));
  box-shadow: 0 2px 0 rgba(255, 255, 255, .25) inset, 0 6px 14px -4px rgba(6, 42, 33, .55);
  color: var(--gold-soft);
  font: 700 clamp(15px, 4.8cqi, 17px)/1 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .08em;
  cursor: pointer;
}

.rs-send:hover,
.rs-change:hover { background: linear-gradient(180deg, #17684f, #0a3a2d); }
.rs-send:focus-visible,
.rs-change:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; }
.rs-send[aria-busy="true"] { cursor: progress; }

/* ------------------------------------------------------------ the dove */

/* perched on the paper's top edge, at the right */
.rs-dove {
  position: absolute;
  z-index: 3;
  right: 12%;
  bottom: calc(100% - 6px);
  width: clamp(66px, 18.5cqi, 104px);
  height: auto;
  filter: drop-shadow(0 4px 4px rgba(60, 40, 10, .25));
  transform-origin: 50% 100%;
  animation: rs-perch 7s ease-in-out infinite;
  pointer-events: none;
  user-select: none;
}

@keyframes rs-perch {
  0%, 86%, 100% { transform: none; }
  89% { transform: translateY(-5px) rotate(-3deg); }
  92% { transform: none; }
  95% { transform: rotate(2deg); }
}

.rsvp.is-flown .rs-dove { visibility: hidden; }

/* flying: the frames of its wings, side by side */
.rs-flyer {
  position: absolute;
  z-index: 6;
  aspect-ratio: var(--fly-r);
  background: url(../assets/rsvp/dove-fly.webp) 0 0 / calc(var(--fly-frames) * 100%) 100% no-repeat;
  animation: rs-flap .3s steps(4) infinite;
  filter: drop-shadow(0 6px 6px rgba(60, 40, 10, .22));
  pointer-events: none;
}

.rs-flyer[hidden],
.rs-roll[hidden],
.rs-ribbon[hidden] { display: none; }

@keyframes rs-flap {
  from { background-position: 0 0; }
  to { background-position: calc(var(--fly-frames) / (var(--fly-frames) - 1) * 100%) 0; }
}

.rs-roll {
  position: absolute;
  z-index: 5;
  aspect-ratio: var(--roll-r);
  background: url(../assets/rsvp/roll.webp) center / 100% 100% no-repeat;
  filter: drop-shadow(0 6px 8px rgba(50, 35, 10, .3));
  pointer-events: none;
}

.rs-ribbon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 24%;
  aspect-ratio: var(--ribbon-r);
  translate: 0 18%;
  background: url(../assets/rsvp/ribbon.webp) center / 100% 100% no-repeat;
  transform: translate(-50%, -50%);
}

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

.rs-thanks,
.rs-closed {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 10px clamp(4px, 3cqi, 20px) 14px;
}

.rs-thanks-lead {
  font: 700 clamp(10.5px, 3.6cqi, 13px)/1.4 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.rs-thanks-title {
  font: 400 clamp(38px, 12cqi, 58px)/1.15 "Alex Brush", cursive;
  color: var(--ink);
  outline: none;
  overflow-wrap: anywhere;
}

.rs-thanks-text {
  max-width: 26em;
  font: italic 500 clamp(16px, 5cqi, 19px)/1.4 "Cormorant Garamond", Georgia, serif;
  text-wrap: balance;
}

.rs-summary-list {
  list-style: none;
  width: min(100%, 360px);
  padding: 0;
  display: grid;
  gap: 8px;
}

.rs-sum {
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(134, 102, 42, .22);
  text-align: left;
}

.rs-sum-bangle {
  width: 34px;
  aspect-ratio: var(--bangle-r, 1.85);
  background: center / contain no-repeat;
}

.rs-sum-ev { font: 400 clamp(22px, 7cqi, 27px)/1 "Alex Brush", cursive; color: var(--ink); }
.rs-sum-ans { font: 700 clamp(13px, 4.2cqi, 15px)/1.2 "Cormorant Garamond", Georgia, serif; color: var(--tone-ink, var(--ink)); }
.rs-sum.is-no .rs-sum-bangle { opacity: .35; filter: grayscale(.6); }
.rs-sum.is-no .rs-sum-ans { font-weight: 500; font-style: italic; color: rgba(11, 61, 49, .55); }
.rs-sum-guests .rs-sum-ev { font: 700 clamp(11px, 3.6cqi, 13px)/1.2 "Cormorant Garamond", Georgia, serif; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }

.rs-thanks-when {
  font: italic 500 14px/1.3 "Cormorant Garamond", Georgia, serif;
  color: rgba(11, 61, 49, .6);
}

.rs-thanks-when:empty { display: none; }

.rs-change { margin-top: 4px !important; }

/* ------------------------------------------------------------ arriving */

.rs-head,
.rs-stage { transition: opacity 1s ease, translate 1.3s cubic-bezier(.2, .7, .2, 1); }
.rs-stage { transition-delay: .15s; }
.rsvp.is-ready:not(.is-seen) .rs-head { opacity: 0; }
.rsvp.is-ready:not(.is-seen) .rs-stage { opacity: 0; translate: 0 24px; }

/* ------------------------------------------------------------ sideways tablets */

@media (min-aspect-ratio: 6/5) {
  html.is-tablet .rsvp {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    align-items: start;
    column-gap: clamp(24px, 4cqi, 64px);
    padding: calc(var(--band-h) + 20px) clamp(24px, 5cqi, 72px) calc(var(--band-h) + 26px);
  }
  html.is-tablet .rs-head {
    position: sticky;
    top: calc(50svh - 90px);
    align-self: start;
    margin-top: 30svh;
  }
  html.is-tablet .rs-stage { justify-self: center; margin-top: 96px; }
}

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

@media (prefers-reduced-motion: reduce) {
  .rs-dove,
  .rs-flyer { animation: none; }
  .rs-head,
  .rs-stage { transition: none; }
}