/* The celebrations, on the garden wall.

   A climbing rose winds down a blush limewashed wall in the morning shade, and from it hang four
   handmade paper tags on silk ribbons, one for each function, each with its own pressed flowers
   (assets/events/). Each is hung as it comes into view; a touch lifts it off the branch, brings
   it forward and turns it over to its back, where the details are (js/events.js).

   Everything on the wall is measured in the section's width (cqw), so it keeps its shape at
   any size. On a phone, an upright tablet and the laptop column the branch winds down and the
   tags hang either side of it, one below the other (a little more than a screen tall); on a
   sideways tablet it runs across and the four hang in a row. assets/events/events.css says
   where on each branch every tag hangs, and each tag's shape (where its paper is, and where the
   writing goes, below its flowers). */

.events {
  /* the branch winding down: its width and where it starts (it runs off both sides a little),
     the tags' paper width, and how tall it all is */
  --bw: 125cqw;
  --bx: -12.5cqw;
  --br: var(--branch-v-r);
  --pw: 34cqw;
  --stage-h: 300cqw;
  --branch: url(../assets/events/branch-v.webp);

  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 11cqw 0 5cqw;
  overflow: hidden;
  background: #f1e2da url(../assets/events/wall.webp) 0 0 / 520px repeat;
  color: var(--ink);
  container-type: inline-size;
}

.ev .ev-name,
.ev .tg-when > span,
.ev-back p { margin: 0; }

/* ------------------------------------------------------------ the wall */

/* the morning: warm light from the upper left, a little deeper at the foot of the wall,
   and the leaves of a tree we cannot see, moving on it */
.ev-wall {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 90cqw 70cqw at 12% 4%, rgba(255, 246, 232, .62), rgba(255, 246, 232, 0) 70%),
    radial-gradient(ellipse 120cqw 90cqw at 88% 62%, rgba(255, 244, 236, .35), rgba(255, 244, 236, 0) 70%),
    linear-gradient(rgba(150, 96, 88, .1), rgba(150, 96, 88, 0) 7%, rgba(150, 96, 88, 0) 82%, rgba(150, 96, 88, .12));
}

.ev-shade {
  position: absolute;
  width: max(115cqw, 60svh);
  aspect-ratio: 1;
  background: url(../assets/letter/shade.webp) 0 0 / 100% 100% no-repeat;
  opacity: .26;
  mix-blend-mode: multiply;
  transform-origin: 0 0;
  animation: ev-sway 8s ease-in-out infinite alternate;
}

.ev-shade-a { left: -10cqw; top: -4cqw; }
.ev-shade-b {
  right: -12cqw;
  top: 44%;
  opacity: .2;
  scale: -1 1;
  transform-origin: 100% 0;
  animation-duration: 9.5s;
  animation-delay: -3s;
}

@keyframes ev-sway {
  0%   { transform: rotate(-1deg) translate(-.8%, .2%) skewX(.8deg); }
  45%  { transform: rotate(.5deg) translate(.6%, -.3%) skewX(-.4deg); }
  100% { transform: rotate(1.1deg) translate(1%, .5%) skewX(-1deg); }
}

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

.ev-head {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 0 6cqw 3cqw;
}

.ev-head p { margin: 0; }

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

.ev-title {
  margin: .02em 0 .06em;
  font: 700 13.5cqw/1.05 "Corinthia", cursive;
  padding: 0 .2em .04em;
  white-space: nowrap;
  color: var(--rose);
  --wipe: 130%;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--wipe) - 18%), transparent var(--wipe));
          mask-image: linear-gradient(90deg, #000 calc(var(--wipe) - 18%), transparent var(--wipe));
}

.ev-hint {
  font: italic 500 max(14px, 4cqw)/1.3 "Cormorant Garamond", Georgia, serif;
  color: rgba(91, 60, 64, .8);
}

.ev-head > * { text-shadow: 0 0 14px rgba(255, 248, 242, .9); }

/* ------------------------------------------------------------ the branch and its tags */

.ev-stage {
  position: relative;
  z-index: 1;
  flex: none;
  height: var(--stage-h);
}

.ev-branch {
  position: absolute;
  left: var(--bx);
  top: 0;
  width: var(--bw);
  aspect-ratio: var(--br);
  background: var(--branch) 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(1.4cqw 2.4cqw 1.6cqw rgba(110, 66, 58, .22));
  pointer-events: none;
}

/* A tag hangs from its ribbon's loop, where the stem passes through it. */
.ev {
  --tw: calc(var(--pw) / (var(--tag-pr) - var(--tag-pl)));
  --hx: var(--hang-v-x);
  --hy: var(--hang-v-y);
  position: absolute;
  left: calc(var(--bx) + var(--hx) * var(--bw) - var(--tw) / 2);
  top: calc(var(--hy) * var(--bw) / var(--br) - var(--tw) / var(--tag-r) * .018);
  width: var(--tw);
}

