/* ================================================= */
/* PART 1: A Modern CSS Reset                        */
/* ================================================= */

/* Use a more intuitive box-sizing model. */
*, *::before, *::after {
    box-sizing: border-box;
  }
  /* Remove default margin */
  * {
    margin: 0;
  }
  /* Allow percentage-based heights in the application */
  html, body {
    height: 100%;
  }
  /* Add smooth scrolling */
  html:focus-within {
    scroll-behavior: smooth;
  }
  /* Set core body defaults */
  body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  /* Make images easier to work with */
  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }
  /* Remove built-in form typography styles */
  input, button, textarea, select {
    font: inherit;
  }
  
  
  /* ================================================= */
  /* PART 2: Your Final Website Styles                 */
  /* ================================================= */
  
  @import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@300;700&family=Montserrat:wght@400;700&display=swap');
  
  body {
      font-family: 'Montserrat', sans-serif;
      color: #f0f0f0;
      background-color: #0E0023;
      overflow: hidden;
  }
  
  .hero-view { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; text-align: center; transition: opacity 0.5s ease, transform 0.7s ease; }
  
  @keyframes subtle-pulse { 0% { transform: scale(1); filter: drop-shadow(0 0 15px rgba(138, 99, 210, 0.4)); } 50% { transform: scale(1.02); filter: drop-shadow(0 0 25px rgba(138, 99, 210, 0.6)); } 100% { transform: scale(1); filter: drop-shadow(0 0 15px rgba(138, 99, 210, 0.4)); } }
  .main-logo { width: 500px; margin-bottom: 20px; transition: width 0.7s ease; animation: subtle-pulse 5s ease-in-out infinite; }
  
  .logo-title {
    font-family: 'Montserrat Alternates', sans-serif;
    font-size: 3rem;
    font-weight: normal; /* THIS IS THE KEY: Neutralize the default h1 bold style */
    margin: 0 0 30px 0;
    letter-spacing: 2px;
    text-transform: lowercase;
    color: #f0f0f0;
}

.logo-bold {
    font-weight: 700; /* Re-apply bold specifically to "orara" */
}

