/*
 * Short-lived marks behind gliding tokens (TokenTrailRenderer.js). They lie in the camera-moved
 * world above the objects layer and below the tokens. Each mark keeps its screen size at every
 * zoom (`--trail-scale`), points along the movement (`--trail-angle`), alternates sides
 * (`--trail-side`) and may scatter a little (`--trail-dx`/`--trail-dy`, screen px). Colours come
 * from the mover (`--trail-player-color`; rainbow cycles `--trail-color`) or the theme accent.
 */
.table-token-trail-layer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  pointer-events: none;
}

.table-token-trail {
  --trail-mark-color: var(--trail-player-color, var(--table-accent));
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  color: var(--trail-mark-color);
  transform: scale(calc(1 / var(--trail-scale, 1))) translate(var(--trail-dx, 0px), var(--trail-dy, 0px))
    rotate(var(--trail-angle, 0deg));
  pointer-events: none;
  animation-name: table-token-trail-fade;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}

.table-token-trail::before,
.table-token-trail::after {
  position: absolute;
  display: block;
  content: "";
}

/* Footsteps: one print per mark, left and right of the path: the ball of the foot ahead, the heel behind. */
.table-token-trail--steps::before,
.table-token-trail--steps::after {
  background: var(--trail-mark-color);
  box-shadow: 0 0 3px rgba(var(--table-black-rgb, 0, 0, 0), 0.5);
  opacity: 0.8;
}
.table-token-trail--steps::before {
  top: calc(var(--trail-side, 1) * 6px - 3.5px);
  left: -1px;
  width: 9px;
  height: 7px;
  border-radius: 40% 60% 60% 40% / 50%;
}
.table-token-trail--steps::after {
  top: calc(var(--trail-side, 1) * 6px - 2.5px);
  left: -8px;
  width: 6px;
  height: 5px;
  border-radius: 50%;
}

/* Stars: small five-pointed stars that twinkle and turn as they fade. */
.table-token-trail--stars::before {
  top: -7px;
  left: -7px;
  width: 14px;
  height: 14px;
  background: var(--trail-mark-color);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 95%, 50% 72%, 21% 95%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 0 3px var(--trail-mark-color));
  animation-name: table-token-trail-twinkle;
  animation-duration: inherit;
  animation-delay: inherit;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}
.table-token-trail--stars::after {
  top: -1.5px;
  left: -1.5px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(var(--table-white-rgb, 255, 255, 255), 0.85);
}

/* Sparks: glowing dots that drift off sideways and burn out. */
.table-token-trail--sparks::before {
  top: -3px;
  left: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(var(--table-white-rgb, 255, 255, 255), 0.95);
  box-shadow: 0 0 3px 2px var(--trail-mark-color), 0 0 10px 3px var(--trail-mark-color);
  animation-name: table-token-trail-drift;
  animation-duration: inherit;
  animation-delay: inherit;
  animation-timing-function: ease-out;
  animation-fill-mode: both;
}

/* Rainbow: thin bands across the path that join into a ribbon of shifting colour. */
.table-token-trail--rainbow {
  --trail-mark-color: var(--trail-color, var(--table-accent));
}
.table-token-trail--rainbow::before {
  top: -5px;
  left: -3px;
  width: 7px;
  height: 10px;
  border-radius: 3px;
  background: var(--trail-mark-color);
  box-shadow: 0 0 6px var(--trail-mark-color);
  opacity: 0.5;
}

/* Wake: a ship's wake, a V opening behind the token. Each mark holds two short foam arms, one to
   each side, that drift apart as the mark ages; since older marks lie farther back, the arms join
   into two lines diverging from the token. The mark itself is a soft churned patch in the middle. */
.table-token-trail--wake {
  --trail-foam: color-mix(in srgb, var(--trail-mark-color) 25%, #effcff);
  box-shadow: 0 0 6px 4px color-mix(in srgb, var(--trail-foam) 30%, transparent);
}
.table-token-trail--wake::before,
.table-token-trail--wake::after {
  top: -1.75px;
  left: -8px;
  width: 16px;
  height: 3.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--trail-foam) 25%, var(--trail-foam) 75%, transparent);
  box-shadow:
    0 0 2px 0.5px color-mix(in srgb, var(--trail-mark-color) 70%, transparent),
    0 0.5px 1px rgba(var(--table-black-rgb, 0, 0, 0), 0.3);
  animation-name: table-token-trail-wake;
  animation-duration: inherit;
  animation-delay: inherit;
  animation-timing-function: linear;
  animation-fill-mode: both;
}
.table-token-trail--wake::before { --arm: -1; }
.table-token-trail--wake::after { --arm: 1; }