.ev-tag {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  container-type: inline-size;
}

.tg-sway,
.tg-swing {
  display: block;
  position: relative;
  transform-origin: 50% 1%;
}

.tg-art {
  width: 100%;
  height: auto;
  /* it hangs a little way off the wall: its shadow falls down and to the right */
  filter: drop-shadow(5cqw 8cqw 5cqw rgba(107, 62, 58, .2)) drop-shadow(0 .6cqw .8cqw rgba(107, 62, 58, .16));
}

.ev-tag:focus-visible { outline: none; }
.ev-tag:focus-visible .tg-art { filter: drop-shadow(0 0 0 var(--rose)) drop-shadow(0 0 1.2cqw rgba(168, 100, 106, .9)); }

/* written on the front, on the plain paper below the flowers */
.tg-words {
  position: absolute;
  left: calc(var(--tag-pl) * 100% + 8%);
  right: calc((1 - var(--tag-pr)) * 100% + 8%);
  top: calc(var(--tag-pf) * 100%);
  bottom: calc((1 - var(--tag-pb)) * 100% + 7%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4cqw;
  pointer-events: none;
}

.ev-name {
  display: block;
  font: 700 30cqw/1 "Corinthia", cursive;
  color: var(--rose);
  padding: 0 .1em;
}

.tg-when {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6cqw;
  line-height: 1.15;
}

.tg-when::before {
  content: "";
  width: 22cqw;
  height: 1px;
  margin-bottom: 2.6cqw;
  background: linear-gradient(90deg, transparent, rgba(168, 100, 106, .6), transparent);
}

.ev-day {
  font: 600 max(9.5px, 7.6cqw) "Cormorant Garamond", Georgia, serif;
  letter-spacing: .22em;
  padding-left: .22em;
  text-transform: uppercase;
  color: var(--sage-deep);
}

.ev-dmy { font: 600 max(12px, 10.4cqw) "Cormorant Garamond", Georgia, serif; color: var(--ink); }
.ev-time { font: italic 500 max(11.5px, 9.6cqw) "Cormorant Garamond", Georgia, serif; color: var(--rose); }

.ev-petals {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.ev-petal {
  position: absolute;
  left: 0;
  top: 0;
  perspective: 300px;
}

.ev-petal b { display: block; transform-style: preserve-3d; }
.ev-petal img { width: 100%; height: auto; filter: drop-shadow(0 2px 3px rgba(120, 70, 70, .16)); }

/* the details wait on the tag's back (js/events.js moves them onto the lifted tag) */
.ev > .ev-back { display: none; }

/* Waiting to be hung (js/events.js): not on the branch yet. */
.events.is-armed .ev:not(.is-hung) .tg-swing { opacity: 0; }
.events.is-armed:not(.is-seen) .ev-head > * { opacity: 0; }

/* ------------------------------------------------------------ lifted, and turned over */

html.ev-lifted { overflow: hidden; }

.ev-lift {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  perspective: 1600px;
}

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

.ev-veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(252, 245, 240, .78), rgba(238, 222, 214, .9));
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
}

.ev-card {
  --cw: min(86vw, 400px, 84svh * var(--tag-r));
  position: relative;
  width: var(--cw);
  aspect-ratio: var(--tag-r);
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
  outline: none;
}

.ev-turn {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.ev-face {
  position: absolute;
  inset: 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  container-type: inline-size;
}

.ev-face > img {
  width: 100%;
  height: 100%;
  filter: drop-shadow(3cqw 6cqw 6cqw rgba(107, 62, 58, .24)) drop-shadow(0 .4cqw .8cqw rgba(107, 62, 58, .16));
}

.ev-face-back { transform: rotateY(180deg); }

/* the back: everything about the function */
.ev-face .ev-back {
  position: absolute;
  left: calc(var(--tag-pl) * 100% + 8%);
  right: calc((1 - var(--tag-pr)) * 100% + 8%);
  top: 26%;
  bottom: calc((1 - var(--tag-pb)) * 100% + 5%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3.6cqw;
  text-align: center;
}

.eb-name { font: 700 19cqw/1 "Corinthia", cursive; color: var(--rose); }

.eb-when {
  font: 600 max(13px, 6.4cqw)/1.3 "Cormorant Garamond", Georgia, serif;
  color: var(--ink);
  text-wrap: balance;
}

.eb-when span {
  display: block;
  font-style: italic;
  font-weight: 500;
  color: var(--rose);
}

.eb-note {
  position: relative;
  padding-top: 3.6cqw;
  font: italic 500 max(13px, 6.4cqw)/1.3 "Cormorant Garamond", Georgia, serif;
  color: rgba(91, 60, 64, .9);
  text-wrap: balance;
}

.eb-note::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 26cqw;
  height: 1px;
  translate: -50% 0;
  background: linear-gradient(90deg, transparent, rgba(168, 100, 106, .6), transparent);
}

.ev-venue { line-height: 1.25; }
.ev-place { display: block; font: 700 max(14.5px, 7.4cqw)/1.2 "Cormorant Garamond", Georgia, serif; color: var(--ink); }
.ev-addr { display: block; font: 500 max(12.5px, 6cqw)/1.3 "Cormorant Garamond", Georgia, serif; color: rgba(91, 60, 64, .85); }

.ev-dress {
  font: italic 500 max(12.5px, 6cqw)/1.3 "Cormorant Garamond", Georgia, serif;
  color: var(--ink);
  text-wrap: balance;
}

.ev-dress > span {
  display: block;
  font: normal 700 max(9.5px, 4.4cqw)/1.5 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sage-deep);
}

