/* The three overlapping cards under the home hero (20/10/2026; front-card edge and hover fix the same evening;
   round 2 the same night: the same cards on /tickets/, and every photo about 30% less tall so the row sits lower;
   21/10 the white variant at the end of this file: the same cards in white over the tickets hero photo).
   Warre's ask: three cards side by side; at rest they overlap a little, on hover one comes to the front.
   Desktop (>= 900px): one row, overlapping. Below 900px: stacked, overlapping a little top to bottom.
   No hover (touch): a tap brings a card forward (the cards script sets .is-front). Keyboard: :focus-within.
   Colours and fonts are the site's own: orange #FF9C00 (--e-global-color-82fef8d), Anton headings, Arial text.

   Two layers per card, so the hover never jitters:
   - li.afro-card is the slot. It carries the tilt and the stacking order and it NEVER moves, so the pointer cannot
     lose it. (Before, the li itself lifted and straightened on hover; a pointer near its edge or a tilted corner was
     then outside it, the hover ended, the card dropped back under the pointer, and so on, 13 to 30 times in 1.5 s.)
   - .afro-card__inner is the card you see. It lifts, straightens and grows when its card is in front.
   Which card is in front: the hovered one; else the one with keyboard focus; else the tapped one; else, at rest,
   card 2 (the middle card, which already sits on top of both neighbours). The front card gets a white-and-orange
   edge; while a card is in front, the cards behind it are slightly darkened. Three numbers drive it per card:
   --ring (the edge), --lift (the movement and the stacking), --dim (darkened behind the front card). */
