/* The events, on the ivory silk between two onyx bands (surface P).

   Four small caskets of black lacquer caged in pierced gold, one for each function, each domed
   lid set with its jewel in a gold star: the Mehndi's emerald, the Nikah's pearl, the Baraat's
   ruby and the Walima's sapphire. These are the invitation's only colours (--tone, below), and
   the RSVP takes them up again. Beneath each casket, its name and day. Opened (js/events.js), the
   lid swings up on its hinges, and a card of the letter's paper rises out of the box and comes
   down in front of it, to lie below it with the details.

   A casket is one canvas (assets/events/events.css, from assets-src/events/build_events.py:
   --box-r, and where things are on it as fractions), its pieces laid over each other:
     .ev-olid    the open lid standing up (the open picture above --hinge), and its gleam
     .ev-inner   the velvet inside, the rim and the front (the open picture from --hinge down)
     .ev-glow    light in the box as it opens
     .ev-lid     the shut domed lid, with its jewel (.ev-gem, over the ruby) and a glint
     .ev-posts   the front corner posts and finials, which stay with the box
   While the card is in the box it is cut off at the front rim (a clip-path, js/events.js).

   Sizes go by the article (a container): the casket is --bw wide, the card --cwid.
   Phone: one column. Upright tablet and the laptop column: two by two. Sideways tablet: a row.
*/

.events {
  overflow-x: clip;
  padding-bottom: 1px;
}

