/* ============================================================
   animations.css — motion de la zona pública (solo head.php)
   Complementa AOS. Todo aquí respeta prefers-reduced-motion.
   ============================================================ */

/* ---- Seguridad reduced-motion: si el usuario lo pide, nada se mueve ---- */
@media (prefers-reduced-motion: reduce) {
    [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; }
    .hero__bg img { animation: none !important; }
    * { scroll-behavior: auto !important; }
}

/* ---- Reveal al scroll (lo dispara public-animations.js con la clase .in-view) ---- */
[data-aos] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity .7s ease, transform .8s cubic-bezier(.22, 1, .36, 1);
    will-change: opacity, transform;
}
[data-aos="fade-right"] { transform: translateX(-48px); }
[data-aos="fade-left"]  { transform: translateX(48px); }
[data-aos="zoom-in"]    { transform: scale(.92); }
[data-aos="fade-down"]  { transform: translateY(-40px); }
[data-aos].in-view      { opacity: 1; transform: none; }

/* ---- Hero: ken-burns muy lento del fondo + fade-in del contenido ---- */
@media (prefers-reduced-motion: no-preference) {
    /* contenido del hero entra escalonado al cargar */
    .hero__content > * { opacity: 0; animation: pwc-rise .8s cubic-bezier(.22,1,.36,1) forwards; }
    .hero__content > *:nth-child(1) { animation-delay: .10s; }
    .hero__content > *:nth-child(2) { animation-delay: .22s; }
    .hero__content > *:nth-child(3) { animation-delay: .34s; }
    .hero__content > *:nth-child(4) { animation-delay: .46s; }
    @keyframes pwc-rise {
        from { opacity: 0; transform: translateY(22px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* acento dorado del hero: crece al cargar */
    .hero__accent { transform-origin: left center; animation: pwc-accent .7s .5s cubic-bezier(.22,1,.36,1) backwards; }
    @keyframes pwc-accent { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* ---- Micro-interacciones (hover) — solo punteros finos ---- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .card, .step-card, .trust-item, .testimonial-card {
        transition: transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease, border-color .2s ease;
    }
    .card:hover, .step-card:hover, .trust-item:hover {
        transform: translateY(-4px);
        box-shadow: 0 14px 32px rgba(15, 23, 42, .10);
    }

    /* botones dorados: brillo que cruza al pasar el ratón */
    .btn--gold, .btn--white { position: relative; overflow: hidden; }
    .btn--gold::after, .btn--white::after {
        content: ""; position: absolute; top: 0; left: -120%; width: 80%; height: 100%;
        background: linear-gradient(110deg, transparent, rgba(255,255,255,.45), transparent);
        transform: skewX(-18deg); transition: left .6s ease; pointer-events: none;
    }
    .btn--gold:hover::after, .btn--white:hover::after { left: 130%; }

    /* iconos de feature/tarjeta: leve pop al hover de la tarjeta */
    .card:hover .card__icon, .trust-item:hover .trust-item__icon {
        transform: scale(1.08) rotate(-3deg);
        transition: transform .3s cubic-bezier(.34,1.56,.64,1);
    }
    .card__icon, .trust-item__icon { transition: transform .3s ease; }
}

/* ---- Barras de tier: se rellenan con brillo (el width lo anima el JS) ---- */
.tier-bar__fill { position: relative; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
    .tier-bar__fill::after {
        content: ""; position: absolute; inset: 0;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
        transform: translateX(-100%); animation: pwc-shimmer 2.4s ease-in-out 1s 2 both;
    }
    @keyframes pwc-shimmer { to { transform: translateX(100%); } }
}

/* ---- Imagen/mockup con borde flotante ---- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .two-experiences__visual img, .feature-shot img {
        transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease;
    }
    .two-experiences__visual:hover img, .feature-shot:hover img {
        transform: translateY(-6px) scale(1.01);
        box-shadow: 0 24px 50px rgba(15, 23, 42, .18);
    }
}

/* ============================================================
   HERO v2 — aurora + halo + flotación + órbita + partículas
   ============================================================ */
.hero--v2 { position: relative; overflow: hidden; }
.hero--v2 .hero__content { position: relative; z-index: 4; }
.hero--v2 .hero__overlay { z-index: 2; }

/* Aurora de fondo (glows que derivan) */
.hero__aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero__blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; will-change: transform; }
.hero__blob--1 { width: 46vw; height: 46vw; left: -8vw; top: -10vw; background: radial-gradient(circle, rgba(212,168,67,.50), transparent 68%); }
.hero__blob--2 { width: 52vw; height: 52vw; right: -12vw; bottom: -16vw; background: radial-gradient(circle, rgba(255,215,0,.34), transparent 68%); }
.hero__blob--3 { width: 34vw; height: 34vw; left: 42%; top: 28%; background: radial-gradient(circle, rgba(99,102,241,.22), transparent 70%); }

/* Logo: halo dorado tras el globo */
.hero--v2 .hero__bg { z-index: 1; will-change: transform; }
.hero__glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 68% 46%, rgba(212,168,67,.38), transparent 46%); }

/* Órbita de la bola dorada */
.hero__orbit { position: absolute; top: 46%; left: 68%; width: 0; height: 0; z-index: 3; pointer-events: none; }
.hero__orbit-ball { position: absolute; width: 18px; height: 18px; margin: -9px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff8e1, #D4A843 55%, #8a6418);
    box-shadow: 0 0 16px 4px rgba(212,168,67,.65); transform: translateX(min(20vw, 300px)); }

/* Partículas (bolas que suben) */
.hero__particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero__particle { position: absolute; bottom: -24px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, rgba(255,248,225,.9), rgba(212,168,67,.5) 60%, transparent 72%); }

