body { font-family: 'Inter', sans-serif; transition: opacity 0.4s ease; overflow-x: hidden; }
body.is-loading { opacity: 0; }
body.loaded { opacity: 1; }
body.modal-open { overflow: hidden; }

.glass { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(15px); }
.glass-dark { background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(15px); }
.logo-text { font-size: 1.2rem; font-style: italic; font-weight: 900; }

.nav-links { display: flex; gap: 2rem; font-size: 0.7rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1rem; }
.nav-links a { color: #64748b; transition: 0.3s; }
.nav-links.dark-nav a { color: #94a3b8; }
.nav-links a:hover, .nav-links a.active-link { color: #ea580c; }

.hero { text-align: center; padding: 6rem 2rem 2rem; }
.hero-title { font-size: clamp(3rem, 10vw, 7rem); line-height: 0.85; margin-bottom: 1rem; }

.section-title { font-size: 1.5rem; font-weight: 900; display: flex; align-items: center; gap: 1rem; }
.badge-green { padding: 0.4rem 0.6rem; background: #22c55e; border-radius: 0.5rem; color: white; font-size: 0.7rem; }
.badge-red { padding: 0.4rem 0.6rem; background: #dc2626; border-radius: 0.5rem; color: white; font-size: 0.7rem; }
.badge-rlc { padding: 0.4rem 0.6rem; background: linear-gradient(45deg, #4c0519, #be123c); border-radius: 0.5rem; color: white; font-size: 0.7rem; border: 1px solid #fb7185; }

.project-card, .car-card { transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.project-card:hover { border-color: #ea580c; transform: translateY(-5px); }

#page-transition { transform: translateY(0); transition: transform 0.8s cubic-bezier(0.8, 0, 0.2, 1); }
#page-transition.exit { transform: translateY(-100%); }

/* MODALE */
#project-modal.is-visible, #car-modal.is-visible { opacity: 1; pointer-events: auto; }
#project-modal.is-visible #modal-content, #car-modal.is-visible #car-modal-content { transform: scale(1); }

.thumb-img { aspect-ratio: 1/1; border-radius: 12px; cursor: pointer; opacity: 0.4; transition: 0.3s ease; border: 2px solid transparent; object-fit: contain; background: #1e293b; }
.thumb-img.active, .thumb-img:hover { opacity: 1; border-color: #dc2626; }

.reveal { opacity: 0; transform: translateY(40px); transition: 1s cubic-bezier(0.2, 1, 0.3, 1); }
.reveal.active { opacity: 1; transform: translateY(0); }