.court-scene {
  transform: translate3d(var(--scene-x, 0), var(--scene-y, 0), 0);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}

.volleyball {
  background: url('assets/championship-volleyball.png') center / contain no-repeat;
  border: 0;
  box-shadow: none;
  animation-name: pro-ball-bounce;
  will-change: transform, filter;
}

.volleyball::after { display: none; }

@keyframes pro-ball-bounce {
  0%, 100% {
    transform: translateY(0) rotate(0) scaleX(1.06) scaleY(.9);
    filter: drop-shadow(0 16px 12px rgba(0, 0, 0, .48)) brightness(.78);
  }
  8% {
    transform: translateY(-8px) rotate(12deg) scaleX(.96) scaleY(1.04);
    filter: drop-shadow(0 15px 15px rgba(0, 0, 0, .42)) brightness(.84);
  }
  47%, 52% {
    transform: translateY(calc(var(--rise) * -1)) rotate(var(--spin)) scale(1);
    filter: drop-shadow(0 25px 23px rgba(0, 0, 0, .22)) brightness(1.08);
  }
  92% {
    transform: translateY(-8px) rotate(calc(var(--spin) * 1.9)) scaleX(.97) scaleY(1.03);
    filter: drop-shadow(0 15px 15px rgba(0, 0, 0, .42)) brightness(.84);
  }
  100% {
    transform: translateY(0) rotate(calc(var(--spin) * 2)) scaleX(1.06) scaleY(.9);
    filter: drop-shadow(0 16px 12px rgba(0, 0, 0, .48)) brightness(.78);
  }
}

.hero-inner {
  transform: translate3d(var(--text-x, 0), var(--text-y, 0), 0);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}

.kinetic-title span {
  display: block;
  opacity: 0;
  transform: translateY(105%) skewY(4deg);
  animation: title-rise 1s cubic-bezier(.16, 1, .3, 1) .16s forwards;
}

.kinetic-title span:nth-child(2) { animation-delay: .29s; }

.kinetic-title em {
  display: inline-block;
  background: linear-gradient(100deg, #34a853 0%, #34a853 38%, #d8ffe1 50%, #34a853 62%, #34a853 100%);
  background-size: 220% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: green-sweep 4.8s ease-in-out 1.2s infinite;
}

.hero .eyebrow { opacity: 0; animation: micro-rise .7s ease-out .05s forwards; }
.hero-copy { opacity: 0; animation: micro-rise .8s ease-out .56s forwards; }
.hero-actions { opacity: 0; animation: micro-rise .8s ease-out .72s forwards; }
.hero-stamp { animation: stamp-orbit 8s ease-in-out infinite; }
.ticker div { animation: ticker-drift 15s linear infinite; }

@keyframes title-rise { to { opacity: 1; transform: translateY(0) skewY(0); } }
@keyframes micro-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes green-sweep { 0%, 28% { background-position: 100% 0; } 58%, 100% { background-position: -100% 0; } }
@keyframes stamp-orbit { 0%, 100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-9px); } }
@keyframes ticker-drift { from { transform: translateX(0); } to { transform: translateX(-18%); } }

.motion-ready .motion-reveal {
  opacity: 0;
  transform: translateY(56px) scale(.985);
  transition: opacity .9s ease, transform 1s cubic-bezier(.16, 1, .3, 1);
}

.motion-ready .motion-reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); }

@media (prefers-reduced-motion: reduce) {
  .court-scene, .hero-inner { transform: none; transition: none; }
  .kinetic-title span, .hero .eyebrow, .hero-copy, .hero-actions, .hero-stamp, .ticker div, .kinetic-title em {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .motion-ready .motion-reveal { opacity: 1; transform: none; transition: none; }
}