/* events.css — the celebrations as lamp-lit niches on a rangoli dot path.
 *
 * js/path.js draws the path through each niche's diya after layout and walks a flame
 * along it with scroll; as the flame reaches a diya, that event gets .is-lit.
 * The lit stroke's glow is a second, wider translucent stroke — never an SVG filter,
 * because the track is several screens tall and a filter would re-raster all of it
 * on every scroll frame.
 */

.events {
  padding-bottom: 48px;
}

.events__track {
  position: relative;
  margin-top: 30px;
}

.events__path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.events__path path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.events__path-dots {
  stroke: rgba(248, 227, 166, 0.5);
  stroke-width: 3;
  stroke-dasharray: 0 12;
}

.events__path-lit {
  stroke: #ffc75a;
  stroke-width: 2.6;
}

.events__path-glow {
  stroke: rgba(255, 176, 72, 0.22);
  stroke-width: 10;
}

.events__spark {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.events__spark .flame {
  --fw: 15px;
  left: 0;
  top: 0;
}

.events__list {
  position: relative;
  display: grid;
  gap: 80px;
  margin: 0;
  padding: 76px 0 72px;
  list-style: none;
}

.event {
  --tint: var(--marigold);
  position: relative;
  width: 76%;
  margin: 0 auto;
}

.event__niche {
  padding: 30px 18px 22px;
  background:
    radial-gradient(ellipse 85% 50% at 50% 0%, color-mix(in srgb, var(--tint) 24%, transparent), transparent 72%),
    rgba(27, 6, 9, 0.6);
  opacity: 0.34;
  transform: translateY(18px) scale(0.975);
  transition:
    opacity 900ms var(--ease-out),
    transform 900ms var(--ease-out);
}

.event.is-lit .event__niche {
  opacity: 1;
  transform: none;
}

.event__img {
  width: 128px;
  height: auto;
  margin: -6px auto 8px;
  filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.45));
  transform: scale(0.86);
  transition: transform 900ms var(--ease-back) 120ms;
}

.event.is-lit .event__img {
  transform: none;
}

.event__name {
  margin: 0;
  font: 600 30px/1.1 var(--font-display);
}

.event__deva {
  margin: 2px 0 12px;
  font: 400 18px/1.3 var(--font-deva);
  color: var(--marigold);
}

.event__when {
  margin: 0 0 4px;
  font: 600 13px/1.45 var(--font-display);
  letter-spacing: 0.05em;
  color: var(--brass-hi);
}

.event__where {
  margin: 0 0 10px;
  font: 500 16px/1.45 var(--font-body);
}

.event__dress {
  margin: 0;
  font: italic 500 17px/1.4 var(--font-poem);
  color: var(--ivory-dim);
}

.event__dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--tint);
  box-shadow: 0 0 10px var(--tint);
  vertical-align: 1px;
}

/* the event's own lamp sits on the niche's shoulder, in the gutter the path runs in */
.event__diya {
  position: absolute;
  top: 26px;
  --diya-w: 50px;
  z-index: 1;
}

.event:nth-child(odd) .event__diya {
  left: -8%;
  transform: translateX(-50%);
}

.event:nth-child(even) .event__diya {
  right: -8%;
  transform: translateX(50%);
}