/* =====================================================
   YANIS HUB — Design System & Styles
   Theme: Dark / Glassmorphism / Neon Accents
   Approach: Mobile-First, CSS Grid + Flexbox
   ===================================================== */

/* ── Design Tokens ────────────────────────────────── */
:root {
    /* Background */
    --bg-primary:    hsl(228, 24%, 6%);
    --bg-secondary:  hsl(228, 20%, 10%);
    --bg-card:       hsla(228, 20%, 14%, 0.55);
    --bg-card-hover: hsla(228, 20%, 16%, 0.7);

    /* Accent colors — one per card */
    --accent-portfolio: hsl(255, 90%, 66%);     /* Violet électrique  */
    --accent-techfix:   hsl(195, 100%, 50%);    /* Bleu cyan néon     */
    --accent-webfix:    hsl(160, 85%, 50%);     /* Vert émeraude néon */
    --accent-primary:   hsl(255, 90%, 66%);     /* Default accent     */

    /* Text */
    --text-primary:   hsl(0, 0%, 95%);
    --text-secondary: hsl(228, 15%, 65%);
    --text-muted:     hsl(228, 12%, 42%);

    /* Glass effect */
    --glass-border:   hsla(0, 0%, 100%, 0.08);
    --glass-shadow:   0 8px 32px hsla(0, 0%, 0%, 0.35);

    /* Misc */
    --radius-sm:  8px;
    --radius-md: 16px;
    --radius-lg: 24px;

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

    --transition-fast:   0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}


/* ── Reset & Base ─────────────────────────────────── */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    position: relative;
}


/* ── Particle Canvas Background ───────────────────── */
#particle-canvas {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    width: 100%;
    height: 100%;
}


/* ── Background Gradient Blobs (pure CSS) ─────────── */
body::before,
body::after {
    content: '';
    position: fixed;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.15;
    z-index: 0;
    pointer-events: none;
}

body::before {
    width: 600px;
    height: 600px;
    background: var(--accent-portfolio);
    top: -150px;
    left: -100px;
    animation: float-blob-1 18s ease-in-out infinite alternate;
}

body::after {
    width: 500px;
    height: 500px;
    background: var(--accent-techfix);
    bottom: -120px;
    right: -80px;
    animation: float-blob-2 22s ease-in-out infinite alternate;
}

@keyframes float-blob-1 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(80px, 60px) scale(1.15); }
}

@keyframes float-blob-2 {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-60px, -80px) scale(1.2); }
}


/* ── HEADER ───────────────────────────────────────── */
.site-header {
    position: relative;
    z-index: 10;
    padding: 3rem 1.5rem 2rem;
    text-align: center;
}

.header-content {
    max-width: 700px;
    margin: 0 auto;
}

/* Logo group */
.logo-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.25rem;

    /* Animation — initial state (hidden) */
    opacity: 0;
    transform: translateY(24px);
}

.logo-group.visible {
    animation: slideUp 0.7s var(--transition-smooth) forwards;
}

.logo-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--accent-portfolio), var(--accent-techfix));
    color: var(--bg-primary);
    font-size: 1.2rem;
    flex-shrink: 0;
    box-shadow: 0 0 20px hsla(255, 90%, 66%, 0.3);
}

.logo-text {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--text-primary);
}

.logo-text .accent {
    background: linear-gradient(135deg, var(--accent-portfolio), var(--accent-techfix));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Tagline */
.tagline {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: 540px;
    margin: 0 auto 2rem;

    opacity: 0;
    transform: translateY(20px);
}

.tagline.visible {
    animation: slideUp 0.7s var(--transition-smooth) 0.15s forwards;
}

/* Divider */
.header-divider {
    width: 60px;
    height: 3px;
    margin: 0 auto;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--accent-portfolio), var(--accent-techfix));
    opacity: 0;
    transform: scaleX(0);
}

.header-divider.visible {
    animation: expandDivider 0.6s var(--transition-smooth) 0.3s forwards;
}


/* ── MAIN — Card Grid ─────────────────────────────── */
.main-content {
    position: relative;
    z-index: 10;
    flex: 1;
    padding: 2rem 1.5rem 4rem;
}

.card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
    max-width: 1100px;
    margin: 0 auto;
}

/* ── Responsive breakpoints ─── */
@media (min-width: 640px) {
    .card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 960px) {
    .card-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
    }

    .site-header {
        padding: 4.5rem 2rem 2.5rem;
    }

    .logo-text {
        font-size: 2.5rem;
    }

    .tagline {
        font-size: 1.1rem;
    }
}

@media (min-width: 1200px) {
    .card-grid {
        gap: 2.5rem;
    }
}


/* ── HUB CARD ─────────────────────────────────────── */
.hub-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: default;

    /* Glassmorphism */
    background: var(--bg-card);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: var(--glass-shadow);

    /* Smooth hover transition */
    transition:
        transform var(--transition-smooth),
        box-shadow var(--transition-smooth),
        border-color var(--transition-smooth);

    /* Entrance animation — hidden initially */
    opacity: 0;
    transform: translateY(40px);
}

.hub-card.visible {
    animation: cardEnter 0.65s var(--transition-smooth) forwards;
}

/* Staggered delays — set by JS */
.hub-card:nth-child(1).visible { animation-delay: 0.45s; }
.hub-card:nth-child(2).visible { animation-delay: 0.6s; }
.hub-card:nth-child(3).visible { animation-delay: 0.75s; }

/* Card glow layer — visible on hover */
.card-glow {
    position: absolute;
    inset: -1px;
    border-radius: var(--radius-lg);
    z-index: 0;
    opacity: 0;
    transition: opacity var(--transition-smooth);
    pointer-events: none;
}

