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

:root {
    --bg: #080b0f;
    --accent: #00f5a0;
    --accent2: #00c8f5;
    --text: #e8f0f8;
    --muted: #3a4a5a;
    --muted2: #5a7080;
    --surface: rgba(255,255,255,0.03);
    --border: rgba(0,245,160,0.06);
    --border2: rgba(255,255,255,0.07);
}

html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: 'Syne', sans-serif; min-height: 100vh; overflow-x: hidden; }
body::after { content:''; position:fixed; inset:0; background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.02) 2px,rgba(0,0,0,0.02) 4px); pointer-events:none; z-index:500; }
.grid { position:fixed; inset:0; background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px); background-size:60px 60px; pointer-events:none; z-index:0; opacity:0.6; }
.blob1 { position:fixed; width:600px; height:600px; border-radius:50%; background:radial-gradient(circle,rgba(0,245,160,0.05) 0%,transparent 70%); top:10%; left:5%; pointer-events:none; animation:drift1 10s ease-in-out infinite; z-index:0; }
.blob2 { position:fixed; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle,rgba(0,200,245,0.04) 0%,transparent 70%); top:55%; right:0%; pointer-events:none; animation:drift2 12s ease-in-out infinite; z-index:0; }
.corner { position:fixed; width:28px; height:28px; z-index:10; }
.corner--tl { top:1.5rem; left:1.5rem; border-top:1px solid var(--muted); border-left:1px solid var(--muted); }
.corner--tr { top:1.5rem; right:1.5rem; border-top:1px solid var(--muted); border-right:1px solid var(--muted); }
.corner--bl { bottom:1.5rem; left:1.5rem; border-bottom:1px solid var(--muted); border-left:1px solid var(--muted); }
.corner--br { bottom:1.5rem; right:1.5rem; border-bottom:1px solid var(--muted); border-right:1px solid var(--muted); }

/* NAV */
.nav { position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:1.2rem 3rem; background:rgba(8,11,15,0.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--border2); }
.nav-logo { font-family:'DM Mono',monospace; font-size:13px; color:var(--text); letter-spacing:0.05em; text-decoration:none; transition:color 0.2s; }
.nav-logo:hover { color:var(--accent); }
.nav-logo .prompt { color:var(--accent); }
.nav-right { display:flex; align-items:center; gap:1.5rem; }
.cv-btn { display:inline-flex; align-items:center; gap:6px; font-family:'DM Mono',monospace; font-size:11px; color:var(--accent); border:1px solid rgba(0,245,160,0.4); padding:5px 14px; text-decoration:none; letter-spacing:0.1em; transition:background 0.2s,color 0.2s; }
.cv-btn:hover { background:var(--accent); color:#080b0f; }
.nav-status { display:flex; align-items:center; gap:8px; font-family:'DM Mono',monospace; font-size:11px; color:var(--accent2); letter-spacing:0.1em; }
.status-dot { width:6px; height:6px; border-radius:50%; background:var(--accent2); animation:blink 2s ease-in-out infinite; }

/* HERO */
.hero { position:relative; z-index:10; padding:10rem 3rem 4rem; max-width:900px; margin:0 auto; }
.hero-tag { font-family:'DM Mono',monospace; font-size:13px; color:var(--accent); margin-bottom:2rem; display:flex; align-items:center; gap:8px; opacity:0; animation:fadeIn 0.5s ease forwards 0.3s; }
.prompt { color:var(--muted2); }
.cursor { display:inline-block; width:8px; height:14px; background:var(--accent); animation:blink 1s step-end infinite; }
.hero-title { font-size:clamp(3.5rem,9vw,7rem); font-weight:800; line-height:0.9; letter-spacing:-0.04em; opacity:0; transform:translateY(24px); animation:fadeUp 0.9s cubic-bezier(0.16,1,0.3,1) forwards 0.5s; }
.outline { color:transparent; -webkit-text-stroke:1px var(--accent); }
.hero-intro { margin-top:2rem; font-family:'DM Mono',monospace; font-size:clamp(0.75rem,1.6vw,0.95rem); color:var(--muted2); line-height:1.8; max-width:560px; opacity:0; transform:translateY(12px); animation:fadeUp 0.7s ease forwards 0.8s; }
.hero-badges { display:flex; flex-wrap:wrap; gap:10px; margin-top:1.5rem; opacity:0; animation:fadeUp 0.6s ease forwards 1s; }
.badge { font-family:'DM Mono',monospace; font-size:11px; color:var(--accent); border:1px solid rgba(0,245,160,0.3); padding:5px 14px; letter-spacing:0.08em; }

/* SECTION */
.section { position:relative; z-index:10; max-width:900px; margin:0 auto; padding:3rem 3rem 4rem; border-top:1px solid var(--border2); }
.section-header { display:flex; align-items:baseline; gap:1rem; margin-bottom:2rem; }
.section-tag { font-family:'DM Mono',monospace; font-size:11px; color:var(--accent); letter-spacing:0.1em; }
.section-title { font-size:clamp(1.5rem,3vw,2rem); font-weight:800; letter-spacing:-0.02em; }

/* PREVIEW PRINCIPALE */
.preview-link { display:block; text-decoration:none; border:1px solid var(--border2); overflow:hidden; transition:border-color 0.3s,transform 0.3s; }
.preview-link:hover { border-color:rgba(0,245,160,0.4); transform:translateY(-3px); }

.preview-wrap { position:relative; overflow:hidden; aspect-ratio:16/9; }
.preview-img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.5s ease; }
.preview-link:hover .preview-img { transform:scale(1.02); }

