:root {
    --bg: #000000;
    --text: #ffffff;
    --accent: #ff3e00;
    --dim-text: #666666;
}

* { margin: 0; padding: 0; box-sizing: border-box; cursor: none !important; }
body { background: var(--bg); color: var(--text); font-family: 'Space Grotesk', sans-serif; overflow-x: hidden; }

/* 3D Scene Layer */
#canvas3d { position: fixed; top: 0; left: 0; z-index: -1; opacity: 0.4; pointer-events: none; }

/* Desktop Custom Cursor */
#custom-cursor {
    width: 8px; height: 8px; background: var(--accent); border-radius: 50%;
    position: fixed; pointer-events: none; z-index: 9999;
    transition: transform 0.1s ease-out, width 0.3s, height 0.3s, background 0.3s;
}

nav { display: flex; justify-content: space-between; padding: 2.5rem; font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase; }
nav a { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 2px; }

.hero { height: 70vh; display: flex; align-items: center; padding: 0 2.5rem; }
.hero-title h1 { font-size: clamp(3rem, 15vw, 10rem); line-height: 0.85; font-weight: 700; }
.outline { -webkit-text-stroke: 1px var(--text); color: transparent; }

/* WORK SECTION */
.work-section { padding: 5rem 2.5rem; border-top: 1px solid #222; }
.section-header { display: flex; gap: 1rem; margin-bottom: 4rem; color: var(--accent); font-weight: 700; font-size: 0.8rem; }

/* Project Item as a Link */
.project-item {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 4.5rem 0; border-bottom: 1px solid #222;
    text-decoration: none; color: inherit; position: relative;
    transition: 0.4s ease;
}

.project-content { width: 100%; max-width: 800px; }
.project-meta { display: flex; gap: 2rem; margin-bottom: 1.5rem; font-size: 0.7rem; letter-spacing: 2px; color: var(--dim-text); }
.project-meta .index { color: var(--accent); }

.project-title { font-size: clamp(2rem, 8vw, 5.5rem); font-weight: 700; text-transform: uppercase; transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.project-desc { font-size: 1.1rem; color: var(--dim-text); max-width: 500px; margin-top: 2rem; opacity: 0; transform: translateY(20px); transition: 0.4s; }

/* Hover Effect: View Preview CTA */
.project-cta { font-size: 0.8rem; font-weight: 700; color: var(--accent); opacity: 0; transform: translateX(-20px); transition: 0.4s; align-self: center; }

/* Interactive Hover States */
.project-item:hover { border-bottom-color: var(--text); }
.project-item:hover .project-title { transform: translateX(30px); color: var(--accent); }
.project-item:hover .project-desc { opacity: 1; transform: translateY(0); }
.project-item:hover .project-cta { opacity: 1; transform: translateX(0); }

/* Footer */
footer { padding: 10rem 2.5rem 4rem; text-align: center; }
.footer-cta { font-size: clamp(3rem, 12vw, 10rem); font-weight: 700; text-decoration: none; color: var(--text); display: block; }
.footer-cta:hover { -webkit-text-stroke: 2px var(--accent); color: transparent; }
.footer-bottom { display: flex; justify-content: space-between; margin-top: 10rem; font-size: 0.7rem; color: var(--dim-text); }
.footer-socials a { color: var(--text); text-decoration: none; margin-left: 2rem; }

/* Responsive Android/iPhone Fixes */
@media (max-width: 768px) {
    * { cursor: auto !important; }
    #custom-cursor { display: none; }
    .project-item { padding: 3rem 0; flex-direction: column; }
    .project-desc { opacity: 1; transform: none; margin-top: 1rem; }
    .project-cta { margin-top: 2rem; align-self: flex-start; opacity: 1; transform: none; }
}