/* ==========================================================
   "Join the Battle" — living glow on the flying cards (9-cards.webp)
   Each spot is a copy of the image masked to one card; it brightens
   the card's own coloured swirl in its own rhythm.
   ========================================================== */

.cards-fx-wrap {
  position: relative;
  width: 100%;
}
.cards-fx-wrap .cards-img { display: block; width: 100%; }

.cards-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cards-fx__spot,
.cards-fx__glint {
  position: absolute;
  inset: 0;
  background: url("https://cdn.prod.website-files.com/66694b84291e36ecfdf1f82e/666b9825ef0aacd196a95569_9-cards.webp") 0 0 / 100% 100% no-repeat;
  -webkit-mask-image: radial-gradient(var(--rx) var(--ry) at var(--x) var(--y), #000 35%, transparent 100%);
  mask-image: radial-gradient(var(--rx) var(--ry) at var(--x) var(--y), #000 35%, transparent 100%);
  mix-blend-mode: screen;
  will-change: opacity;
}

/* the swirl lights up: bright, saturated, slightly bloomed */
.cards-fx__spot {
  filter: brightness(1.35) saturate(1.5) contrast(1.4) blur(4px);
  opacity: 0;
  animation: cards-pulse var(--dur, 4s) ease-in-out var(--delay, 0s) infinite;
}

/* a sharper glint that sweeps across each card now and then */
.cards-fx__glint {
  filter: brightness(1.6) saturate(1.2);
  -webkit-mask-image:
    radial-gradient(var(--rx) var(--ry) at var(--x) var(--y), #000 30%, transparent 90%),
    linear-gradient(110deg, transparent 40%, #000 50%, transparent 60%);
  -webkit-mask-size: 100% 100%, 300% 100%;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(var(--rx) var(--ry) at var(--x) var(--y), #000 30%, transparent 90%),
    linear-gradient(110deg, transparent 40%, #000 50%, transparent 60%);
  mask-size: 100% 100%, 300% 100%;
  mask-repeat: no-repeat;
  mask-composite: intersect;
  animation: cards-glint 7s ease-in-out var(--gdelay, 0s) infinite;
}

.cards-fx__sparks {
  position: absolute;
  inset: -6% 0 0;
  width: 100%;
  height: 106%;
}

/* card positions (percent of the image) */
.cards-fx .c1 { --x: 8.8%;  --y: 61%; --rx: 8%;   --ry: 24%; --dur: 4.6s; --delay: 0s;    --gdelay: 0s; }
.cards-fx .c2 { --x: 38.4%; --y: 24%; --rx: 5%;   --ry: 16%; --dur: 3.8s; --delay: -1.2s; --gdelay: -2.5s; }
.cards-fx .c3 { --x: 59.4%; --y: 21%; --rx: 13%;  --ry: 25%; --dur: 5.2s; --delay: -2.4s; --gdelay: -4.8s; }
.cards-fx .c4 { --x: 88%;   --y: 26%; --rx: 7.5%; --ry: 25%; --dur: 4.2s; --delay: -0.7s; --gdelay: -1.2s; }
.cards-fx .c5 { --x: 97.8%; --y: 56%; --rx: 4.5%; --ry: 15%; --dur: 3.6s; --delay: -3.1s; --gdelay: -3.6s; }
.cards-fx .c6 { --x: 33.4%; --y: 85%; --rx: 4.5%; --ry: 13%; --dur: 4s;   --delay: -1.9s; --gdelay: -6s; }

@keyframes cards-pulse {
  0%, 100% { opacity: 0; }
  50% { opacity: .7; }
}
@keyframes cards-glint {
  0%, 55% { -webkit-mask-position: 0 0, 150% 0; mask-position: 0 0, 150% 0; opacity: 0; }
  60% { opacity: .6; }
  85% { -webkit-mask-position: 0 0, -50% 0; mask-position: 0 0, -50% 0; opacity: .6; }
  90%, 100% { -webkit-mask-position: 0 0, -50% 0; mask-position: 0 0, -50% 0; opacity: 0; }
}

/* bigger Play now in this block */
.cof-btn--xl { --h: 78px; --pad: 76px; --fs: 34px; }
@media screen and (max-width: 767px) {
  .cof-btn--xl { --h: 62px; --pad: 50px; --fs: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .cards-fx__spot, .cards-fx__glint { animation: none; }
  .cards-fx__sparks { display: none; }
}

/* ---------- Join the Battle: flying cards sit BEHIND the title/text, Play now right under the text ---------- */
.section__play .play__content { position: relative; padding-top: 12vw; }
.section__play .cards-item-img {
  position: absolute;
  left: 0; right: 0;
  top: -4vw;               /* card band (top ~60% of the image) frames the heading */
  padding-top: 0;
  z-index: 0;
  pointer-events: none;
}
.section__play .block-title { position: relative; z-index: 1; }
/* soft dark halo so the text stays readable over the glowing cards */
.section__play .block-title::before {
  content: "";
  position: absolute;
  inset: -8% -12%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(6, 9, 20, .72), rgba(6, 9, 20, .35) 60%, transparent 100%);
  pointer-events: none;
}
.section__play .p-heading { text-shadow: 0 2px 12px rgba(0, 0, 0, .9); }
.play__button-bottom.cof-btn { position: relative; z-index: 2; margin-top: 48px; }
.section__play { padding-bottom: 12vw; }

@media screen and (max-width: 767px) {
  .section__play .play__content { padding-top: 0; }
  .section__play .cards-item-img { position: static; padding-top: 24px; }
  .play__button-bottom.cof-btn { margin-top: 24px; }
  .section__play { padding-bottom: 80px; }
}

/* the cards image has its own dark backdrop: fade its edges so there is no visible seam */
.cards-fx-wrap {
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, #000 14%, #000 72%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(180deg, transparent 0%, #000 14%, #000 72%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
  mask-composite: intersect;
}