/* EV Feature Panels

Dark "What to expect" variant: bordered panels, each with copy on one side and an
image on the other, plus a small gradient accent rule bottom-left.

The panels read as a scroll-driven slider rather than a static stack: each one
zooms and fades in as it enters the viewport, holds at full size through the
middle of its pass, then zooms and fades back out, so only the panel nearest the
centre of the screen is fully present. The generous gap between panels is part of
that — it keeps one panel arriving as the previous one leaves.
*/

.m-evPanels {
  position: relative;
  background-color: var(--grey_30);
  color: var(--white);
}

.m-evPanels .o-wrapper--module {
  padding-inline: var(--grid_margins);
}

.m-evPanels__intro {
  margin-bottom: var(--spacing_10);
}

.m-evPanels__eyebrow {
  margin-bottom: var(--spacing_5);
}

.m-evPanels__heading {
  margin: 0;
  font-size: clamp(var(--h1_min), 4vw + 1rem, var(--h1_max));
  line-height: 125%;
  font-weight: var(--font_regular);
}

.m-evPanels__list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing_20);
  margin: 0;
  padding: 0;
  list-style: none;
}

.m-evPanels__item {
  margin: 0;
  padding: 0;
}

.m-evPanels__panel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing_6);
  padding: var(--spacing_6);
  border: var(--integers_1) solid var(--grey_90);
}

/* The reveal curve, mapped across the panel's pass through the viewport: in by
20%, held to 70%, out by 90%. module.js mirrors these numbers for browsers
without scroll-driven CSS animations, so keep the two in step. */

@keyframes m-evPanels-reveal {

  0% {
    opacity: 0;
    transform: scale(0.8);
  }

  20%,
  70% {
    opacity: 1;
    transform: scale(1);
  }

  90%,
  100% {
    opacity: 0;
    transform: scale(0.8);
  }

}

@supports (animation-timeline: view()) {

  /* A view timeline is inactive while its subject sits entirely outside the
  viewport, and an inactive timeline applies no animation at all - so the resting
  style has to be the hidden state, or panels would show at full size until they
  touched the viewport edge and then snap out. Both ends of the curve land here,
  which is why the same declaration covers a panel that has yet to arrive and one
  that has already left. */

  .m-evPanels__panel {
    opacity: 0;
    transform: scale(0.8);
    animation: m-evPanels-reveal linear both;
    animation-timeline: view();
  }

}

.m-evPanels__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.m-evPanels__panelTitle {
  margin: 0;
  font-size: clamp(var(--h4_min), 4vw + 1rem, var(--h3_max));
  line-height: 125%;
  font-weight: var(--font_regular);
}

.m-evPanels__text {
  margin-top: var(--spacing_5);
  line-height: 150%;
}

.m-evPanels__text p + p {
  margin-top: var(--spacing_4);
}

/* L-shaped gradient flick with a dot at the end: blurple descending the left,
resolving to orange at the corner, then orange running right and fading out. The
same two gradients dress the modal portrait in EV Speakers - keep them in step so
the accent reads as one motif across the event modules.

The element is the L's bounding box. Its own background paints the horizontal arm
along the bottom edge, which leaves :before for the vertical arm and :after for
the dot - three marks from one element. The glow is a drop-shadow on the box, so
it blooms around all three rather than needing a fourth layer. */

.m-evPanels__accent {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: block;
  width: 45%;
  min-width: calc((160 / var(--root_font_size)) * 1rem);
  max-width: calc((320 / var(--root_font_size)) * 1rem);
  height: calc((180 / var(--root_font_size)) * 1rem);
  margin-top: var(--spacing_8);
  background:
    linear-gradient(90deg, var(--brand_orange) 0%, var(--brand_pink) 65%, transparent 100%)
    left bottom / 100% var(--integers_2) no-repeat;
  filter: drop-shadow(0 0 calc((6 / var(--root_font_size)) * 1rem) rgba(255, 0, 217, 0.45));
}

.m-evPanels__accent:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--integers_2);
  background: linear-gradient(180deg, var(--brand_blurple) 0%, var(--brand_pink) 45%, var(--brand_orange) 100%);
}

.m-evPanels__accent:after {
  content: '';
  position: absolute;
  right: calc((-4 / var(--root_font_size)) * 1rem);
  bottom: calc((-1 / var(--root_font_size)) * 1rem);
  width: var(--integers_4);
  height: var(--integers_4);
  background-color: var(--white);
}

.m-evPanels__media {
  min-width: 0;
}

.m-evPanels__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

/* module.js bails out under the same query, so the panels simply sit still. */

@media (prefers-reduced-motion: reduce) {

  .m-evPanels__panel {
    animation: none;
    opacity: 1;
    transform: none;
  }

}

@media (min-width: 992px) {

  .m-evPanels__panel {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing_10);
    padding: var(--spacing_10);
  }

  .m-evPanels__body,
  .m-evPanels__media {
    flex: 1 1 0;
  }

  /* The text block leads in the DOM, so only the image-left variant reorders. */
  .m-evPanels__panel--mediaLeft .m-evPanels__media {
    order: -1;
  }

  /* Pushes the accent to the foot of the text column, with a taller vertical arm
     now there is room for one. */
  .m-evPanels__accent {
    height: calc((180 / var(--root_font_size)) * 1rem);
    margin-top: auto;
    bottom: 20px;
    left: 20px;
  }

}