/* =========================================================
   DARA AFFILIATION — ULTRA PREMIUM 3D LAYER
   Particules • Curseur lumineux • Tilt 3D • Accent frappant
========================================================= */

:root{
    --up-accent:#ffb020;
    --up-accent2:#ff5f6d;
    --up-blue:#0d6efd;
    --up-cyan:#21c7ff;
    --up-glass:rgba(255,255,255,.06);
}

/* ---------- FOND PARTICULES ---------- */
#up-particles{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    z-index:-1;
    pointer-events:none;
    opacity:.55;
}

/* ---------- CURSEUR LUMINEUX (desktop uniquement) ---------- */
#up-cursor-glow{
    position:fixed;
    top:0;
    left:0;
    width:420px;
    height:420px;
    border-radius:50%;
    pointer-events:none;
    z-index:1;
    transform:translate(-50%,-50%);
    background:radial-gradient(circle,rgba(33,199,255,.10),rgba(13,110,253,.04) 45%,transparent 70%);
    transition:opacity .3s ease;
    opacity:0;
    will-change:transform;
}
body.up-has-pointer #up-cursor-glow{opacity:1;}

/* ---------- BARRE DE PROGRESSION DE SCROLL ---------- */
#up-scroll-progress{
    position:fixed;
    top:0;
    left:0;
    height:3px;
    width:0%;
    z-index:10050;
    background:linear-gradient(90deg,var(--up-blue),var(--up-cyan),var(--up-accent));
    box-shadow:0 0 14px rgba(33,199,255,.7);
    transition:width .1s linear;
}

/* ---------- TITRES : DEGRADE ANIME FRAPPANT ---------- */
.hero-content h1 span{
    background:linear-gradient(100deg,#fff 0%,var(--up-cyan) 35%,var(--up-blue) 60%,var(--up-accent) 100%);
    background-size:220% auto;
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
    animation:upShine 6s linear infinite;
}

@keyframes upShine{
    0%{background-position:0% center;}
    100%{background-position:220% center;}
}

.section-title h2 span,
.section-header h2 strong{
    position:relative;
}

/* Petit accent chaud sur les numéros / badges pour un contraste frappant */
.op-number,
.da-op-number{
    background:linear-gradient(135deg,var(--up-accent),var(--up-accent2));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent!important;
    opacity:.9!important;
}

.featured-badge,
.da-kicker{
    background:linear-gradient(135deg,var(--up-accent),var(--up-accent2))!important;
    color:#1a0d00!important;
    -webkit-text-fill-color:#1a0d00;
    box-shadow:0 8px 25px rgba(255,176,32,.35);
    border-radius:30px;
    padding:4px 12px;
}

/* ---------- REVEAL 3D GENERIQUE (fallback / complement AOS) ---------- */
.up-reveal{
    opacity:0;
    transform:translateY(50px) rotateX(6deg);
    transform-origin:top center;
    transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1);
}
.up-reveal.up-visible{
    opacity:1;
    transform:none;
}

/* ---------- TILT 3D — halo dynamique sur les cartes ---------- */
.op-card,
.da-op-card,
.gallery-item,
.faq-item,
.feature,
.why-item,
.roadmap-text,
.contact-email,
.contact-form{
    will-change:transform;
    transform-style:preserve-3d;
}

.op-card:hover,
.da-op-card:hover,
.feature:hover,
.why-item:hover{
    box-shadow:
      0 30px 90px rgba(0,0,0,.45),
      0 0 45px rgba(33,199,255,.18),
      0 0 0 1px rgba(255,176,32,.10)!important;
}

/* ---------- BOUTONS MAGNETIQUES + LUEUR ACCENT ---------- */
.btn,
.btn-nav,
.btn-contact,
.btn-opportunity,
.da-op-btn{
    will-change:transform;
    position:relative;
}

.btn::after,
.btn-contact::after,
.btn-opportunity::after{
    content:"";
    position:absolute;
    inset:-2px;
    z-index:-2;
    border-radius:inherit;
    background:linear-gradient(135deg,var(--up-accent),var(--up-cyan),var(--up-blue));
    opacity:0;
    filter:blur(14px);
    transition:opacity .4s ease;
}

.btn:hover::after,
.btn-contact:hover::after,
.btn-opportunity:hover::after{opacity:.55;}

/* ---------- LOGO / IMAGES: profondeur renforcee ---------- */
.about-image::before,
.why-image::before{
    content:"";
    position:absolute;
    inset:-18px;
    z-index:-1;
    border-radius:32px;
    background:conic-gradient(from 0deg,var(--up-blue),var(--up-cyan),var(--up-accent),var(--up-blue));
    filter:blur(40px);
    opacity:.28;
    animation:upSpin 10s linear infinite;
}

@keyframes upSpin{
    from{transform:rotate(0deg);}
    to{transform:rotate(360deg);}
}

/* ---------- SEPARATEURS ONDULES ENTRE SECTIONS ---------- */
.up-wave{
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:60px;
    line-height:0;
    pointer-events:none;
    z-index:1;
}
.up-wave svg{width:100%;height:100%;display:block;}
.up-wave path{fill:rgba(255,255,255,.02);}

/* ---------- ANIMATION D'ENTREE POUR LES SECTIONS COMPLETES ---------- */
@keyframes upFloat{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-10px);}
}

.icon-box,
.check,
.intro-icon,
.da-op-icon{
    animation:upFloat 4.5s ease-in-out infinite;
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px){
    #up-particles{opacity:.35;}
    #up-cursor-glow{display:none;}
}

@media(prefers-reduced-motion:reduce){
    .hero-content h1 span{animation:none;}
    .icon-box,.check,.intro-icon,.da-op-icon{animation:none;}
    .about-image::before,.why-image::before{animation:none;}
}