/* ============================================================
   v9 MOTION BOOST — animación plana (SVG/CSS), sin vídeo, sin GPU
   Objetivo: que el hero se LEA en movimiento a primera vista.
   Todo transform/opacity → compositor, 60fps, 0 KB de assets.
   ============================================================ */

@keyframes v9mb-swayA{0%,100%{rotate:-4.2deg}50%{rotate:4.6deg}}
@keyframes v9mb-swayB{0%,100%{rotate:3.4deg}50%{rotate:-3.8deg}}
@keyframes v9mb-bobY{0%,100%{transform:translate3d(0,0,0) rotate(-1.8deg)}50%{transform:translate3d(0,-9px,0) rotate(2deg)}}
@keyframes v9mb-bobBig{0%,100%{transform:translate3d(-4px,0,0) rotate(-2.4deg)}50%{transform:translate3d(5px,-11px,0) rotate(2.6deg)}}
@keyframes v9mb-bobSoft{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-14px,0)}}
@keyframes v9mb-fly{0%{transform:translate3d(182vw,10px,0) rotate(1.4deg)}
                    50%{transform:translate3d(66vw,-18px,0) rotate(-1.4deg)}
                    100%{transform:translate3d(-42vw,14px,0) rotate(1.4deg)}}
@keyframes v9mb-driftWide{0%{transform:translate3d(-7%,0,0)}100%{transform:translate3d(10%,0,0)}}
@keyframes v9mb-bird{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-9px) rotate(5deg)}}
@keyframes v9mb-wave{to{transform:translateX(-50%)}}
@keyframes v9mb-spinZ{to{rotate:360deg}}
@keyframes v9mb-shimmer{0%{opacity:.55;transform:translateX(-18px) scaleX(.96)}
                        100%{opacity:1;transform:translateX(22px) scaleX(1.06)}}

/* --- mar: tres capas de olas a distinta velocidad --- */
.hero-art .v9-wave{animation:v9mb-wave 4.2s linear infinite!important;height:26px!important;opacity:.62!important}
.hero-art .v9-wave.w2{animation-duration:6.4s!important;animation-direction:reverse!important;opacity:.42!important;height:28px!important}
.hero-art .v9-wave.w3{animation-duration:11.5s!important;opacity:.3!important;height:30px!important}
.hero-art .v9-wave::after{
  content:"";position:absolute;left:0;right:0;top:-9px;height:10px;
  background:radial-gradient(14px 7px at 14px 0,rgba(255,255,255,.55) 60%,transparent 62%) repeat-x;background-size:28px 10px;
  animation:v9mb-wave 3.6s linear infinite reverse}
.hero-art .sea::after{animation:v9mb-shimmer 6.5s ease-in-out infinite alternate}

/* --- palmeras: vaivén real (±3°) --- */
.hero-art .palm{animation-name:v9mb-swayA!important;animation-duration:5.4s!important;animation-timing-function:ease-in-out!important}
.hero-art .palm.r{animation-name:v9mb-swayB!important;animation-duration:6.1s!important;animation-delay:-2.4s!important}

/* --- botes: el movimiento vive en cada pieza (wow-v9.html).
   Aquí NO se pisa: el bob !important con rotate sobre el centro del elemento
   convertía el casco en un columpio y se leía como deformación. --- */
.hero-art .v9-beachball{animation:v9mb-bobSoft 3.2s ease-in-out infinite, v9mb-spinZ 7s linear infinite!important}

/* --- nubes: deriva ancha y visible --- */
.hero-art .cl-a{animation-name:v9mb-driftWide!important;animation-duration:26s!important}
.hero-art .cl-b{animation-name:v9mb-driftWide!important;animation-duration:34s!important}
.hero-art .cl-c{animation-name:v9mb-driftWide!important;animation-duration:30s!important}

/* --- avión: cruza el cielo en 30s, no en 46 --- */
.hero-art .v9-plane{animation:v9mb-fly 30s linear infinite!important;animation-delay:-9s!important}

/* --- pájaros: aleteo más marcado --- */
.hero-art .v9-birds .bird{animation-name:v9mb-bird!important;animation-duration:2.6s!important}

/* --- rayos de sol: giro perceptible --- */
.hero-art .sunrays{animation-duration:70s!important}

/* --- multitud de noche: saltan de verdad --- */
.hero[data-mood="night"] .v9-crowd > *{animation-name:v9mb-bobY!important}
.hero[data-mood="night"] .v9-crowd > *:nth-child(3n){animation-duration:3s!important}
.hero[data-mood="night"] .v9-crowd > *:nth-child(4n){animation-duration:2.2s!important}
.v9-crowd2 > *{animation-name:v9mb-bobY!important}
.v9-crowd2 > *:nth-child(3n){animation-duration:3.1s!important}
.v9-crowd2 > *:nth-child(4n){animation-duration:2.3s!important}

/* --- confeti de noche: cae más rápido y continuo --- */
.hero-art .v9-party i{animation-duration:5.8s!important}
.hero-art .v9-party i.b{animation-duration:2.6s!important}

@media (prefers-reduced-motion: reduce){
  .hero-art .palm,.hero-art .palm.r,.hero-art .v9-wave,.hero-art .v9-wave.w2,.hero-art .v9-wave.w3,
  .hero-art .v9-wave::after,.hero-art .sea::after,.hero-art .v9-plane,.hero-art .v9-plane .prop,.hero-art .v9-plane .banner,.hero-art .sunrays,
  .hero-art .v9-yacht,.hero-art .v9-sail,.hero-art .v9-jetski,.hero-art .v9-flamingo,
  .hero-art .v9-beachball,.hero-art .v9-birds .bird,
  .hero-art .cl-a,.hero-art .cl-b,.hero-art .cl-c,
  .v9-crowd2 > *,.hero[data-mood="night"] .v9-crowd > *,.v9-fall,.hero[data-mood="night"] .v9-dust .v9-mote,.hero[data-mood="night"] .v9-lamp-core,
  .hero-art .v9-party i,.hero-art .v9-party i.b{animation:none!important}
}

/* R32: legibilidad a tamaño real — trazos +35%, fila trasera menos fantasma */
.hero .v9-crowd2 path[stroke],.hero .v9-crowd2 circle[stroke]{stroke-width:2.5px}
.hero .v9-crowd2.back{opacity:.75}
.hero .v9-crowd2.back g[opacity=".32"]{opacity:.6}

/* R33: articulaciones de neon con glow en los nodos pequenos de los bailarines */
.hero .v9-crowd2 .v9-joint{fill:#FFF8E1!important;filter:url(#v9bwJointGlow);opacity:1}
.hero .v9-planks line{paint-order:stroke}