/* V60 — only the Platform hero. Shared assets and homepage files are untouched.
   Decorative lightning uses the existing local WebP; no external asset request.
   All movement is progressive enhancement. Reduced-motion remains fully static. */
.platform-v51 .pl-hero {
  --pl60-x: 0px;
  --pl60-y: 0px;
}
.platform-v51 .pl-hero .pl-skater {
  transform-origin: 64% 72%;
  animation: pl60-skater-float 7.6s ease-in-out infinite;
}
.platform-v51 .pl-hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  pointer-events: none;
  top: auto;
  right: auto;
  left: 44%;
  bottom: 10%;
  width: clamp(80px, 11vw, 174px);
  aspect-ratio: 160 / 199;
  background: url("../platform-v51/bolt.webp") center / contain no-repeat;
  transform-origin: center;
  transform: rotate(-16deg) scaleX(-1);
  animation: pl60-bolt-lower 6.2s ease-in-out -1.4s infinite;
}
.platform-v51 .pl-hero::after {
  z-index: 1;
  transform-origin: center;
  animation: pl60-bolt-upper 5.4s ease-in-out -.8s infinite;
}
.platform-v51 .pl-hero .pl-copy {
  animation: pl60-title-arrive .85s cubic-bezier(.2,.65,.3,1) both;
}
.platform-v51 .pl-hero h1 em {
  animation: pl60-title-color 7s ease-in-out infinite;
}
@keyframes pl60-skater-float {
  0%, 100% { transform: translate3d(var(--pl60-x), var(--pl60-y), 0) rotate(0deg); }
  50% { transform: translate3d(calc(var(--pl60-x) + 4px), calc(var(--pl60-y) - 13px), 0) rotate(.65deg); }
}
@keyframes pl60-bolt-upper {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(10deg); }
  50% { transform: translate3d(-4px, -13px, 0) rotate(18deg); }
}
@keyframes pl60-bolt-lower {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-16deg) scaleX(-1); }
  50% { transform: translate3d(5px, -17px, 0) rotate(-7deg) scaleX(-1); }
}
@keyframes pl60-title-arrive {
  from { opacity: .86; transform: translate3d(0, 13px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes pl60-title-color {
  0%, 40%, 100% { color: var(--pl-yellow); }
  65%, 78% { color: #fff; }
}
/* Stop offscreen animation without resetting its phase. */
.platform-v51 .pl-hero[data-pl60-paused="true"]::before,
.platform-v51 .pl-hero[data-pl60-paused="true"]::after,
.platform-v51 .pl-hero[data-pl60-paused="true"] .pl-skater,
.platform-v51 .pl-hero[data-pl60-paused="true"] .pl-copy,
.platform-v51 .pl-hero[data-pl60-paused="true"] h1 em {
  animation-play-state: paused;
}
@media (min-width: 761px) and (max-width: 1100px) {
  .platform-v51 .pl-hero::before { left: 49%; width: clamp(80px, 10vw, 118px); }
}
@media (max-width: 760px) {
  .platform-v51 .pl-hero::before {
    left: 3%;
    bottom: 7%;
    width: clamp(62px, 17vw, 106px);
  }
  .platform-v51 .pl-hero .pl-skater { animation-name: pl60-skater-mobile; }
  @keyframes pl60-skater-mobile {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    50% { transform: translate3d(2px, -6px, 0) rotate(.4deg); }
  }
}
@media (prefers-reduced-motion: reduce), print {
  .platform-v51 .pl-hero::before,
  .platform-v51 .pl-hero::after,
  .platform-v51 .pl-hero .pl-skater,
  .platform-v51 .pl-hero .pl-copy,
  .platform-v51 .pl-hero h1 em { animation: none !important; }
  .platform-v51 .pl-hero .pl-skater,
  .platform-v51 .pl-hero .pl-copy { transform: none !important; opacity: 1 !important; }
  .platform-v51 .pl-hero::before { transform: rotate(-16deg) scaleX(-1); }
  .platform-v51 .pl-hero::after { transform: rotate(10deg); }
  .platform-v51 .pl-hero h1 em { color: var(--pl-yellow); }
}