@font-face {
  font-family: "BBB-Herthey-Futural";
src: url("BBB-Herthey-Futural-40.woff") format("woff");
}
body {
background-color: #fff;
min-height: 100vh;
}
.nav {
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
padding: 30px 20px;
}
.nav-item {
text-decoration: none;
font-size: clamp(6px, 5vw, 20px);
letter-spacing: 1px;
}
.work,
.about {
color: #9fb3ff;
}
.logo {
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #9fb3ff;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
width: 100%;
height: 100vh;
background: #ffffff;
overflow: hidden;
font-family: "BBB-Herthey-Futural", Helvetica;
cursor: none;
}
.container {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
perspective: 1000px;
}
.text-wrapper {
position: relative;
display: inline-block;
}
.letter {
display: inline-block;
font-size: 2rem;
font-weight: 700;
color: transparent;
text-transform: uppercase;
position: relative;
letter-spacing: 0.03em;
margin: 0 18px;
}
.letter canvas {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
.letter.space {
width: 0.5em;
margin: 0 8px;
}
/* Curseur personnalisé */
.cursor {
position: fixed;
width: 20px;
height: 20px;
border: 2px solid #a1b7ff;
border-radius: 50%;
pointer-events: none;
transform: translate(-50%, -50%);
transition: all 0.15s ease;
z-index: 9999;
}
/* Particules de fond */
.particle {
position: absolute;
width: 2px;
height: 2px;
background: #a1b7ff;
border-radius: 50%;
opacity: 0;
animation: float 3s infinite;
}
@keyframes float {
    0%, 100% {
opacity: 0;
transform: translateY(0) scale(0);
}
    50% {
opacity: 0.8;
transform: translateY(-50px) scale(1);
}
}
/* Responsive téléphone uniquement */
@media (max-width: 480px) {
.text-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 2px;
max-width: 95vw;
row-gap: 60px;
}
.letter {
font-size: 0.45rem;
margin: 0;
}
.line-break {
width: 100%;
height: 0;
}
.letter canvas {
top: 50%;
left: 50%;
}
.cursor,
.cursor-follower {
display: none !important;
}
body {
cursor: auto;
}
}