/* ============================================
   Escena Padel - dos jugadores + red + pelota (rally)
   Movimiento natural por JS (canchafija-scene-padel.js).
   ============================================ */

.cf-padel {
    --cps-sky: #75aadb;
    --cps-sky-dark: #4f8fc4;
    --cps-navy: #16335c;
    --cps-white: #ffffff;
    --cps-skin: #e8b585;
    --cps-skin-2: #d9a06b;
    --cps-shorts: #0e1b2e;
    --cps-hair: #3b2a1a;
    --cps-shoe: #1a1a1a;
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.cf-padel-net {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 7px;
    height: 30px;
    background:
        linear-gradient(#ffffff, #ffffff) top / 100% 2px no-repeat,
        repeating-linear-gradient(0deg, rgba(20, 40, 30, 0.45) 0 1.5px, transparent 1.5px 4px),
        repeating-linear-gradient(90deg, rgba(20, 40, 30, 0.45) 0 1.5px, transparent 1.5px 4px);
    border-radius: 1px;
}

.cf-padel-player {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 46px;
}

.cf-padel-player-svg {
    display: block;
    height: 100%;
    width: auto;
    overflow: visible;
}

.cf-padel-body { height: 100%; animation: cf-ppl-bob 0.7s ease-in-out infinite; }
.cf-padel-p2 .cf-padel-body { animation-delay: -0.4s; }
.cf-ppl-leg,
.cf-ppl-arm { transform-box: view-box; }
.cf-ppl-leg-a { transform-origin: 29px 53px; animation: cf-ppl-legA 0.7s ease-in-out infinite; }
.cf-ppl-leg-b { transform-origin: 31px 53px; animation: cf-ppl-legB 0.7s ease-in-out infinite; }
.cf-ppl-arm { transform-origin: 30px 30px; animation: cf-ppl-arm 0.7s ease-in-out infinite; }

.cf-padel-p1 { left: 6%; }
.cf-padel-p2 { left: auto; right: 6%; transform: scaleX(-1); }

.cf-padel-swing {
    transform-box: view-box;
    transform-origin: 33px 30px;
    transform: rotate(-26deg);
}

.cf-padel-swing--hit {
    animation: cf-padel-hit 0.45s ease-out;
}

.cf-padel-ball {
    position: absolute;
    bottom: 0;
    width: 9px;
    left: 0;
}

.cf-padel-ball-svg { display: block; width: 100%; height: auto; }

/* Variante strip (home) - mas grande */
.cf-padel--strip .cf-padel-player { height: 88px; }
.cf-padel--strip .cf-padel-net { height: 56px; width: 10px; }
.cf-padel--strip .cf-padel-ball { width: 15px; bottom: 0; }

@keyframes cf-padel-hit {
    0%   { transform: rotate(-52deg); }
    40%  { transform: rotate(34deg); }
    100% { transform: rotate(-26deg); }
}

@keyframes cf-ppl-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2px); }
}
@keyframes cf-ppl-legA {
    0%, 100% { transform: rotate(20deg); }
    50%      { transform: rotate(-20deg); }
}
@keyframes cf-ppl-legB {
    0%, 100% { transform: rotate(-20deg); }
    50%      { transform: rotate(20deg); }
}
@keyframes cf-ppl-arm {
    0%, 100% { transform: rotate(-10deg); }
    50%      { transform: rotate(10deg); }
}

/* Responsive */
@media (max-width: 576px) {
    .cf-padel-player { height: 36px; }
    .cf-padel-net { height: 24px; }
    .cf-padel-ball { width: 7px; bottom: 0; }
    .cf-padel--strip .cf-padel-player { height: 68px; }
    .cf-padel--strip .cf-padel-net { height: 44px; }
    .cf-padel--strip .cf-padel-ball { width: 12px; bottom: 0; }
}

.cf-padel-player.cf-padel-still .cf-ppl-leg-a,
.cf-padel-player.cf-padel-still .cf-ppl-leg-b,
.cf-padel-player.cf-padel-still .cf-ppl-arm,
.cf-padel-player.cf-padel-still .cf-padel-body { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
    .cf-padel-swing--hit,
    .cf-padel-body,
    .cf-ppl-leg-a,
    .cf-ppl-leg-b,
    .cf-ppl-arm { animation: none !important; }
}