/**
 * CHS Portal — Global Entry Animations v4.0
 * Aplica en todas las páginas del portal frontend.
 * Incluye: loader con caballos corriendo, animaciones de entrada,
 *          counters, progress bars, hover effects, stagger strips.
 */

/* ══════════════════════════════════════════════════════════════════════
   KEYFRAMES
   ══════════════════════════════════════════════════════════════════ */
@keyframes chsFadeUp    { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:translateY(0)} }
@keyframes chsFadeDown  { from{opacity:0;transform:translateY(-18px)} to{opacity:1;transform:translateY(0)} }
@keyframes chsFadeIn    { from{opacity:0} to{opacity:1} }
@keyframes chsSlideR    { from{opacity:0;transform:translateX(-22px)} to{opacity:1;transform:translateX(0)} }
@keyframes chsSlideL    { from{opacity:0;transform:translateX(22px)} to{opacity:1;transform:translateX(0)} }
@keyframes chsScalePop  { from{opacity:0;transform:scale(.88)} to{opacity:1;transform:scale(1)} }
@keyframes chsSpring    { 0%{opacity:0;transform:scale(.82)} 60%{transform:scale(1.04)} 80%{transform:scale(.98)} 100%{opacity:1;transform:scale(1)} }
@keyframes chsBlurIn    { from{opacity:0;filter:blur(6px)} to{opacity:1;filter:blur(0)} }
@keyframes chsShimmer   { 0%{background-position:-400px 0} 100%{background-position:400px 0} }
@keyframes chsGlow      { 0%,100%{box-shadow:0 0 0 0 rgba(39,164,100,0)} 50%{box-shadow:0 0 18px 3px rgba(39,164,100,.16)} }
@keyframes chsPulse     { 0%,100%{opacity:1} 50%{opacity:.55} }
/* Counter completion pop */
@keyframes chsCountPop  { 0%{transform:scale(1)} 40%{transform:scale(1.13)} 100%{transform:scale(1)} }
/* Progress bar bounce in */
@keyframes chsBarIn     { from{opacity:0;transform:scaleX(0);transform-origin:left} to{opacity:1;transform:scaleX(1)} }

/* ══════════════════════════════════════════════════════════════════════
   ANIMATE-ON-SCROLL  [data-anim]
   JS pone opacity:0 inicialmente; agrega .chs-revealed al intersectar.
   ══════════════════════════════════════════════════════════════════ */
[data-anim]               { opacity: 0; }
[data-anim].chs-revealed  { animation: chsFadeUp .5s cubic-bezier(.22,1,.36,1) both; }

[data-anim="slide"].chs-revealed    { animation: chsSlideR .44s cubic-bezier(.22,1,.36,1) both; }
[data-anim="slide-l"].chs-revealed  { animation: chsSlideL .44s cubic-bezier(.22,1,.36,1) both; }
[data-anim="pop"].chs-revealed      { animation: chsScalePop .4s cubic-bezier(.34,1.46,.64,1) both; }
[data-anim="spring"].chs-revealed   { animation: chsSpring .55s cubic-bezier(.34,1.4,.64,1) both; }
[data-anim="fade"].chs-revealed     { animation: chsFadeIn .45s ease both; }
[data-anim="down"].chs-revealed     { animation: chsFadeDown .44s cubic-bezier(.22,1,.36,1) both; }
[data-anim="blur"].chs-revealed     { animation: chsBlurIn .5s ease both; }

/* ══════════════════════════════════════════════════════════════════════
   STRIP STAGGER  [data-anim-strip]
   Hijos aparecen en cascada cuando el contenedor entra al viewport.
   ══════════════════════════════════════════════════════════════════ */
[data-anim-strip] > * { opacity: 0; }

[data-anim-strip].chs-strip-ready > *:nth-child(1)  { animation: chsFadeUp .42s cubic-bezier(.22,1,.36,1) .02s  both; }
[data-anim-strip].chs-strip-ready > *:nth-child(2)  { animation: chsFadeUp .42s cubic-bezier(.22,1,.36,1) .08s  both; }
[data-anim-strip].chs-strip-ready > *:nth-child(3)  { animation: chsFadeUp .42s cubic-bezier(.22,1,.36,1) .14s  both; }
[data-anim-strip].chs-strip-ready > *:nth-child(4)  { animation: chsFadeUp .42s cubic-bezier(.22,1,.36,1) .20s  both; }
[data-anim-strip].chs-strip-ready > *:nth-child(5)  { animation: chsFadeUp .42s cubic-bezier(.22,1,.36,1) .26s  both; }
[data-anim-strip].chs-strip-ready > *:nth-child(6)  { animation: chsFadeUp .42s cubic-bezier(.22,1,.36,1) .32s  both; }
[data-anim-strip].chs-strip-ready > *:nth-child(7)  { animation: chsFadeUp .42s cubic-bezier(.22,1,.36,1) .38s  both; }
[data-anim-strip].chs-strip-ready > *:nth-child(8)  { animation: chsFadeUp .42s cubic-bezier(.22,1,.36,1) .43s  both; }
[data-anim-strip].chs-strip-ready > *:nth-child(9)  { animation: chsFadeUp .42s cubic-bezier(.22,1,.36,1) .47s  both; }
[data-anim-strip].chs-strip-ready > *:nth-child(10) { animation: chsFadeUp .42s cubic-bezier(.22,1,.36,1) .50s  both; }
[data-anim-strip].chs-strip-ready > *:nth-child(11) { animation: chsFadeUp .42s cubic-bezier(.22,1,.36,1) .53s  both; }
[data-anim-strip].chs-strip-ready > *:nth-child(12) { animation: chsFadeUp .42s cubic-bezier(.22,1,.36,1) .56s  both; }

