/**
Look at you, hacker! Sneaking a peek at my code... Or are you considering becoming a client?
Get a job, or better yet, hire my agency - FeysMedia. Let's talk business!
Call us now or drop an email:

FeysMedia e.U.
+436606787039
office@feysmedia.at

Inspiration for the effect: codepen.io - Jux
https://codepen.io/Juxtopposed
 */

.marquee {
  --marquee--colour: #f3bb0b;
  --marquee--repeat-count: 6;
  --marquee--base-duration: 1s;
  --marquee--repeat-size: calc(100% / var(--marquee--repeat-count));
  --marquee--double-size: calc(var(--marquee--repeat-size) * 2);
  --marquee--duration: calc(
    var(--marquee--base-duration) * var(--char-count, 20)
  );
  overflow: hidden;
  width: 110%;
  margin-left: -5%;
  mix-blend-mode: screen;
  transform: rotate(-5deg);
  background: var(--marquee--colour);
  color: #000;
}
.marquee:nth-child(even) {
  --marquee--direction: -1;
  transform: rotate(5deg);
  background: #000;
  color: var(--marquee--colour);
}
.marquee p {
  transform: translateY(0.07em);
  font-weight: bold;
  margin: 0;
  display: flex;
  gap: 0.5em;
  line-height: 1.1;
  font-size: clamp(2.5rem, 12vw, 6.2rem);
  font-family: "Bebas Neue", sans-serif;
  /* An empty psuedo element creates a gap after the last element */
}
.marquee p::after {
  content: "*";
  transform: translateY(0.175em);
}
.marquee p::before {
  content: "";
}

.marquee--inner {
  width: max-content;
  display: flex;
  text-transform: uppercase;
}
@media (prefers-reduced-motion: no-preference) {
  .marquee--inner {
    animation: marquee var(--marquee--duration) infinite linear, reduce-marquee var(--marquee--duration) infinite linear paused;
    animation-composition: add;
  }
  .marquee--inner:hover {
    animation-play-state: running;
  }
}

@keyframes marquee {
  from {
    transform: translateX(calc( 		(-1 * var(--marquee--double-size)) - 			(var(--marquee--double-size) * var(--marquee--direction, 1)) 	));
  }
  to {
    transform: translateX(calc(var(--marquee--double-size) * -1));
  }
}
@keyframes reduce-marquee {
  from {
    transform: translateX(calc(var(--marquee--repeat-size) * var(--marquee--direction, 1)));
  }
  to {
    transfrom: translateX(calc(var(--marquee--double-size) * -1));
  }
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url(rust3.png);
  background-size: cover;
  background-position: center;
  filter: brightness(0.25);
}

body,
html {
  height: 100%;
  margin: 0;
}

.marquees {
  align-content: center;
  height: 100%;
  display: grid;
  gap: 5vw;
  overflow: hidden;
}

button {
  position: absolute;
  top: 20px;
  left: 20px;
}
button[aria-pressed=true] {
  filter: invert(1);
}

[aria-pressed=true] + * .marquee--inner {
  animation-play-state: paused !important;
}