/* --- CONFIGURATION --- */
:root { 
    --accent-purple: #8a2be2; /* Violet électrique pour Advantage Media */
    --accent-orange: #ff8c00; /* Orange dynamique pour les CTA */
    --bg-dark: #000; 
    --text-main: #fff; 
    --text-muted: #a1a1aa; 
}
@property --gradient-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

/* --- TYPO & ANIM --- */
.font-manrope { font-family: 'Manrope', sans-serif; }
.font-inter { font-family: 'Inter', sans-serif; }
@keyframes border-spin { from { --gradient-angle: 0deg; } to { --gradient-angle: 360deg; } }
@keyframes animStar { from { transform: translateY(0px); } to { transform: translateY(-2000px); } }
@keyframes fade-in-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.animate-fade-up { animation: fade-in-up 0.8s ease-out forwards; }

/* --- BOUTON CTA (Orange) --- */
.shiny-cta {
    --gradient-angle: 0deg;
    position: relative;
    overflow: hidden;
    border-radius: 9999px;
    padding: 1rem 2.5rem;
    /* Utilisation de l'orange pour l'animation de bordure */
    background: linear-gradient(#000, #000) padding-box, conic-gradient(from var(--gradient-angle), transparent 0%, var(--accent-orange) 5%, var(--accent-orange) 15%, var(--accent-orange) 30%, transparent 40%, transparent 100%) border-box;
    border: 2px solid transparent;
    cursor: pointer;
    isolation: isolate;
    transition: transform 0.3s ease;
    animation: border-spin 2.5s linear infinite;
}
.shiny-cta:hover { transform: scale(1.05); }
.shiny-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, white 0.5px, transparent 0); background-size: 4px 4px; opacity: 0.1; z-index: 0; }

/* --- ÉTOILES ULTRA-DENSES (STRICTEMENT IDENTIQUES) --- */
.stars-1 {
    width: 1px; height: 1px; background: transparent;
    box-shadow: 
        234px 124px #fff, 654px 345px #fff, 876px 12px #fff, 1200px 800px #fff, 400px 1500px #fff, 
        1800px 200px #fff, 100px 1000px #fff, 900px 1900px #fff, 500px 600px #fff, 1400px 100px #fff, 
        300px 400px #fff, 1600px 1200px #fff, 250px 850px #fff, 1100px 450px #fff, 750px 1800px #fff,
        1900px 1000px #fff, 50px 200px #fff, 1350px 1600px #fff, 800px 300px #fff, 450px 1100px #fff,
        1700px 1400px #fff, 600px 100px #fff, 150px 1700px #fff, 1250px 900px #fff, 950px 2000px #fff,
        200px 500px #fff, 1450px 1300px #fff, 1050px 700px #fff, 550px 1550px #fff, 1750px 50px #fff,
        400px 200px #fff, 1200px 1500px #fff, 850px 50px #fff, 100px 600px #fff, 1600px 1800px #fff;
    animation: animStar 50s linear infinite;
}
.stars-1::after { content: " "; position: absolute; top: 2000px; width: 1px; height: 1px; background: transparent; box-shadow: inherit; }

.stars-2 {
    width: 2px; height: 2px; background: transparent;
    box-shadow: 
        123px 456px #fff, 789px 234px #fff, 456px 890px #fff, 1100px 300px #fff, 200px 1200px #fff, 
        1500px 500px #fff, 600px 1700px #fff, 1300px 900px #fff, 850px 1150px #fff, 350px 1950px #fff,
        1650px 750px #fff, 950px 50px #fff, 150px 800px #fff, 1350px 1500px #fff, 550px 400px #fff,
        1850px 250px #fff, 1050px 1200px #fff, 450px 650px #fff, 1250px 1850px #fff, 650px 150px #fff,
        300px 300px #fff, 1400px 1400px #fff, 800px 800px #fff, 1100px 1100px #fff;
    animation: animStar 80s linear infinite;
}
.stars-2::after { content: " "; position: absolute; top: 2000px; width: 2px; height: 2px; background: transparent; box-shadow: inherit; }

.stars-3 {
    width: 3px; height: 3px; background: transparent;
    box-shadow: 
        300px 600px #fff, 1400px 200px #fff, 800px 1500px #fff, 1800px 900px #fff, 100px 100px #fff, 
        1100px 1800px #fff, 500px 1100px #fff, 1550px 1450px #fff, 250px 1750px #fff, 950px 450px #fff;
    animation: animStar 120s linear infinite; opacity: 0.4;
}
.stars-3::after { content: " "; position: absolute; top: 2000px; width: 3px; height: 3px; background: transparent; box-shadow: inherit; }

/* --- CARD & GRID (Violet & Orange) --- */
.bento-card { transition: all 0.3s ease; }
.bento-card:hover {
    border-color: rgba(138, 43, 226, 0.4); /* Bordure violette au survol */
    background: radial-gradient(circle at top right, rgba(138, 43, 226, 0.1), transparent 70%), linear-gradient(to bottom, rgba(24, 24, 27, 0.8), black);
}
.selection-orange::selection { background: var(--accent-orange); color: white; }
.gradient-blur { position: fixed; z-index: 40; inset: 0 0 auto 0; height: 120px; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent); backdrop-filter: blur(8px); mask-image: linear-gradient(to bottom, black, transparent); }
.text-stroke { -webkit-text-stroke: 1px rgba(255, 255, 255, 0.1); color: transparent; }

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.animate-scroll {
    display: flex;
    width: max-content;
    animation: scroll 30s linear infinite;
}

.animate-scroll:hover {
    animation-play-state: paused;
}

html {
    scroll-behavior: smooth;
}

/* Empêche la section de se coller tout en haut de l'écran après le scroll */
#services {
    scroll-margin-top: 20px;
}

@keyframes scroll-line {
    0% { transform: translate(-50%, -20px); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translate(-50%, 60px); opacity: 0; }
}

.animate-scroll-line {
    animation: scroll-line 2.5s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}

/* Animation de flottaison pour l'ensemble du bloc CTA */
@keyframes neon-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.animate-neon-float {
    animation: neon-float 3s ease-in-out infinite;
}

/* Optionnel : Intensifier l'éclat du texte néon */
.drop-shadow-neon {
    text-shadow: 0 0 10px rgba(255, 140, 0, 0.5), 
                 0 0 20px rgba(255, 140, 0, 0.3);
}