/* The events: a jharokha for each function, on ivory marble.

   Each function (.ev) is a window (.ev-win, a button) and its details
   (.ev-info). The window is one picture in layers, all on one canvas
   (assets/events/events.css says where its arch, hinges and middle are):
   the night behind it (.ev-scene, masked to the arch), the frame with its
   arch empty, the frame's mirrors (.ev-tint, to catch the night's light), a
   glint that runs over them now and then (.ev-shine), and the two shutters
   (.ev-leaf), each a half of the shutters picture, hinged at its side of the
   arch, with a darker back.

   Open (.is-open, set by js/events.js), the shutters stand swung out, the
   night is lit, its light is on the marble and in the frame's mirrors, and
   the details (.ev-more) are shown. Each function has its own jewel tone
   (--tone: its light; --tone-ink: to read on the marble).

   Without the script (no .is-ready), the windows are simply open.

   Phones and narrow columns: the windows one under another, the details
   beside each, the sides alternating. Wider (tablets either way up, laptop
   columns): the four windows in a row, the details under each. */

.events {
  --band-h: 20px;
  --gold-deep: #86662a;
  --win-w: min(44cqi, 210px, 22svh);
  position: relative;
  z-index: 1;                      /* its bands lie over the sections above and below */
  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) + 50px);
  background: url(../assets/letter/marble.webp) center top / 100% auto repeat-y, #f2ede3;
  color: var(--ink);
  text-align: center;
  container: events / inline-size;
  overflow-x: clip;                /* the swung shutters and their light, at the screen's edge */
  -webkit-tap-highlight-color: transparent;
}

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

.ev-mehndi { --tone: #f3a623; --tone-ink: #8a5606; --tone-glow: rgba(255, 170, 40, .5); }
.ev-nikah  { --tone: #ec93a8; --tone-ink: #9b3c56; --tone-glow: rgba(240, 130, 160, .46); }
.ev-baraat { --tone: #d3283f; --tone-ink: #911428; --tone-glow: rgba(215, 36, 62, .42); }
.ev-walima { --tone: #d5dde8; --tone-ink: #4d5b6d; --tone-glow: rgba(170, 190, 220, .62); }

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

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

.ev-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);
}

/* gold leaf, deepened to read on the marble (as the letter's) */
.ev-title {
  font: 400 clamp(44px, 12.5cqi, 72px)/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));
}

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

.ev-list {
  display: flex;
  flex-direction: column;
  gap: clamp(30px, 9cqi, 48px);
  width: 100%;
  max-width: 560px;
  margin-top: clamp(14px, 4cqi, 26px);
}

.ev {
  display: grid;
  grid-template-columns: var(--win-w) minmax(0, 1fr);
  grid-template-areas: "win info";
  column-gap: clamp(12px, 4.5cqi, 28px);
  align-items: center;
}

.ev:nth-child(even) {
  grid-template-columns: minmax(0, 1fr) var(--win-w);
  grid-template-areas: "info win";
}

@container events (min-width: 640px) {
  .ev-list {
    --win-w: min(21.5cqi, 19svh, 230px);
    flex-direction: row;
    align-items: flex-start;
    max-width: 1200px;
    gap: clamp(14px, 2.6cqi, 40px);
  }
  .ev,
  .ev:nth-child(even) {
    flex: 1 1 0;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "win" "info";
    justify-items: center;
    align-items: start;
    row-gap: clamp(10px, 1.6cqi, 18px);
  }
}

/* Sideways tablets: all of it on the screen at once. */
@media (min-aspect-ratio: 6/5) {
  html.is-tablet .events { padding-block: calc(var(--band-h) + 22px) calc(var(--band-h) + 28px); }
  html.is-tablet .ev-list { --win-w: min(19cqi, 16svh, 230px); margin-top: 6px; gap: clamp(12px, 1.6cqi, 24px); }
  html.is-tablet .ev-title { font-size: clamp(44px, 8svh, 64px); }
}

/* ------------------------------------------------------------ the window */

.ev-win {
  grid-area: win;
  position: relative;
  display: block;
  width: var(--win-w);
  aspect-ratio: var(--win-r);
  padding: 0;
  border: 0;
  border-radius: calc(var(--win-w) * .2) calc(var(--win-w) * .2) 4px 4px;
  background: none;
  cursor: pointer;
  perspective: calc(var(--win-w) * 4.2);
  -webkit-tap-highlight-color: transparent;
}

.ev-win:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 5px; }
.ev.is-open .ev-win { cursor: default; }