/* ══════════════════════════════════════════════════════════════════════
   AUTO-ANIMATE  (aplicado por JS a selectores conocidos)
   ══════════════════════════════════════════════════════════════════ */
.chs-auto-anim           { opacity: 0; }
.chs-auto-anim.chs-revealed { animation: chsFadeUp .46s cubic-bezier(.22,1,.36,1) both; }

/* ══════════════════════════════════════════════════════════════════════
   COUNTER POP — dispara cuando el número termina de contar
   ══════════════════════════════════════════════════════════════════ */
.chs-count-done {
    animation: chsCountPop .28s cubic-bezier(.34,1.56,.64,1) both;
    display: inline-block; /* necesario para que scale funcione */
}

/* ══════════════════════════════════════════════════════════════════════
   HOVER EFFECTS
   ══════════════════════════════════════════════════════════════════ */
.chs-hover-lift {
    transition: transform .22s cubic-bezier(.22,1,.36,1),
                box-shadow .22s cubic-bezier(.22,1,.36,1);
    cursor: pointer;
}
.chs-hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 32px rgba(0,0,0,.12);
}

.chs-hover-glow {
    transition: transform .22s cubic-bezier(.22,1,.36,1),
                box-shadow .22s cubic-bezier(.22,1,.36,1);
    cursor: pointer;
}
.chs-hover-glow:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 2px rgba(39,164,100,.25),
                0 8px 24px rgba(39,164,100,.1);
}

/* ── Dashboard shortcut hover ── */
.dh-shortcut {
    transition: transform .18s cubic-bezier(.22,1,.36,1),
                box-shadow .18s cubic-bezier(.22,1,.36,1),
                border-color .18s;
}
/* ── Quick stat card hover ── */
.dh-qstat {
    transition: transform .2s cubic-bezier(.22,1,.36,1),
                box-shadow .2s cubic-bezier(.22,1,.36,1);
}

/* ══════════════════════════════════════════════════════════════════════
   SKELETON SHIMMER
   ══════════════════════════════════════════════════════════════════ */
.chs-skeleton {
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 400px 100%;
    animation: chsShimmer 1.4s ease-in-out infinite;
    border-radius: 8px;
    color: transparent !important;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════
   PROGRESS BARS — smooth enter from 0 → target
   ══════════════════════════════════════════════════════════════════ */
.est-nivel-bar-fill,
.est-liga-cat-fill,
.est-dist-bar-fill,
.dh-level-bar-fill,
.dh-liga-bk-fill,
.dh-esc-bar-fill,
[data-prog-bar] {
    transition: width 1.1s cubic-bezier(.22,1,.36,1);
}

/* ══════════════════════════════════════════════════════════════════════
   GLOBAL PAGE LOADER  —  escena de hipódromo con caballos
   ══════════════════════════════════════════════════════════════════ */
#chs-page-loader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 15%   0%,  rgba(184,143,44,.3)  0%, transparent 38%),
        radial-gradient(ellipse at 85% 100%,  rgba(39,164,100,.2)  0%, transparent 40%),
        linear-gradient(160deg, #174f35 0%, #103826 55%, #0b2b1d 100%);
    opacity: 1;
    visibility: visible;
    transition: opacity .55s cubic-bezier(.4,0,.2,1),
                visibility .55s,
                transform .55s cubic-bezier(.4,0,.2,1);
}
#chs-page-loader.chs-loader-fade {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-10px) scale(1.015);
}

/* ── Logo ─────────────────────────────────────────────────────────── */
.chs-loader-logo {
    height: 64px;
    width: auto;
    flex-shrink: 0;
    margin-bottom: 16px;
    filter: drop-shadow(0 4px 28px rgba(0,0,0,.55));
    animation: chsFadeDown .55s cubic-bezier(.34,1.3,.64,1) .08s both;
}

/* ── Escena de carrera ────────────────────────────────────────────── */
.chs-loader-scene {
    position: relative;
    width: 100%;
    height: 100px;
    overflow: hidden;
    animation: chsFadeIn .35s ease .22s both;
    background: linear-gradient(to bottom,
        rgba(255,255,255,.03) 0%,
        transparent 50%);
}

/* Sombra de tribuna / stands en la parte alta */
.chs-ltribuna {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 36px;
    background: linear-gradient(to bottom,
        rgba(255,255,255,.025) 0%,
        transparent 100%);
    -webkit-mask-image:
        repeating-linear-gradient(90deg,
            transparent 0px, transparent 18px,
            rgba(0,0,0,.15) 18px, rgba(0,0,0,.15) 28px,
            transparent 28px, transparent 46px);
}