/* Indicador de scroll */
.hero__scrollcue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 5; display: block; width: 26px; height: 42px; opacity: .8; }
.hero__scrollcue-mouse { display: block; width: 24px; height: 38px; border: 2px solid rgba(255,255,255,.7); border-radius: 13px; }
.hero__scrollcue-wheel { position: absolute; top: 7px; left: 50%; width: 4px; height: 8px; margin-left: -2px; background: rgba(255,255,255,.9); border-radius: 2px; }

/* Titular: "jugadores y clubs" en degradado dorado */
.hero__title-grad { background: linear-gradient(95deg, #FFE9A8 0%, #D4A843 45%, #FFD700 70%, #F5C84B 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; background-size: 200% auto; }

@media (prefers-reduced-motion: no-preference) {
    /* Fondo QUIETO: la aurora, el halo y el logo NO se mueven (la deriva daba mareo).
       Quedan como ambiente estático de color. Solo entrada (fade) una vez. */
    .hero--v2 .hero__bg img { animation: pwc-fadein 1.3s ease both; }
    @keyframes pwc-fadein { from { opacity: 0; } to { opacity: 1; } }

    .hero__orbit { animation: pwc-spin 16s linear infinite; }
    @keyframes pwc-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

    .hero__scrollcue { animation: pwc-cuebob 2s ease-in-out infinite; }
    @keyframes pwc-cuebob { 0%, 100% { transform: translateX(-50%) translateY(0); opacity: .8; } 50% { transform: translateX(-50%) translateY(6px); opacity: .4; } }
    .hero__scrollcue-wheel { animation: pwc-wheel 1.6s ease-in-out infinite; }
    @keyframes pwc-wheel { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 60% { opacity: 1; transform: translateY(10px); } 100% { opacity: 0; transform: translateY(10px); } }

    .hero__title-grad { animation: pwc-titleshine 6s linear infinite; }
    @keyframes pwc-titleshine { to { background-position: 200% center; } }

    @keyframes pwc-rise-particle { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: 1; } 88% { opacity: .55; } 100% { transform: translateY(-102vh); opacity: 0; } }
}

/* ============================================================
   Mockups "Dos experiencias": sombra de profundidad (drop-shadow
   sigue la silueta del PNG transparente) + flotado sutil.
   ============================================================ */
.two-experiences__visual img { filter: drop-shadow(0 20px 42px rgba(0, 0, 0, .45)); transition: filter .35s ease; }
.two-experiences__visual:hover img { box-shadow: none !important; filter: drop-shadow(0 30px 56px rgba(0, 0, 0, .55)); }
@media (prefers-reduced-motion: no-preference) {
    .two-experiences__col:nth-of-type(1) .two-experiences__visual img { animation: pwc-floaty 6s ease-in-out infinite; }
    .two-experiences__col:nth-of-type(2) .two-experiences__visual img { animation: pwc-floaty 6.6s ease-in-out 1.2s infinite; }
    .two-experiences__visual:hover img { animation-play-state: paused; }
    @keyframes pwc-floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } }
}