@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400&family=Fira+Code:wght@300;400;500&family=Lato:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,200,0,0');
@import url('https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css');

body { background-color: #FDFCF8; color: #2A2622; overflow-x: hidden; }

/* Noise Texture */
.texture-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.04; z-index: -1;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    pointer-events: none;
}

/* Ambient Blobs */
.blob-cont { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: -2; overflow: hidden; background: #FDFCF8; }
.blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.4; }
.blob-1 { top: -10%; left: -10%; width: 70vw; height: 70vw; background: #FAC5A4; opacity: 0.3; }
.blob-2 { bottom: -10%; right: -10%; width: 60vw; height: 60vw; background: #E8E4D9; }
.blob-3 { top: 40%; left: 40%; width: 40vw; height: 40vw; background: #CF353B; opacity: 0.15; }

/* Scroll Progress Line (Fil Rouge) */
.scroll-line-container {
    position: fixed;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    height: 60vh;
    width: 1px;
    background-color: rgba(207, 53, 59, 0.1);
    z-index: 40;
    display: none;
}
.scroll-line-progress {
    width: 100%;
    background-color: #CF353B;
    height: 0%;
    transition: height 0.1s linear;
}
@media (min-width: 1024px) { .scroll-line-container { display: block; } }

/* Typography & Utils */
::selection { background: #00382F; color: #FAC5A4; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #00382F; }
::-webkit-scrollbar-thumb { background: #FAC5A4; border-radius: 4px; }

.hover-line { position: relative; transition: color 0.3s ease; }
.hover-line::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0%; height: 1px; background-color: currentColor; transition: width 0.3s ease; }
.hover-line:hover::after { width: 100%; }

/* Tech Icons Hover */
.tech-icon { font-size: 3rem; transition: all 0.3s ease; color: #4A4642; opacity: 0.8; }
.group:hover .tech-icon { color: #00382F; transform: translateY(-5px); opacity: 1; }

/* Code Window Styling */
.code-window {
    background: #1e1e1e;
    border-radius: 0.75rem;
    box-shadow: 0 25px 60px -15px rgba(0, 56, 47, 0.3);
    font-family: 'Fira Code', monospace;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
    position: relative;
    z-index: 20;
}
.code-header {
    background: #252526;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid #333;
}
.dot { width: 0.75rem; height: 0.75rem; border-radius: 50%; }
.code-content {
    padding: 1.5rem;
    color: #d4d4d4;
    font-size: 0.9rem;
    line-height: 1.6;
    white-space: pre; 
    overflow-x: auto;
}
.cursor {
    display: inline-block;
    width: 8px;
    height: 1.1em;
    background-color: #FAC5A4;
    animation: blink 1s infinite;
    vertical-align: text-bottom;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Syntax Highlighting */
.kw { color: #569cd6; font-weight: bold; } 
.fn { color: #dcdcaa; } 
.str { color: #ce9178; } 
.comment { color: #6a9955; font-style: italic; } 
.var { color: #9cdcfe; } 

/* Device Frames */
.browser-frame {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 0.5rem;
    overflow: hidden;
    position: relative;
    background: #2A2622;
    z-index: 20;
}

/* Footer Link */
.footer-link {
    background-image: linear-gradient(#FAC5A4, #FAC5A4);
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: left bottom;
    transition: background-size 300ms ease;
}
.footer-link:hover { background-size: 100% 2px; }

/* Modal */
.modal-overlay { transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1); opacity: 0; pointer-events: none; }
.modal-overlay.active { opacity: 1; pointer-events: auto; }
.modal-panel { transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease; transform: translateY(20px) scale(0.98); opacity: 0; }
.modal-overlay.active .modal-panel { transform: translateY(0) scale(1); opacity: 1; }

/* Dynamic Navbar Color Classes */
.nav-light { color: #2A2622; }
.nav-red { color: #CF353B !important; }