/* =========================================================
   Ammn landing — Payment options (Figma 190:55663, 1440 × 888)
   The constellation lives on an 874×512 stage in Figma pixels (the rings' own box,
   centred on the page) and is scaled as a single unit, so badges keep their exact
   relationship to the rings at every width. Physical left/top on purpose: this is
   artwork, not reading-order content, and it is identical in RTL and LTR.
   The badges orbit the logo, one kind per ring — see HomePayment.razor.
   ========================================================= */

.al-payment {
  /* Brand marks (Apple Pay, mada, momi, the VISA wordmark) are dark-on-light art, so
     the chips stay light in dark mode too — only dimmed a little to avoid glare. */
  --al-payment-chip: #ffffff;
  --al-payment-ring: #ffffff;
  --al-payment-fade: color-mix(in srgb, var(--al-primary-light) 45%, var(--al-bg));
  --al-payment-s: 1;
  /* The rings' centre on the stage: pay-circles.svg is 874px square, centre 437, drawn 28px down. */
  --al-payment-cx: 437px;
  --al-payment-cy: 465px;
  /* How far the badge layer reaches past the stage: the outer ring's top badge pokes above it and
     its 3/9 o'clock badges past both sides (.al-page clips the page edge). */
  --al-payment-bleed-x: 60px;
  --al-payment-bleed-y: 40px;

  position: relative;
  padding-block: var(--al-sp-128);
  background:
    linear-gradient(to bottom, transparent calc(100% - 283px), var(--al-payment-fade)),
    linear-gradient(180deg, color-mix(in srgb, var(--al-secondary-light) 24%, transparent) 50%, transparent 239%),
    var(--al-bg);
}
[data-theme="dark"] .al-payment {
  --al-payment-chip: #e9edf5;
  --al-payment-ring: rgba(255, 255, 255, 0.08);
}

.al-payment__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--al-sp-2xl);
}

/* Reserves the scaled stage's footprint; the stage itself is absolutely placed. */
.al-payment__viewport {
  position: relative;
  width: 100%;
  max-width: 874px;
  aspect-ratio: 874 / 512;
  container-type: inline-size;
}

.al-payment__stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 874px;
  height: 512px;
  transform: scale(var(--al-payment-s));
  transform-origin: 0 0;
}

/* Rings + logo. Figma lays a 283px fade over the section bottom that sits above the rings
   but below the badges; a transform makes the stage one stacking layer, so the fade is
   reproduced as a mask on the art instead (0.55 of the fade reaches the stage bottom). */
.al-payment__art {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 357px, rgba(0, 0, 0, 0.45) 512px);
  mask-image: linear-gradient(to bottom, #000 357px, rgba(0, 0, 0, 0.45) 512px);
}
.al-payment__circles {
  position: absolute;
  left: 0;
  top: 28px;
  width: 874px;
  height: 874px;
  max-width: none;
}
[data-theme="dark"] .al-payment__circles { opacity: 0.25; }
.al-payment__logo {
  position: absolute;
  bottom: 0;
  left: calc(50% + 0.5px);
  transform: translateX(-50%);
  width: 91px;
  height: 80px;
  object-fit: cover;
}

/* Grown by the bleed so the mask does not cut the badges that leave the stage. Badges fade out as
   they sink and are gone by the rings' centre height: a ring's repeats sit half a turn apart, so
   fading out any lower showed the same brand at both ends at once. */
.al-payment__badges {
  --al-payment-fade-end: calc(var(--al-payment-cy) + var(--al-payment-bleed-y));
  position: absolute;
  inset: calc(-1 * var(--al-payment-bleed-y)) calc(-1 * var(--al-payment-bleed-x)) 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--al-payment-fade-end) - 90px), transparent var(--al-payment-fade-end));
  mask-image: linear-gradient(to bottom, #000 calc(var(--al-payment-fade-end) - 90px), transparent var(--al-payment-fade-end));
}

/* ---------------- Orbit ----------------
   Every badge is centred on the rings' centre, then placed by one transform: rotate to its angle,
   move out by the radius, rotate back so the logo stays upright. The net is a pure translation,
   so the drop shadow stays underneath. Animating both angles by a full turn moves it round the
   ring, in its ring's turn time (--al-t, seconds). The un-animated transform IS the starting
   pose, so with the animation off (reduced motion) every badge still sits in its place. */
