/* ============================================================
   MODERN THEME — shared design tokens
   Loaded by champSelect and arena. Every themed rule elsewhere is
   scoped under html[data-wr="on"]; these tokens are inert on their
   own, so loading this file changes nothing until the toggle is on.
   ============================================================ */
:root {
  /* Deep blacks / navies */
  --wr-black:   #010a13;
  --wr-navy-1:  #0a1428;
  --wr-navy-2:  #0a323c;
  --wr-navy-3:  #091428;
  --wr-panel:   rgba(9, 20, 40, 0.86);
  --wr-panel-2: rgba(1, 10, 19, 0.92);

  /* Aqua energy ramp (the "magic" color) */
  --wr-blue-4:  #005a82;
  --wr-blue-3:  #0397ab;
  --wr-aqua:    #0ac8b9;
  --wr-ice:     #cdfafa;

  /* Gold ramp (frames, headers, currency) */
  --wr-gold-1:  #f0e6d2;
  --wr-gold-2:  #c8aa6e;
  --wr-gold-3:  #785a28;
  --wr-gold-4:  #463714;
  --wr-gold-5:  #32281e;

  /* Greys */
  --wr-grey-1:  #a09b8c;
  --wr-grey-2:  #5b5a56;
  --wr-grey-3:  #3c3c41;
  --wr-grey-4:  #1e2328;

  /* Status */
  --wr-hp:      #16b95d;
  --wr-damage:  #e8433f;
  --wr-mana:    #0397ab;

  /* Glows (pre-mixed shadows so pages stay consistent) */
  --wr-glow-aqua-soft:  0 0 14px rgba(10, 200, 185, 0.35);
  --wr-glow-aqua:       0 0 22px rgba(10, 200, 185, 0.55), 0 0 60px rgba(3, 151, 171, 0.25);
  --wr-glow-gold-soft:  0 0 14px rgba(200, 170, 110, 0.30);
  --wr-glow-gold:       0 0 22px rgba(200, 170, 110, 0.45);

  /* Type — reuse the site's existing faces */
  --wr-font-display: 'Cinzel', 'Cinzel Decorative', serif;
  --wr-font-ui: 'Alegreya Sans', sans-serif;

  /* Motion — deliberately slow; Wild Rift is stately, not twitchy */
  --wr-ease:      cubic-bezier(0.25, 0.1, 0.25, 1);
  --wr-ease-out:  cubic-bezier(0.16, 0.8, 0.3, 1);
  --wr-ease-slam: cubic-bezier(0.18, 1.1, 0.32, 1);
  --wr-fast:  220ms;
  --wr-med:   420ms;
  --wr-slow:  700ms;
  --wr-drift: 6s;   /* ambient breathing loops */
}

/* ---- the toggle button itself (always visible on wired pages) ---- */
#wr-toggle {
  position: fixed; right: 12px; bottom: 12px; z-index: 2147483000;
  display: flex; align-items: center; gap: 7px;
  padding: 7px 13px; cursor: pointer; user-select: none;
  font-family: var(--wr-font-ui); font-size: 12px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--wr-grey-1);
  background: linear-gradient(180deg, rgba(30, 35, 40, .92), rgba(1, 10, 19, .95));
  border: 1px solid var(--wr-gold-3);
  clip-path: polygon(9px 0, calc(100% - 9px) 0, 100% 50%, calc(100% - 9px) 100%, 9px 100%, 0 50%);
  transition: color var(--wr-fast) var(--wr-ease), border-color var(--wr-fast) var(--wr-ease),
              box-shadow var(--wr-med) var(--wr-ease);
}
#wr-toggle:hover { color: var(--wr-gold-1); border-color: var(--wr-gold-2); }
#wr-toggle .wr-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--wr-grey-2); transition: background var(--wr-fast), box-shadow var(--wr-med);
}
html[data-wr="on"] #wr-toggle { color: var(--wr-ice); border-color: var(--wr-blue-3); box-shadow: var(--wr-glow-aqua-soft); }
html[data-wr="on"] #wr-toggle .wr-dot { background: var(--wr-aqua); box-shadow: 0 0 8px var(--wr-aqua); }

