/* Six distinct cartoon characters, each with its own entrance. */
.hero-title { width: min(1120px, 94vw); }
.playful-word { height: auto; width: 100%; gap: 0; align-items: center; }
.playful-word .letter {
  flex: 1 1 0; min-width: 0; width: auto; height: auto; aspect-ratio: 1 / 2;
  font-size: 0; color: transparent; -webkit-text-stroke: 0;
  border: 0; border-radius: 0; clip-path: none; box-shadow: none;
  background: url('grovia-characters-v6.webp') no-repeat;
  background-size: 600% 100%; filter: none; transform-origin: 50% 70%;
}
.playful-word .letter::before, .playful-word .letter::after { content: none; }
.playful-word .letter-g { background-position: 0% 50%; --tilt: -4deg; }
.playful-word .letter-r { background-position: 20% 50%; --tilt: 3deg; }
.playful-word .letter-o { background-position: 40% 50%; --tilt: -3deg; }
.playful-word .letter-v { background-position: 60% 50%; --tilt: 3deg; }
.playful-word .letter-i { background-position: 80% 50%; --tilt: -4deg; }
.playful-word .letter-a { background-position: 100% 50%; --tilt: 3deg; }
.playful-word .letter-g { flex: 403 1 0; aspect-ratio: 403 / 724; background-size: 538.9578163771712% 100%; background-position: 0% 50%; }
.playful-word .letter-r { flex: 347 1 0; aspect-ratio: 347 / 724; background-size: 625.936599423631% 100%; background-position: 22.082191780821915% 50%; }
.playful-word .letter-o { flex: 330 1 0; aspect-ratio: 330 / 724; background-size: 658.1818181818182% 100%; background-position: 40.71661237785016% 50%; }
.playful-word .letter-v { flex: 388 1 0; aspect-ratio: 388 / 724; background-size: 559.7938144329896% 100%; background-position: 60.53811659192825% 50%; }
.playful-word .letter-i { flex: 312 1 0; aspect-ratio: 312 / 724; background-size: 696.1538461538462% 100%; background-position: 78.92473118279571% 50%; }
.playful-word .letter-a { flex: 392 1 0; aspect-ratio: 392 / 724; background-size: 554.0816326530612% 100%; background-position: 100% 50%; }
body.intro-active .letter { animation-duration: 1.65s; }
body.intro-active .letter-r { animation-delay: .18s; }
body.intro-active .letter-o { animation-delay: .36s; animation-timing-function: steps(9, end); }
body.intro-active .letter-v { animation-delay: .54s; }
body.intro-active .letter-i { animation-delay: .72s; }
body.intro-active .letter-a { animation-delay: .9s; }
.solid-word { font-size: clamp(2.8rem, 8vw, 7.6rem); letter-spacing: -.065em; margin-top: -3vw; position: relative; }
body.intro-active .solid-word { animation-delay: 2.05s; }
.hero .play-reel { left: auto; right: 3.5vw; bottom: 23px; width: 44px; height: 44px; box-shadow: none; } /* 42px dokunma hedefi esiginin altindaydi */
@media (max-width:800px) {
  .hero-title { width: 98vw; }
  .playful-word { height: auto; }
  .solid-word { font-size: 9vw; margin-top: 0; }
}
@media (prefers-reduced-motion:reduce) {
  .playful-word .letter { animation-delay: 0s !important; animation-duration: .01ms !important; }
}