/*
Theme Name:   Ollie Child
Theme URI:    https://olliewp.com
Description:  A child theme for Ollie.
Author:       OllieWP
Author URI:   http://example.com
Template:     ollie
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         Tags: blog, portfolio, entertainment
Text Domain:  ollie
*/


.fuzzybg1 {
  /* height: 100vh; */
  background-image: url(https://leopostovoit.com/wp-content/uploads/2024/03/bkg1.webp");
}

.fuzzybg2:after {
  animation: grain 8s steps(10) infinite;
  background-image: url("https://leopostovoit.com/wp-content/uploads/2024/03/bkg2-jpg.webp");
  content: "";
  height: 300%;
	position: fixed;
	pointer-events: none;
	left: -50%;
  opacity: 0.09;
  top: -100%;
  width: 300%;
}

@keyframes grain {
  0%, 100% { transform:translate(0, 0) }
  10% { transform:translate(-5%, -10%) }
  20% { transform:translate(-15%, 5%) }
  30% { transform:translate(7%, -25%) }
  40% { transform:translate(-5%, 25%) }
  50% { transform:translate(-15%, 10%) }
  60% { transform:translate(15%, 0%) }
  70% { transform:translate(0%, 15%) }
  80% { transform:translate(3%, 35%) }
  90% { transform:translate(-10%, 10%) }
}

/*
.marquee {
  position: relative;
  overflow: hidden;
  --offset: 20vw;
  --move-initial: calc(-25% + var(--offset));
  --move-final: calc(-50% + var(--offset));
}

.marquee__inner {
  width: fit-content;
  display: flex;
  position: relative;
  transform: translate3d(var(--move-initial), 0, 0);
  animation: marquee 5s linear infinite;
}

.marquee span {
  font-size: 10vw;
  padding: 0 2vw;
}

@keyframes marquee {
  0% {
    transform: translate3d(var(--move-initial), 0, 0);
  }
  100% {
    transform: translate3d(var(--move-final), 0, 0);
  }
}
*/


.marquee {
  font-size: 1.8rem;
  text-transform: uppercase;
  width: var(--tw);
  --tw: 70vw;
	--ad: 5.5s;
}

.char {
  --offset: calc(var(--char-index) * 2.1rem);
  offset-path: path('M0,36L11.4,51C22.9,66,46,96,69,108C91.4,120,114,114,137,105C160,96,183,84,206,87C228.6,90,251,108,274,111C297.1,114,320,102,343,81C365.7,60,389,30,411,30C434.3,30,457,60,480,66C502.9,72,526,54,549,57C571.4,60,594,84,617,78C640,72,663,36,686,18C708.6,0,731,0,754,9C777.1,18,800,36,823,57C845.7,78,869,102,891,99C914.3,96,937,66,960,51C982.9,36,1006,36,1029,54C1051.4,72,1074,108,1097,105C1120,102,1143,60,1166,39C1188.6,18,1211,18,1234,27C1257.1,36,1280,54,1303,57C1325.7,60,1349,48,1371,45C1394.3,42,1417,48,1440,48C1462.9,48,1486,42,1509,54C1531.4,66,1554,96,1577,102C1600,108,1623,90,1634,81L1645.7,72L1645.7,180L1634.3,180C1622.9,180,1600,180,1577,180C1554.3,180,1531,180,1509,180C1485.7,180,1463,180,1440,180C1417.1,180,1394,180,1371,180C1348.6,180,1326,180,1303,180C1280,180,1257,180,1234,180C1211.4,180,1189,180,1166,180C1142.9,180,1120,180,1097,180C1074.3,180,1051,180,1029,180C1005.7,180,983,180,960,180C937.1,180,914,180,891,180C868.6,180,846,180,823,180C800,180,777,180,754,180C731.4,180,709,180,686,180C662.9,180,640,180,617,180C594.3,180,571,180,549,180C525.7,180,503,180,480,180C457.1,180,434,180,411,180C388.6,180,366,180,343,180C320,180,297,180,274,180C251.4,180,229,180,206,180C182.9,180,160,180,137,180C114.3,180,91,180,69,180C45.7,180,23,180,11,180L0,180Z');
  offset-distance: var(--offset);
  position: absolute;
  animation: move var(--ad) infinite alternate forwards;
	color: rgba(255, 110, 0, 0.6);
  text-shadow: var(--tw) 0 currentColor,
								calc(var(--tw) * 1 * 1.01) 0 rgba(255, 0, 100, 0.1),
								calc(var(--tw) * 1 * 0.99) 0 rgba(255, 110, 0, 0.1);
}
@media screen and (max-width: 768px) {
  .marquee {
    font-size: 1.2rem;
    --tw: 100vw;
  }
  .char {
    --offset: calc(var(--char-index) * 1.2rem);
  color: rgba(255, 220, 0, 0.6);
  }

}


.marquee:nth-child(2) .char {
  --delay: calc(var(--char-index) * 30ms);
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
	100% {
		offset-distance: calc(var(--offset) + 45rem);
	}
	60% {
    offset-distance: calc(var(--offset) + 12rem);
  }
	100% {
		offset-distance: calc(var(--offset) + 45rem);
	}
	60% {
    offset-distance: calc(var(--offset) + 12rem);
  }
	100% {
		offset-distance: calc(var(--offset) + 45rem);
	}
	60% {
    offset-distance: calc(var(--offset) + 12rem);
  }
	100% {
		offset-distance: calc(var(--offset) + 45rem);
	}
}