.ev-mehndi { --tone: #1f7a4c; --tone-hi: #7fd6a4; }
.ev-nikah  { --tone: #d9d2c6; --tone-hi: #ffffff; }
.ev-baraat { --tone: #a3182f; --tone-hi: #ff8a96; }
.ev-walima { --tone: #213f94; --tone-hi: #8fb0ff; }

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

.ev-head {
  position: relative;
  z-index: 1;
  padding: calc(clamp(22px, 6.4cqi, 40px) / 2 + clamp(30px, 9cqi, 60px)) 16px 0;
  text-align: center;
}

.ev-kicker { font-size: clamp(11.5px, 3.3cqi, 15px); }

.ev-title {
  margin-top: .06em;
  font-size: clamp(46px, 13cqi, 84px);
}

.ev-hint {
  margin: .5em 0 0;
  font: italic 500 clamp(14.5px, 4cqi, 18px)/1.3 'Cormorant Garamond', Georgia, serif;
  color: rgba(58, 48, 38, .78);
  transition: opacity .8s ease;
}

.events.is-touched .ev-hint { opacity: 0; }

/* ------------------------------------------------------------ the list */

.ev-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  row-gap: clamp(26px, 8cqi, 56px);
  column-gap: 4cqi;
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(6px, 2cqi, 20px) 16px calc(clamp(22px, 6.4cqi, 40px) / 2 + clamp(36px, 10cqi, 72px));
}

.ev {
  --bw: min(70cqi, 280px);
  --cwid: min(96cqi, 380px);
  position: relative;
  isolation: isolate;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (min-aspect-ratio: 5/8) {
  .ev-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ev { --bw: min(64cqi, 290px); --cwid: min(94cqi, 400px); }
}

@media (min-aspect-ratio: 6/5) {
  html.is-tablet .ev-list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 2.4cqi; }
  html.is-tablet .ev { --bw: min(76cqi, 260px); --cwid: 100cqi; }
}

/* ------------------------------------------------------------ the casket */

.ev-casket {
  position: relative;
  flex: none;
  width: var(--bw);
  aspect-ratio: var(--box-r);
}

.ev-casket > span,
.ev-glow,
.ev-lid > i {
  position: absolute;
  inset: 0;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
}

/* its shadow on the silk */
.ev-shadow {
  position: absolute;
  left: 3%;
  right: 3%;
  top: calc(var(--feet) * 100% - 4%);
  height: 8%;
  background: radial-gradient(closest-side, rgba(52, 34, 10, .5), rgba(52, 34, 10, .18) 60%, transparent);
  pointer-events: none;
}

.ev-olid {
  clip-path: inset(0 0 calc((1 - var(--hinge)) * 100%) 0);
  transform-origin: 50% calc(var(--hinge) * 100%);
}

.ev-inner { clip-path: inset(calc(var(--hinge) * 100% - 1px) 0 0 0); }

.ev-lid { transform-origin: 50% calc(var(--hinge) * 100%); }

/* the gleam across the gold inside the lid */
.ev-sheen {
  position: absolute;
  inset: 0;
  clip-path: var(--panel);
  background: linear-gradient(104deg, transparent 38%, rgba(255, 246, 220, .85) 50%, transparent 62%) no-repeat;
  background-size: 320% 100%;
  background-position: 100% 0;
  mix-blend-mode: soft-light;
  opacity: 0;
}

/* light in the box as it opens */
.ev-glow {
  background: radial-gradient(ellipse 40% 12% at 50% calc((var(--hinge) * .35 + var(--front) * .65) * 100%),
    rgba(255, 206, 128, .5), rgba(255, 190, 110, .16) 55%, transparent 80%);
  mix-blend-mode: screen;
  opacity: 0;
}

.ev.is-open .ev-glow { opacity: .4; }

/* a glint on the jewel, now and then, while it is shut */
.ev-glint {
  position: absolute;
  left: calc((var(--gem-x) - var(--gem-r) * .42) * 100%);
  top: calc((var(--gem-y) - var(--gem-r) * var(--box-r) * .5) * 100%);
  width: calc(var(--gem-r) * 190%);
  aspect-ratio: 1;
  translate: -50% -50%;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .95) 0 6%, rgba(255, 255, 255, 0) 22%),
    linear-gradient(0deg, transparent 47%, rgba(255, 255, 255, .9) 50%, transparent 53%),
    linear-gradient(90deg, transparent 47%, rgba(255, 255, 255, .9) 50%, transparent 53%);
  -webkit-mask-image: radial-gradient(circle, #000 20%, transparent 66%);
          mask-image: radial-gradient(circle, #000 20%, transparent 66%);
  mix-blend-mode: screen;
  opacity: 0;
  scale: 0;
  pointer-events: none;
  animation: ev-glint 5.2s ease-in-out calc(1.5s + var(--i, 0) * 1.3s) infinite;
}

@keyframes ev-glint {
  0%, 84%, 100% { opacity: 0; scale: 0; rotate: 0deg; }
  90%           { opacity: 1; scale: 1; rotate: 45deg; }
  96%           { opacity: .4; scale: .5; rotate: 80deg; }
}

.ev.is-open .ev-glint { animation: none; }

/* open or shut: the lids, committed (js/events.js animates between them) */
.ev:not(.is-open) .ev-olid { visibility: hidden; }
.ev.is-open .ev-lid { visibility: hidden; }

/* the whole shut casket, to touch */
.ev-open {
  position: absolute;
  z-index: 1;
  left: 2%;
  right: 2%;
  top: calc(var(--lid-top) * 100% - 2%);
  bottom: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ev-open:focus { outline: none; }
.ev-open:focus-visible { outline: 2px solid var(--brass); outline-offset: 4px; }
.ev.is-open .ev-open { cursor: default; top: calc(var(--olid-top) * 100%); }

/* ------------------------------------------------------------ the name and day, beneath it */

.ev-slot {
  position: relative;
  width: 100%;
}

.ev-label {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15em;
  margin: 0;
  padding-top: clamp(4px, 2cqi, 10px);
  text-align: center;
}

/* a soft veil of ivory behind them, as the silk is busy */
.ev-label::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 48%;
  width: min(118%, 340px);
  height: 150%;
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(246, 239, 225, .9), rgba(246, 239, 225, .55) 55%, transparent);
  pointer-events: none;
}

.ev-lname,
.ev-gold {
  padding: 0 .18em .1em;
  font: 400 clamp(38px, 13cqi, 56px) / 1.05 'Luxurious Script', cursive;
  /* the letter's gold on ivory */
  background:
    linear-gradient(100deg, transparent calc(var(--gleam) - 12%), rgba(255, 248, 222, .95) var(--gleam), transparent calc(var(--gleam) + 12%)),
    linear-gradient(172deg, #caa052 0%, #8d6420 34%, #c89a45 58%, #7a561c 80%, #a97c33 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 .5px 0 rgba(255, 246, 222, .7)) drop-shadow(0 1px .5px rgba(70, 44, 8, .35));
}

.ev-ldate {
  font: 600 clamp(11px, 3.4cqi, 13.5px) / 1.3 'Cormorant Garamond', Georgia, serif;
  letter-spacing: .24em;
  padding-left: .24em;
  text-transform: uppercase;
  color: var(--brass);
}

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

.ev-card {
  --fs: clamp(13.5px, calc(var(--cwid) * .046), 17px);
  position: relative;
  z-index: 2;
  /* shut, it takes no room at all (not even as overflow below the section) */
  display: none;
  flex-direction: column;
  justify-content: center;
  width: var(--cwid);
  padding:
    calc(var(--cwid) * (var(--pin-t) + .06))
    calc(var(--cwid) * (var(--pin-r) + .06))
    calc(var(--cwid) * (var(--pin-b) + .055))
    calc(var(--cwid) * (var(--pin-l) + .06));
  background-color: #f0d8b0;
  background-position: 0 0, 0 100%, 0 calc(var(--cwid) * var(--pt));
  background-size: 100% auto;
  background-repeat: no-repeat, no-repeat, repeat-y;
  box-shadow: 0 1px 2px rgba(64, 42, 12, .28), 0 calc(var(--cwid) * .02) calc(var(--cwid) * .05) rgba(64, 42, 12, .2);
  color: var(--ink);
  font: 500 var(--fs) / 1.4 'Cormorant Garamond', Georgia, serif;
  text-align: center;
  transform-origin: 50% 0;
}

/* open: the card takes the label's place */
.ev.is-open .ev-card {
  display: flex;
  margin: clamp(-14px, -3cqi, -6px) auto 0;
}

.ev.is-open .ev-label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  visibility: hidden;
}

.ev-card > * { margin: 0; }

.ev-name { font-weight: 400; line-height: 1; }

.ev-gold {
  display: inline-block;
  font-size: calc(var(--fs) * 3.1);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--wipe) - 16%), transparent var(--wipe));
          mask-image: linear-gradient(90deg, #000 calc(var(--wipe) - 16%), transparent var(--wipe));
}