.logo-light {
    font-weight: 300; /* This will now work correctly for "labs" */
}
  
  .main-nav button {
      position: relative; overflow: hidden; background-color: transparent; color: #f0f0f0;
      border: 2px solid #f0f0f0; border-radius: 50px;
      padding: 12px 24px; margin: 0 10px; font-weight: bold; cursor: pointer;
      font-size: 1rem;
      transition: color 0.4s ease, background-color 0.4s ease;
  }
  .main-nav button span { position: relative; z-index: 2; }
  .main-nav button::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background-color: #f0f0f0; border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.4s ease, height 0.4s ease; z-index: 1; }
  .main-nav button:hover::before { width: 250px; height: 250px; }
  .main-nav button:hover { color: #0E0023; }
  
  .social-links { margin-top: 40px; display: flex; justify-content: center; gap: 30px; }
  .social-links a { display: inline-block; transition: transform 0.3s ease; color: #f0f0f0; }
  .social-links a svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; transition: color 0.3s ease; }
  .social-links a:hover { transform: scale(1.15); color: #ffffff; }
  
  body.view-expanded .hero-view { opacity: 0; transform: translateY(-20px); pointer-events: none; }
  .expanded-view { position: fixed; top: 0; left: 0; right: 0; bottom: 0; padding-top: 60px; padding-bottom: 40px; opacity: 0; transform: translateY(30px); visibility: hidden; transition: opacity 0.7s ease 0.2s, transform 0.7s ease 0.2s; }
  body.view-expanded .expanded-view { opacity: 1; transform: translateY(0); visibility: visible; }
  .expanded-content { max-width: 800px; margin: 0 auto; height: 100%; overflow-y: auto; padding: 20px; }
  .close-btn { position: fixed; top: 20px; right: 20px; font-size: 35px; font-weight: bold; border: none; background: none; cursor: pointer; color: #f0f0f0; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; }
  body.view-expanded .close-btn { opacity: 1; visibility: visible; }
  
  .expanded-content h2{font-size:2.5rem}.expanded-content p{font-size:1.1rem;line-height:1.6}.project-card,.blog-post-card{background-color:#1c0d38;border:1px solid #3a2c5a;border-radius:8px;padding:30px;text-align:left;margin-top:20px;box-shadow:0 10px 30px -10px rgba(0,0,0,.2)}.blog-post-card{margin-top:30px;transition:transform .3s ease,border-color .3s ease}.blog-post-card:hover{transform:translateY(-5px);border-color:#8a63d2}.post-date{font-size:.8rem;font-weight:700;color:#a081dd;text-transform:uppercase;letter-spacing:1px;margin-top:0}.project-card h3,.blog-post-card h3{margin-top:0;color:#f0f0f0}.tech-stack{list-style:disc;padding-left:20px;margin:20px 0;color:#c5b9e0}.tech-stack li{margin-bottom:5px}.project-links{margin-top:20px}.btn{display:inline-block;padding:10px 20px;text-decoration:none;border-radius:5px;font-weight:700;transition:all .3s ease;margin-right:10px}.btn-primary{background-color:#8a63d2;color:#fff}.btn-primary:hover{background-color:#a081dd}.btn-secondary{background-color:transparent;color:#f0f0f0;border:1px solid #f0f0f0}.btn-secondary:hover{background-color:#f0f0f0;color:#0E0023}.post-excerpt{color:#c5b9e0;line-height:1.6}.btn-read-more{display:inline-block;margin-top:20px;color:#f0f0f0;font-weight:700;text-decoration:none;transition:transform .3s ease}.btn-read-more:hover{color:#fff;transform:translateX(5px)}.full-post-content h1{font-size:2.8rem;margin-top:20px;margin-bottom:10px;color:#fff}.post-meta{font-size:.9rem;color:#c5b9e0;margin-bottom:40px;border-bottom:1px solid #3a2c5a;padding-bottom:20px}.full-post-content h2{font-size:1.8rem;color:#f0f0f0;margin-top:40px;margin-bottom:15px;border-left:4px solid #8a63d2;padding-left:15px}.full-post-content p{font-size:1.1rem;line-height:1.7;color:#c5b9e0}.full-post-content ul{list-style:disc;padding-left:30px;line-height:1.8}.full-post-content li{margin-bottom:10px}.full-post-content blockquote{margin:30px 0;padding:20px;background-color:#1c0d38;border-left:5px solid #a081dd;font-style:italic;font-size:1.2rem;color:#fff}.btn-back{display:inline-block;color:#a081dd;text-decoration:none;font-weight:700;margin-bottom:20px;transition:transform .3s ease}.btn-back:hover{transform:translateX(-5px)}

  /* ================================================= */
/* UPGRADE #1: Interactive Mouse Trail Effect        */
/* ================================================= */

#cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(138, 99, 210, 0.15) 0%, rgba(138, 99, 210, 0) 70%);
    border-radius: 50%;
    transform: translate(-50%, -50%); /* Center the glow on the cursor */
    pointer-events: none; /* Allows you to click through the glow */
    z-index: -1; /* Place it behind all other content */
    transition: opacity 0.5s ease;
}

/* Hide the glow when the content is expanded */
body.view-expanded #cursor-glow {
    opacity: 0;
}

  /* ================================================= */
/* UPGRADE #2: Mobile Responsive Design              */
/* ================================================= */

/* These styles only apply to screens 768px wide or smaller */
@media (max-width: 768px) {

    /* Make the title smaller on mobile */
    .logo-title {
        font-size: 2.5rem;
    }

    /* Stack the navigation buttons vertically */
    .main-nav {
        display: flex;
        flex-direction: column;
        gap: 15px; /* Add space between the stacked buttons */
    }

    .main-nav button {
        margin: 0; /* Remove the left/right margin */
    }
    
    /* Make the content platform take up more space on smaller screens */
    .expanded-content {
        padding: 10px;
    }
    
    .full-post-content h1 {
        font-size: 2rem;
    }
}

/* ================================================= */
/* UPGRADE #3: Animated "Coming Soon" Tag            */
/* ================================================= */

@keyframes pulse-text {
    0% { opacity: 1; }
    50% { opacity: 0.6; }
    100% { opacity: 1; }
}

.post-date {
    /* Apply the animation to any post-date text */
    animation: pulse-text 2s ease-in-out infinite;
}