/* ================== VARIABLES ================== */

:root {
    --accent-color: #FF2E2E;   /* Strong Red */
    --dark-bg: #101010;        /* Almost Black */
    --card-bg: #1A1A1A;        
    --light-text: #F2F2F2;     
    --secondary-text: #888888;
}

/* GENERAL FADE-IN EFFECT */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}



/* ================== GLOBAL STYLES ================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    background-color: var(--dark-bg);
    font-family: 'Inter', sans-serif;
    color: var(--light-text);
    line-height: 1.6;
    min-height: 100vh;
}

#htb-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;       /* behind everything */
    pointer-events: none; /* so mouse interactions pass through */
    background: #0b0b0b;  /* dark base */
    display: block;
}


h1,h2,h3 { font-family: 'Inconsolata', monospace; font-weight: 600; color: var(--light-text); }
a { color: var(--accent-color); text-decoration: none; transition: color 0.3s; }
a:hover { color: var(--light-text); }
.accent-text { color: var(--accent-color); }

/* ================== HEADER ================== */
.main-header {
    position: fixed;
    top: 0; left: 0; width: 100%;
    padding: 20px 10%;
    background-color: rgba(26, 26, 26, 0.8); /* semi-transparent */
    backdrop-filter: blur(4px);
    display: flex; justify-content: space-between; align-items: center;
    z-index: 1000;
    border-bottom: 1px solid var(--border-color);
}

.logo a { font-size: 1.3rem; font-weight:700; letter-spacing:1px; color: var(--accent-color); }
.main-nav a { margin-left:30px; color: var(--secondary-text); font-size:0.9rem; text-transform:uppercase; }
.main-nav a:hover, .main-nav a.active { color: var(--accent-color); }

/* ================== HERO SECTION ================== */
.hero-section {
    min-height:100vh;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 10%; gap:clamp(30px,5vw,80px); flex-wrap:wrap;
}
.hero-content { max-width:650px; flex:1; }
.hero-section h1 { font-size:clamp(2.5rem,6vw,4.5rem); line-height:1.1; margin-bottom:20px; opacity:0; transform:translateY(20px); transition: all 0.8s ease-out; }
.hero-section .tagline { font-size:clamp(1rem,2vw,1.5rem); color:var(--secondary-text); margin-bottom:40px; opacity:0; transform:translateY(20px); transition: all 0.8s ease-out 0.2s; }
.hero-section .hero-content.visible h1, .hero-section .hero-content.visible .tagline { opacity:1; transform:translateY(0); }

.cta-group { display:flex; gap:20px; flex-wrap:wrap; opacity:0; transform:translateY(20px); transition: all 0.8s ease-out 0.4s; }
.hero-section .hero-content.visible .cta-group { opacity:1; transform:translateY(0); }

.cta-button { padding:12px 30px; font-size:1.1rem; text-transform:uppercase; letter-spacing:1px; border-radius:4px; transition: all 0.3s ease; cursor:pointer; }
.primary-cta { background:var(--accent-color); color:var(--dark-bg); border:2px solid var(--accent-color); }
.primary-cta:hover { background:transparent; color:var(--accent-color); box-shadow:0 0 15px var(--accent-color); }
.secondary-cta { background:transparent; color:var(--accent-color); border:2px solid var(--accent-color); }
.secondary-cta:hover { background:var(--accent-color); color:var(--dark-bg); }

/* IMAGE */
.hero-image-container {
    width:450px; height:450px; flex-shrink:0;
    border:3px solid var(--accent-color); border-radius:50%; overflow:hidden;
    box-shadow:0 0 20px rgba(255, 59, 59, 0.1); transition:transform 0.4s ease, box-shadow 0.4s ease;
    opacity:0; transform:translateY(20px);
}
.hero-image-container.visible { opacity:1; transform:translateY(0); }
.hero-image-container:hover { transform:scale(1.05); transform-origin:center; box-shadow: 0 0 25px rgba(255, 59, 59, 0.6); /* red glow */}
.profile-photo { width:100%; height:100%; object-fit:cover; }

/* ================== PROJECTS ================== */
.portfolio-section { padding:100px 10%; max-width:1200px; margin:0 auto; }
.portfolio-section h2 { font-size:2rem; margin-bottom:50px; text-transform:lowercase; }

.project-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:30px; }
.project-card { display:block; background-color:var(--card-bg); padding:30px; border-radius:8px; border:1px solid transparent; transition:all 0.3s ease; cursor:pointer; text-align:left; opacity:0; transform:translateY(30px); }
.project-card h3 { font-size:1.5rem; margin-bottom:10px; color:var(--accent-color); }
.project-card .description { color:var(--secondary-text); margin-bottom:15px; font-size:0.95rem; }
.project-card .tech-stack { display:flex; flex-wrap:wrap; gap:8px; margin-top:15px; }
.project-card .tech-stack span { background-color:rgba(255, 59, 59, 0.1); color:var(--accent-color); padding:4px 10px; border-radius:4px; font-size:0.8rem; font-family:'Inconsolata', monospace; }
.project-card:hover { transform:translateY(-8px); border-color:var(--accent-color); box-shadow: 0 10px 20px rgba(255, 59, 59, 0.2); }

/* ================== SKILLS ================== */
.skills-grid { display:flex; flex-wrap:wrap; gap:15px; }
.skill-item { background-color:var(--card-bg); color:var(--light-text); padding:10px 20px; border-radius:6px; border:1px solid var(--border-color); font-family:'Inconsolata', monospace; font-size:1rem; transition: background-color 0.3s, transform 0.3s; }
.skill-item:hover { background-color: rgba(255, 59, 59, 0.1); transform:scale(1.05); }

/* ================== ABOUT & CONTACT ================== */
.about-me-section p { margin-bottom:20px; max-width:800px; }
.contact-links { display:flex; flex-wrap:wrap; gap:20px; margin-top:30px; }
.contact-link { font-size:1.1rem; font-family:'Inconsolata', monospace; }

/* ================== FOOTER ================== */
.main-footer { padding:30px 10%; text-align:center; border-top:1px solid var(--border-color); color:var(--secondary-text); font-size:0.9rem; }
.main-footer .accent-text { text-decoration:underline; text-underline-offset:4px; }

/* ================== RESPONSIVE ================== */
@media(max-width:992px){.hero-section{flex-direction:column;text-align:center;padding-top:120px;}.hero-image-container{margin-top:30px;}}
@media(max-width:768px){.main-header{padding:15px 5%;}.main-nav a{margin-left:15px;}.portfolio-section{padding:80px 5%;}.hero-image-container{width:250px;height:250px;border:2px solid var(--accent-color);}}