<div class="wall">
    <div class="row"><span>кубок</span><span>Сахалина</span><span>2024</span><span>хоккей</span><span>турнир</span></div>
    <div class="row"><span>дальний</span><span>восток</span><span>2024</span><span>хоккей</span><span>спорт</span><span>сахалинская</span><span>область</span></div>
    <div class="row"><span>адреналин</span><span>восторг</span><span>страсть</span><span>единство</span></div>
    <div class="row"><span>трус</span><span>не</span><span>играет</span><span>в</span><span>хоккей</span></div>
    <div class="row"><span>АРСО</span><span>правительство</span><span>сахалинской</span><span>области</span><span>дворец</span><span>спорта</span><span>кристалл</span></div>
</div>
<div class="container">
 
    <div class="hero">
         <div class="hero__tagline">ледовая площадка арены «Кристалл»</div>
        <div class="hero__title"> <span>2025 год</span>
            <br> КУБОК  САХАЛИНА</div>
        <div class="hero__subtitle">Турнир Сахалинской области по хоккею среди любительских команд</div>
        <div class="hero__subtitle">с 03 по 06 июня 2025 года </div>
    </div>

.wrapper::before {
  content: "";
  width: 100;
  height: 50vh;
    display: block;
  background-image: url("https://static.tildacdn.com/tild6165-3765-4266-b032-646164396238/__-ready.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

body {
  height: 100vh;
  overflow: hidden;
}



.wall {
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
}

.row {
  z-index: -99;
  display: flex;
  animation: 200s linear ticker-to-left infinite;
  
  &:nth-child(even) {
    animation: 60s linear ticker-to-right infinite;
    justify-content: flex-end;
  }

  span {
    margin-right: 0.2em;
    font-family: sans-serif;
    color: transparent;
    font-size: 20vh;
    font-weight: bold;
    line-height: 1;
    text-transform: uppercase;
    -webkit-text-stroke-width: 4px;
            text-stroke-width: 4px;
    -webkit-text-stroke-color: #f5f5f5;
            text-stroke-color: #f5f5f5;
  }
  
}

@keyframes ticker-to-left {
    0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-100%, 0, 0); }
}

@keyframes ticker-to-right {
    0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(100%, 0, 0); }
}


/* Unrelated to demo */

@import 'https://fonts.googleapis.com/css?family=Montserrat:800|Caveat:800|Tablon:400';

.container {
    position: absolute;
    width: 100vw;
    height: 100vh;
    z-index: 99;
}

.hero {
    display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
    height: 100%;
  font-size: 1.2em;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
}

.hero__tagline {
  margin: 0 0 1rem 0;
}

.hero__title {
    font-family: "New_Zelek";
    font-weight: 400;
    letter-spacing: 2px;
  font-size: 2rem;
    text-align: center;
    text-transform: uppercase;
    
    span {
        color: #4FA5C0;
        -webkit-text-stroke-width: thin;
                text-stroke-width: thin;
        -webkit-text-stroke-color: #000;
              
        
        &:hover {
            -webkit-text-stroke-color: #4FA5C0;
                    text-stroke-color: #4FA5C0;
        }
    }
}

.hero__subtitle {
  font-size: 1 rem;
    margin: 1rem 0 0 0;
    text-align: center;
}