/* ==========================================================================
   Nia - Motion (micro-interactions, entrees de page, feedback, etats)
   Charge apres nia-theme.css / nia.css : ne redefinit aucune couleur, ne fait
   qu'ajouter transitions/animations sur les classes existantes.
   Regle d'or : 200-400ms, ease-out / ease-in-out, jamais de mouvement large.
   ========================================================================== */

:root {
    --nia-dur-fast: 220ms;
    --nia-dur: 320ms;
    --nia-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* ease-out doux */
    --nia-ease-inout: cubic-bezier(0.45, 0, 0.15, 1);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   Texture de fond subtile (runes + grain) sur les pages nia-*
   Pur CSS (data-URI SVG), aucune image a charger, opacite tres faible pour
   ne jamais nuire a la lisibilite du texte par-dessus.
   -------------------------------------------------------------------------- */
.nia-page {
    position: relative;
}
.nia-page::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.05;
    background-image:
        radial-gradient(circle at 20% 15%, rgba(232,163,61,.5) 0, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(143,111,240,.5) 0, transparent 40%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1' opacity='0.5'%3E%3Cline x1='20' y1='10' x2='20' y2='26'/%3E%3Cline x1='12' y1='18' x2='28' y2='18'/%3E%3Cline x1='95' y1='70' x2='95' y2='84'/%3E%3Cline x1='88' y1='77' x2='102' y2='77'/%3E%3Ccircle cx='60' cy='95' r='2'/%3E%3Ccircle cx='10' cy='100' r='1.4'/%3E%3Ccircle cx='105' cy='15' r='1.4'/%3E%3C/g%3E%3C/svg%3E");
    background-size: auto, auto, 260px 260px;
    z-index: 0;
}
#nia-header, .nia-hero, .nia-section, .nia-modal { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   Fade-in / entree de page, en cascade
   Usage : ajouter class="nia-in" sur un conteneur, et style="--nia-delay:Nms"
   pour decaler chaque enfant d'une meme section.
   -------------------------------------------------------------------------- */
@keyframes nia-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.nia-in {
    animation: nia-fade-up 480ms var(--nia-ease) both;
    animation-delay: var(--nia-delay, 0ms);
}

/* Cascade automatique pour une grille (packs, actus, specs) sans avoir a
   poser --nia-delay a la main sur chaque carte. */
.nia-grid.nia-in-stagger > *,
.nia-news-grid.nia-in-stagger > *,
.nia-specs-grid.nia-in-stagger > * {
    opacity: 0;
    animation: nia-fade-up 480ms var(--nia-ease) both;
}
.nia-grid.nia-in-stagger > *:nth-child(1),  .nia-news-grid.nia-in-stagger > *:nth-child(1),  .nia-specs-grid.nia-in-stagger > *:nth-child(1)  { animation-delay: 80ms; }
.nia-grid.nia-in-stagger > *:nth-child(2),  .nia-news-grid.nia-in-stagger > *:nth-child(2),  .nia-specs-grid.nia-in-stagger > *:nth-child(2)  { animation-delay: 140ms; }
.nia-grid.nia-in-stagger > *:nth-child(3),  .nia-news-grid.nia-in-stagger > *:nth-child(3),  .nia-specs-grid.nia-in-stagger > *:nth-child(3)  { animation-delay: 200ms; }
.nia-grid.nia-in-stagger > *:nth-child(4),  .nia-news-grid.nia-in-stagger > *:nth-child(4),  .nia-specs-grid.nia-in-stagger > *:nth-child(4)  { animation-delay: 260ms; }
.nia-grid.nia-in-stagger > *:nth-child(5),  .nia-news-grid.nia-in-stagger > *:nth-child(5),  .nia-specs-grid.nia-in-stagger > *:nth-child(5)  { animation-delay: 320ms; }
.nia-grid.nia-in-stagger > *:nth-child(6),  .nia-news-grid.nia-in-stagger > *:nth-child(6)   { animation-delay: 380ms; }

/* --------------------------------------------------------------------------
   Boutons d'action (orange) - elevation + teinte plus chaude au survol
   -------------------------------------------------------------------------- */
.nia-cta--primary,
.nia-btn-login,
.nia-btn--card,
.nia-btn--dl,
.nia-modal-submit {
    transition: transform var(--nia-dur) var(--nia-ease),
                box-shadow var(--nia-dur) var(--nia-ease),
                filter var(--nia-dur) var(--nia-ease),
                background var(--nia-dur) var(--nia-ease);
}
.nia-cta--primary:hover,
.nia-btn-login:hover,
.nia-btn--card:hover,
.nia-btn--dl:hover,
.nia-modal-submit:hover {
    filter: brightness(1.08) saturate(1.05);
}

.nia-cta--secondary,
.nia-btn--crypto {
    transition: transform var(--nia-dur) var(--nia-ease),
                border-color var(--nia-dur) var(--nia-ease),
                background var(--nia-dur) var(--nia-ease);
}

/* --------------------------------------------------------------------------
   Cartes de packs - elevation au survol
   -------------------------------------------------------------------------- */
.nia-card {
    transition: transform var(--nia-dur) var(--nia-ease),
                border-color var(--nia-dur) var(--nia-ease),
                box-shadow var(--nia-dur) var(--nia-ease);
}
.nia-card:hover {
    transform: translateY(-5px);
    border-color: var(--nia-accent, #f0a020);
    box-shadow: 0 14px 34px rgba(0,0,0,.35);
}
.nia-card--featured:hover {
    box-shadow: 0 0 0 1px rgba(240,160,32,.35), 0 16px 38px rgba(0,0,0,.4);
}

.nia-news-card {
    transition: transform var(--nia-dur) var(--nia-ease), box-shadow var(--nia-dur) var(--nia-ease);
}
.nia-news-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,.3);
}

