/* Special effects around the counter: sparks, embers, smoke and steam on a
   canvas, the run's word count, a callout when you step up, and a glow on
   the counter itself. effects.js decides the state and puts it on the
   counter frame as data-effects: cold, warm, roll, fire or cooling. */

/* A registered length, so the room is worked out once, in pixels, from the
   counter's own font size, and means the same inside every element below. */
@property --effects-room {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

/* Drives the flicker of the fire. */
@property --flame {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.counter-frame {
  /* Room around the counter for effects to fly into. The overlay window
     leaves this much space on every side (see overlay.css). */
  --effects-room: 1.2em;
}

.effects {
  display: none;
  position: absolute;
  inset: calc(-1 * var(--effects-room));
  pointer-events: none;
}

.show-effects .effects {
  display: block;
}

.effects-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* The glow on the counter. counter.css adds --effects-glow to the counter's
   own shadow. */

.show-effects[data-effects="roll"] .counter {
  --effects-glow: 0 0 0.35em hsl(38 100% 60% / 0.5);
}

.show-effects[data-effects="fire"] .counter {
  --effects-glow:
    0 0 0.3em hsl(42 100% 62% / calc(0.45 + var(--flame) * 0.3)),
    0 0 calc(0.7em + var(--flame) * 0.35em) hsl(15 100% 55% / 0.5);
  animation: effects-flame 0.7s ease-in-out infinite alternate;
}

@keyframes effects-flame {
  from {
    --flame: 0;
  }
  to {
    --flame: 1;
  }
}

/* The number glows through a filter on the whole number, not a text shadow:
   each digit is a rolling strip clipped to its column, and a text shadow
   would be clipped with it into a tinted box. */
.show-effects[data-effects="roll"] .counter-number {
  filter: drop-shadow(0 0 0.12em hsl(38 100% 60% / 0.6));
}

/* On fire the digits glow white-hot */
.show-effects[data-effects="fire"] .counter-number {
  color: #fff8ea;
  text-shadow: none;
  filter:
    drop-shadow(0 0 0.06em hsl(45 100% 65% / 0.95))
    drop-shadow(0 0 0.2em hsl(20 100% 55% / 0.75));
}

/* The run's word count: a small badge on the counter's top edge, above the
   number. */

.effects-combo {
  position: absolute;
  top: calc(var(--effects-room) - 0.6em);
  left: calc(var(--effects-room) + 0.7em);
  padding: 0.12em 0.4em 0.14em;
  border-radius: 1em;
  font: 800 0.36em/1 ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: #2b1300;
  background: linear-gradient(180deg, #ffe08a, #ff9f43);
  box-shadow: 0 0.1em 0.35em hsl(25 100% 50% / 0.45);
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 200ms ease,
    transform 200ms ease;
}

.effects-combo.is-shown {
  opacity: 1;
  transform: scale(1);
}

.show-effects[data-effects="fire"] .effects-combo {
  color: #ffffff;
  background: linear-gradient(180deg, #ff9f43, #ff4f6d);
}

.effects-combo.is-shown.is-bumped {
  animation: effects-bump 180ms ease-out;
}

@keyframes effects-bump {
  from {
    transform: scale(1.3);
  }
  to {
    transform: scale(1);
  }
}

/* The callout, "On a roll" or "On fire". It pops up on the side of the
   counter that faces the middle of the screen, and drifts away from it. */

.effects-callout {
  position: absolute;
  left: 50%;
  white-space: nowrap;
  font: 900 0.42em/1 ui-rounded, "SF Pro Rounded", -apple-system, system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: transparent;
  background: linear-gradient(90deg, #ffe08a, #ff9f43 50%, #ff4f8b);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0.06em 0.12em rgb(0 0 0 / 0.45));
  opacity: 0;
}

.corner-top-left .effects-callout,
.corner-top-right .effects-callout {
  --callout-drift: 0.5em;
  top: calc(100% - var(--effects-room) + 0.35em);
}

.corner-bottom-left .effects-callout,
.corner-bottom-right .effects-callout {
  --callout-drift: -0.5em;
  bottom: calc(100% - var(--effects-room) + 0.35em);
}

.effects-callout.is-shown {
  animation: effects-callout 1.5s ease-out forwards;
}

@keyframes effects-callout {
  0% {
    opacity: 0;
    transform: translateX(-50%) scale(0.7);
  }
  12% {
    opacity: 1;
    transform: translateX(-50%) scale(1.12);
  }
  24% {
    transform: translateX(-50%) scale(1);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(var(--callout-drift));
  }
}

@media (prefers-reduced-motion: reduce) {
  .show-effects[data-effects="fire"] .counter {
    animation: none;
  }

  .effects-combo.is-shown.is-bumped {
    animation: none;
  }
}