/* ----------------------------------------------------------- League ping */

/*
 * The site ping (js/site/league-ping.js) is a cosmetic flourish fired by a
 * primary-button click on ordinary page surface, and — since T14 — a right-
 * button drag opens the ping WHEEL from the same module: four slices around a
 * dark centre, hextech gold on the site's dark blue. This file paints both.
 * The landed marker is fixed at the point where the wheel OPENED (so page
 * scroll can never displace it mid-animation), never catches the pointer, and
 * is removed by the module once its longest animation ends (with a timer
 * fallback, so a dropped animationend event cannot leak elements). The wheel
 * element likewise never catches the pointer: aiming is geometry in the
 * module, not hover, and a translucent overlay that swallowed clicks would
 * break the gesture it exists to serve.
 *
 * Art is the in-game minimap ping set, self-hosted under
 * assets/league/pings/ (sources and bytes in assets/league/PROVENANCE.md).
 * The tintable/gray variants are grayscale on purpose: one CSS filter tints
 * the whole composition to the site's hextech gold, so the ping can never
 * disagree with the golden hand cursor. The four wheel icons keep their
 * in-game colours instead — they are how the four pings tell each other
 * apart, and two of them (enemy-missing and bait) are both yellow in game,
 * so one tint would make them liars.
 *
 * Children carry translate(-50%, -50%) inside their transforms because the
 * keyframes replace the transform property wholesale; the parents are 0x0
 * anchors at their points.
 */

.league-ping {
  position: fixed;
  z-index: 300; /* above page content; pings never fire over header or dialogs */
  width: 0;
  height: 0;
  pointer-events: none;
}

.league-ping__glow,
.league-ping__ring,
.league-ping__marker {
  position: absolute;
  left: 0;
  top: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  /* White art -> League gold: sepia warms it, saturate deepens it. */
  filter: sepia(1) saturate(4.2) hue-rotate(-8deg) brightness(1.05);
}

.league-ping__glow {
  width: 44px;
  height: 44px;
  background-image: url("/assets/league/pings/pingmarker_tintable.png");
}

.league-ping__ring {
  width: 72px;
  height: 72px;
}

.league-ping__ring--inner {
  background-image: url("/assets/league/pings/ring_tintable.png");
}

.league-ping__ring--outer {
  background-image: url("/assets/league/pings/ring2_tintable.png");
}

.league-ping__marker {
  width: 36px;
  height: 36px;
  background-image: url("/assets/league/pings/ping_gray.png");
}

/* The flourish: marker pops in, glow bursts, two rings run outward. */

@keyframes league-ping-marker {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4);
  }

  28% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.14);
  }

  42% {
    transform: translate(-50%, -50%) scale(1);
  }

  70% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes league-ping-glow {
  0% {
    opacity: 0.85;
    transform: translate(-50%, -50%) scale(0.45);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.25);
  }
}

@keyframes league-ping-ring {
  0% {
    opacity: 0.95;
    transform: translate(-50%, -50%) scale(0.3);
  }

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.6);
  }
}

.league-ping__marker {
  animation: league-ping-marker 820ms ease-out both;
}

.league-ping__glow {
  animation: league-ping-glow 520ms ease-out both;
}

.league-ping__ring--inner {
  animation: league-ping-ring 640ms cubic-bezier(0.17, 0.89, 0.32, 1) both;
}

.league-ping__ring--outer {
  animation: league-ping-ring 760ms cubic-bezier(0.17, 0.89, 0.32, 1) 90ms both;
}

/*
 * Reduced motion REPLACES the flourish rather than shortening it: no expansion,
 * no pop, no glow burst — a static gold reticle (marker + two fixed rings)
 * that fades by opacity alone. Opacity-only fades are the one effect reduced
 * motion keeps (nothing moves, nothing scales), and they let the mark still
 * confirm the click before it goes.
 */