.preview-overlay {
    position:absolute; inset:0;
    background:rgba(8,11,15,0.5);
    display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity 0.3s;
}
.preview-link:hover .preview-overlay { opacity:1; }

.preview-btn {
    display:flex; align-items:center; gap:10px;
    font-family:'DM Mono',monospace; font-size:14px;
    color:#080b0f; background:var(--accent);
    padding:12px 28px; letter-spacing:0.1em;
    font-weight:700;
}

.preview-caption {
    display:flex; justify-content:space-between; align-items:center;
    padding:0.9rem 1.2rem;
    border-top:1px solid var(--border2);
    background:var(--surface);
}
.caption-url { font-family:'DM Mono',monospace; font-size:11px; color:var(--accent2); }
.caption-hint { font-family:'DM Mono',monospace; font-size:10px; color:var(--muted2); }

/* GALLERY */
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:1rem; }
.gallery-card { background:var(--surface); border:1px solid var(--border2); overflow:hidden; cursor:pointer; transition:border-color 0.2s,transform 0.2s; }
.gallery-card:hover { border-color:rgba(0,245,160,0.3); transform:translateY(-3px); }
.gallery-img-wrap { position:relative; overflow:hidden; aspect-ratio:16/9; }
.gallery-img { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.4s ease; }
.gallery-card:hover .gallery-img { transform:scale(1.04); }
.gallery-overlay { position:absolute; inset:0; background:rgba(8,11,15,0.6); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; opacity:0; transition:opacity 0.3s; color:var(--accent); font-family:'DM Mono',monospace; font-size:12px; letter-spacing:0.1em; }
.gallery-card:hover .gallery-overlay { opacity:1; }
.gallery-caption { display:flex; align-items:center; gap:10px; padding:0.9rem 1.2rem; border-top:1px solid var(--border2); }
.caption-num { font-family:'DM Mono',monospace; font-size:10px; color:var(--accent); letter-spacing:0.1em; }
.caption-text { font-family:'DM Mono',monospace; font-size:11px; color:var(--muted2); }

/* DETAILS */
.details-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:1px; background:var(--border2); border:1px solid var(--border2); margin-bottom:2rem; }
.detail-card { background:var(--bg); padding:1.2rem 1.4rem; display:flex; flex-direction:column; gap:6px; transition:background 0.2s; }
.detail-card:hover { background:var(--surface); }
.detail-key { font-family:'DM Mono',monospace; font-size:10px; color:var(--accent); letter-spacing:0.1em; text-transform:uppercase; }
.detail-val { font-size:13px; font-weight:700; color:var(--text); }

.project-desc { background:var(--surface); border:1px solid var(--border2); border-left:3px solid var(--accent); padding:1.4rem 1.6rem; }
.project-desc p { font-size:14px; color:var(--muted2); line-height:1.9; }