/* ---- shared FX canvas + gentle reaction classes ---- */
#wr-fx-canvas {
  position: fixed; inset: 0; z-index: 2147482000; pointer-events: none;
  display: none;
}
html[data-wr="on"] #wr-fx-canvas { display: block; }
/* ...and while a spring is running with the theme OFF. The sequence plays in
   both looks (see wr-arena.js), and its ring pulses are drawn on this canvas —
   left hidden they simply never appeared in Classic. Scoped to the class
   wr-arena.js puts up for the length of the sequence, so Classic gains no
   permanent canvas. */
html.wr-spring-fx #wr-fx-canvas { display: block; }

html[data-wr="on"] .wr-recoil-l { animation: wr-recoil-l 340ms var(--wr-ease-out); }
html[data-wr="on"] .wr-recoil-r { animation: wr-recoil-r 340ms var(--wr-ease-out); }
@keyframes wr-recoil-l {
  30% { transform: translateX(-6px) rotate(-0.5deg); }
}
@keyframes wr-recoil-r {
  30% { transform: translateX(6px) rotate(0.5deg); }
}
/* Lunge — the attacker's half of a hit.
   recoil is what happens to whoever got hit; this is the actor leaning
   into the blow, toward the side its target is on. Same element and the
   same transform-free host as recoil, so they cannot collide. */
html[data-wr="on"] .wr-lunge-l { animation: wr-lunge-l 420ms var(--wr-ease-slam); }
html[data-wr="on"] .wr-lunge-r { animation: wr-lunge-r 420ms var(--wr-ease-slam); }
@keyframes wr-lunge-l {
  0%   { transform: translateX(0); }
  22%  { transform: translateX(5px)  rotate(0.6deg); }   /* wind up back */
  48%  { transform: translateX(-13px) rotate(-1.4deg); } /* drive in */
  100% { transform: translateX(0); }
}
@keyframes wr-lunge-r {
  0%   { transform: translateX(0); }
  22%  { transform: translateX(-5px) rotate(-0.6deg); }
  48%  { transform: translateX(13px)  rotate(1.4deg); }
  100% { transform: translateX(0); }
}

html[data-wr="on"] .wr-hitflash { animation: wr-hitflash 360ms var(--wr-ease); }
@keyframes wr-hitflash {
  20% { filter: brightness(1.55) saturate(1.3); }
}
html[data-wr="on"] .wr-shake-soft { animation: wr-shake-soft 300ms linear; }
@keyframes wr-shake-soft {
  25% { transform: translate(-2px, 1px); }
  50% { transform: translate(2px, -1px); }
  75% { transform: translate(-1px, 1px); }
}
/* one hard shake, reserved for lock-in / kill moments */
html[data-wr="on"] .wr-shake-hard { animation: wr-shake-hard 420ms linear; }
@keyframes wr-shake-hard {
  15% { transform: translate(-5px, 3px); }
  35% { transform: translate(5px, -3px); }
  55% { transform: translate(-3px, 2px); }
  75% { transform: translate(2px, -1px); }
}

/* ---- screen-wide flash veil (very low alpha; calm) ---- */
#wr-flash {
  position: fixed; inset: 0; z-index: 2147482500; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at 50% 45%,
    rgba(205, 250, 250, .55) 0%, rgba(10, 200, 185, .22) 45%, transparent 75%);
  display: none;
}
html[data-wr="on"] #wr-flash { display: block; }
#wr-flash.wr-on { animation: wr-flash-pop 700ms var(--wr-ease); }
@keyframes wr-flash-pop { 16% { opacity: .35; } 100% { opacity: 0; } }

/* reduced motion: kill every WR reaction/veil animation */
@media (prefers-reduced-motion: reduce) {
  html[data-wr="on"] .wr-recoil-l,
  html[data-wr="on"] .wr-recoil-r,
  html[data-wr="on"] .wr-hitflash,
  html[data-wr="on"] .wr-shake-soft,
  html[data-wr="on"] .wr-shake-hard,
  #wr-flash.wr-on { animation: none; }
}