.afro-cards-wrap { width: 100%; padding: 72px 24px 88px; background: #fff; box-sizing: border-box; }
.afro-cards-wrap *, .afro-cards-wrap *::before, .afro-cards-wrap *::after { box-sizing: border-box; }
.afro-cards { display: flex; justify-content: center; align-items: stretch; max-width: 1180px; margin: 0 auto; padding: 0; list-style: none; }
.afro-card {
  --ring: 0; --lift: 0; --dim: 0; --shade: rgba(0, 0, 0, .22); --ring-in: #fff; --ring-out: #FF9C00;
  --lift-y: -14px; --lift-s: .03; --untilt: 1;
  position: relative; display: flex; flex: 0 1 380px; min-width: 0; margin: 0;
  transform: rotate(var(--afro-tilt, 0deg));
  z-index: calc(var(--afro-z, 1) + 10 * var(--lift));
  /* leaving the front with no other card taking it: keep it on top until it has settled back (no mid-way swap) */
  transition: z-index 0s linear .35s;
}
.afro-card__inner {
  position: relative; display: flex; flex-direction: column; flex: 1; min-width: 0;
  border-radius: 18px; overflow: hidden; background: #111; color: #fff;
  transform: rotate(calc(var(--afro-tilt, 0deg) * -1 * var(--lift) * var(--untilt))) translateY(calc(var(--lift-y) * var(--lift))) scale(calc(1 + var(--lift-s) * var(--lift)));
  box-shadow: 0 0 0 calc(3px * var(--ring)) var(--ring-in), 0 0 0 calc(7px * var(--ring)) var(--ring-out),
    0 calc(14px + 12px * var(--lift)) calc(34px + 18px * var(--lift)) var(--shade);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
}
/* the darkening behind the front card: an overlay, so overlapping cards never show through each other */
.afro-card__inner::after {
  content: ""; position: absolute; inset: 0; background: #000; pointer-events: none;
  opacity: calc(.3 * var(--dim)); transition: opacity .35s ease;
}
.afro-card + .afro-card { margin-left: -44px; }
.afro-card:nth-child(1) { --afro-tilt: -3deg; --afro-z: 1; }
.afro-card:nth-child(2) { --afro-tilt: 0deg; --afro-z: 2; margin-top: 18px; }
.afro-card:nth-child(3) { --afro-tilt: 3deg; --afro-z: 1; }
/* at rest: the nearest upcoming event is in front (is-next, set by the page build: its edge, and on top of its
   neighbours, so the eye goes to the next party). A row without a dated upcoming card keeps the old rest: card 2,
   unless it is a past event. */
.afro-cards:not(:has(> .afro-card.is-next)) > .afro-card:nth-child(2):not(.is-past) { --ring: 1; }
.afro-cards > .afro-card.is-next { --ring: 1; --afro-z: 3; }
/* a card brought to the front: tapped, keyboard focus, or (with a mouse) hovered */
.afro-cards > .afro-card.is-front, .afro-cards > .afro-card:focus-within { --ring: 1; --lift: 1; --shade: rgba(0, 0, 0, .32); transition: z-index 0s; }
@media (hover: hover) {
  .afro-cards > .afro-card:hover { --ring: 1; --lift: 1; --shade: rgba(0, 0, 0, .32); transition: z-index 0s; }
}
/* another card is in front: this one steps back at once (no edge, no lift, darkened). With a mouse the hovered card
   wins over the focused one; on a touch screen hover is ignored (a phone keeps the last tapped element "hovered"). */
@media (hover: none) {
  .afro-cards:has(> .afro-card.is-front, > .afro-card:focus-within) > .afro-card:not(.is-front):not(:focus-within) { --ring: 0; --lift: 0; --dim: 1; --shade: rgba(0, 0, 0, .22); transition: z-index 0s; }
}
@media (hover: hover) {
  .afro-cards:has(> .afro-card.is-front, > .afro-card:focus-within):not(:has(> .afro-card:hover)) > .afro-card:not(.is-front):not(:focus-within) { --ring: 0; --lift: 0; --dim: 1; --shade: rgba(0, 0, 0, .22); transition: z-index 0s; }
  .afro-cards:has(> .afro-card:hover) > .afro-card:not(:hover) { --ring: 0; --lift: 0; --dim: 1; --shade: rgba(0, 0, 0, .22); transition: z-index 0s; }
}
/* the photo box: 8/7 since round 2 (was 4/5: 1.25 x the width; now 0.875 x, 30% less). The photo is cut to fit, and
   --afro-focus (set per photo in the page, as two percentages) says which part of it stays in view; the default keeps
   the upper middle, where a face usually is. */
.afro-card__media { position: relative; aspect-ratio: 8 / 7; overflow: hidden; background: #222; }
.afro-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--afro-focus, 50% 30%); }
.afro-card__body { display: flex; flex-direction: column; gap: 10px; flex: 1; padding: 22px 24px 26px; }
.afro-card__kicker { margin: 0; font-family: "Anton", Sans-serif; font-size: 15px; letter-spacing: 1.4px; text-transform: uppercase; color: #FF9C00; }
.afro-card__title { margin: 0; font-family: "Anton", Sans-serif; font-size: 34px; line-height: 1.05; font-weight: 400; letter-spacing: 1px; text-transform: uppercase; color: #fff; }
.afro-card__text { margin: 0; font-family: "Arial", Sans-serif; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .86); }
.afro-card__btn {
  display: inline-block; align-self: flex-start; margin-top: auto; padding: 12px 22px; border: 0; border-radius: 3px;
  background: #FF9C00; color: #fff; font-family: "Anton", Sans-serif; font-size: 16px; letter-spacing: 1px;
  text-transform: uppercase; text-decoration: none; line-height: 1.2; cursor: pointer;
}
.afro-card__btn:hover, .afro-card__btn:focus-visible { background: #fff; color: #111; }
.afro-card__btn:focus-visible, .afro-card__input:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* card 3: the orange one, no photo */
.afro-card--tuned .afro-card__inner { background: #FF9C00; color: #111; justify-content: center; }
.afro-card--tuned .afro-card__body { padding: 40px 28px; justify-content: center; }
.afro-card--tuned .afro-card__palm { font-size: 46px; line-height: 1; margin: 0 0 6px; }
.afro-card--tuned .afro-card__title { font-size: 44px; color: #fff; }
.afro-card--tuned .afro-card__text { color: #111; }
.afro-card__form { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.afro-card__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.afro-card__row { display: flex; gap: 8px; }
.afro-card__input {
  flex: 1; min-width: 0; padding: 12px 14px; border: 2px solid #fff; border-radius: 3px; background: #fff; color: #111;
  font-family: "Arial", Sans-serif; font-size: 16px;
}
.afro-card--tuned .afro-card__btn { background: #111; margin-top: 0; align-self: auto; }
.afro-card--tuned .afro-card__btn:hover, .afro-card--tuned .afro-card__btn:focus-visible { background: #fff; color: #111; }
.afro-card__btn[disabled] { opacity: .6; cursor: wait; }
.afro-card__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.afro-card__consent { margin: 0; font-family: "Arial", Sans-serif; font-size: 12.5px; line-height: 1.45; color: #111; }
.afro-card__consent a { color: #111; text-decoration: underline; }
.afro-card__msg { min-height: 1.4em; margin: 0; font-family: "Arial", Sans-serif; font-size: 14px; font-weight: 700; color: #111; }
.afro-card__msg a { color: #111; }
/* in the row neighbours overlap by ~44px (more while one is lifted): keep every text clear of the overlap */
@media (min-width: 900px) {
  .afro-card:nth-child(1) .afro-card__body { padding-right: 72px; }
  .afro-card:nth-child(2) .afro-card__body { padding-left: 68px; padding-right: 68px; }
  .afro-card:nth-child(3) .afro-card__body { padding-left: 72px; }
}
@media (max-width: 1024px) {
  .afro-card__title { font-size: 30px; }
  .afro-card--tuned .afro-card__title { font-size: 38px; }
}
/* below 900px: stacked, one under the other, still overlapping a little */
@media (max-width: 899px) {
  .afro-cards-wrap { padding: 48px 16px 64px; }
  .afro-cards { flex-direction: column; align-items: center; }
  .afro-card { flex: none; width: 100%; max-width: 420px; --lift-y: -6px; --lift-s: .02; }
  .afro-card + .afro-card { margin-left: 0; margin-top: -22px; }
  .afro-card:nth-child(1) { --afro-tilt: -1.5deg; }
  .afro-card:nth-child(2) { --afro-tilt: 1.5deg; margin-top: -22px; }
  .afro-card:nth-child(3) { --afro-tilt: -1deg; }
  .afro-card__media { aspect-ratio: 160 / 77; } /* round 2: was 16 / 11, 30% less tall */
  .afro-card__body { padding: 20px 20px 34px; }
  .afro-card--tuned .afro-card__body { padding: 34px 20px 30px; }
}
/* The white variant (21/10/2026): the same cards, white, over the tickets hero photo.
   The block's own class `afro-cards--white` (the "CSS class" of the cards block in the page, so an editor can set it) lands
   on the widget around the row. White cards with dark text; the orange stays for the small line, the buttons, the field's
   edge and the front card's ring (orange inside, white outside, so it reads on the dark photo); no white band behind the
   row, so the hero's photo stays behind the cards. Same markup, same script, same hover and tap behaviour. */
.afro-cards--white .afro-cards-wrap { background: transparent; padding: 0; }
.afro-cards--white .afro-card { --ring-in: #FF9C00; --ring-out: #fff; }
.afro-cards--white .afro-card__inner { background: #fff; color: #111; }
.afro-cards--white .afro-card__title { color: #111; }
.afro-cards--white .afro-card__text { color: rgba(17, 17, 17, .82); }
.afro-cards--white .afro-card__btn:hover, .afro-cards--white .afro-card__btn:focus-visible { background: #111; color: #fff; }
.afro-cards--white .afro-card__btn:focus-visible, .afro-cards--white .afro-card__input:focus-visible { outline-color: #111; }
/* the orange card turns white too: orange title, orange button, an orange edge on the e-mail field */
.afro-cards--white .afro-card--tuned .afro-card__inner { background: #fff; color: #111; }
.afro-cards--white .afro-card--tuned .afro-card__title { color: #FF9C00; }
.afro-cards--white .afro-card--tuned .afro-card__btn { background: #FF9C00; color: #fff; }
.afro-cards--white .afro-card--tuned .afro-card__btn:hover, .afro-cards--white .afro-card--tuned .afro-card__btn:focus-visible { background: #111; color: #fff; }
.afro-cards--white .afro-card__input { border-color: #FF9C00; }
/* the hero's content box is narrower than the home row (988 px), so the cards are a little narrower there: the e-mail
   field keeps a readable width and the button drops under it when the two do not fit side by side (measured 21/10:
   field 97 px next to the button at 1440; on a phone the two still fit in one row). */
.afro-cards--white .afro-card__row { flex-wrap: wrap; }
.afro-cards--white .afro-card__input { flex: 1 1 120px; }
/* on a phone the site's header (about 180 px tall, laid over the top of the hero) would cover the first card: the
   row starts below it, with the crowd photo showing above the cards. */
@media (max-width: 899px) {
  .afro-cards--white .afro-cards-wrap { padding: 200px 0 24px; }
}
/* reduced motion: nothing moves; the front card still gets its edge, comes to the top and the others darken */
@media (prefers-reduced-motion: reduce) {
  .afro-card { --lift-y: 0px; --lift-s: 0; --untilt: 0; }
  .afro-card, .afro-cards > .afro-card { transition: none; }
  .afro-card__inner, .afro-card__inner::after { transition: none; }
}

/* Centre shade (21/10/2026, Arezki: "a shadow in the middle blurring the background abit more in the center so the cards
stay visible"): behind the white cards the hero photo gets darker and softly blurred in the middle, fading out to the
edges, so the cards stand out from the crowd photo. Behind the cards only (z-index -1 inside an isolated block), no
clicks pass through. It reaches past the cards into the hero (the page clips sideways overflow, so no sideways scroll). */
.afro-cards--white { position: relative; isolation: isolate; }
.afro-cards--white::before { content: ""; position: absolute; inset: -160px -30vw; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .5) 45%, rgba(0, 0, 0, 0) 100%);
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 40%, transparent 100%); }
@media (max-width: 899px) { .afro-cards--white::before { inset: -48px -16px; } }

/* Upcoming or past (21/10/2026): the label sits on the photo, top left; in the row it keeps clear of the neighbour that
   overlaps the photo's edge (desktop: from the left; phone: the card above covers the top). A past card is quieter: its
   photo is softer until the card comes to the front. */
.afro-card__media .afro-status { position: absolute; top: 12px; left: 12px; z-index: 1; margin: 0; box-shadow: 0 2px 10px rgba(0, 0, 0, .28); }
.afro-card__body > .afro-status { align-self: flex-start; margin: 0; }
@media (min-width: 900px) { .afro-card:nth-child(n+2) .afro-card__media .afro-status { left: 60px; } }
@media (max-width: 899px) { .afro-card:nth-child(n+2) .afro-card__media .afro-status { top: 32px; } }
.afro-card.is-past .afro-card__media img { filter: saturate(.3) brightness(.82); transition: filter .35s ease; }
.afro-cards > .afro-card.is-past.is-front .afro-card__media img, .afro-cards > .afro-card.is-past:focus-within .afro-card__media img { filter: none; }
@media (hover: hover) { .afro-cards > .afro-card.is-past:hover .afro-card__media img { filter: none; } }
/* the particles behind the marked card (the cards script draws them on this canvas): behind the card, never over a text
   or a button, never in the way of a click. They spill out a little around the card, but not towards the next card in
   the row (desktop: the right side; phone: the bottom), so they never cover a neighbour. */
.afro-card__spark { position: absolute; z-index: -1; pointer-events: none; display: block; will-change: transform; /* its own layer: a frame repaints only the dots, not the card */
  top: -40px; left: -48px; width: calc(100% + 8px); height: calc(100% + 80px);
  --spark-a: #FF9C00; --spark-b: #D97A00; }
.afro-cards--white .afro-card__spark { --spark-b: #fff; }
@media (max-width: 899px) { .afro-card__spark { top: -34px; left: -8px; width: calc(100% + 16px); height: calc(100% + 4px); } }
@media (prefers-reduced-motion: reduce) { .afro-card__spark { display: none; } .afro-card.is-past .afro-card__media img { transition: none; } }

/* The photo beside the ticket shop on /tickets/ (21/10/2026, Arezki: "the picture needs the little yellow outline like the
   cards above it"): the front card's edge, 3 px white inside and 4 px orange outside, on the same 18 px corners. The photo
   sits on the white page, so it takes the home card's order (the white cards over the dark hero photo turn it round).
   Only the edge: the photo keeps its size, place and cut, no lift, no shadow, no hover. Same selector as the page's own
   rule in post-67.css (which set 20 px corners), so this later file wins. */
.elementor-67 .elementor-element.elementor-element-18acded img { border-radius: 18px; box-shadow: 0 0 0 3px #fff, 0 0 0 7px #FF9C00; }