@media (prefers-reduced-motion: reduce) {
  .league-ping__glow {
    display: none;
  }

  .league-ping__marker,
  .league-ping__ring--inner,
  .league-ping__ring--outer {
    animation: none;
  }

  .league-ping__marker {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }

  .league-ping__ring--inner {
    opacity: 0.55;
    transform: translate(-50%, -50%) scale(1.15);
  }

  .league-ping__ring--outer {
    opacity: 0.4;
    transform: translate(-50%, -50%) scale(1.5);
  }

  .league-ping,
  .league-ping--calm {
    animation: league-ping-calm-fade 900ms ease-out both;
  }
}

@keyframes league-ping-calm-fade {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

/*
 * The landed marker carries its ping BY ICON: the wheel slice's own art on
 * the marker, untinted (the icons already speak the game's colour language —
 * and enemy-missing and bait would be indistinguishable under one tint).
 * The rings and glow keep the gold tint above, so every landing still reads
 * as the site's.
 */
.league-ping--danger .league-ping__marker {
  background-image: url("/assets/league/pings/retreat.png");
  filter: none;
}

.league-ping--missing .league-ping__marker {
  background-image: url("/assets/league/pings/mia_new.png");
  filter: none;
}

.league-ping--bait .league-ping__marker {
  background-image: url("/assets/league/pings/bait.png");
  filter: none;
}

.league-ping--assist .league-ping__marker {
  background-image: url("/assets/league/pings/assist.png");
  filter: none;
}

/* ------------------------------------------------- the ping wheel (T14) */

/*
 * Painted by js/site/league-ping.js, which owns every decision this sheet
 * only draws: hold right button to open at the cursor, move to aim, release
 * over a slice to place that ping at the wheel's origin, release over the
 * centre (or within the dead zone) to cancel, Esc cancels, `P` opens the
 * keyboard path. The root is a 0x0 anchor at the wheel's origin; scaling it
 * scales the whole wheel around that point.
 *
 * Slice geometry: the ring spans radii 40px (the hole; identical to the
 * module's PING_WHEEL_DEAD_ZONE_PX — drawing and geometry must agree) to
 * 120px, in four 90° quadrants starting at due north: 0 danger, 1 enemy
 * missing, 2 bait, 3 assist, clockwise. Each slice paints its own quadrant
 * as a conic gradient with 3° gaps at the compass axes; the radial mask cuts
 * the hole and the outer edge.
 *
 * Slice seating follows the classic in-game wheel for the three pings it
 * shares (danger north-east, enemy-missing south-east, assist north-west);
 * bait takes the free south-west seat.
 */

.league-ping-wheel {
  position: fixed;
  z-index: 301; /* above the landed ping's 300; both live under dialogs */
  width: 0;
  height: 0;
  pointer-events: none;
  animation: league-ping-wheel-in 140ms ease-out both;
}

.league-ping-wheel[data-closing] {
  animation: league-ping-wheel-out 130ms ease-in both;
}

@keyframes league-ping-wheel-in {
  from {
    opacity: 0;
    transform: scale(0.62);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes league-ping-wheel-out {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(0.62);
  }
}

.league-ping-wheel__slice {
  position: absolute;
  left: 0;
  top: 0;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  -webkit-mask: radial-gradient(closest-side, transparent 0 40px, #000 40px 119px, transparent 119px);
  mask: radial-gradient(closest-side, transparent 0 40px, #000 40px 119px, transparent 119px);
}

/* Quadrants clockwise from north; the 1.5° inset at each edge is the gap. */
.league-ping-wheel__slice--danger {
  background: conic-gradient(from 1.5deg, rgba(31, 39, 58, 0.95) 0deg 87deg, transparent 87deg 360deg);
}

.league-ping-wheel__slice--missing {
  background: conic-gradient(from 91.5deg, rgba(31, 39, 58, 0.95) 0deg 87deg, transparent 87deg 360deg);
}

.league-ping-wheel__slice--bait {
  background: conic-gradient(from 181.5deg, rgba(31, 39, 58, 0.95) 0deg 87deg, transparent 87deg 360deg);
}

.league-ping-wheel__slice--assist {
  background: conic-gradient(from 271.5deg, rgba(31, 39, 58, 0.95) 0deg 87deg, transparent 87deg 360deg);
}

/* The aimed slice lights up in hextech gold and throws a soft glow. */
.league-ping-wheel[data-aim="0"] .league-ping-wheel__slice--danger {
  background: conic-gradient(from 1.5deg, rgba(240, 194, 80, 0.34) 0deg 87deg, transparent 87deg 360deg);
  filter: drop-shadow(0 0 8px rgba(240, 194, 80, 0.45));
}

.league-ping-wheel[data-aim="1"] .league-ping-wheel__slice--missing {
  background: conic-gradient(from 91.5deg, rgba(240, 194, 80, 0.34) 0deg 87deg, transparent 87deg 360deg);
  filter: drop-shadow(0 0 8px rgba(240, 194, 80, 0.45));
}

.league-ping-wheel[data-aim="2"] .league-ping-wheel__slice--bait {
  background: conic-gradient(from 181.5deg, rgba(240, 194, 80, 0.34) 0deg 87deg, transparent 87deg 360deg);
  filter: drop-shadow(0 0 8px rgba(240, 194, 80, 0.45));
}

.league-ping-wheel[data-aim="3"] .league-ping-wheel__slice--assist {
  background: conic-gradient(from 271.5deg, rgba(240, 194, 80, 0.34) 0deg 87deg, transparent 87deg 360deg);
  filter: drop-shadow(0 0 8px rgba(240, 194, 80, 0.45));
}

/* The hairline rim that carries the ring's outer edge. */
.league-ping-wheel__rim {
  position: absolute;
  left: 0;
  top: 0;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(240, 194, 80, 0.4);
}

/*
 * The four icons at the heart of each slice: radius 80px (the ring's
 * midpoint), bearings 45°/135°/225°/315° → offsets ±57px. They keep their
 * in-game colours (see the header note about tint).
 */
.league-ping-wheel__icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 44px;
  height: 44px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  transform: translate(calc(-50% + var(--ix, 0px)), calc(-50% + var(--iy, 0px))) scale(var(--is, 1));
}

.league-ping-wheel__icon--danger {
  background-image: url("/assets/league/pings/retreat.png");
  --ix: 57px;
  --iy: -57px;
}

.league-ping-wheel__icon--missing {
  background-image: url("/assets/league/pings/mia_new.png");
  --ix: 57px;
  --iy: 57px;
}

.league-ping-wheel__icon--bait {
  background-image: url("/assets/league/pings/bait.png");
  --ix: -57px;
  --iy: 57px;
}

.league-ping-wheel__icon--assist {
  background-image: url("/assets/league/pings/assist.png");
  --ix: -57px;
  --iy: -57px;
}

.league-ping-wheel[data-aim="0"] .league-ping-wheel__icon--danger,
.league-ping-wheel[data-aim="1"] .league-ping-wheel__icon--missing,
.league-ping-wheel[data-aim="2"] .league-ping-wheel__icon--bait,
.league-ping-wheel[data-aim="3"] .league-ping-wheel__icon--assist {
  --is: 1.18;
}

/* The dark centre: labelled with the aimed ping, or the cancel affordance. */
.league-ping-wheel__core {
  position: absolute;
  left: 0;
  top: 0;
  width: 88px;
  height: 88px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(9, 12, 18, 0.96);
  border: 1px solid rgba(240, 194, 80, 0.55);
  box-shadow:
    0 0 14px rgba(240, 194, 80, 0.18),
    inset 0 0 10px rgba(240, 194, 80, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
}

.league-ping-wheel__label {
  padding: 0 10px;
  color: #f0c250;
  font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
}

/*
 * The keyboard path's voice (js/site/league-ping.js announces open, aim,
 * placed, cancelled into it). Screen-reader-only: the wheel itself is
 * aria-hidden decoration, and this is the one part that must stay perceivable.
 */
.league-ping-live {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/*
 * Reduced motion REPLACES the wheel's pop-in and fade-out with plain
 * appearance and disappearance: no scale, no travel — opacity only (the
 * module also removes the element at once on close, so the exit is instant
 * rather than a 130ms fade).
 */
@media (prefers-reduced-motion: reduce) {
  .league-ping-wheel,
  .league-ping-wheel[data-closing] {
    animation: none;
    opacity: 1;
  }
}