/* The RSVP: the reply, sent by pigeon (surface P, the ivory plaster, in base.css).

   The heading, then the reply written on the letter's own paper (.rs-paper: its painted vine
   border is a border-image, from assets/letter/letter.css, at the paper's width --lw), with a
   white pigeon perched on its top edge, at the right. The thank you and "replies have closed"
   are on the same paper.

   Which celebrations: a tile for each function (.rs-ev, which also carries the events' colours:
   .ev-mehndi and so on). It lies plain side up (the countdown's blank tile); on (.is-on, set by
   js/rsvp.js), it has turned over to its glazed face in the function's colour, with the opening
   panel's medallion in the middle (assets/rsvp/tile-<function>.webp).

   Sending: .rs-roll (the paper rolled up, with its silk cord and bow, .rs-cord and .rs-tie) and
   .rs-flyer (the pigeon flying, a sprite of its four wing poses) are placed and moved on the
   stage by js/rsvp.js.

   Phones: one column, the tiles two by two. Upright tablets and the laptop column: the paper
   wider, the tiles in a row. Sideways tablets: the heading on the left, the paper on the right. */

.rsvp {
  --sun-y: 30%;
  --sun-x: -40%;
  --tone-ink: var(--cobalt);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--seam-h) * .5 + 40px) 16px calc(var(--seam-h) * .5 + 56px);
  text-align: center;
  overflow-x: clip;
  -webkit-tap-highlight-color: transparent;
}

.rsvp > :not(.plaster-sun) { position: relative; }

/* the functions' glazed faces (their colours and inks are the events', in events.css) */
.rs-ev.ev-mehndi,
.rs-sum.ev-mehndi { --glazed: url(../assets/rsvp/tile-mehndi.webp); }
.rs-ev.ev-nikah,
.rs-sum.ev-nikah { --glazed: url(../assets/rsvp/tile-nikah.webp); }
.rs-ev.ev-baraat,
.rs-sum.ev-baraat { --glazed: url(../assets/rsvp/tile-baraat.webp); }
.rs-ev.ev-walima,
.rs-sum.ev-walima { --glazed: url(../assets/rsvp/tile-walima.webp); }

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

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

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

.rs-title {
  font: 400 clamp(42px, 12cqi, 76px)/1.2 "Great Vibes", cursive;
}

.rs-title .glaze { text-wrap: balance; }

.rs-title .glaze,
.rs-thanks-title .glaze {
  display: inline-block;
  padding: 0 .28em .08em;
}

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

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

.rs-stage {
  width: min(100%, 620px);
  margin-top: clamp(78px, 21cqi, 112px);      /* room for the pigeon on the paper's edge */
  container: rsstage / inline-size;
}

.rs-paper {
  --lw: 100cqi;                                /* the paper's width: the stage's */
  width: var(--lw);
  margin: 0;
  border-style: solid;
  border-color: transparent;
  border-width: var(--pb);
  filter: drop-shadow(0 1px 1px rgba(60, 40, 12, .16)) drop-shadow(0 14px 18px rgba(40, 28, 10, .22));
  container: rspaper / inline-size;
  color: var(--ink);
}

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

.rs-card-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(18px, 6cqi, 26px);
  padding: clamp(12px, 4cqi, 22px) clamp(4px, 2.4cqi, 16px) clamp(12px, 4cqi, 22px);
}

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

.rs-lead {
  font: italic 500 clamp(18px, 6.2cqi, 23px)/1.3 "Cormorant Garamond", Georgia, serif;
  color: var(--kick);
}

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

.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(176, 132, 58, .6);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-align: center;
  font: italic 500 clamp(19px, 7cqi, 26px)/1.3 "Cormorant Garamond", Georgia, serif;
  padding: 4px 2px 5px;
  outline: none;
}

.rs-wishes {
  border: 1.5px solid rgba(176, 132, 58, .45);
  border-radius: 10px;
  background: rgba(255, 252, 244, .6);
  text-align: left;
  font-size: clamp(16px, 5.4cqi, 19px);
  padding: 8px 10px;
  resize: vertical;
}

.rs-name::placeholder { color: rgba(27, 42, 82, .36); }
.rs-name:focus { border-color: var(--cobalt); box-shadow: 0 2px 0 -0.5px var(--cobalt); }
.rs-wishes:focus { border-color: var(--cobalt); box-shadow: 0 0 0 2px rgba(29, 58, 130, .2); }

/* ------------------------------------------------------------ the tiles */