.ev-win > span {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* the night's light, on the marble around the window */
.ev-win > .ev-light {
  inset: -18% -70% -8%;
  background: radial-gradient(closest-side, var(--tone-glow), transparent);
  opacity: 0;
}

/* the night, seen through the arch */
.ev-scene {
  -webkit-mask: url(../assets/events/arch.webp) 0 0 / 100% 100% no-repeat;
          mask: url(../assets/events/arch.webp) 0 0 / 100% 100% no-repeat;
  background: #1a0f08;
}

.ev-scene img {
  position: absolute;
  left: var(--arch-l);
  top: var(--arch-t);
  width: calc(var(--arch-r) - var(--arch-l));
  height: calc(var(--arch-b) - var(--arch-t));
  object-fit: cover;
  max-width: none;
  filter: brightness(.3);
  transform-origin: 50% 70%;
  user-select: none;
  -webkit-user-select: none;
}

.ev-frame {
  background: url(../assets/events/frame.webp) 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(0 calc(var(--win-w) * .04) calc(var(--win-w) * .05) rgba(60, 40, 10, .35));
}

/* the frame's mirrors, catching the night's light once it is open */
.ev-tint,
.ev-shine {
  -webkit-mask: url(../assets/events/frame-mirrors.webp) 0 0 / 100% 100% no-repeat;
          mask: url(../assets/events/frame-mirrors.webp) 0 0 / 100% 100% no-repeat;
}

.ev-tint {
  background: radial-gradient(ellipse 60% 45% at 50% 52%, var(--tone), color-mix(in srgb, var(--tone) 55%, transparent));
  mix-blend-mode: multiply;
  opacity: 0;
}

/* a glint running up across the mirrors now and then, each window in its turn */
.ev-shine {
  background: linear-gradient(160deg, transparent 38%, rgba(255, 255, 255, .95) 48%, rgba(255, 250, 230, .8) 52%, transparent 62%) 0 0 / 100% 300% no-repeat;
  mix-blend-mode: screen;
  animation: ev-shine 7.5s ease-in-out infinite;
}

.ev:nth-child(2) .ev-shine { animation-delay: 1.9s; }
.ev:nth-child(3) .ev-shine { animation-delay: 3.8s; }
.ev:nth-child(4) .ev-shine { animation-delay: 5.7s; }

@keyframes ev-shine {
  0% { background-position: 0 100%; opacity: 1; }
  22% { background-position: 0 0; opacity: 1; }
  23%, 100% { background-position: 0 0; opacity: 0; }
}

/* the shutters: each half of the picture, hinged at its side of the arch */
.ev-win > .ev-leaf { transform-style: preserve-3d; }
.ev-leaf-l { transform-origin: var(--arch-l) 50%; }
.ev-leaf-r { transform-origin: var(--arch-r) 50%; }

.ev-leaf > i {
  position: absolute;
  inset: 0;
  background: url(../assets/events/shutters.webp) 0 0 / 100% 100% no-repeat;
  -webkit-mask: url(../assets/events/shutters.webp) 0 0 / 100% 100% no-repeat;
          mask: url(../assets/events/shutters.webp) 0 0 / 100% 100% no-repeat;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.ev-leaf-l > i { clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.ev-leaf-r > i { clip-path: inset(0 0 0 var(--split)); }

/* the back of each shutter: the same panel from behind, in its own shade */
.ev-leaf > i + i { filter: brightness(.62) saturate(.85); }
.ev-leaf-l > i + i { transform: rotateY(180deg); transform-origin: calc((var(--arch-l) + var(--split)) / 2) 50%; }
.ev-leaf-r > i + i { transform: rotateY(180deg); transform-origin: calc((var(--split) + var(--arch-r)) / 2) 50%; }

/* light behind the emerald glass, breathing */
.ev-leaf > i:first-child::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 34% 26% at 50% 56%, rgba(255, 236, 180, .55), transparent);
  mix-blend-mode: screen;
  animation: ev-seep 3.6s ease-in-out infinite alternate;
  transition: opacity .5s ease;
}

.ev:nth-child(even) .ev-leaf > i:first-child::after { animation-delay: -1.8s; }

@keyframes ev-seep {
  from { opacity: .35; }
  to { opacity: .9; }
}

/* ------------------------------------------------------------ open */

.events:not(.is-ready) .ev-leaf,
.ev.is-open .ev-leaf > i:first-child::after { opacity: 0; }

.ev.is-open .ev-leaf-l { transform: rotateY(-112deg); }
.ev.is-open .ev-leaf-r { transform: rotateY(112deg); }

.events:not(.is-ready) .ev-scene img,
.ev.is-open .ev-scene img { filter: none; }

.ev.is-open .ev-light { opacity: 1; }
.ev.is-open .ev-tint { opacity: .55; }
.ev-walima.is-open .ev-tint { opacity: .4; }

/* ------------------------------------------------------------ the details */

.ev-info {
  grid-area: info;
  display: grid;
  justify-items: center;
  width: 100%;
  container-type: inline-size;
}

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

.ev-name {
  font: 400 clamp(32px, 20cqi, 46px)/1.1 "Alex Brush", cursive;
  padding: 0 .25em .08em;
  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));
}

