/* ============================================================
   NEXORA — PREMIUM LAYER
   Couche additive : animations, micro-interactions & polish.
   Ne remplace rien — s'appuie sur les variables de style.css
   (--gold, --dark*, --serif…). Thème conservé.
============================================================ */

/* ── Tokens locaux ── */
:root{
    --pr-ease: cubic-bezier(.22,.61,.36,1);
    --pr-glow: 0 24px 60px -22px rgba(200,169,110,.35);
}

/* ════════════════════════════════════════════
   1. BARRE DE PROGRESSION DE SCROLL
════════════════════════════════════════════ */
.pr-progress{
    position: fixed; top: 0; left: 0; height: 2px; width: 0%;
    z-index: 400; pointer-events: none;
    background: linear-gradient(90deg, var(--gold-dim), var(--gold), var(--gold-pale));
    box-shadow: 0 0 14px rgba(200,169,110,.55);
    transition: width .12s linear;
}

/* ════════════════════════════════════════════
   2. SCROLL REVEAL
════════════════════════════════════════════ */
.pr-reveal{
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity .85s var(--pr-ease),
        transform .85s var(--pr-ease),
        filter .85s var(--pr-ease);
    filter: blur(6px);
    transition-delay: var(--pr-d, 0s);
    will-change: opacity, transform;
}
.pr-reveal.pr-left  { transform: translateX(-42px); }
.pr-reveal.pr-right { transform: translateX(42px); }
.pr-reveal.pr-scale { transform: scale(.94); }
.pr-reveal.pr-in{
    opacity: 1;
    transform: none;
    filter: blur(0);
}

/* ════════════════════════════════════════════
   3. HÉRO — FX (particules + aurore)
════════════════════════════════════════════ */
.banner-fx{
    position: absolute; inset: 0; z-index: 1;
    overflow: hidden; pointer-events: none;
}
/* Halo doré qui respire derrière le contenu */
.banner-fx__aurora{
    position: absolute; left: 50%; top: 48%;
    width: 70vw; height: 70vw; max-width: 1000px; max-height: 1000px;
    transform: translate(-50%,-50%);
    background: radial-gradient(circle, rgba(200,169,110,.16) 0%, rgba(200,169,110,.05) 38%, transparent 66%);
    filter: blur(20px);
    animation: pr-breathe 9s ease-in-out infinite;
}
@keyframes pr-breathe{
    0%,100%{ opacity:.55; transform:translate(-50%,-50%) scale(1); }
    50%    { opacity:1;   transform:translate(-50%,-50%) scale(1.12); }
}
/* Poussière dorée flottante */
.pr-particle{
    position: absolute; bottom: -12px;
    width: 3px; height: 3px; border-radius: 50%;
    background: var(--gold-light);
    opacity: 0;
    box-shadow: 0 0 8px rgba(200,169,110,.8);
    animation: pr-float linear infinite;
}
@keyframes pr-float{
    0%   { transform: translateY(0) translateX(0); opacity: 0; }
    12%  { opacity: .9; }
    88%  { opacity: .7; }
    100% { transform: translateY(-118vh) translateX(var(--pr-drift, 20px)); opacity: 0; }
}

/* Grille du héro : on la fait dériver lentement (la grille existe déjà en ::after) */
.banner-section::after{
    animation: pr-grid-drift 28s linear infinite;
}
@keyframes pr-grid-drift{
    from { background-position: 0 0, 0 0; }
    to   { background-position: 60px 60px, 60px 60px; }
}

/* Le contenu du héro reste au-dessus des FX */
.banner-section .container{ z-index: 3 !important; }

/* Titre : dégradé doré animé (shimmer) */
.banner-content__title span,
.banner-content__title em{
    background-size: 220% 100% !important;
    animation: pr-shimmer 6s ease-in-out infinite;
}
@keyframes pr-shimmer{
    0%,100%{ background-position: 0% 50%; }
    50%    { background-position: 100% 50%; }
}

