/* ==========================================
   HERO SECTION - STYLES
   ========================================== */

/* Section Hero */
.hero-section {
    height: 50vh;
    min-height: 400px;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Animations de fond persistantes */
.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* Formes géométriques animées */
.geometric-shapes {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.shape {
    position: absolute;
    background: rgba(221, 190, 88, 0.1);
    border-radius: 50%;
    animation: morphShape 15s infinite ease-in-out;
}

.shape-triangle {
    width: 100px;
    height: 100px;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    animation-delay: 0s;
}

.shape-circle {
    width: 150px;
    height: 150px;
    animation-delay: 2s;
}

.shape-square {
    width: 120px;
    height: 120px;
    animation-delay: 4s;
}

.shape-hexagon {
    width: 100px;
    height: 100px;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%, 0% 0%, 100% 0%);
    animation-delay: 6s;
}

.shape-diamond {
    width: 130px;
    height: 130px;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%, 0% 0%);
    animation-delay: 8s;
}

@keyframes morphShape {
    0%, 100% {
        transform: translateY(0px) translateX(0px) scale(1);
        opacity: 0.3;
    }
    25% {
        transform: translateY(-30px) translateX(15px) scale(1.2);
        opacity: 0.8;
    }
    50% {
        transform: translateY(-60px) translateX(-10px) scale(0.8);
        opacity: 0.6;
    }
    75% {
        transform: translateY(-30px) translateX(-25px) scale(1.1);
        opacity: 0.9;
    }
}

/* Effet de morphing */
.morphing-blob {
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(221, 190, 88, 0.05) 0%, transparent 70%);
    animation: morphBlob 10s infinite ease-in-out;
    pointer-events: none;
}

.blob {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(221, 190, 88, 0.1) 0%, transparent 70%);
    animation: pulseBlob 8s infinite ease-in-out;
}

.blob-1 {
    width: 100px;
    height: 100px;
    top: 20%;
    left: 30%;
    animation-delay: 0s;
}

.blob-2 {
    width: 150px;
    height: 150px;
    top: 60%;
    right: 20%;
    animation-delay: 2s;
}

.blob-3 {
    width: 120px;
    height: 120px;
    bottom: 10%;
    left: 50%;
    animation-delay: 4s;
}

@keyframes morphBlob {
    0%, 100% {
        transform: scale(1);
        opacity: 0.2;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.5;
    }
}

@keyframes pulseBlob {
    0%, 100% {
        transform: scale(1);
        opacity: 0.2;
    }
    50% {
        transform: scale(1.3);
        opacity: 0.5;
    }
}

/* Lignes dynamiques */
.dynamic-lines {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.dynamic-line {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(221, 190, 88, 0.4), transparent);
    animation: dynamicLineMove 15s infinite linear;
}

.line-1 {
    width: 60%;
    top: 25%;
    left: 20%;
    animation-delay: 0s;
}

.line-2 {
    width: 40%;
    top: 55%;
    right: 20%;
    animation-delay: 4s;
}

.line-3 {
    width: 50%;
    bottom: 30%;
    left: 25%;
    animation-delay: 8s;
}

.line-4 {
    width: 70%;
    top: 10%;
    left: 40%;
    animation-delay: 12s;
}

@keyframes dynamicLineMove {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Effet de particules en spirale */
.spiral-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

.spiral-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(221, 190, 88, 0.8);
    border-radius: 50%;
    animation: spiralFloat 15s infinite ease-in-out;
}

.sp1 { top: 20%; left: 10%; animation-delay: 0s; animation-duration: 20s; }
.sp2 { top: 60%; left: 80%; animation-delay: 2s; animation-duration: 18s; }
.sp3 { top: 80%; left: 20%; animation-delay: 4s; animation-duration: 22s; }
.sp4 { top: 30%; left: 70%; animation-delay: 6s; animation-duration: 16s; }
.sp5 { top: 70%; left: 60%; animation-delay: 1s; animation-duration: 19s; }

@keyframes spiralFloat {
    0%, 100% {
        transform: translateY(0px) translateX(0px) scale(1);
        opacity: 0.3;
    }
    25% {
        transform: translateY(-30px) translateX(15px) scale(1.2);
        opacity: 0.8;
    }
    50% {
        transform: translateY(-60px) translateX(-10px) scale(0.8);
        opacity: 0.6;
    }
    75% {
        transform: translateY(-30px) translateX(-25px) scale(1.1);
        opacity: 0.9;
    }
}

/* Container principal */
.hero-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 2;
    width: 100%;
}

/* Contenu principal */
.hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    height: 100%;
}

/* Texte principal */
.hero-text {
    text-align: left;
}

.hero-title {
    font-size: 4.5rem;
    font-weight: 900;
    margin-bottom: 20px;
    line-height: 1.1;
    position: relative;
}

.title-word {
    animation: color-animation 4s linear infinite;
    display: inline-block;
}