/* a stone of the night's colour, set in a gold line */
.ev-gem {
  position: relative;
  width: min(100%, 120px);
  height: 12px;
  margin: 2px 0 8px !important;
  background: linear-gradient(90deg, transparent, rgba(134, 102, 42, .7) 30%, rgba(134, 102, 42, .7) 70%, transparent) center / 100% 1px no-repeat;
}

.ev-gem::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  translate: -50% -50%;
  rotate: 45deg;
  background: radial-gradient(circle at 32% 30%, #fff 0, var(--tone) 38%, var(--tone-ink) 100%);
  box-shadow: 0 0 0 1.5px #c9a45c, 0 0 0 2.5px rgba(111, 80, 32, .5), 0 1px 3px rgba(0, 0, 0, .3);
}

.ev-when > span { display: block; }
.ev-when { font-variant-numeric: lining-nums; }

.ev-day,
.ev-dmy {
  font: 700 clamp(10.5px, 6.6cqi, 13px)/1.45 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.ev-time {
  margin-top: 2px;
  font: italic 500 clamp(15px, 8.8cqi, 18px)/1.3 "Cormorant Garamond", Georgia, serif;
  color: var(--ink);
}

/* the details and the prompt to open take the same place, so nothing moves */
.ev-tap,
.ev-more { grid-row: 4; grid-column: 1; }

.ev-tap {
  align-self: start;
  margin-top: 14px !important;
  font: italic 500 clamp(14px, 8cqi, 17px)/1.3 "Cormorant Garamond", Georgia, serif;
  color: var(--gold-deep);
  animation: ev-tap 2.8s ease-in-out infinite;
  transition: opacity .4s ease;
}

@keyframes ev-tap {
  0%, 100% { opacity: .45; }
  50% { opacity: 1; }
}

.events:not(.is-ready) .ev-tap,
.ev.is-open .ev-tap { opacity: 0; animation: none; visibility: hidden; }

.ev-more {
  display: grid;
  justify-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 12px !important;
}

.events.is-ready .ev:not(.is-open) .ev-more { visibility: hidden; }

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

.ev-venue > span { display: block; }

.ev-place {
  font: 600 clamp(16px, 9.4cqi, 20px)/1.2 "Cormorant Garamond", Georgia, serif;
  color: var(--ink);
  text-wrap: balance;
}

.ev-addr {
  font: 500 clamp(14px, 8cqi, 16px)/1.3 "Cormorant Garamond", Georgia, serif;
  color: rgba(11, 61, 49, .78);
}

.ev-dress {
  font: italic 500 clamp(14.5px, 8.4cqi, 17px)/1.3 "Cormorant Garamond", Georgia, serif;
  color: var(--ink);
  text-wrap: balance;
}

.ev-dress > span {
  display: block;
  font: normal 700 clamp(10px, 6cqi, 12px)/1.4 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tone-ink);
}

.ev-actions {
  position: relative;
  display: grid;
  gap: 7px;
  width: min(100%, 210px);
  margin-top: 2px !important;
}

/* room enough: the two side by side */
@container (min-width: 250px) {
  .ev-actions { grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; }
  .ev-actions .ev-btn { gap: .3em; padding-inline: 6px; font-size: 13px; letter-spacing: 0; white-space: nowrap; }
}

.ev-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid rgba(134, 102, 42, .55);
  border-radius: 999px;
  background: rgba(255, 252, 244, .72);
  box-shadow: 0 1px 2px rgba(60, 40, 10, .12);
  color: var(--ink);
  font: 700 clamp(12.5px, 7.4cqi, 14.5px)/1 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .05em;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

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

.ev-btn:hover { background: #fffdf8; border-color: var(--tone-ink); }
.ev-btn:focus-visible,
.ev-cal-menu a:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

/* the calendar choices, opening above the button */
.ev-cal-menu {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: calc(100% - 30px);
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  width: max-content;
  max-width: min(250px, 92vw);
  padding: 6px;
  border: 1px solid rgba(134, 102, 42, .6);
  border-radius: 12px;
  background: #fffaf0;
  box-shadow: 0 8px 22px rgba(40, 28, 6, .3);
  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(11, 61, 49, .7);
}

.ev-cal-menu a:hover { background: rgba(134, 102, 42, .12); }

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

.ev-win,
.ev-info,
.ev-head {
  transition: opacity 1s ease, translate 1.3s cubic-bezier(.2, .7, .2, 1);
}

.ev-info { transition-delay: .15s; }

.events.is-ready .ev:not(.is-seen) .ev-win { opacity: 0; translate: 0 22px; }
.events.is-ready .ev:not(.is-seen) .ev-info { opacity: 0; translate: 0 12px; }
.events.is-ready:not(.is-seen) .ev-head { opacity: 0; }

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

@media (prefers-reduced-motion: reduce) {
  .ev-win,
  .ev-info,
  .ev-head { transition: none; }
  .ev-shine,
  .ev-tap,
  .ev-leaf > i:first-child::after { animation: none; transition: none; }
  .ev-shine { opacity: 0; }
}