/* Indicateur de défilement sous le héro */
.pr-scrollcue{
    position: absolute; left: 50%; bottom: 26px; z-index: 4;
    transform: translateX(-50%);
    width: 22px; height: 36px; border-radius: 12px;
    border: 1px solid rgba(200,169,110,.4);
    display: flex; justify-content: center;
    pointer-events: none;
}
.pr-scrollcue::before{
    content: ''; width: 3px; height: 8px; margin-top: 6px; border-radius: 2px;
    background: var(--gold);
    animation: pr-cue 1.8s var(--pr-ease) infinite;
}
@keyframes pr-cue{
    0%   { opacity: 0; transform: translateY(-4px); }
    40%  { opacity: 1; }
    80%  { opacity: 0; transform: translateY(12px); }
    100% { opacity: 0; }
}

/* ════════════════════════════════════════════
   4. BOUTONS — balayage lumineux
════════════════════════════════════════════ */
.btn.btn--base{
    position: relative;
    overflow: hidden;
    z-index: 0;
}
.btn.btn--base::after{
    content: ''; position: absolute; top: 0; left: -130%;
    width: 60%; height: 100%; z-index: -1;
    background: linear-gradient(115deg, transparent, rgba(245,242,237,.32), transparent);
    transform: skewX(-20deg);
    transition: left .6s var(--pr-ease);
}
.btn.btn--base:hover::after{ left: 130%; }
.btn.btn--base{ transition: var(--tr), transform .3s var(--pr-ease) !important; }
.btn.btn--base:hover{ transform: translateY(-2px); }

/* ════════════════════════════════════════════
   5. CARTES — élévation, lueur & projecteur
════════════════════════════════════════════ */
.plan-card,
.investor-item,
.testimonial-item,
.deposit-withdraw-item,
.choose-item,
.step-item,
.referral-counter,
.about-thumb,
.why-choose-thumb{
    transition:
        transform .45s var(--pr-ease),
        box-shadow .45s var(--pr-ease),
        background var(--tr),
        outline-color var(--tr) !important;
}

/* Projecteur qui suit le curseur sur les cartes plan */
.plan-card > *{ position: relative; z-index: 1; }
.plan-card::after{
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(260px circle at var(--pr-mx,50%) var(--pr-my,50%),
                rgba(200,169,110,.14), transparent 62%);
    opacity: 0; transition: opacity .4s var(--pr-ease);
}
.plan-card:hover{
    transform: translateY(-8px);
    box-shadow: var(--pr-glow);
    outline-color: rgba(200,169,110,.28) !important;
}
.plan-card:hover::after{ opacity: 1; }

.investor-item:hover{
    transform: translateY(-5px);
    box-shadow: 0 18px 42px -20px rgba(200,169,110,.4);
}
.investor-item:nth-child(-n+3):hover{
    box-shadow: 0 18px 46px -18px rgba(200,169,110,.55);
}

.testimonial-item:hover{
    transform: translateY(-6px);
    box-shadow: var(--pr-glow);
}

.deposit-withdraw-item{ position: relative; }
.deposit-withdraw-item:hover{
    transform: translateX(4px);
    background: var(--dark3) !important;
}

.about-thumb:hover img,
.why-choose-thumb:hover img{
    transform: scale(1.04);
}
.about-thumb img,
.why-choose-thumb img{ transition: transform .8s var(--pr-ease); }

/* ════════════════════════════════════════════
   6. TITRES DE SECTION — trait doré qui se trace
════════════════════════════════════════════ */
.section-heading__title{ position: relative; display: inline-block; }
.section-heading__title::after{
    content: ''; position: absolute; left: 50%; bottom: -14px;
    height: 1px; width: 0;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    transition: width 1s var(--pr-ease) .25s;
}
.section-heading.pr-in .section-heading__title::after,
.section-heading.pr-reveal.pr-in .section-heading__title::after{ width: 120px; }
.section-heading.style-left .section-heading__title::after{ left: 0; transform: none; }