/* LIGHTBOX */
.lightbox { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:2rem; opacity:0; pointer-events:none; transition:opacity 0.3s ease; }
.lightbox.active { opacity:1; pointer-events:all; }
.lightbox-overlay { position:absolute; inset:0; background:rgba(8,11,15,0.95); }
.lightbox-box { position:relative; z-index:1; width:100%; max-width:860px; background:#0d1117; border:1px solid var(--border2); display:flex; flex-direction:column; transform:scale(0.95); transition:transform 0.3s ease; }
.lightbox.active .lightbox-box { transform:scale(1); }
.lightbox-header { display:flex; align-items:center; justify-content:space-between; padding:0.9rem 1.2rem; border-bottom:1px solid var(--border2); background:rgba(0,245,160,0.03); }
.lightbox-title { font-family:'DM Mono',monospace; font-size:12px; color:var(--accent); letter-spacing:0.1em; }
.lightbox-close { display:flex; align-items:center; gap:6px; background:transparent; border:1px solid var(--border2); color:var(--muted2); font-family:'DM Mono',monospace; font-size:10px; padding:4px 10px; cursor:pointer; letter-spacing:0.1em; transition:all 0.2s; }
.lightbox-close:hover { border-color:var(--accent); color:var(--accent); }
.lightbox-img-wrap { position:relative; display:flex; align-items:center; }
.lightbox-img { width:100%; height:auto; display:block; max-height:75vh; object-fit:contain; }
.lightbox-nav { position:absolute; background:rgba(8,11,15,0.8); border:1px solid var(--border2); color:var(--muted2); padding:12px; cursor:pointer; transition:all 0.2s; z-index:2; }
.lightbox-nav:hover { border-color:var(--accent); color:var(--accent); }
.lightbox-nav.prev { left:0.75rem; }
.lightbox-nav.next { right:0.75rem; }
.lightbox-counter { font-family:'DM Mono',monospace; font-size:11px; color:var(--muted2); text-align:center; padding:0.75rem; border-top:1px solid var(--border2); letter-spacing:0.1em; }

.desc-content {
    max-height: 80px;
    overflow: hidden;
    transition: max-height 0.4s ease;
    -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 40%, transparent 100%);
}
.desc-content.expanded {
    max-height: 1000px;
    -webkit-mask-image: none;
    mask-image: none;
}
.desc-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    background: transparent;
    border: 1px solid var(--border2);
    color: var(--accent);
    font-family: 'DM Mono', monospace;
    font-size: 11px;
    padding: 6px 14px;
    cursor: pointer;
    letter-spacing: 0.08em;
    transition: border-color 0.2s;
}
.desc-toggle:hover { border-color: var(--accent); }
#descArrow { transition: transform 0.3s ease; }
#descArrow.rotated { transform: rotate(180deg); }

/* FOOTER */
.footer { position:relative; z-index:10; max-width:900px; margin:0 auto; padding:2rem 3rem 4rem; border-top:1px solid var(--border2); display:flex; align-items:center; gap:8px; font-family:'DM Mono',monospace; font-size:12px; color:var(--muted2); }
.footer .prompt { color:var(--accent); }
.footer-back { margin-left:1rem; color:var(--accent); text-decoration:none; transition:opacity 0.2s; }
.footer-back:hover { opacity:0.7; }
.footer-year { margin-left:auto; }

/* REVEAL */
.reveal { opacity:0; transform:translateY(20px); transition:opacity 0.7s ease,transform 0.7s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

@keyframes fadeUp { to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { to { opacity:1; } }
@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0; } }
@keyframes drift1 { 0%,100% { transform:scale(1) translate(0,0); } 50% { transform:scale(1.08) translate(20px,-30px); } }
@keyframes drift2 { 0%,100% { transform:scale(1) translate(0,0); } 50% { transform:scale(1.06) translate(-20px,20px); } }

@media (max-width:700px) {
    .nav { padding:1rem 1.5rem; }
    .hero { padding:8rem 1.5rem 3rem; }
    .section { padding:2rem 1.5rem 3rem; }
    .gallery-grid { grid-template-columns:1fr; }
}