/* ═══════════════════════════════════════════════════════════
   PuffCase — index_animaciones.css
   Animaciones profesionales para la página de inicio
   ═══════════════════════════════════════════════════════════ */

/* ── KEYFRAMES BASE ─────────────────────────────────────────── */
@keyframes ix-rise {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes ix-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes ix-left {
    from { opacity: 0; transform: translateX(-24px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes ix-right {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes ix-scale {
    from { opacity: 0; transform: scale(.88); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes ix-pop {
    0%   { opacity: 0; transform: scale(.7) rotate(-8deg); }
    70%  { transform: scale(1.08) rotate(2deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* ── HERO ───────────────────────────────────────────────────── */

/* Fondo del hero: gradient animado lento */
@keyframes ix-hero-bg {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.hero-section,
.hero-wrap {
    background-size: 200% 200% !important;
    animation: ix-hero-bg 12s ease infinite;
}

/* Partículas flotantes decorativas en el hero */
.hero-section { position: relative; overflow: hidden; }
.hero-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle 2px at 20% 30%, rgba(181,123,255,.35) 0%, transparent 100%),
        radial-gradient(circle 1px at 70% 20%, rgba(240,192,64,.25) 0%, transparent 100%),
        radial-gradient(circle 2px at 85% 70%, rgba(124,58,237,.3) 0%, transparent 100%),
        radial-gradient(circle 1px at 40% 80%, rgba(181,123,255,.2) 0%, transparent 100%);
    pointer-events: none;
    animation: ix-fade 1.5s ease 1s both;
}

/* Título hero */
.hero-title, .hero-h1 {
    animation: ix-rise .7s cubic-bezier(.22,1,.36,1) .1s both;
}
/* Subtítulo */
.hero-sub, .hero-desc {
    animation: ix-rise .7s cubic-bezier(.22,1,.36,1) .25s both;
}
/* Botones CTA */
.hero-cta, .hero-btns, .hero-actions {
    animation: ix-rise .6s cubic-bezier(.22,1,.36,1) .4s both;
}
/* Stats del hero (si existen) */
.hero-stats {
    animation: ix-fade .8s ease .6s both;
}

/* ── NAVEGACIÓN ─────────────────────────────────────────────── */
/* Sin animación en el header/nav: se repite en cada navegación y resulta molesto */

/* ── SECCIONES — scroll reveal con Intersection Observer ─────── */
/* Estado inicial (oculto) */
.ix-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .65s cubic-bezier(.22,1,.36,1),
                transform .65s cubic-bezier(.22,1,.36,1);
}
.ix-reveal.ix-visible {
    opacity: 1;
    transform: translateY(0);
}
.ix-reveal-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
.ix-reveal-left.ix-visible {
    opacity: 1;
    transform: translateX(0);
}
.ix-reveal-scale {
    opacity: 0;
    transform: scale(.93);
    transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
}
.ix-reveal-scale.ix-visible {
    opacity: 1;
    transform: scale(1);
}

/* ── MINIJUEGOS — tarjetas ──────────────────────────────────── */

/* Icono CoinFlip SVG (reemplaza emoji vacío) */
.mj-index-card-icon--coinflip {
    width: 64px; height: 64px;
    background: linear-gradient(135deg, var(--purple-mid), #1a1035);
    border: 2px solid var(--purple-accent);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    position: relative;
    transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.mj-index-card:hover .mj-index-card-icon--coinflip {
    transform: rotateY(180deg);
    box-shadow: 0 0 24px rgba(124,58,237,.5);
}

/* Animación flip de moneda */
@keyframes ix-coin-flip {
    0%   { transform: rotateY(0); }
    50%  { transform: rotateY(180deg) scale(1.1); }
    100% { transform: rotateY(360deg); }
}
.mj-index-card--active:hover .mj-index-card-icon {
    animation: ix-coin-flip .6s ease;
}

/* Para upgrade: icono rayo con flash */
@keyframes ix-bolt-flash {
    0%,100% { filter: none; }
    50%     { filter: drop-shadow(0 0 8px rgba(240,192,64,1)); }
}
.mj-index-card:nth-child(2):hover .mj-index-card-icon {
    animation: ix-bolt-flash .5s ease;
}

/* Para jackpot: slot machine spin */
@keyframes ix-slot-spin {
    0%   { transform: translateY(0) scale(1); }
    30%  { transform: translateY(-4px) scale(1.15); }
    60%  { transform: translateY(2px) scale(.95); }
    100% { transform: translateY(0) scale(1); }
}
.mj-index-card:nth-child(3):hover .mj-index-card-icon {
    animation: ix-slot-spin .5s cubic-bezier(.34,1.56,.64,1);
}

/* Stagger en cards de minijuegos */
.mj-index-card:nth-child(1) { animation: ix-rise .5s ease .1s both; }
.mj-index-card:nth-child(2) { animation: ix-rise .5s ease .2s both; }
.mj-index-card:nth-child(3) { animation: ix-rise .5s ease .3s both; }

/* Badge "En vivo" — pulso continuo */
@keyframes ix-live-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(76,175,125,0); }
    50%       { box-shadow: 0 0 0 5px rgba(76,175,125,.15); }
}
.mj-index-badge--live {
    animation: ix-live-pulse 2s ease-in-out infinite;
}

/* Hover en "Ver todos" */
.mj-index-ver-todos {
    transition: all .25s cubic-bezier(.22,1,.36,1) !important;
}
.mj-index-ver-todos:hover {
    letter-spacing: .8px !important;
}

/* ── SORTEOS ────────────────────────────────────────────────── */
/* Stagger en cards de sorteos */
.sorteo-index-card:nth-child(1) { animation: ix-rise .45s ease .05s both; }
.sorteo-index-card:nth-child(2) { animation: ix-rise .45s ease .15s both; }
.sorteo-index-card:nth-child(3) { animation: ix-rise .45s ease .25s both; }
.sorteo-index-card:nth-child(4) { animation: ix-rise .45s ease .35s both; }

.sorteo-index-card {
    transition: transform .25s cubic-bezier(.22,1,.36,1),
                box-shadow .25s ease,
                border-color .25s ease !important;
}
.sorteo-index-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 14px 40px rgba(124,58,237,.3) !important;
}

/* Icono del sorteo con rebote */
.sorteo-nuevo-icon {
    transition: transform .3s cubic-bezier(.34,1.56,.64,1) !important;
}
.sorteo-index-card:hover .sorteo-nuevo-icon {
    transform: scale(1.2) rotate(-5deg) !important;
}

/* ── TIENDA / SKINS ─────────────────────────────────────────── */
.tienda-index-card:nth-child(1) { animation: ix-scale .4s ease .0s both; }
.tienda-index-card:nth-child(2) { animation: ix-scale .4s ease .08s both; }
.tienda-index-card:nth-child(3) { animation: ix-scale .4s ease .16s both; }
.tienda-index-card:nth-child(4) { animation: ix-scale .4s ease .24s both; }
.tienda-index-card:nth-child(5) { animation: ix-scale .4s ease .32s both; }
.tienda-index-card:nth-child(6) { animation: ix-scale .4s ease .40s both; }

.tienda-index-card {
    transition: transform .22s cubic-bezier(.22,1,.36,1),
                box-shadow .22s ease,
                border-color .22s ease !important;
}
.tienda-index-card:hover {
    transform: translateY(-6px) scale(1.02) !important;
    box-shadow: 0 16px 44px rgba(124,58,237,.32) !important;
}

/* Imagen de skin zoom suave */
.tienda-index-card img {
    transition: transform .35s ease !important;
}
.tienda-index-card:hover img {
    transform: scale(1.1) !important;
}

/* ── PROMOCODES ─────────────────────────────────────────────── */
.promo-card {
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
.promo-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 30px rgba(124,58,237,.25) !important;
}

/* ── SECTION TITLES ─────────────────────────────────────────── */
.section-title {
    animation: ix-fade .5s ease both;
}

/* Línea decorativa bajo section-title */
.section-title::after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--purple-accent), var(--purple-glow), transparent);
    margin: 8px auto 0;
    border-radius: 2px;
    transition: width .6s cubic-bezier(.22,1,.36,1);
}
.section-title.ix-visible::after,
.ix-visible .section-title::after {
    width: 80px;
}

/* ── DIVIDERS ───────────────────────────────────────────────── */
@keyframes ix-gem-spin {
    from { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(180deg) scale(1.3); }
    to   { transform: rotate(360deg) scale(1); }
}
.section-divider-gem {
    animation: ix-gem-spin 6s linear infinite;
}

/* ── FOOTER ─────────────────────────────────────────────────── */
footer {
    animation: ix-fade .6s ease both;
}

/* ── CHAT TOGGLE ────────────────────────────────────────────── */
/* Sin animación extra: el botón tiene su propio estilo en chat.css */

/* ── SCROLL REVEAL OBSERVER JS ──────────────────────────────── */
/* (activado por el script al final del archivo) */

/* ── ACCESIBILIDAD ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
    .ix-reveal, .ix-reveal-left, .ix-reveal-scale {
        opacity: 1 !important;
        transform: none !important;
    }
}