/* ════════════════════════════════════════════
   7. LOGO — pulsation de la marque
════════════════════════════════════════════ */
.logo-mark{ position: relative; }
.logo-mark::after{
    content: ''; position: absolute; inset: -3px; border-radius: inherit;
    border: 1px solid rgba(200,169,110,.5);
    opacity: 0;
    animation: pr-pulse 3.2s var(--pr-ease) infinite;
}
@keyframes pr-pulse{
    0%   { opacity: .55; transform: scale(.9); }
    70%  { opacity: 0;   transform: scale(1.5); }
    100% { opacity: 0;   transform: scale(1.5); }
}

/* ════════════════════════════════════════════
   8. ÉTAPES / PARRAINAGE — accent au survol
════════════════════════════════════════════ */
.step-item:hover{
    transform: translateX(5px);
}
.step-item:hover .step-item__title{ color: var(--gold-light); }

/* Bande partenaires : léger flottement des puces */
.partner-chip{ transition: opacity .25s, color .25s, transform .35s var(--pr-ease); }
.partner-chip:hover{ transform: translateY(-3px); }

/* Compteurs : lueur sur les chiffres du héro */
.counterup-item__title{ transition: text-shadow .4s var(--pr-ease); }
.counterup-item:hover .counterup-item__title{
    text-shadow: 0 0 26px rgba(200,169,110,.5);
}

/* Accordéon FAQ : glissement doux à l'ouverture */
.accordion-button{ transition: color var(--tr), background var(--tr); }

/* ════════════════════════════════════════════
   9. ACCESSIBILITÉ — mouvement réduit
════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce){
    .pr-reveal{ opacity: 1 !important; transform: none !important; filter: none !important; }
    .pr-particle, .banner-fx__aurora, .pr-scrollcue::before,
    .logo-mark::after, .banner-section::after,
    .banner-content__title span, .banner-content__title em{
        animation: none !important;
    }
    .plan-card:hover, .investor-item:hover, .testimonial-item:hover,
    .btn.btn--base:hover{ transform: none !important; }
}

/* ════════════════════════════════════════════
   10. NAVBAR RESPONSIVE — petit écran (portable)
   Réplique le correctif de style.css pour les pages
   dont le thème est en CSS inline (about/plan/blogs/contact).
════════════════════════════════════════════ */
/* Le header doit rester SOUS le ticker crypto (38px) : le CSS inline
   des pages du menu force .header{top:0} et masque la barre crypto.
   premium.css est chargé en dernier → il rétablit le décalage. */
.header{ top: 38px; }

@media (max-width: 768px){
    .header, .header.scrolled{ padding: 11px 16px; }
    .header .navbar{ flex-wrap: nowrap; align-items: center; gap: 10px; }
    .navbar-brand.logo{ font-size: 19px; letter-spacing: 0.1em; gap: 8px; }
    .navbar-brand.logo .logo-mark{ width: 26px; height: 26px; font-size: 11px; }
    .header-main-container{ margin-left: 0 !important; flex: 0 0 auto; }
    .navbar-toggler.header-button{
        margin-left: auto; flex: 0 0 auto;
        width: 42px; height: 42px; padding: 0;
        display: inline-flex; align-items: center; justify-content: center;
    }
    .navbar-toggler.header-button i{ font-size: 21px; line-height: 1; }
}
@media (max-width: 575px){
    .header, .header.scrolled{ padding: 10px 14px; top: 34px; }
    .navbar-brand.logo{ font-size: 17px; letter-spacing: 0.06em; gap: 7px; }
    .navbar-brand.logo .logo-mark{ width: 24px; height: 24px; font-size: 10px; }
    .navbar-toggler.header-button{ width: 40px; height: 40px; }
    .offcanvas{ width: min(300px, 90vw) !important; }
}