/* Conquer's living title scene (js/vendor/conquer-scene.js), with the game's
   own stylesheet rules carried over and recoloured for a dark ground. Red and
   blue dots land, a line of light traces round them, and the land floods.
   Every part runs on a shared twelve-second cycle, pure CSS, no frame loop. */

.card-scene {
  --p1-rgb: 255 49 85;
  --p2-rgb: 31 107 255;
  --grid-rgb: 143 180 255;
  display: grid;
  place-items: center;
  overflow: hidden;
  perspective: 700px;
}

.title-scene-svg {
  width: 118%;
  transform: rotateX(48deg);
  transform-origin: 50% 70%;
  overflow: visible;
  -webkit-mask-image: radial-gradient(ellipse 60% 66% at 50% 55%, #000 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 66% at 50% 55%, #000 45%, transparent 100%);
}

.title-scene-svg .grid-dot { fill: rgb(var(--grid-rgb) / 0.28); }

.title-scene-svg .dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: scene-dot 12s cubic-bezier(0.34, 1.56, 0.64, 1) infinite both;
  animation-delay: var(--t);
}
.title-scene-svg .dot.taken { animation-name: scene-taken; }
.title-scene-svg .dot.red .core { fill: rgb(var(--p1-rgb)); }
.title-scene-svg .dot.red .halo { fill: rgb(var(--p1-rgb) / 0.28); }
.title-scene-svg .dot.blue .core { fill: rgb(var(--p2-rgb)); }
.title-scene-svg .dot.blue .halo { fill: rgb(var(--p2-rgb) / 0.32); }

.title-scene-svg .trace {
  fill: none;
  stroke-width: 3;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  animation: scene-trace 12s ease-in-out infinite both;
  animation-delay: var(--t);
}
.title-scene-svg .trace.red { stroke: rgb(var(--p1-rgb)); }
.title-scene-svg .trace.blue { stroke: rgb(var(--p2-rgb)); }

.title-scene-svg .flood {
  stroke: none;
  animation: scene-flood 12s ease-out infinite both;
  animation-delay: var(--t);
}
.title-scene-svg .flood.red { fill: rgb(var(--p1-rgb) / 0.3); }
.title-scene-svg .flood.blue { fill: rgb(var(--p2-rgb) / 0.32); }

@keyframes scene-dot {
  0% { opacity: 0; transform: scale(0); }
  3% { opacity: 1; transform: scale(1.4); }
  5%, 72% { opacity: 1; transform: none; }
  77%, 100% { opacity: 0; transform: scale(0.6); }
}
@keyframes scene-taken {
  0% { opacity: 0; transform: scale(0); }
  3% { opacity: 1; transform: scale(1.4); }
  5%, 23% { opacity: 1; transform: none; }
  27%, 72% { opacity: 0.3; transform: scale(0.8); }
  77%, 100% { opacity: 0; transform: scale(0.6); }
}
@keyframes scene-trace {
  0% { opacity: 1; stroke-dashoffset: 1; }
  7%, 72% { opacity: 1; stroke-dashoffset: 0; }
  77%, 100% { opacity: 0; stroke-dashoffset: 0; }
}
@keyframes scene-flood {
  0% { opacity: 0; }
  6%, 72% { opacity: 1; }
  77%, 100% { opacity: 0; }
}

/* Less motion: the scene holds still at one moment of its cycle, 9.4s in,
   when the middle two captures are complete. Each part is set to where it
   would be then: a part starting at --t is (9.4s - t) into its own run. */
@media (prefers-reduced-motion: reduce) {
  .title-scene-svg .dot, .title-scene-svg .trace, .title-scene-svg .flood {
    animation-play-state: paused;
    animation-delay: calc(var(--t) - 9.4s);
  }
}