@charset "UTF-8";

/* ===== Orbe d'energie Morphaius : difforme/aleatoire, neon sans blanc, centre evide =====
   Le JS ne pilote que width/height (grossissement au scroll). */

#ball {
    position: fixed;
    top: 50%; left: 50%;
    height: 240px; width: 240px;
    transform: translate(-50%, -50%);
    z-index: 0;
    opacity: 0.9;
    transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    animation: zoomIn 1s ease;
}

/* corps lumineux : anneau (centre transparent pour laisser lire le texte) + deformation */
#ball::before {
    content: "";
    position: absolute; inset: 6%;
    border-radius: 42% 58% 60% 40% / 55% 45% 55% 45%;
    background: radial-gradient(circle, rgba(43, 75, 155, 0) 0%, rgba(43, 75, 155, 0) 30%, rgba(150, 40, 210, 0.42) 50%, rgba(43, 107, 255, 0.24) 64%, rgba(43, 75, 155, 0) 80%);
    mix-blend-mode: screen;
    filter: blur(12px);
    animation: bodyPulse 5s ease-in-out infinite, blobMorph 13s ease-in-out infinite;
}

/* halo externe qui enfle, irregulier et difforme, centre evide aussi */
#ball::after {
    content: "";
    position: absolute; inset: -16%;
    border-radius: 55% 45% 50% 50% / 45% 55% 45% 55%;
    background: radial-gradient(circle, rgba(43, 75, 155, 0) 0%, rgba(43, 75, 155, 0) 34%, rgba(150, 40, 210, 0.34) 52%, rgba(43, 107, 255, 0.2) 66%, rgba(43, 75, 155, 0) 80%);
    mix-blend-mode: screen;
    filter: blur(24px);
    animation: haloSwell 7.5s ease-in-out infinite -2s, blobMorph 17s ease-in-out infinite -5s;
    will-change: transform, opacity, border-radius;
}

/* blobs neon (bleu logo, magenta, violet) qui vagabondent ET se deforment */
.ball-blob {
    position: absolute;
    width: 72%; height: 72%; top: 14%; left: 14%;
    border-radius: 50%;
    mix-blend-mode: screen;
    filter: blur(11px);
    will-change: transform, border-radius;
}
.bb1 { background: radial-gradient(circle, rgba(43, 107, 255, 0.78) 0%, rgba(43, 107, 255, 0.78) 28%, rgba(43, 107, 255, 0) 70%);  animation: wanderA 6.7s ease-in-out infinite, blobMorph 12s ease-in-out infinite; }
.bb2 { background: radial-gradient(circle, rgba(214, 40, 180, 0.78) 0%, rgba(214, 40, 180, 0.78) 28%, rgba(214, 40, 180, 0) 68%); animation: wanderB 8.3s ease-in-out infinite -2s, blobMorph 15s ease-in-out infinite -3s; }
.bb3 { background: radial-gradient(circle, rgba(150, 60, 230, 0.78) 0%, rgba(150, 60, 230, 0.78) 26%, rgba(150, 60, 230, 0) 68%); animation: wanderC 5.9s ease-in-out infinite -4s, blobMorph 10s ease-in-out infinite -1s; }
.bb4 { background: radial-gradient(circle, rgba(90, 35, 190, 0.8) 0%, rgba(90, 35, 190, 0.8) 28%, rgba(90, 35, 190, 0) 70%); animation: wanderD 9.1s ease-in-out infinite -1s, blobMorph 17s ease-in-out infinite -6s; }
.bb5 { background: radial-gradient(circle, rgba(50, 95, 235, 0.78) 0%, rgba(50, 95, 235, 0.78) 24%, rgba(50, 95, 235, 0) 66%);  animation: wanderE 7.3s ease-in-out infinite -5s, blobMorph 13s ease-in-out infinite -2s; }

/* lueur balayante : oscille de facon irreguliere (plus de rotation horaire previsible) */
.ball-sweep {
    position: absolute;
    top: -8%; left: -8%; width: 116%; height: 116%;
    border-radius: 48% 52% 55% 45% / 52% 45% 55% 48%;
    mix-blend-mode: screen;
    filter: blur(8px);
    background: conic-gradient(from 0deg,
        rgba(214, 40, 180, 0) 0deg, rgba(214, 40, 180, 0.28) 38deg,
        rgba(50, 95, 235, 0.28) 96deg, rgba(214, 40, 180, 0) 158deg, rgba(214, 40, 180, 0) 360deg);
    animation: sweepWobble 12s ease-in-out infinite, blobMorph 9s ease-in-out infinite -3s;
    will-change: transform, border-radius;
}

/* coeur violet fonce (aucun blanc), battement discret */
.ball-core {
    position: absolute;
    top: 37%; left: 37%; width: 26%; height: 26%;
    border-radius: 50%;
    mix-blend-mode: screen;
    filter: blur(5px);
    background: radial-gradient(circle, rgba(90, 35, 176, 0.5) 0%, rgba(64, 24, 130, 0.24) 48%, rgba(64, 24, 130, 0) 78%);
    animation: heartbeat 1.8s ease-in-out infinite;
}

/* etincelles violettes (pas de blanc) qui orbitent en peripherie */
.ball-spark {
    position: absolute; top: 0; left: 0;
    width: 8%; height: 8%;
    border-radius: 50%;
    mix-blend-mode: screen;
    filter: blur(2px);
    background: radial-gradient(circle, rgba(168, 92, 240, 0.8) 0%, rgba(132, 52, 214, 0.5) 45%, rgba(132, 52, 214, 0) 72%);
}
.sp1 { offset-path: circle(42% at 50% 50%); animation: orbit 5.5s linear infinite; }
.sp2 { offset-path: circle(49% at 50% 50%); width: 6%; height: 6%; animation: orbit 8s linear infinite reverse -3s; }