.title-word-1 {
    --color-1: #DDBE58;
    --color-2: #c4a94a;
    --color-3: #ffffff;
}

@keyframes color-animation {
    0%    { color: var(--color-1) }
    32%   { color: var(--color-1) }
    33%   { color: var(--color-2) }
    65%   { color: var(--color-2) }
    66%   { color: var(--color-3) }
    99%   { color: var(--color-3) }
    100%  { color: var(--color-1) }
}

.hero-subtitle {
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 20px;
    opacity: 0.9;
}

.hero-description {
    color: #cccccc;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 40px;
    opacity: 0.8;
    max-width: 500px;
}

/* Bouton CTA simple et classique */
.hero-cta {
    display: flex;
    gap: 20px;
    position: relative;
    z-index: 10;
}

/* Masquer tout autre bouton qui pourrait interférer */
.hero-cta > *:not(.hero-button-simple) {
    display: none !important;
}

.hero-button-simple {
    display: inline-block !important;
    padding: 16px 32px !important;
    background: #DDBE58 !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    cursor: pointer !important;
    z-index: 10 !important;
    box-shadow: 0 4px 15px rgba(221, 190, 88, 0.3) !important;
}

.hero-button-simple:hover {
    background: #c4a94a !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(221, 190, 88, 0.4) !important;
    color: #1a1a1a !important;
    text-decoration: none !important;
}

/* Section visuelle grandiose */
.hero-visual {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 100%;
    overflow: hidden;
}

/* Grille futuriste */
.futuristic-grid {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.grid-line {
    position: absolute;
    background: linear-gradient(90deg, transparent, rgba(221, 190, 88, 0.3), transparent);
    animation: gridPulse 4s infinite ease-in-out;
}

.gl1 { width: 100%; height: 1px; top: 20%; animation-delay: 0s; }
.gl2 { width: 100%; height: 1px; top: 40%; animation-delay: 1s; }
.gl3 { width: 100%; height: 1px; top: 60%; animation-delay: 2s; }
.gl4 { width: 1px; height: 100%; left: 20%; animation-delay: 0.5s; }
.gl5 { width: 1px; height: 100%; left: 40%; animation-delay: 1.5s; }
.gl6 { width: 1px; height: 100%; left: 60%; animation-delay: 2.5s; }

@keyframes gridPulse {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.8; }
}

/* Vortex d'énergie */
.energy-vortex {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    pointer-events: none;
}

.vortex-ring {
    position: absolute;
    border: 2px solid rgba(221, 190, 88, 0.4);
    border-radius: 50%;
    animation: vortexSpin 8s infinite linear;
}

.vr1 { width: 300px; height: 300px; top: 50px; left: 50px; animation-duration: 12s; }
.vr2 { width: 200px; height: 200px; top: 100px; left: 100px; animation-duration: 8s; animation-direction: reverse; }
.vr3 { width: 100px; height: 100px; top: 150px; left: 150px; animation-duration: 6s; }

.vortex-core {
    position: absolute;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle, #DDBE58, transparent);
    border-radius: 50%;
    top: 190px;
    left: 190px;
    animation: corePulse 2s infinite ease-in-out;
    box-shadow: 0 0 30px rgba(221, 190, 88, 0.8);
}

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

@keyframes corePulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.5); opacity: 1; }
}

