/*
    Portfolio Bryx
    CSS complémentaire non minifié.
    Couleur principale : #cd226e.
    Mode clair/sombre uniquement.
*/

*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    color-scheme: dark;
    --bryx-primary: #cd226e;
    --bryx-primary-soft: rgba(205, 34, 110, 0.12);
    --bryx-bg: #120811;
    --bryx-bg-alt: #1b0f18;
    --bryx-text: #fff7fb;
    --bryx-muted: #d8bccb;
    --bryx-card: rgba(35, 18, 31, 0.78);
    --bryx-border: rgba(255, 255, 255, 0.12);
    --bryx-shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
}

html[data-theme='light'] {
    color-scheme: light;
    --bryx-bg: #fff7fb;
    --bryx-bg-alt: #ffffff;
    --bryx-text: #21111a;
    --bryx-muted: #6f5b66;
    --bryx-card: rgba(255, 255, 255, 0.82);
    --bryx-border: rgba(205, 34, 110, 0.18);
    --bryx-shadow: 0 24px 70px rgba(105, 25, 65, 0.14);
}

html[data-theme='dark'] {
    color-scheme: dark;
    --bryx-bg: #120811;
    --bryx-bg-alt: #1b0f18;
    --bryx-text: #fff7fb;
    --bryx-muted: #d8bccb;
    --bryx-card: rgba(35, 18, 31, 0.78);
    --bryx-border: rgba(255, 255, 255, 0.12);
    --bryx-shadow: 0 24px 80px rgba(0, 0, 0, 0.38);
}

html {
    scroll-behavior: smooth;
}

body.bryx-portfolio-body {
    margin: 0;
    min-height: 100vh;
    background: var(--bryx-bg);
    color: var(--bryx-text);
}

.bryx-portfolio-gradient {
    background:
        radial-gradient(circle at top left, rgba(205, 34, 110, 0.34), transparent 34rem),
        radial-gradient(circle at bottom right, rgba(205, 34, 110, 0.16), transparent 32rem),
        linear-gradient(135deg, var(--bryx-bg) 0%, var(--bryx-bg-alt) 48%, var(--bryx-bg) 100%);
}

.bryx-glass {
    background: var(--bryx-card);
    border-color: var(--bryx-border);
    box-shadow: var(--bryx-shadow);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.bryx-muted {
    color: var(--bryx-muted);
}

.bryx-primary {
    color: var(--bryx-primary);
}

.bryx-primary-soft {
    background: var(--bryx-primary-soft);
}

.bryx-profile-photo {
    width: 8.5rem;
    height: 8.5rem;
    border: 4px solid rgba(205, 34, 110, 0.34);
    border-radius: 9999px;
    box-shadow:
        0 24px 55px rgba(205, 34, 110, 0.26),
        inset 0 0 0 8px rgba(255, 255, 255, 0.12);
    object-fit: cover;
    object-position: center;
    background: linear-gradient(135deg, #cd226e, #f06aa6);
}

.bryx-x-link {
    border-color: var(--bryx-border);
    background: var(--bryx-bg-alt);
    color: var(--bryx-primary);
    box-shadow: 0 18px 45px rgba(205, 34, 110, 0.16);
}

.bryx-x-link:hover {
    background: var(--bryx-primary);
    color: #ffffff;
    box-shadow: 0 22px 55px rgba(205, 34, 110, 0.28);
}

.bryx-card {
    transition:
        transform 220ms ease,
        box-shadow 220ms ease,
        border-color 220ms ease;
}

.bryx-card:hover {
    transform: translateY(-4px);
    border-color: rgba(205, 34, 110, 0.42);
    box-shadow: 0 22px 50px rgba(205, 34, 110, 0.18);
}

.bryx-animate-in {
    animation: bryx-fade-up 720ms ease both;
}

.bryx-delay-1 { animation-delay: 90ms; }
.bryx-delay-2 { animation-delay: 180ms; }
.bryx-delay-3 { animation-delay: 270ms; }
.bryx-delay-4 { animation-delay: 360ms; }

.bryx-float {
    animation: bryx-float 5.5s ease-in-out infinite;
}

.bryx-theme-toggle {
    border: 1px solid var(--bryx-border);
    background: var(--bryx-card);
    color: var(--bryx-text);
    box-shadow: var(--bryx-shadow);
}

html.bryx-theme-switching *,
html.bryx-theme-switching *::before,
html.bryx-theme-switching *::after {
    animation: none !important;
    transition: none !important;
}

html.bryx-theme-ready .bryx-animate-in {
    will-change: transform, opacity;
}

@keyframes bryx-fade-up {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bryx-float {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@media (max-width: 640px) {
    .bryx-profile-photo {
        width: 7rem;
        height: 7rem;
    }

    .bryx-x-link {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 1ms !important;
    }
}