.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(15px, 4.8cqi, 17px)/1.3 "Cormorant Garamond", Georgia, serif;
  color: rgba(27, 42, 82, .72);
}

/* two by two; one, two or three in a row; four in a row where they fit (js/rsvp.js sets data-n) */
.rs-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 5cqi, 22px) 6px;
  width: 100%;
  max-width: 480px;
  margin: clamp(14px, 5cqi, 22px) auto 0;
}

.rs-tiles[data-n="1"] { grid-template-columns: minmax(0, 1fr); }
.rs-tiles[data-n="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@container rspaper (min-width: 390px) {
  .rs-tiles[data-n="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.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(--cobalt); outline-offset: 3px; border-radius: 12px; }

/* the tile: its plain face up, or turned over to its glazed face */
.rs-tile {
  --tw: min(84cqi, 104px);
  position: relative;
  display: block;
  width: var(--tw);
  aspect-ratio: 300 / 292;
  margin-bottom: 6px;
  perspective: calc(var(--tw) * 5);
}

/* on: its colour glows round it */
.rs-tile::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 165%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tone) 42%, transparent), transparent);
  opacity: 0;
  transition: opacity .6s ease .3s;
}

.rs-ev.is-on .rs-tile::before { opacity: 1; }

.rs-flip {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.rs-ev.is-on .rs-flip { transform: rotateY(180deg); }

.rs-face {
  position: absolute;
  inset: 0;
  background: 0 0 / 100% 100% no-repeat;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  filter: drop-shadow(calc(var(--tw) * .03) calc(var(--tw) * .05) calc(var(--tw) * .05) rgba(60, 40, 12, .38));
}

.rs-plain { background-image: url(../assets/rsvp/tile-plain.webp); }
.rs-glazed { background-image: var(--glazed); transform: rotateY(180deg); }

.rs-ev-name {
  font: 400 clamp(25px, 27cqi, 32px)/1.1 "Great Vibes", cursive;
  color: var(--ink);
  white-space: nowrap;
  transition: color .4s ease;
}

.rs-ev.is-on .rs-ev-name { color: var(--tone-ink); }

.rs-ev-date {
  font: 600 clamp(11px, 11cqi, 12.5px)/1.3 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .04em;
  color: rgba(27, 42, 82, .72);
  white-space: nowrap;
}

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

.rs-yes { display: none; font-style: normal; font-weight: 700; color: var(--tone-ink); }
.rs-yes::before { content: "\2713\00a0"; }
.rs-no { color: rgba(27, 42, 82, .64); }
.rs-ev.is-on .rs-yes { display: inline; }
.rs-ev.is-on .rs-no { display: none; }

.rs-summary {
  min-height: 1.35em;
  margin: 10px 0 0;
  font: italic 500 clamp(16px, 5.2cqi, 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: 42px;
  height: 42px;
  border: 1.5px solid rgba(176, 132, 58, .75);
  border-radius: 50%;
  background: rgba(255, 252, 244, .85);
  box-shadow: 0 1px 2px rgba(60, 40, 10, .14);
  color: var(--cobalt);
  font: 600 25px/1 "Cormorant Garamond", Georgia, serif;
  cursor: pointer;
}

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

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

.rs-seats {
  margin: 6px 0 0;
  font: italic 500 clamp(15px, 4.8cqi, 17px)/1.3 "Cormorant Garamond", Georgia, serif;
  color: rgba(27, 42, 82, .76);
}

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

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

.rs-error {
  font: italic 600 clamp(15px, 4.8cqi, 17px)/1.35 "Cormorant Garamond", Georgia, serif;
  color: #9b2a1e;
}

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

/* sending, and changing a reply: glossy cobalt, as the glaze */
.rs-send,
.rs-change {
  min-height: 48px;
  padding: 10px 30px;
  border: 1.5px solid rgba(214, 170, 90, .9);
  border-radius: 999px;
  background: linear-gradient(180deg, #2c4f9f, var(--cobalt) 55%, var(--cobalt-deep));
  box-shadow: 0 2px 0 rgba(255, 255, 255, .22) inset, 0 6px 14px -4px rgba(10, 22, 60, .55);
  color: #fbf1dc;
  font: 700 clamp(16px, 5.2cqi, 18px)/1 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .06em;
  cursor: pointer;
}

.rs-send:hover,
.rs-change:hover { background: linear-gradient(180deg, #3358ab, #213f8a 55%, #122a5e); }
.rs-send:focus-visible,
.rs-change:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
.rs-send[aria-busy="true"] { cursor: progress; }

/* ------------------------------------------------------------ the pigeon */

/* perched on the paper's top edge, at the right, looking along it */
.rs-pigeon {
  position: absolute;
  z-index: 3;
  right: 11%;
  bottom: calc(100% - 5px);
  width: clamp(70px, 20cqi, 108px);
  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%, 84%, 100% { transform: none; }
  87% { transform: translateY(-4px) rotate(-3deg); }
  90% { transform: none; }
  94% { transform: rotate(2.5deg); }
}

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

/* flying: its wing poses, side by side */
.rs-flyer {
  position: absolute;
  z-index: 6;
  aspect-ratio: var(--fly-r);
  background: url(../assets/rsvp/pigeon-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-cord[hidden],
.rs-tie[hidden] { display: none; }

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

/* the paper, rolled up */
.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;
}

/* the silk cord wound round its middle, twisted red and saffron, rounded by the light */
.rs-cord {
  position: absolute;
  left: 50%;
  top: -3%;
  height: 106%;
  width: calc(var(--tie-w) * var(--tie-cord));
  translate: -50% 0;
  border-radius: 40% / 8%;
  background:
    linear-gradient(90deg, rgba(60, 10, 0, .35), rgba(255, 230, 190, .25) 35%, rgba(60, 10, 0, .4)),
    repeating-linear-gradient(-58deg, #c2281d 0 28%, #e59a2a 28% 50%) 0 0 / 100% calc(var(--tie-w) * var(--tie-cord) * 2.2);
}

/* the bow, its knot on the cord at the front */
.rs-roll { --tie-w: 58%; }
.rs-tie {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--tie-w);
  aspect-ratio: var(--tie-r);
  translate: calc(var(--tie-kx) * -1) calc(var(--tie-ky) * -1);
  background: url(../assets/rsvp/tie.webp) center / 100% 100% no-repeat;
  filter: drop-shadow(0 2px 2px rgba(60, 20, 5, .35));
  transform-origin: var(--tie-kx) var(--tie-ky);
}

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

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

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

.rs-thanks-title {
  font: 400 clamp(38px, 13cqi, 60px)/1.2 "Great Vibes", cursive;
  outline: none;
  overflow-wrap: anywhere;
}

.rs-thanks-text {
  max-width: 26em;
  font: italic 500 clamp(17px, 5.4cqi, 20px)/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(176, 132, 58, .26);
  text-align: left;
}

.rs-sum-tile {
  width: 34px;
  aspect-ratio: 300 / 292;
  background: var(--glazed) center / 100% 100% no-repeat;
  filter: drop-shadow(1px 1.5px 1.5px rgba(60, 40, 12, .3));
}

.rs-sum.is-no .rs-sum-tile { background-image: url(../assets/rsvp/tile-plain.webp); }
.rs-sum-guests .rs-sum-tile { visibility: hidden; }

.rs-sum-ev { font: 400 clamp(24px, 7.6cqi, 28px)/1 "Great Vibes", cursive; color: var(--ink); }
.rs-sum-ans { font: 700 clamp(14px, 4.6cqi, 15px)/1.2 "Cormorant Garamond", Georgia, serif; color: var(--tone-ink, var(--ink)); }
.rs-sum.is-no .rs-sum-ans { font-weight: 500; font-style: italic; color: rgba(27, 42, 82, .56); }
.rs-sum-guests .rs-sum-ev { font: 700 clamp(12px, 3.9cqi, 13px)/1.2 "Cormorant Garamond", Georgia, serif; letter-spacing: .16em; text-transform: uppercase; color: var(--kick); }
.rs-sum-guests .rs-sum-ans { color: var(--ink); }

.rs-thanks-when {
  font: italic 500 15px/1.3 "Cormorant Garamond", Georgia, serif;
  color: rgba(27, 42, 82, .62);
}

.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.4fr);
    align-items: start;
    column-gap: clamp(24px, 4cqi, 64px);
    padding: calc(var(--seam-h) * .5 + 24px) clamp(24px, 5cqi, 72px) calc(var(--seam-h) * .5 + 30px);
  }
  html.is-tablet .rs-head {
    position: sticky;
    top: calc(50svh - 90px);
    align-self: start;
    margin-top: 32svh;
  }
  html.is-tablet .rs-stage { justify-self: center; margin-top: 118px; }
}

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

@media (prefers-reduced-motion: reduce) {
  .rs-pigeon,
  .rs-flyer { animation: none; }
  .rs-head,
  .rs-stage,
  .rs-tile::before,
  .rs-ev-name { transition: none; }
}