.ev-ur {
  margin-top: -.1em;
  font: 400 calc(var(--fs) * 1.02) / 2.1 'Noto Nastaliq Urdu', serif;
  color: #7a5a26;
}

/* a gold rule, with the function's jewel set in it */
.ev-rule {
  position: relative;
  display: block;
  width: 62%;
  height: 1px;
  margin: .55em auto 1em !important;
  background: linear-gradient(90deg, transparent, #b08a3e 20%, #d8b565 50%, #b08a3e 80%, transparent);
}

.ev-stone {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--fs) * .78);
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, var(--tone-hi) 0 9%, transparent 34%),
    radial-gradient(circle at 50% 55%, var(--tone) 40%, color-mix(in srgb, var(--tone) 55%, #000) 100%);
  box-shadow: 0 0 0 1.5px #c9a24b, 0 0 0 2.5px rgba(122, 86, 28, .55), 0 1px 3px 2px rgba(64, 42, 12, .25);
}

.ev-when { display: flex; flex-direction: column; align-items: center; gap: .08em; }

.ev-day {
  font: 700 calc(var(--fs) * .72) / 1.3 'Cormorant Garamond', Georgia, serif;
  letter-spacing: .26em;
  padding-left: .26em;
  text-transform: uppercase;
  color: var(--brass);
}

.ev-dmy { font-weight: 600; font-size: 1.3em; line-height: 1.2; color: #1d1813; }
.ev-time { font-style: italic; font-size: 1.05em; }

.ev-venue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .08em;
  margin-top: .85em !important;
  text-wrap: balance;
}

.ev-place { font-weight: 700; font-size: 1.14em; line-height: 1.2; color: #1d1813; }
.ev-addr { font-style: italic; line-height: 1.3; color: #4a3d2f; }

.ev-dress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3em;
  margin-top: .85em !important;
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
}

.ev-dress-k {
  font: 700 calc(var(--fs) * .68) / 1.3 'Cormorant Garamond', Georgia, serif;
  letter-spacing: .24em;
  padding-left: .24em;
  text-transform: uppercase;
  color: var(--brass);
}

/* the dress colours, as little drops of lacquer set in gold */
.ev-sw { display: flex; gap: .4em; }

.ev-sw i {
  width: calc(var(--fs) * .9);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 42%),
    var(--c);
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .25), 0 0 0 1px rgba(156, 114, 49, .7);
}

