/* 1. FONTS */

body {
    /* On définit Inter, puis des polices système qui ont des proportions proches */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    
    /* TRÈS IMPORTANT : Force une hauteur de ligne stable dès le départ */
    line-height: 1.5; 
    -webkit-font-smoothing: antialiased;
}

/* latin-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7SUc.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(fonts/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 2. ANIMATIONS */

/* Pulse animation for the database icon */
@keyframes db-pulse {
    0%, 100% {
        filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.6));
    }
    50% {
        filter: drop-shadow(0 0 25px rgba(6, 182, 212, 0.9)) drop-shadow(0 0 50px rgba(6, 182, 212, 0.5));
    }
}

.database-icon {
    animation: db-pulse 2s ease-in-out infinite;
}

/* Circuit trace pulse animation */
@keyframes trace-pulse-1 {
    0% { stroke-dashoffset: 200; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes trace-pulse-2 {
    0% { stroke-dashoffset: 180; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes trace-pulse-3 {
    0% { stroke-dashoffset: 250; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes trace-pulse-4 {
    0% { stroke-dashoffset: 300; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes trace-pulse-5 {
    0% { stroke-dashoffset: 220; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes node-glow {
    0%, 100% { 
        fill: rgba(6, 182, 212, 0.3);
        filter: drop-shadow(0 0 2px rgba(6, 182, 212, 0.5));
    }
    50% { 
        fill: rgba(6, 182, 212, 0.8);
        filter: drop-shadow(0 0 8px rgba(6, 182, 212, 0.9));
    }
}

.circuit-trace {
    stroke: rgba(6, 182, 212, 0.15);
    stroke-width: 2;
    fill: none;
}

.circuit-pulse {
    stroke: #06b6d4;
    stroke-width: 3;
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 20 1000;
    opacity: 0;
}

.pulse-1 { animation: trace-pulse-1 3s ease-out infinite; }
.pulse-2 { animation: trace-pulse-2 3s ease-out infinite 0.3s; }
.pulse-3 { animation: trace-pulse-3 3s ease-out infinite 0.6s; }
.pulse-4 { animation: trace-pulse-4 3s ease-out infinite 0.9s; }
.pulse-5 { animation: trace-pulse-5 3s ease-out infinite 1.2s; }
.pulse-6 { animation: trace-pulse-1 3s ease-out infinite 1.5s; }
.pulse-7 { animation: trace-pulse-2 3s ease-out infinite 1.8s; }
.pulse-8 { animation: trace-pulse-3 3s ease-out infinite 2.1s; }
.pulse-9 { animation: trace-pulse-4 3s ease-out infinite 2.4s; }
.pulse-10 { animation: trace-pulse-5 3s ease-out infinite 2.7s; }

.endpoint-node {
    fill: rgba(6, 182, 212, 0.2);
    transition: all 0.3s ease;
}

.node-glow-1 { animation: node-glow 3s ease-in-out infinite 1s; }
.node-glow-2 { animation: node-glow 3s ease-in-out infinite 1.3s; }
.node-glow-3 { animation: node-glow 3s ease-in-out infinite 1.6s; }
.node-glow-4 { animation: node-glow 3s ease-in-out infinite 1.9s; }
.node-glow-5 { animation: node-glow 3s ease-in-out infinite 2.2s; }
.node-glow-6 { animation: node-glow 3s ease-in-out infinite 2.5s; }
.node-glow-7 { animation: node-glow 3s ease-in-out infinite 2.8s; }
.node-glow-8 { animation: node-glow 3s ease-in-out infinite 3.1s; }
.node-glow-9 { animation: node-glow 3s ease-in-out infinite 3.4s; }
.node-glow-10 { animation: node-glow 3s ease-in-out infinite 3.7s; }

/* Dot pattern background */
.dot-pattern {
    background-image: radial-gradient(circle, rgba(148, 163, 184, 0.3) 1px, transparent 1px);
    background-size: 24px 24px;
}

/* Keyframes */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes counter-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}


/* PostgreSQL Sun glow effect */
.postgresql-sun {
    box-shadow: 
        0 0 60px rgba(251, 191, 36, 0.5),
        0 0 120px rgba(251, 191, 36, 0.3),
        0 0 180px rgba(251, 191, 36, 0.1);
    animation: sun-glow 4s ease-in-out infinite;
}

@keyframes sun-glow {
    0%, 100% { 
        box-shadow: 
            0 0 60px rgba(251, 191, 36, 0.5),
            0 0 120px rgba(251, 191, 36, 0.3),
            0 0 180px rgba(251, 191, 36, 0.1);
    }
    50% { 
        box-shadow: 
            0 0 80px rgba(251, 191, 36, 0.6),
            0 0 150px rgba(251, 191, 36, 0.4),
            0 0 220px rgba(251, 191, 36, 0.2);
    }
}

/* PAUSE ALL ORBITS ON HOVER */
.solar-system-container:has(.planet-card:hover) .planets-orbit,
.solar-system-container:has(.planet-card:hover) .inner-orbit,
.solar-system-container:has(.planet-card:hover) .middle-orbit,
.solar-system-container:has(.planet-card:hover) .outer-orbit {
    animation-play-state: paused !important;
}

/* Also pause the counter-spin on icons when orbit is paused */
.solar-system-container:has(.planet-card:hover) .planet-icon,
.solar-system-container:has(.planet-card:hover) .planet-details {
    animation-play-state: paused !important;
}

/* Show expanded card on hover */
.planet-card:hover .planet-details {
    opacity: 1;
    visibility: visible;
    transform: scale(1) translateX(-50%);
}

.planet-card:hover .planet-icon {
    transform: scale(1.15);
    z-index: 30;
}

/* Ensure cards don't get cut off */
.planet-wrapper {
    z-index: 10;
}

.planet-card:hover {
    z-index: 50;
}

/* Mobile: Hide solar system, show mobile grid */
@media (max-width: 1024px) {
    .solar-system-container {
        display: none !important;
    }
    
    .mobile-extensions-grid {
        display: grid !important;
    }
}

@media (min-width: 1025px) {
    .mobile-extensions-grid {
        display: none !important;
    }
}

@keyframes float-slow {
    0%, 100% { transform: translateY(0) translateX(0); }
    50% { transform: translateY(-20px) translateX(10px); }
}

@keyframes float-slower {
    0%, 100% { transform: translateY(0) translateX(0); }
    50% { transform: translateY(30px) translateX(-15px); }
}

@keyframes pulse-slow {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.05); }
}

@keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-float-slow {
    animation: float-slow 8s ease-in-out infinite;
}

.animate-float-slower {
    animation: float-slower 12s ease-in-out infinite;
}

.animate-pulse-slow {
    animation: pulse-slow 3s ease-in-out infinite;
}

.animate-fade-in {
    animation: fade-in 0.6s ease-out forwards;
}