/*
 * Főoldali hero mozgások (a motion.js-sel együtt): becsapódó címsorok, pattogó labda, lebegő sportlabdák.
 * Mind kikapcsol a "csökkentett mozgás" beállításnál.
 */

/* ---------------------------------------------------------------- becsapódó sorok */

.hero-title .line {
  animation: line-in 0.85s var(--ease) both;
}
.hero-title .line:nth-child(2) { animation-delay: 0.09s; }
.hero-title .line:nth-child(3) { animation-delay: 0.18s; }
@keyframes line-in {
  from {
    opacity: 0;
    transform: translateX(-60px) skewX(-14deg);
    filter: blur(6px);
  }
  60% {
    filter: blur(0);
  }
}

/* ---------------------------------------------------------------- pattogó labda */

.bounce {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 1.25em;
  align-self: flex-end;
}
.bounce-ball {
  position: absolute;
  left: 2px;
  bottom: 4px;
  width: 30px;
  height: 30px;
  transform-origin: 50% 100%;
  animation: bounce 0.8s cubic-bezier(0.5, 0, 0.5, 1) infinite alternate;
}
.bounce-ball svg {
  width: 30px;
  height: 30px;
  fill: var(--accent);
  stroke: var(--brand-tinta);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bounce-ball svg.swap {
  animation: ball-swap 0.5s var(--ease);
}
@keyframes ball-swap {
  from { transform: rotate(-200deg) scale(0.4); }
}
/* Lent lapul, fent nyúlik – rajzfilmes lendület. */
@keyframes bounce {
  0% { transform: translateY(0) scale(1.18, 0.8); }
  12% { transform: translateY(-4px) scale(0.92, 1.1); }
  100% { transform: translateY(-34px) scale(1, 1); }
}
.bounce-shadow {
  position: absolute;
  left: 4px;
  bottom: 0;
  width: 26px;
  height: 5px;
  border-radius: 50%;
  background: var(--text);
  opacity: 0.25;
  animation: bounce-shadow 0.8s cubic-bezier(0.5, 0, 0.5, 1) infinite alternate;
}
@keyframes bounce-shadow {
  0% { transform: scaleX(1.1); opacity: 0.3; }
  100% { transform: scaleX(0.5); opacity: 0.08; }
}

/* ---------------------------------------------------------------- lebegő labdák */

.floaters {
  position: absolute;
  inset: 0;
}
.fl-ball {
  position: absolute;
  width: var(--size);
  height: var(--size);
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  will-change: transform;
}
.fl-ball svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: spin var(--spin) linear infinite;
}
.fl-ball:nth-child(even) svg {
  animation-direction: reverse;
  stroke: var(--accent);
  opacity: 0.35;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@media (max-width: 767px) {
  .fl-hide-sm {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bounce,
  .floaters {
    display: none;
  }
}