/* Accent-specific glow colors */
[data-accent="portfolio"] .card-glow {
    box-shadow:
        0 0 30px hsla(255, 90%, 66%, 0.2),
        inset 0 0 30px hsla(255, 90%, 66%, 0.05);
    border: 1px solid hsla(255, 90%, 66%, 0.25);
}

[data-accent="techfix"] .card-glow {
    box-shadow:
        0 0 30px hsla(195, 100%, 50%, 0.2),
        inset 0 0 30px hsla(195, 100%, 50%, 0.05);
    border: 1px solid hsla(195, 100%, 50%, 0.25);
}

[data-accent="webfix"] .card-glow {
    box-shadow:
        0 0 30px hsla(160, 85%, 50%, 0.2),
        inset 0 0 30px hsla(160, 85%, 50%, 0.05);
    border: 1px solid hsla(160, 85%, 50%, 0.25);
}

/* Hover effects */
.hub-card:hover {
    transform: translateY(-8px);
}

.hub-card:hover .card-glow {
    opacity: 1;
}

/* Inner content */
.card-inner {
    position: relative;
    z-index: 1;
    padding: 2.25rem 2rem 2rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

/* ── Card Icon ─── */
.card-icon-wrapper {
    margin-bottom: 0.75rem;
}

.card-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    transition:
        transform var(--transition-spring),
        box-shadow var(--transition-smooth);
}

/* Per-card icon coloring */
[data-accent="portfolio"] .card-icon {
    background: hsla(255, 90%, 66%, 0.12);
    color: var(--accent-portfolio);
    border: 1px solid hsla(255, 90%, 66%, 0.15);
}

[data-accent="techfix"] .card-icon {
    background: hsla(195, 100%, 50%, 0.12);
    color: var(--accent-techfix);
    border: 1px solid hsla(195, 100%, 50%, 0.15);
}

[data-accent="webfix"] .card-icon {
    background: hsla(160, 85%, 50%, 0.12);
    color: var(--accent-webfix);
    border: 1px solid hsla(160, 85%, 50%, 0.15);
}

.hub-card:hover .card-icon {
    transform: scale(1.1) rotate(-3deg);
}

[data-accent="portfolio"]:hover .card-icon {
    box-shadow: 0 0 20px hsla(255, 90%, 66%, 0.25);
}

[data-accent="techfix"]:hover .card-icon {
    box-shadow: 0 0 20px hsla(195, 100%, 50%, 0.25);
}

[data-accent="webfix"]:hover .card-icon {
    box-shadow: 0 0 20px hsla(160, 85%, 50%, 0.25);
}

/* ── Card Typography ─── */
.card-title {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 0.35rem;
    color: var(--text-primary);
}

.card-description {
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.65;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

/* ── Card Button ─── */
.card-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.5rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.02em;
    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-smooth);
}

.card-btn i {
    font-size: 0.8rem;
    transition: transform var(--transition-fast);
}

.card-btn:hover i {
    transform: translateX(4px);
}

/* Per-card button styling */
[data-accent="portfolio"] .card-btn {
    background: hsla(255, 90%, 66%, 0.1);
    color: var(--accent-portfolio);
    border: 1px solid hsla(255, 90%, 66%, 0.2);
}

[data-accent="portfolio"] .card-btn:hover {
    background: var(--accent-portfolio);
    color: var(--bg-primary);
    box-shadow: 0 0 24px hsla(255, 90%, 66%, 0.35);
}

[data-accent="techfix"] .card-btn {
    background: hsla(195, 100%, 50%, 0.1);
    color: var(--accent-techfix);
    border: 1px solid hsla(195, 100%, 50%, 0.2);
}

[data-accent="techfix"] .card-btn:hover {
    background: var(--accent-techfix);
    color: var(--bg-primary);
    box-shadow: 0 0 24px hsla(195, 100%, 50%, 0.35);
}

[data-accent="webfix"] .card-btn {
    background: hsla(160, 85%, 50%, 0.1);
    color: var(--accent-webfix);
    border: 1px solid hsla(160, 85%, 50%, 0.2);
}

[data-accent="webfix"] .card-btn:hover {
    background: var(--accent-webfix);
    color: var(--bg-primary);
    box-shadow: 0 0 24px hsla(160, 85%, 50%, 0.35);
}


/* ── FOOTER ───────────────────────────────────────── */
.site-footer {
    position: relative;
    z-index: 10;
    padding: 2.5rem 1.5rem;
    border-top: 1px solid var(--glass-border);
    background: hsla(228, 24%, 6%, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.footer-content {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    text-align: center;
}

.footer-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.footer-logo-icon {
    color: var(--accent-primary);
    font-size: 0.85rem;
}

.footer-brand strong {
    background: linear-gradient(135deg, var(--accent-portfolio), var(--accent-techfix));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.footer-socials {
    display: flex;
    gap: 0.75rem;
}

.social-link {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: hsla(0, 0%, 100%, 0.04);
    border: 1px solid var(--glass-border);
    color: var(--text-muted);
    font-size: 1rem;
    text-decoration: none;
    transition:
        color var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-smooth);
}

.social-link:hover {
    color: var(--accent-primary);
    background: hsla(255, 90%, 66%, 0.08);
    border-color: hsla(255, 90%, 66%, 0.2);
    transform: translateY(-2px);
    box-shadow: 0 0 16px hsla(255, 90%, 66%, 0.2);
}

.footer-copy {
    font-size: 0.8rem;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}


/* ── ANIMATIONS ───────────────────────────────────── */
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cardEnter {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes expandDivider {
    from {
        opacity: 0;
        transform: scaleX(0);
    }
    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}