@keyframes table-token-trail-fade {
  0% { opacity: 0; }
  12% { opacity: 1; }
  60% { opacity: 0.75; }
  100% { opacity: 0; }
}

/* An arm moves out from the middle and lies slanted, its front end nearer the path. */
@keyframes table-token-trail-wake {
  0% { transform: translateY(calc(var(--arm) * 1px)) rotate(calc(var(--arm) * -18deg)) scaleX(0.6); }
  18% { transform: translateY(calc(var(--arm) * 11px)) rotate(calc(var(--arm) * -16deg)) scaleX(0.9); }
  100% { transform: translateY(calc(var(--arm) * 40px)) rotate(calc(var(--arm) * -12deg)) scaleX(1.2); }
}

@keyframes table-token-trail-twinkle {
  0% { transform: scale(0.4) rotate(0deg); }
  25% { transform: scale(1.1) rotate(25deg); }
  100% { transform: scale(0.55) rotate(80deg); }
}

@keyframes table-token-trail-drift {
  0% { transform: translate(0, 0) scale(1); }
  100% { transform: translate(calc(var(--trail-dx, 0px) * 2.2), calc(var(--trail-dy, 0px) * 2.2 - 8px)) scale(0.25); }
}

/* A dragged token's translucent copy (TokenObject.setGhost); the token stays put until the drop. */
.table-object--ghost {
  opacity: 0.55;
  filter: drop-shadow(0 6px 10px rgba(var(--table-black-rgb, 0, 0, 0), 0.45));
  pointer-events: none;
}

.table-object--ghost * {
  pointer-events: none !important;
}

/* The JavaScript gate also clears existing marks when these preferences change. */
body.table-effect-off--token-motion .table-token-trail-layer,
.table-root.is-effects-reduced .table-token-trail-layer { display: none; }

@media (prefers-reduced-motion: reduce) {
  .table-token-trail-layer { display: none; }
}

/* The trail tiles under "Appearance": a still trail behind a small token, played once on choice. */
.table-looks__trail {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  --trail-scale: 1;
  --trail-angle: 0deg;
}

.table-looks__trail .table-token-trail {
  top: 50%;
  animation: none;
  opacity: calc(0.35 + var(--trail-index, 0) * 0.15);
}

.table-looks__trail .table-token-trail::before {
  animation: none;
}

.table-looks__trail .table-token-trail--wake {
  --trail-dy: 0px !important;
}

.table-looks__trail .table-token-trail--wake::before,
.table-looks__trail .table-token-trail--wake::after {
  animation: none;
  transform: translateY(calc(var(--arm) * (14px - var(--trail-index, 0) * 3px))) rotate(calc(var(--arm) * -14deg));
}

.table-looks__trail-token {
  position: absolute;
  top: calc(50% - 8px);
  left: calc(86% - 8px);
  width: 16px;
  height: 16px;
  border: 2px solid var(--trail-player-color, var(--table-accent));
  border-radius: 50%;
  background: rgb(var(--table-panel-rgb, 22, 26, 34));
}

.table-looks__trail[data-style="none"] .table-looks__trail-token {
  left: calc(50% - 8px);
}

.table-looks__trail.is-playing .table-looks__trail-token {
  animation: table-looks-trail-run 1s ease-out both;
}

.table-looks__trail.is-playing .table-token-trail {
  animation: table-token-trail-fade 1.2s ease-out both;
  animation-delay: calc(var(--trail-index, 0) * 0.16s);
}

@keyframes table-looks-trail-run {
  from { transform: translateX(-60px); }
  to { transform: translateX(0); }
}

/* The preview rests like the trails do: with the system's reduced motion or "reduce effects". */
.is-effects-reduced .table-looks__trail.is-playing .table-looks__trail-token,
.is-effects-reduced .table-looks__trail.is-playing .table-token-trail { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .table-looks__trail.is-playing .table-looks__trail-token,
  .table-looks__trail.is-playing .table-token-trail { animation: none; }
}