/* Éclairs d'énergie */
.energy-lightning {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.lightning {
    position: absolute;
    width: 2px;
    background: linear-gradient(to bottom, transparent, #DDBE58, transparent);
    animation: lightningFlash 3s infinite ease-in-out;
    box-shadow: 0 0 10px rgba(221, 190, 88, 0.8);
}

.l1 { height: 100px; top: 10%; left: 15%; animation-delay: 0s; }
.l2 { height: 80px; top: 30%; right: 20%; animation-delay: 1s; }
.l3 { height: 120px; bottom: 20%; left: 25%; animation-delay: 2s; }
.l4 { height: 90px; top: 60%; right: 30%; animation-delay: 0.5s; }

@keyframes lightningFlash {
    0%, 90%, 100% { opacity: 0; transform: scaleY(0); }
    5%, 85% { opacity: 1; transform: scaleY(1); }
}

/* Particules de données */
.data-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.data-particle {
    position: absolute;
    color: #DDBE58;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 0 0 10px rgba(221, 190, 88, 0.8);
    animation: dataFloat 10s infinite ease-in-out;
    opacity: 0.7;
}

.dp1 { top: 15%; left: 10%; animation-delay: 0s; }
.dp2 { top: 25%; right: 15%; animation-delay: 1s; }
.dp3 { top: 35%; left: 20%; animation-delay: 2s; }
.dp4 { top: 45%; right: 25%; animation-delay: 3s; }
.dp5 { top: 55%; left: 30%; animation-delay: 4s; }
.dp6 { top: 65%; right: 35%; animation-delay: 5s; }
.dp7 { top: 75%; left: 40%; animation-delay: 6s; }
.dp8 { top: 85%; right: 45%; animation-delay: 7s; }

@keyframes dataFloat {
    0%, 100% {
        transform: translateY(0px) translateX(0px) scale(1);
        opacity: 0.3;
    }
    25% {
        transform: translateY(-20px) translateX(15px) scale(1.2);
        opacity: 1;
    }
    50% {
        transform: translateY(-40px) translateX(-10px) scale(0.8);
        opacity: 0.6;
    }
    75% {
        transform: translateY(-30px) translateX(20px) scale(1.1);
        opacity: 0.8;
    }
}

/* Hologramme flottant */
.hologram {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    pointer-events: none;
}

.hologram-layer {
    position: absolute;
    border: 1px solid rgba(221, 190, 88, 0.3);
    border-radius: 50%;
    animation: hologramRotate 15s infinite linear;
}

.hl1 { width: 200px; height: 200px; top: 0; left: 0; animation-duration: 20s; }
.hl2 { width: 150px; height: 150px; top: 25px; left: 25px; animation-duration: 15s; animation-direction: reverse; }
.hl3 { width: 100px; height: 100px; top: 50px; left: 50px; animation-duration: 10s; }

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

/* Distorsion spatiale */
.space-distortion {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.distortion-field {
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(221, 190, 88, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    animation: distortionWarp 12s infinite ease-in-out;
}

.df1 { top: 10%; left: 10%; animation-delay: 0s; }
.df2 { bottom: 10%; right: 10%; animation-delay: 6s; }

@keyframes distortionWarp {
    0%, 100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.2;
    }
    25% {
        transform: scale(1.3) rotate(90deg);
        opacity: 0.5;
    }
    50% {
        transform: scale(0.8) rotate(180deg);
        opacity: 0.3;
    }
    75% {
        transform: scale(1.2) rotate(270deg);
        opacity: 0.6;
    }
}

/* Indicateur de scroll */
.scroll-indicator {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

.scroll-arrow {
    width: 20px;
    height: 20px;
    border-right: 2px solid rgba(221, 190, 88, 0.6);
    border-bottom: 2px solid rgba(221, 190, 88, 0.6);
    transform: rotate(45deg);
    animation: scrollBounce 2s infinite;
    cursor: pointer;
    transition: all 0.3s ease;
}

.scroll-arrow:hover {
    border-right-color: rgba(221, 190, 88, 1);
    border-bottom-color: rgba(221, 190, 88, 1);
    transform: rotate(45deg) scale(1.2);
}

@keyframes scrollBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: rotate(45deg) translateY(0);
    }
    40% {
        transform: rotate(45deg) translateY(-10px);
    }
    60% {
        transform: rotate(45deg) translateY(-5px);
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .hero-content {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }
    
    .hero-text {
        text-align: center;
    }
    
    .hero-title {
        font-size: 3.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.3rem;
    }
    
    .hero-description {
        margin: 0 auto 40px;
    }
}

@media (max-width: 768px) {
    .hero-section {
        height: 60vh;
        min-height: 500px;
    }
    
    .hero-container {
        padding: 0 20px;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .hero-description {
        font-size: 1rem;
    }
    
    .hero-button-simple {
        padding: 14px 28px;
        font-size: 0.9rem;
    }
    
    .energy-vortex {
        width: 300px;
        height: 300px;
    }
    
    .vr1 { width: 220px; height: 220px; top: 40px; left: 40px; }
    .vr2 { width: 150px; height: 150px; top: 75px; left: 75px; }
    .vr3 { width: 80px; height: 80px; top: 110px; left: 110px; }
    
    .vortex-core {
        top: 140px;
        left: 140px;
    }
    
    .hologram {
        width: 150px;
        height: 150px;
    }
    
    .hl1 { width: 150px; height: 150px; }
    .hl2 { width: 110px; height: 110px; top: 20px; left: 20px; }
    .hl3 { width: 70px; height: 70px; top: 40px; left: 40px; }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .hero-description {
        font-size: 0.9rem;
    }
    
    .energy-vortex {
        width: 250px;
        height: 250px;
    }
    
    .vr1 { width: 180px; height: 180px; top: 35px; left: 35px; }
    .vr2 { width: 120px; height: 120px; top: 65px; left: 65px; }
    .vr3 { width: 60px; height: 60px; top: 95px; left: 95px; }
    
    .vortex-core {
        top: 115px;
        left: 115px;
    }
    
    .hologram {
        width: 120px;
        height: 120px;
    }
    
    .hl1 { width: 120px; height: 120px; }
    .hl2 { width: 90px; height: 90px; top: 15px; left: 15px; }
    .hl3 { width: 60px; height: 60px; top: 30px; left: 30px; }
    
    .data-particle {
        font-size: 10px;
    }
}