/* animations.css */

.transition {
    position: fixed;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    height: 150vmax;
    width: 150vmax;
    pointer-events: none;
    z-index: 999999;
  }

  .roulette-content .container,
  .roulette-content > article {
    display: none;
    opacity: 0;
    transition: var(--transition-default);
  }

  .roulette-content .active {
    display: block;
    opacity: 1;
  }

  :is(.navbtn button, .bubl, .btnbub, nav) {
    transition: var(--transition-default);
  }

  .storyText span {
    background: linear-gradient(
      to right,
      var(--color-yellow) 0%,
      var(--color-yellow) 50%,
      transparent 50%,
      transparent
    );
    background-size: 200% 100%;
    background-position: 100% 0;
    transition: background-position 1.5s linear;
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
  }

  .storyText:hover {
    background-position: 0 0;
  }