/* Piso de la pista */
.chs-lground {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 30px;
    background: linear-gradient(to top,
        rgba(4,22,12,.75) 0%,
        rgba(10,40,22,.3) 60%,
        transparent 100%);
    border-top: 1px solid rgba(255,255,255,.14);
    z-index: 1;
}
.chs-lground::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 6%; right: 6%;
    border-top: 1px dashed rgba(255,255,255,.09);
}
.chs-lground::after {
    content: '';
    position: absolute;
    top: -1px; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,.22) 20%,
        rgba(255,255,255,.22) 80%,
        transparent 100%);
}

/* ── Caballos ─────────────────────────────────────────────────────── */
.chs-lh-run {
    position: absolute;
    bottom: var(--y, 4px);
    z-index: 2;
    animation: chs-hrx var(--dur, 2s) linear var(--del, 0s) infinite;
    will-change: transform;
}
.chs-lhi {
    display: block;
    font-size: var(--sz, 36px);
    line-height: 1;
    animation: chs-hrbob var(--bd, .26s) ease-in-out infinite;
    filter:
        drop-shadow(0 3px 10px rgba(0,0,0,.65))
        drop-shadow(0 0 5px rgba(0,0,0,.3));
}

/* ─ Carrera D→I ─ */
@keyframes chs-hrx {
    from { transform: translateX(108vw); }
    to   { transform: translateX(-28vw); }
}
/* ─ Trote con rotación sutil ─ */
@keyframes chs-hrbob {
    0%,100% { transform: scaleX(-1) translateY(0px) rotate(0deg); }
    20%     { transform: scaleX(-1) translateY(-5px) rotate(-1.2deg); }
    50%     { transform: scaleX(-1) translateY(-3px) rotate(.3deg); }
    80%     { transform: scaleX(-1) translateY(-6px) rotate(-0.8deg); }
}

/* ── Bottom: barra + dots + texto ─────────────────────────────────── */
.chs-loader-btm {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    animation: chsFadeIn .35s ease .42s both;
}

.chs-loader-track {
    width: 240px;
    height: 3px;
    background: rgba(255,255,255,.1);
    border-radius: 100px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255,255,255,.05);
}
.chs-loader-bar {
    height: 100%;
    background: linear-gradient(90deg,
        #1a6b46, #27a464, #3dc282, #f5d76f, #27a464);
    background-size: 300% 100%;
    border-radius: 100px;
    animation:
        chs-lp 1.5s cubic-bezier(.4,0,.2,1) infinite,
        chs-ls 3s linear infinite;
}
@keyframes chs-lp {
    0%   { width: 0%;   margin-left: 0%;   }
    40%  { width: 65%;  margin-left: 0%;   }
    65%  { width: 65%;  margin-left: 35%;  }
    100% { width: 0%;   margin-left: 100%; }
}
@keyframes chs-ls {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

.chs-loader-dots {
    display: flex;
    gap: 6px;
}
.chs-loader-dots span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(255,255,255,.4);
    animation: chs-dp .9s ease-in-out infinite;
}
.chs-loader-dots span:nth-child(2) { animation-delay: .15s; }
.chs-loader-dots span:nth-child(3) { animation-delay: .30s; }
@keyframes chs-dp {
    0%,100% { transform: scale(1);   opacity: .35; }
    50%      { transform: scale(1.6); opacity: 1;   }
}

.chs-loader-text {
    font-family: 'Inter', 'Outfit', sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: rgba(255,255,255,.35);
    letter-spacing: .14em;
    text-transform: uppercase;
    margin: 0;
    min-height: 14px;
    transition: opacity .3s ease;
}

/* ── Mensaje fade en rotación ─────────────────────────────────────── */
@keyframes chs-msg-in  { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }
@keyframes chs-msg-out { from{opacity:1;transform:translateY(0)} to{opacity:0;transform:translateY(-4px)} }
.chs-loader-text.chs-msg-entering { animation: chs-msg-in .25s ease both; }
.chs-loader-text.chs-msg-leaving  { animation: chs-msg-out .2s ease both; }

/* ══════════════════════════════════════════════════════════════════════
   REDUCED MOTION  —  desactiva todo
   ══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    [data-anim],
    [data-anim-strip] > *,
    .chs-auto-anim {
        opacity: 1 !important;
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
    #chs-page-loader {
        display: none !important;
    }
    .chs-lhi,
    .chs-lh-run,
    .chs-loader-bar,
    .chs-loader-dots span {
        animation: none !important;
    }
    .chs-hover-lift:hover,
    .chs-hover-glow:hover {
        transform: none !important;
        box-shadow: none !important;
    }
    .chs-count-done {
        animation: none !important;
    }
    .est-nivel-bar-fill,
    .est-liga-cat-fill,
    .est-dist-bar-fill,
    .dh-level-bar-fill,
    .dh-liga-bk-fill,
    .dh-esc-bar-fill,
    [data-prog-bar] {
        transition: none !important;
    }
}