.al-payment__badge {
  position: absolute;
  left: calc(var(--al-payment-cx) + var(--al-payment-bleed-x));
  top: calc(var(--al-payment-cy) + var(--al-payment-bleed-y));
  translate: -50% -50%;
  transform: rotate(calc(var(--al-a) * 1deg)) translateY(calc(var(--al-r) * -1px)) rotate(calc(var(--al-a) * -1deg));
  animation: al-payment-orbit calc(var(--al-t) * 1s) linear infinite;
  padding: 4px;
  border-radius: 1000px;
  background: var(--al-payment-ring);
  filter: drop-shadow(0 10px 10px rgba(148, 163, 184, 0.2));
}
.al-payment__chip {
  width: 72px;
  height: 72px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 100px;
  border: 0.2px solid rgba(0, 0, 0, 0.1);
  background:
    linear-gradient(90deg, rgba(234, 239, 252, 0.16), rgba(234, 239, 252, 0.16)),
    var(--al-payment-chip);
}
.al-payment__chip img { flex-shrink: 0; max-width: none; }

@keyframes al-payment-orbit {
  to {
    transform: rotate(calc(var(--al-a) * 1deg + 1turn)) translateY(calc(var(--al-r) * -1px)) rotate(calc(var(--al-a) * -1deg - 1turn));
  }
}
/* Hover does NOT stop the orbit: the badges fill most of the section, so moving the pointer across
   the page — or just resting it there while reading — froze the whole thing, which reads as broken
   rather than considerate. Keyboard focus still pauses it, so the WCAG 2.2.2 mechanism for stopping
   motion is still there, and reduced motion still stops it outright. */
.al-payment__viewport:focus-within .al-payment__badge {
  animation-play-state: paused;
}

/* Insurer marks come in every shape, from Wataniya (4:1) to Arabian Shield (3:4): fit inside the chip. */
.al-payment__chip .al-payment__isp { width: auto; height: auto; max-width: 52px; max-height: 40px; }

/* mada: the export crops a hair off each side of the mark */
.al-payment__mada { position: relative; display: block; width: 42px; height: 14px; overflow: hidden; }
.al-payment__mada img { position: absolute; top: 0; bottom: 0; left: 0.82%; right: 0.27%; width: auto; height: 100%; }

/* Mastercard + Visa combined mark, each half clipped by its Figma mask */
.al-payment__mcvisa { position: relative; display: block; width: 55px; height: 14px; overflow: hidden; flex-shrink: 0; }
.al-payment__mcvisa-a,
.al-payment__mcvisa-b {
  position: absolute;
  display: block;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.al-payment__mcvisa .al-payment__mcvisa-a img,
.al-payment__mcvisa .al-payment__mcvisa-b img { width: 100%; height: 100%; }
.al-payment__mcvisa-a {
  inset: 0 58.69% 0.53% 0;
  -webkit-mask-image: url('../../assets/home/pay-mcvisa-mask1.svg');
  mask-image: url('../../assets/home/pay-mcvisa-mask1.svg');
  -webkit-mask-size: 22.741px 14px;
  mask-size: 22.741px 14px;
}
.al-payment__mcvisa-b {
  inset: 17.24% 0.25% 17.14% 48.43%;
  -webkit-mask-image: url('../../assets/home/pay-mcvisa-mask2.svg');
  mask-image: url('../../assets/home/pay-mcvisa-mask2.svg');
  -webkit-mask-size: 28.23px 9.224px;
  mask-size: 28.23px 9.224px;
}

/* ---------------- Scaling ----------------
   Stepped fallback first; browsers with trig functions get the exact ratio
   (tan(atan2(a, b)) = a / b as a unitless number, which calc() cannot divide out). */
@media (max-width: 1023.98px) { .al-payment { --al-payment-s: 0.78; padding-block: 96px; } }
@supports (width: calc(1px * tan(atan2(1px, 1px)))) {
  .al-payment__stage { --al-payment-s: min(1, tan(atan2(100cqw, 874px))); }
}

/* ---------------- Mobile: badges become a grid, rings sit behind ---------------- */
@media (max-width: 767.98px) {
  .al-payment { padding-block: var(--al-sp-4xl); }
  .al-payment__container { gap: var(--al-sp-xl); }

  .al-payment__viewport {
    aspect-ratio: auto;
    container-type: normal;
    overflow: hidden;
    padding-block-end: 120px;
  }
  .al-payment__stage { position: static; width: 100%; height: auto; transform: none; }

  .al-payment__art {
    inset: auto;
    left: 50%;
    bottom: 0;
    width: 874px;
    height: 512px;
    transform: translateX(-50%) scale(0.6);
    transform-origin: 50% 100%;
  }

  .al-payment__badges {
    position: relative;
    inset: auto;
    -webkit-mask-image: none;
    mask-image: none;
    display: grid;
    grid-template-columns: repeat(3, 80px);
    justify-content: center;
    gap: var(--al-sp-md);
  }
  .al-payment__badge { position: relative; left: auto; top: auto; translate: none; transform: none; animation: none; }
  /* The grid holds the payment brands once; the partners strip right above shows the insurers. */
  .al-payment__badge--insurer,
  .al-payment__badge--copy { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .al-payment__badge { animation: none; }
}