/* Minimal Pink Portfolio */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --pink: #E91E8C;
    --leopard: url('../assets/leopard.jpg');
}

html, body {
    height: 100%;
    overflow: hidden;
}

body {
    font-family: 'IBM Plex Mono', monospace;
    background: var(--pink);
    position: relative;
}

.container {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
}

.name {
    font-size: clamp(3rem, 12vw, 8rem);
    text-align: center;
    letter-spacing: 0.05em;
    padding: 1rem;
    font-weight: 700;
    background: var(--leopard);
    background-size: 350px;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    pointer-events: auto;
}

.links {
    position: absolute;
    inset: 0;
}

.links a {
    position: absolute;
    text-decoration: none;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    letter-spacing: 0.1em;
    font-weight: 700;
    background: var(--leopard);
    background-size: 350px;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: transform 0.2s;
    white-space: nowrap;
}

.links a:hover {
    transform: scale(1.1);
    animation-play-state: paused !important;
}

.links a:nth-child(1) { animation: float1 30s ease-in-out infinite; }
.links a:nth-child(2) { animation: float2 35s ease-in-out infinite; }
.links a:nth-child(3) { animation: float3 28s ease-in-out infinite; }
.links a:nth-child(4) { animation: float4 32s ease-in-out infinite; }
.links a:nth-child(5) { animation: float5 38s ease-in-out infinite; }
.links a:nth-child(6) { animation: float6 25s ease-in-out infinite; }
.links a:nth-child(7) { animation: float7 33s ease-in-out infinite; }
.links a:nth-child(8) { animation: float8 29s ease-in-out infinite; }

@keyframes float1 {
    0%, 100% { top: 10%; left: 5%; }
    25% { top: 20%; left: 80%; }
    50% { top: 85%; left: 70%; }
    75% { top: 70%; left: 10%; }
}

@keyframes float2 {
    0%, 100% { top: 5%; left: 70%; }
    25% { top: 80%; left: 60%; }
    50% { top: 75%; left: 5%; }
    75% { top: 15%; left: 20%; }
}

@keyframes float3 {
    0%, 100% { top: 85%; left: 80%; }
    25% { top: 10%; left: 50%; }
    50% { top: 20%; left: 5%; }
    75% { top: 80%; left: 30%; }
}

@keyframes float4 {
    0%, 100% { top: 50%; left: 85%; }
    25% { top: 5%; left: 30%; }
    50% { top: 60%; left: 5%; }
    75% { top: 90%; left: 60%; }
}

@keyframes float5 {
    0%, 100% { top: 90%; left: 20%; }
    25% { top: 30%; left: 85%; }
    50% { top: 5%; left: 40%; }
    75% { top: 40%; left: 5%; }
}

@keyframes float6 {
    0%, 100% { top: 30%; left: 90%; }
    25% { top: 85%; left: 40%; }
    50% { top: 40%; left: 15%; }
    75% { top: 5%; left: 65%; }
}

@keyframes float7 {
    0%, 100% { top: 60%; left: 75%; }
    25% { top: 15%; left: 15%; }
    50% { top: 80%; left: 50%; }
    75% { top: 25%; left: 80%; }
}

@keyframes float8 {
    0%, 100% { top: 45%; left: 10%; }
    25% { top: 75%; left: 75%; }
    50% { top: 10%; left: 60%; }
    75% { top: 65%; left: 20%; }
}