.ev-note {
  margin-top: .55em !important;
  font-style: italic;
  line-height: 1.3;
  color: #4a3d2f;
  text-wrap: balance;
}

.ev-actions {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5em;
  margin-top: 1em !important;
}

.ev-btn {
  display: inline-flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: .4em;
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid rgba(156, 114, 49, .75);
  border-radius: 999px;
  background: rgba(255, 250, 238, .7);
  box-shadow: 0 1px 2px rgba(60, 40, 10, .14);
  color: var(--ink);
  font: 700 calc(var(--fs) * .88) / 1 'Cormorant Garamond', Georgia, serif;
  letter-spacing: .04em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Directions: black lacquer and gold, like the caskets */
.ev-btn:first-child {
  border-color: #b08a3e;
  background: linear-gradient(180deg, #221c15, #0f0c09);
  color: #f0d99c;
}

.ev-btn svg {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: var(--brass);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ev-btn:first-child svg { stroke: #e2c47e; }

.ev-btn:hover { border-color: var(--brass); background-color: #fffcf4; }
.ev-btn:first-child:hover { background: #2a231a; }
.ev-btn:focus-visible,
.ev-cal-menu a:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }

/* the calendar choices, opening above the button */
.ev-cal-menu {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: calc(100% + 6px);
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  width: max-content;
  max-width: min(250px, 92vw);
  padding: 6px;
  border: 1px solid rgba(156, 114, 49, .75);
  border-radius: 12px;
  background: #fffaf0;
  box-shadow: 0 8px 22px rgba(20, 14, 6, .35);
  text-align: left;
}

.ev-cal-menu[hidden] { display: none; }

.ev-cal-menu a {
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--ink);
  font: 700 15px/1.2 'Cormorant Garamond', Georgia, serif;
  text-decoration: none;
}

.ev-cal-menu a small {
  display: block;
  font: italic 500 13px/1.3 'Cormorant Garamond', Georgia, serif;
  color: rgba(42, 35, 27, .7);
}

.ev-cal-menu a:hover { background: rgba(176, 132, 58, .14); }

/* ------------------------------------------------------------ lamplight */

.ev-lamp {
  position: absolute !important;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: soft-light;
}

.ev-lamp::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: max(130cqi, 700px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 196, 104, .7), rgba(255, 180, 90, .3) 38%, rgba(255, 170, 80, 0) 68%);
  translate: -50% -50%;
  animation: ev-drift 38s ease-in-out infinite alternate;
}

@keyframes ev-drift {
  0%   { left: 76%; top: 6%; }
  35%  { left: 22%; top: 34%; }
  70%  { left: 70%; top: 64%; }
  100% { left: 28%; top: 92%; }
}

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

/* With the script running, a casket waits unseen until it comes into view (js/events.js). */
.events.is-ready .ev:not(.is-seen) { opacity: 0; }

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

@media (prefers-reduced-motion: reduce) {
  .ev-lamp::before { animation: none; left: 50%; top: 30%; }
  .ev-glint { animation: none; }
  .ev-hint { transition: none; }
}