/* --------------------------------------------------------------------------
   Nav du header - icone + libelle, leger effet au survol
   -------------------------------------------------------------------------- */
.nia-nav a {
    transition: background var(--nia-dur) var(--nia-ease), color var(--nia-dur) var(--nia-ease);
}
.nia-nav a svg {
    transition: transform var(--nia-dur-fast) var(--nia-ease), color var(--nia-dur-fast) var(--nia-ease);
    vertical-align: -3px;
    margin-right: 6px;
}
.nia-nav a:hover svg {
    transform: rotate(-8deg) scale(1.08);
    color: var(--nia-amber-bright);
}

/* --------------------------------------------------------------------------
   Statut serveur - pulsation douce quand en ligne
   -------------------------------------------------------------------------- */
@keyframes nia-pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(79, 209, 165, 0.55); }
    50%      { box-shadow: 0 0 0 6px rgba(79, 209, 165, 0); }
}
.nia-status-dot.online {
    animation: nia-pulse-glow 2.2s var(--nia-ease-inout) infinite;
}

/* --------------------------------------------------------------------------
   Feedback bouton "Voter sur serveur-prive.net" (etat valide temporaire)
   Classe ajoutee/retiree en JS (voir footer du script vote) : passe le
   bouton au vert avec un check, puis rouvre son etat normal.
   -------------------------------------------------------------------------- */
.nia-cta.nia-cta--validating {
    background: linear-gradient(180deg, #6ee6a0, var(--nia-ok, #4fd1a5)) !important;
    color: #06331d !important;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Spinner inline pour boutons de paiement pendant la redirection
   -------------------------------------------------------------------------- */
@keyframes nia-spin { to { transform: rotate(360deg); } }
.nia-spinner {
    display: inline-block;
    width: 14px; height: 14px;
    border: 2px solid rgba(0,0,0,.25);
    border-top-color: currentColor;
    border-radius: 50%;
    animation: nia-spin 650ms linear infinite;
    margin-right: 7px;
    vertical-align: -2px;
}
.nia-btn[disabled] { opacity: .85; cursor: wait; }