/* the colours, as three little silk swatches */
.ev-sw {
  display: flex;
  justify-content: center;
  gap: 1.8cqw;
  margin-top: 1.6cqw;
}

.ev-sw i {
  width: 4.6cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .55), transparent 55%), var(--c);
  box-shadow: 0 0 0 1px rgba(91, 60, 64, .18), 0 1px 2px rgba(91, 60, 64, .2);
}

.ev-actions {
  position: relative;
  display: grid;
  gap: 2.4cqw;
  width: 84%;
  margin-top: 1cqw;
}

.ev-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  min-height: max(36px, 11cqw);
  padding: 1.6cqw 3cqw;
  border: 1px solid rgba(168, 100, 106, .55);
  border-radius: 999px;
  background: rgba(255, 251, 246, .8);
  box-shadow: 0 1px 2px rgba(107, 62, 58, .12);
  color: var(--ink);
  font: 700 max(13px, 5.4cqw)/1 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .04em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

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

.ev-btn:hover { background: #fffdf9; border-color: var(--rose); }
.ev-btn:focus-visible,
.ev-cal-menu a:focus-visible,
.ev-close:focus-visible { outline: 2px solid var(--rose); 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(168, 100, 106, .5);
  border-radius: 12px;
  background: #fffaf6;
  box-shadow: 0 8px 22px rgba(80, 40, 40, .24);
  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(91, 60, 64, .7);
}

.ev-cal-menu a:hover { background: rgba(233, 184, 179, .25); }

/* hang it back */
.ev-close {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(168, 100, 106, .45);
  border-radius: 50%;
  background: rgba(255, 251, 246, .85);
  box-shadow: 0 2px 8px rgba(107, 62, 58, .16);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.ev-close svg { width: 18px; height: 18px; fill: none; stroke: var(--rose); stroke-width: 1.8; stroke-linecap: round; }

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

/* An upright tablet, or the laptop column: the same, with room around it. */
@media (min-aspect-ratio: 5/8) {
  html:root .events {
    --bw: 80cqw;
    --bx: 13cqw;
    --pw: 23cqw;
    --stage-h: 198cqw;
    padding-top: 7cqw;
  }
  html:root .ev-kicker { font-size: max(11px, 1.9cqw); }
  html:root .ev-title { font-size: 9.5cqw; }
  html:root .ev-hint { font-size: max(14px, 2.3cqw); }
}

/* A sideways tablet: the branch runs across, and the four hang in a row. */
@media (min-aspect-ratio: 6/5) {
  html.is-tablet .events {
    --bw: 104cqw;
    --bx: -4cqw;
    --br: var(--branch-h-r);
    --pw: 13cqw;
    --stage-h: 54cqw;
    --branch: url(../assets/events/branch-h.webp);
    padding: 3cqw 0 1cqw;
  }
  html.is-tablet .ev { --hx: var(--hang-h-x); --hy: var(--hang-h-y); }
  html.is-tablet .ev-kicker { font-size: max(11px, 1.2cqw); }
  html.is-tablet .ev-title { font-size: 5.6cqw; }
  html.is-tablet .ev-hint { font-size: max(14px, 1.4cqw); }
  html.is-tablet .ev-head { padding-bottom: 1cqw; }
  html.is-tablet .ev-shade-b { top: 20%; }
}

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

@media (prefers-reduced-motion: reduce) {
  .ev-shade { animation: none; }
  .events.is-armed .ev:not(.is-hung) .tg-swing,
  .events.is-armed:not(.is-seen) .ev-head > * { opacity: 1; }
}