/* --- THE CELESTIAL ATLAS STYLING CORE --- */
/* --- V34.1 (THE IMMORTAL) --- */

:root {
    --bg-color: #000000;
    --text-primary: #ffffff;
    --text-secondary: #a09ccf;
    --primary-color: #FF00FF; /* Fallback */
    --secondary-color: #00FFFF; /* Fallback */
    --glow-color: rgba(255, 0, 255, 0.7); /* Fallback */
    --border-color: rgba(255, 255, 255, 0.15);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', sans-serif;
    background-color: var(--bg-color);
    color: var(--text-primary);
    overflow: hidden;
    cursor: none;
}
::selection { background: var(--primary-color); color: #000; }

/* --- CORE ENGINE: CANVAS, CURSOR, UI --- */
#webgl-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; }
.cursor {
    position: fixed; top: 0; left: 0; z-index: 1001;
    width: 20px; height: 20px; border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 0 0 10px var(--primary-color), 0 0 20px var(--primary-color);
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease-out, background-color 0.3s, box-shadow 0.3s;
}
header {
    position: fixed; top: 0; left: 0; width: 100%;
    z-index: 1000; display: flex; justify-content: space-between;
    align-items: center; padding: 2rem 3rem;
}
.logo { font-size: 1.5rem; font-weight: 900; }
#nav-hub { display: flex; gap: 0.5rem; }
.nav-point {
    background: transparent; border: none; color: var(--text-secondary);
    padding: 0.5rem 1rem; font-weight: 700;
    text-decoration: none; position: relative;
}
.nav-point::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0%; height: 2px; background: var(--primary-color); transition: all 0.3s ease; }
.nav-point.active::after, .nav-point:hover::after { width: 100%; left: 0; }
.nav-point span { display: block; }
.ui-button {
    background: transparent; border: 1px solid var(--border-color);
    color: var(--text-primary); width: 40px; height: 40px; border-radius: 50%;
    cursor: none; transition: all 0.3s;
    display: flex; justify-content: center; align-items: center;
}
.ui-button:hover { border-color: var(--primary-color); }

/* --- MAIN CONTENT SCROLLER --- */
#content-scroller {
    position: fixed; top: 0; left: 0;
    width: 100%; height: 100%;
    overflow: hidden;
}
.scroll-content { will-change: transform; z-index: 1; position: relative;}
.view {
    width: 100%; height: 100vh;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    text-align: center; padding: 2rem 3rem;
    position: relative;
}
.content-container { opacity: 0; transform: translateY(30px); }
.view.in-view .content-container { opacity: 1; transform: translateY(0); transition: opacity 0.8s 0.2s, transform 0.8s 0.2s; }

/* --- SECTIONS SPECIFIC STYLES --- */
#home h1 { font-size: 8vw; line-height: 1; font-weight: 900; margin-bottom: 1.5rem; }
.portfolio-track { display: flex; height: 70vh; gap: 10vw; will-change: transform; }
.portfolio-card {
    width: 70vw; height: 100%;
    flex-shrink: 0;
    border-radius: 20px; position: relative;
    transform-style: preserve-3d;
}
.card-image {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: var(--bg-image); background-size: cover; background-position: center;
    border-radius: 20px; z-index: 1;
}
.portfolio-card h2 { position: relative; z-index: 2; font-size: 5vw; }

.service-web {
    width: 100%;
    max-width: 800px; height: 400px;
    position: relative; margin-top: 4rem;
}
.service-node {
    position: absolute; padding: 1rem 2rem;
    background: rgba(30,30,30,0.5); border: 1px solid var(--border-color);
    border-radius: 50px; backdrop-filter: blur(5px);
}
.tech-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 2rem; margin-top: 4rem;
}
.tech-item {
    padding: 1.5rem; background: rgba(30,30,30,0.5);
    border: 1px solid var(--border-color); border-radius: 10px;
    font-size: 1.2rem; font-weight: 700;
}
.testimonial-card {
    margin-top: 4rem; max-width: 700px; padding: 3rem;
    background: rgba(30,30,30,0.5); border: 1px solid var(--border-color);
    border-radius: 15px; backdrop-filter: blur(10px);
}
.testimonial-card p { font-size: 1.5rem; font-style: italic; margin-bottom: 2rem; }
.testimonial-card h3 { font-size: 1rem; color: var(--text-secondary); font-weight: 400; }
#architects h2, #contact h2, #testimonials h2, #tech h2, #services h2 { font-size: 3.5rem; margin-bottom: 4rem; }
.architects-container { display: flex; gap: 4rem; perspective: 1000px; }
.architect-card {
    padding: 3rem 4rem; background: rgba(30,30,30,0.5);
    border: 1px solid var(--border-color); border-radius: 10px;
    backdrop-filter: blur(5px); transform-style: preserve-3d;
}
.architect-card h3 { font-size: 2.5rem; transform: translateZ(20px); }
.architect-card p { color: var(--text-secondary); font-size: 1.2rem; transform: translateZ(10px); }
#contact-form {
    width: 100%; max-width: 600px; margin-top: 3rem;
    padding: 4rem; background: rgba(30,30,30,0.5);
    border: 1px solid var(--border-color); border-radius: 10px;
    backdrop-filter: blur(5px);
}
.form-field { position: relative; margin-bottom: 3rem; }
.form-field input, .form-field textarea {
    width: 100%; background: transparent; border: none;
    border-bottom: 2px solid var(--border-color); color: var(--text-primary);
    padding: 12px 0; font-size: 1.2rem; position: relative; z-index: 1;
    transition: border-color 0.3s;
}
.form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--primary-color); }
.form-field label { position: absolute; top: 12px; left: 0; color: var(--text-secondary); transition: all 0.3s; pointer-events: none; }
.form-field input:focus + label, .form-field input:valid + label,
.form-field textarea:focus + label, .form-field textarea:valid + label { top: -18px; font-size: 0.9rem; color: var(--primary-color); }
.cta-button {
    background: transparent; border: 2px solid var(--primary-color);
    color: var(--primary-color); padding: 1rem 2rem; border-radius: 50px;
    cursor: none; transition: all 0.3s; font-weight: 700;
    text-shadow: 0 0 10px var(--glow-color);
}
.cta-button:hover { background: var(--primary-color); color: #000; box-shadow: 0 0 30px var(--glow-color); }
.contact-success p { color: var(--text-secondary); font-size: 1.2rem; }
.reveal-text { opacity: 0; }
.reveal-text.visible { opacity: 1; }
.reveal-text .char { display: inline-block; opacity: 0; transform: translateY(20px); }
.malleable { position: relative; }
.malleable span { display: inline-block; }