@keyframes wanderA { 0%{transform:translate(-8%,6%) scale(1)} 25%{transform:translate(24%,-16%) scale(1.32)} 50%{transform:translate(6%,24%) scale(.86)} 75%{transform:translate(-24%,2%) scale(1.2)} 100%{transform:translate(-8%,6%) scale(1)} }
@keyframes wanderB { 0%{transform:translate(10%,-8%) scale(1.15)} 30%{transform:translate(-22%,14%) scale(.8)} 60%{transform:translate(18%,20%) scale(1.3)} 100%{transform:translate(10%,-8%) scale(1.15)} }
@keyframes wanderC { 0%{transform:translate(-4%,-12%) scale(1)} 35%{transform:translate(22%,10%) scale(1.34)} 70%{transform:translate(-18%,-6%) scale(.88)} 100%{transform:translate(-4%,-12%) scale(1)} }
@keyframes wanderD { 0%{transform:translate(6%,10%) scale(.92)} 40%{transform:translate(-24%,-16%) scale(1.3)} 70%{transform:translate(16%,-20%) scale(1.08)} 100%{transform:translate(6%,10%) scale(.92)} }
@keyframes wanderE { 0%{transform:translate(-12%,-4%) scale(1.08)} 30%{transform:translate(10%,18%) scale(.84)} 65%{transform:translate(22%,-12%) scale(1.28)} 100%{transform:translate(-12%,-4%) scale(1.08)} }
@keyframes sweepWobble { 0%{transform:rotate(-32deg)} 28%{transform:rotate(128deg)} 50%{transform:rotate(54deg)} 76%{transform:rotate(214deg)} 100%{transform:rotate(-32deg)} }
@keyframes bodyPulse { 0%,100%{transform:scale(.96); opacity:.78} 50%{transform:scale(1.16); opacity:.98} }
@keyframes haloSwell { 0%{transform:scale(.78); opacity:.26} 20%{transform:scale(1.4); opacity:.7} 42%{transform:scale(.95); opacity:.38} 64%{transform:scale(1.55); opacity:.78} 84%{transform:scale(1.02); opacity:.44} 100%{transform:scale(.78); opacity:.26} }
@keyframes blobMorph { 0%{border-radius:42% 58% 60% 40% / 55% 45% 55% 45%} 20%{border-radius:62% 38% 45% 55% / 40% 62% 38% 60%} 40%{border-radius:38% 62% 58% 42% / 60% 48% 52% 40%} 60%{border-radius:55% 45% 36% 64% / 42% 58% 60% 40%} 80%{border-radius:48% 52% 56% 44% / 52% 40% 60% 48%} 100%{border-radius:42% 58% 60% 40% / 55% 45% 55% 45%} }
@keyframes heartbeat { 0%,50%,100%{transform:scale(1)} 12%{transform:scale(1.22)} 22%{transform:scale(1.05)} 34%{transform:scale(1.3)} }
@keyframes orbit { from{offset-distance:0%} to{offset-distance:100%} }
@keyframes zoomIn { 0%{transform:translate(-50%,-50%) scale(0)} 100%{transform:translate(-50%,-50%) scale(1)} }

.section-accueil { position: static; }

/* =====================================================================
   MOBILE (<=768px) : orbe allegee pour stopper le clignotement / la surcharge GPU
   ---------------------------------------------------------------------
   Cause des bugs mobiles : ~10 calques flous en mix-blend-mode:screen, dont
   plusieurs animaient border-radius (blobMorph) -> propriete NON compositable
   qui force le GPU a repeindre tout le flou a chaque frame, et le screen sur
   de grands calques flous sature la memoire GPU -> clignotement.
   Ici on : retire les calques les plus lourds (balayage conique, 3 blobs,
   etincelles), repasse en blend normal, supprime will-change et toutes les
   animations de border-radius (on ne garde que transform/opacity, compositables),
   et reduit le flou. Le desktop reste strictement inchange.
   ===================================================================== */
@media (max-width: 768px) {
    /* calques les plus couteux : on les supprime completement sur mobile */
    #ball .ball-sweep,
    #ball .bb3,
    #ball .bb4,
    #ball .bb5,
    #ball .ball-spark { display: none; }

    /* calques conserves : blend normal, plus de will-change, flou reduit */
    #ball::before,
    #ball::after,
    #ball .ball-blob,
    #ball .ball-core {
        mix-blend-mode: normal;
        will-change: auto;
    }

    /* on remplace les animations contenant blobMorph (border-radius) par des
       animations transform/opacity uniquement (compositables) */
    #ball::before {
        filter: blur(8px);
        animation: bodyPulse 6s ease-in-out infinite;
    }
    #ball::after {
        filter: blur(12px);
        animation: haloSwell 9s ease-in-out infinite -2s;
    }
    #ball .ball-blob { filter: blur(8px); }
    #ball .bb1 { animation: wanderA 8s ease-in-out infinite; }
    #ball .bb2 { animation: wanderB 9s ease-in-out infinite -2s; }
    #ball .ball-core { filter: blur(4px); }
}

/* Accessibilite / economie d'energie : on fige completement l'orbe */
@media (prefers-reduced-motion: reduce) {
    #ball,
    #ball::before,
    #ball::after,
    #ball .ball-blob,
    #ball .ball-sweep,
    #ball .ball-core,
    #ball .ball-spark {
        animation: none !important;
    }
    #ball { transition: none !important; }
}