:root {
 --clr-neon: hsl(173 100% 54%);
 --clr-bg: hsl(180 21% 16%);
 --text-color-main: #ffffff;
}

html, body {
 overflow: hidden;
 background-color: #000;
 /* disabling text selection */
 -webkit-user-select: none; /* Safari */
 -ms-user-select: none;     /* IE 10 and IE 11 */
 user-select: none;         /* Standard syntax */
}

*{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 font-family: 'Ephesis', cursive;
 -webkit-tap-highlight-color: transparent;
}

header {
 z-index: 999;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 display: flex;
 justify-content: center;
 align-items: center;
 padding: 15px 200px;
 transition: 0.5s ease;
}

header .brand{
 color: #fff;
 font-size: 2.2em;
 font-weight: 600;
 text-transform: capitalize;
 text-decoration: none;
}

header .navigation{
 position: relative;
}

header .navigation .navigation-items a{
  color: #000;
  font-size: 2em;
  font-family: 'Sacramento', cursive;
  font-weight: 500;
  text-decoration: none;
  margin-left: 30px;
  position: relative;
  text-shadow: none;
  transition: text-shadow 0.3s ease, color 0.3s ease;
  padding: 0 5px;
  cursor: pointer;
  
  /* Define the initial state of our CSS variables */
  --rotateX: 0deg;
  --rotateY: 0deg;
 }
 
 header .navigation .navigation-items a::after {
   content: '';
   pointer-events: none;
   position: absolute;
   top: 80%;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--clr-neon);
   
   /* The transform now reads the variables set by JavaScript! */
   transform: perspective(0.75em) 
              rotateX(var(--rotateX)) /* Tilts up/down */
              rotateY(var(--rotateY)) /* Tilts left/right */
              rotateX(40deg) /* The original downward perspective */
              scale(1, 0.4);
              
   filter: blur(0.9em);
   opacity: 0;
   
   /* We now transition the transform property for a smooth tilt effect */
   transition: opacity 0.3s linear, transform 0.1s linear;
 }
 
 header .navigation .navigation-items a:hover,
 header .navigation .navigation-items a.active-glow {
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8),
        0 0 20px rgba(255, 255, 255, 0.6);
 }
 
 /* This makes the reflection appear when a link is hovered or active */
 header .navigation .navigation-items a:hover::after,
 header .navigation .navigation-items a.active-glow::after {
   opacity: 0.7;
 }

section{
 padding: 100px 200px;
}

.home{
 position: relative;
 width: 100%;
 min-height: 100vh;
 display: flex;
 justify-content: center;
 flex-direction: column;
 background: #000000;
}

.home:before{
 z-index: 777;
 content: '';
 position: absolute;
 background: linear-gradient(180deg, rgba(53, 54, 56, 0.3) 0%, rgba(53, 54, 56, 0.3) 80%, rgba(0, 0, 0, 1) 100%);
 width: 100%;
 height: 100%;
 top: 0;
 left: 0;
}

.home .media-icons{
 z-index: 888;
 position: absolute;
 right: 30px;
 display: flex;
 flex-direction: column;
 transition: 0.5s ease;
}

.home .media-icons a{
 color: #fff;
 font-size: 1.6em;
 transition: 0.3s ease;
}

.home .media-icons a:not(:last-child){
 margin-bottom: 20px;
}

.home .media-icons a:hover{
 transform: scale(1.3);
}

.home video{
  z-index: 000;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
 }

.video-slide.active{
 clip-path: circle(150% at 0 50%);
 transition: 2s ease;
 transition-property: clip-path;
}

.neon-button {
 font-size: 2.2em;
 font-weight: 600;
 display: inline-block;
 cursor: pointer;
 text-decoration: none;
 color: var(--clr-neon);
 border: var(--clr-neon) 0.08em solid;
 padding: 0.25em 1em;
 border-radius: 0.25em;
 text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em currentColor;
 box-shadow: inset 0 0 0.5em 0 var(--clr-neon), 0 0 0.5em 0 var(--clr-neon);
 position: relative;
}

.neon-button::before {
 pointer-events: none;
 content: "";
 position: absolute;
 background: var(--clr-neon);
 top: 120%;
 left: 0;
 width: 100%;
 height: 100%;
 transform: perspective(1em) rotateX(40deg) scale(1, 0.35);
 filter: blur(1em);
 opacity: 0.7;
}

.neon-button::after {
 content: "";
 position: absolute;
 top: 0;
 bottom: 0;
 left: 0;
 right: 0;
 box-shadow: 0 0 2em 0.5em var(--clr-neon);
 opacity: 0;
 background-color: var(--clr-neon);
 z-index: -1;
 transition: opacity 100ms linear;
}

.neon-button:hover,
.neon-button:focus {
 color: #0c2431;
 text-shadow: none;
}

.neon-button:hover::before,
.neon-button:focus::before {
 opacity: 1;
}
.neon-button:hover::after,
.neon-button:focus::after {
 opacity: 1;
}

/* =============================== */
/* ====== GENERAL MODAL STYLES ====== */
/* =============================== */

.modal {
 display: none;
 position: fixed;
 z-index: 1000;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0,0,0,0.6);
}

.modal-content {
 position: relative;
 margin: 5% auto; /* previously 8% */
 padding: 40px;
 width: 80%;
 max-width: 900px;
 background: rgba(10, 15, 25, 0.2);
 backdrop-filter: blur(25px);
 -webkit-backdrop-filter: blur(25px);
 border-radius: 10px;
 border: 1px solid rgba(255, 255, 255, 0.1);
 box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
 animation: slideIn 0.5s ease-out;
 overflow-y: auto;
 max-height: 83vh;
}

.close-btn {
 color: #ccc;
 position: absolute;
 top: 0px;
 right: 15px;
 font-size: 4.1rem;
 font-weight: bold;
 transition: transform 0.3s ease, color 0.3s ease;
 z-index: 10;
 line-height: 1;
}

.close-btn:hover,
.close-btn:focus {
 color: #fff;
 text-decoration: none;
 cursor: pointer;
 transform: scale(1.15);
}

/* ======================================= */
/* ====== PROJECTS MODAL STYLES ===== */
/* ======================================= */

/* Layout Toggle Switch */
.layout-toggle {
 position: absolute;
 top: 22px;
 right: 85px;
 display: flex;
 gap: 15px;
 z-index: 10;
}
.layout-toggle i {
 color: #888;
 cursor: pointer;
 font-size: 1.5rem;
 transition: color 0.3s ease, text-shadow 0.3s ease;
}
.layout-toggle i:hover {
 color: #fff;
}
.layout-toggle i.active {
 color: var(--clr-neon);
 text-shadow: 0 0 10px var(--clr-neon);
}

/* Project Section Styling */
.project-section {
  margin-bottom: 40px;
}
.project-section:last-of-type {
  margin-bottom: 0;
}
.project-section h2 {
  font-family: "Playwrite DE Grund", cursive;
  font-weight: 200;
  color: #fff;
  margin-bottom: 20px;
  text-align: center;
  letter-spacing: 0.1em;
  line-height: 1.5;
}

/* Container for the project items themselves */
.project-items {
 transition: all 0.3s ease-in-out;
}

/* Grid Layout (Default) */
.project-items.grid-view {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 30px;
}
.grid-view .project-info {
 display: none;
}
.grid-view .glass-box {
 padding: 20px;
 transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.grid-view .project-info h3 {
 display: block;
}
.grid-view .logo-container {
 display: flex;
 justify-content: center;
 align-items: center;
 height: 120px;
}

/* List Layout Styles */
.project-items.list-view {
 display: flex;
 flex-direction: column;
 gap: 15px;
}


/* --- REVISED STYLES FOR LIST VIEW --- */
/* 1. Prepare the main container */
.list-view .glass-box {
  display: flex;
  align-items: center;
  gap: 20px;
  text-decoration: none;
  width: 100%;
  position: relative; /* Crucial for positioning children */
  overflow: hidden;   /* Keeps pseudo-elements contained */
  padding: 15px 150px 15px 15px; /* Adjust RIGHT padding for logo space */
}

/* 2. Create the slanted background with a pseudo-element */
.list-view .glass-box::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 180px; /* Width of the entire slanted area */
  height: 100%;
  background-color: rgba(255, 255, 255, 0.05);
  clip-path: polygon(25% 0, 100% 0, 100% 100%, 0% 100%); /* The slant */
  z-index: 1; /* Sits behind the text and logo */
  transition: box-shadow 0.3s ease; /* For the glow effect */
}

/* 3. Style and position the logo container on top */
.list-view .logo-container {
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
  width: 140px; /* Narrower than the background to avoid edges */
  height: 100%;
  align-items: center;
  justify-content: center;
  padding: 5px;
  z-index: 2; /* Sits on top of the slanted background */
  opacity: 0.2;
  filter: grayscale(100%) brightness(200%);
  transition: opacity 0.3s ease, filter 0.3s ease;
  pointer-events: none; /* Make it non-interactive */
}

.list-view .logo-container img {
  max-width: 100%;
  max-height: 90%;
  object-fit: contain;
}

/* 4. Ensure the text content is above the slanted background */
.list-view .project-info {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
  color: #ddd;
  flex-grow: 1;
  width: 100%;
  position: relative; /* Establishes stacking context */
  z-index: 2; /* Sits on top of the slanted background */
}

.list-view .project-info h3 {
 display: block;
 font-family: 'Inter', sans-serif;
 font-size: 1rem;
 color: #fff;
 white-space: nowrap;
 flex-shrink: 0;
 font-weight: bold;
}
.list-view .project-info p {
 font-family: 'Inter', sans-serif;
 font-size: 0.9rem;
 line-height: 1.5;
 margin: 0;
}

/* --- HOVER EFFECTS --- */

/* 5. Add glow to the slanted line on main box hover */
.list-view .glass-box:hover::before {
  box-shadow: -4px 0 12px -2px var(--clr-neon);
}

/* 6. Add glow and color to the logo on main box hover */
.list-view .glass-box:hover .logo-container {
  opacity: 0.8;
  filter: grayscale(0%) brightness(120%);
}


/* --- GENERAL & OVERRIDE STYLES --- */

/* General Project Item Styles */
.glass-box {
 background: rgba(255, 255, 255, 0.05);
 border: 1px solid rgba(255, 255, 255, 0.15);
 box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.2);
 border-radius: 15px;
 padding: 20px;
 transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.glass-box:hover {
 transform: translateY(-5px);
 box-shadow: 0 0 15px var(--clr-neon), 0 0 10px var(--clr-neon);
 border-color: var(--clr-neon);
}
.glass-box img {
 max-width: 100%;
 max-height: 100%;
 object-fit: contain;
}

/* Override hover effect for list view */
.list-view .glass-box:hover {
 transform: none;
}

/* ====== CURSOR BASEDTEXT GLOW ====== */
/* This is the base class for containers that will have the glow effect. */
.text-glow-on-hover {
  color: rgba(220, 220, 220, 0.9);
  /* ADD these two lines to provide a default position for the glow */
  --x: 50%;
  --y: 50%;
}

/* This is the perfect visual glow effect. It will be used by all modals. */
.text-glow-on-hover:hover {
    color: transparent;
    background-image: radial-gradient(
        circle 300px at var(--x) var(--y),
        hsl(0, 0%, 100%),
        rgba(220, 220, 220, 0.9)
    );
    -webkit-background-clip: text;
    background-clip: text;
    background-repeat: no-repeat;
}

/* This fixes the rendering bug for images inside a container with the glow effect */
.text-glow-on-hover img {
    display: block;
    margin: 1.5em auto;
}

.info-text-container p {
  font-family: 'Inter', sans-serif;
  font-size: 1.2rem;
  line-height: 1.7;
  text-shadow: 0 0 3px rgba(0, 255, 255, 0.1);
  margin-bottom: 1.5em;
  text-align: center;
 }
 .info-text-container p:has(+ .flex-container-exp) {
   margin-bottom: 0;
 }
.info-text-container p + .flex-container-exp {
  margin-top: -1.5em;
}

.info-text-container .info-header {
 font-family: 'Space Mono', monospace;
 font-weight: 700;
 letter-spacing: 2px;
 margin-bottom: 2em;
 color: #fff;
 font-size: 1.1rem;
}

/* =============================== */
/* ===== SIGNATURE & KEYFRAMES ===== */
/* =============================== */

#xyz {
 position: fixed;
 bottom: 8px;
 right: 15px;
 width: 50px;
 z-index: 800;
 pointer-events: none;
}

@keyframes fadeIn {
 from {opacity: 0}
 to {opacity: 1}
}

@keyframes slideIn {
 from {transform: translateY(-50px); opacity: 0}
 to {transform: translateY(0); opacity: 1}
}

/* Scrollbar Styling */
.modal-content::-webkit-scrollbar {
  width: 12px;
}
.modal-content::-webkit-scrollbar-track {
  background: transparent;
}
.modal-content::-webkit-scrollbar-thumb {
  background-color: #555;
  border-radius: 10px;
  border: 2px solid transparent; 
  background-clip: padding-box;
  box-shadow: 0 0 5px rgba(0, 255, 255, 0.4);
}
.modal-content::-webkit-scrollbar-thumb:hover {
  background-color: #555;
  transform: none;
  width: 12px;
}
.modal-content {
  scrollbar-width: thin;
  scrollbar-color: #555 transparent;
}

/* Button container for centering */
.button-container {
    text-align: center;
    margin-bottom: 2em;
}

/* Resume Toggle Button */
.toggle-button {
    background: none;
    border: 1px solid var(--clr-neon);
    color: var(--clr-neon);
    padding: 10px 20px;
    font-size: 1rem;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 5px;
}

.toggle-button:hover {
    background-color: var(--clr-neon);
    color: #000;
    box-shadow: 0 0 10px var(--clr-neon);
}

/* ================================== */
/* ====== BLOG MODAL STYLES ====== */
/* ================================== */

.blog-modal-content {
  /* Wider for a better reading experience: (default was at 1300px) */
  max-width: calc(100vw - 380px);
  width: 90%;
  padding: 0; /* Remove padding to allow for full-height sections */
}

.blog-container {
  display: flex;
  height: 85vh; /* Set a fixed height for the container */
}

/* --- Sidebar (Post List) --- */
.blog-sidebar {
  flex: 0 0 260px; /* Don't grow, don't shrink, base width 300px */
  background: rgba(0, 0, 0, 0.3);
  padding: 30px 10px;
  overflow-y: auto;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.blog-sidebar h2 {
  font-family: 'Space Mono', monospace;
  color: var(--clr-neon);
  margin-bottom: 20px;
  text-align: center;
}

#blog-post-list a {
  display: block;
  color: #ccc;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  padding: 12px 15px;
  margin-bottom: 8px;
  border-radius: 5px;
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s;
  border-left: 3px solid transparent;
}

#blog-post-list a:hover {
  background-color: rgba(0, 255, 255, 0.1);
  color: #fff;
}

#blog-post-list a.active {
  color: #fff;
  font-weight: normal; 
  background-color: rgba(0, 255, 255, 0.1); 
  border-left: 3px solid var(--clr-neon);
}

/* --- Content Area --- */
.blog-content {
  flex-grow: 1;
  padding: 40px 40px 0px 40px; /* Top, Right, Bottom, Left */
  overflow-y: auto;
  color: #ddd;
}

.welcome-message, .loading-message {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #888;
  font-family: 'Inter', sans-serif;
}

/* Styling for the fetched blog content itself */
.blog-content h1, .blog-content h2, .blog-content h3 {
  font-family: 'Playwrite DE Grund', cursive;
  color: #fff;
  margin-bottom: 0.8em;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}

.blog-content p {
  font-family: 'Inter', sans-serif;
  line-height: 1.8;
  margin-bottom: 1.5em;
  font-size: 1.1rem;
}

/* --- Consolidated Blog Post Link Styles (V3) --- */

/* 1. Base style for general links. */
.blog-content a {
  color: #fff;
  /* Add 'opacity' to the transition for the icon's hover effect */
  transition: color 0.2s ease-in-out, opacity 0.2s ease-in-out;
  font-family: 'Inter', sans-serif !important;
  font-style: normal !important;
  font-size: inherit;
  text-decoration: none;
  border-bottom: none;
}

/* 2. This rule adds the icon ONLY to links inside paragraphs or list items,
   which fixes the "double arrow" bug in your Table of Contents. */
.blog-content p a::before,
.blog-content li a::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900; /* This selects the "Solid" style */
  content: '\f35d'; /* The Unicode for the external-link icon */
  margin-right: 0.4em;
  font-size: 0.8em;
  opacity: 0.4;
  /* Add a transition to the icon itself for smooth fading */
  transition: opacity 0.2s ease-in-out;
}

.blog-content a:hover {
  color: var(--clr-neon);
}

/* 4. This rule makes the icon DIM when the link is hovered. */
.blog-content p a:hover::before,
.blog-content li a:hover::before {
  opacity: 0.7; /* Icon becomes more subtle */
}

.blog-content pre {
  background: rgba(10, 15, 25, 0.5) !important; /* Override theme to match modal style */
  border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle gray border */
  padding: 1.2em;
  border-radius: 8px;
  overflow-x: auto;
  box-shadow: none; /* Removed neon shadow */
  /* --- FIX FOR HORIZONTAL SCROLL BASED GHOSTING --- */
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* --- Code Block Font & Style --- */
/* 1. This is the new base style for ALL <code> tags.
   It sets the font and restores the neon color for your inline code. */
   .blog-content code {
    font-family: 'Fira Code', 'Courier New', monospace !important;
    color: var(--clr-neon);
    font-size: 0.95em;
  }
  
  /* 2. This rule OVERRIDES the color ONLY for <code> tags inside a <pre> block.
     It sets the color to neutral, allowing the syntax highlighting theme to take over. */
  .blog-content pre code {
    color: inherit;
  }
  
  /* 3. This rule remains to force font consistency within the code block. */
  .blog-content pre * {
    font-family: inherit !important;
    font-style: normal !important;
  }

/* --- NEW STYLES FOR SUBHEADINGS AND CAPTIONS --- */

.blog-content figure {
  margin: 2em 0; /* Provides consistent spacing around images with captions */
}

.blog-content figcaption {
  font-family: 'Inter', sans-serif;
  font-size: 0.9em;
  color: #999;
  text-align: center;
  margin-top: 0.75em;
}

.blog-content hr {
  border: none;
  border-top: 2px solid rgba(255, 255, 255, 0.1);
  margin: 2.5em 0;
}

/* Custom Scrollbar for Blog Modal */
.blog-sidebar::-webkit-scrollbar, .blog-content::-webkit-scrollbar {
  width: 8px;
}
.blog-sidebar::-webkit-scrollbar-track, .blog-content::-webkit-scrollbar-track {
  background: transparent;
}
.blog-sidebar::-webkit-scrollbar-thumb, .blog-content::-webkit-scrollbar-thumb {
  background-color: #008B8B; /* A darker cyan */
  border-radius: 10px;
}

/* Add this to the end of your style.css file */

/* --- NEW STYLES FOR BLOG CONTENT --- */

/* Style for the reading time indicator */
.reading-time-indicator {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  color: #999;
  margin-top: -0.5em; /* Pull it closer to the title */
  margin-bottom: 2.5em; /* Add space before the main text starts */
  font-style: italic;
}

.reading-time-indicator i {
  margin-right: 8px;
  color: var(--clr-neon); /* Match your theme's accent color */
}

/* Subtle Glassy Style for KBD Tag */
.blog-content kbd {
  background-color: rgba(0, 255, 255, 0.1);
  color: var(--clr-neon);
  padding: 2px 4px;
  font-family: 'Inter', sans-serif;
  border-radius: 4px;
  font-size: 0.9em;
  font-weight: 500;
}

/* Style for the signature table at the end of the post */
.blog-content table.signature {
  width: auto; /* Don't stretch the full width */
  margin-top: 3em;
  border: none;
  font-family: 'Sacramento', cursive;
  font-size: 1.5rem;
  color: #ccc;
}

.blog-content table.signature td {
  border: none;
  padding: 5px 15px;
}

.blog-content table.signature td:last-child {
  text-align: right;
}

/* --- FINAL STYLES FOR BLOG CONSISTENCY & SIGNATURE --- */

/* 1. Force all common elements inside the blog post to use the Inter font */
.blog-content p,
.blog-content strong,
.blog-content em,
.blog-content li,
.blog-content th,
.blog-content td,
.blog-content details,
.blog-content summary {
  font-family: 'Inter', sans-serif;
}

.blog-content li {
  margin-bottom: 1.5em; /* Adds vertical spacing after each list item */
}

/* 2. Style bold and italic text correctly */
.blog-content strong {
  font-weight: 700;
  color: #fff;
}

.blog-content em {
  font-style: italic;
  color: #e0e0e0;
}

/* 3. Style for the details/summary dropdown */
.blog-content details {
  border-radius: 10px;
  padding: 0;
  margin-bottom: 1.5em;
  background-color: rgba(0, 0, 0, 0.2);
  font-size: 1rem;
  word-spacing: 0.1em;
}

.blog-content summary {
  cursor: pointer;
  color: #fff; /* Changed from neon to white */
  font-size: 1rem; /* Made the font slightly bigger */
  list-style-type: none; /* To hide the default marker */
}

/* This specifically targets and hides the default disclosure
   arrow in WebKit-based browsers (Chrome, Safari, etc.) */
   .blog-content summary::-webkit-details-marker {
    display: none;
  }

/* signature blog post */

.post-signature {
  border-top: 2px solid rgba(255, 255, 255, 0.1);
  display: grid;
  grid-template-columns: max-content;
  justify-content: start;
}

.signature-img {
  display: block; /* Treats the image as a block, forcing the date onto a new line */
  width: 100px; /* A fixed width for consistency */
  height: auto;
}

.post-date {
  font-family: 'Space Mono', monospace;
  font-size: 1rem;
  color: #aaa;
  font-style: normal !important;
  margin: 0;
  /* Pulls the date UPWARDS towards my sig image: */
  position: relative;
  top: -20px;
}

/* --- STYLES FOR IMAGES IN BLOG POSTS --- */

.blog-post-image {
  max-width: 100%; /* Ensures image is never wider than its container */
  height: auto;    /* Maintains the aspect ratio */
  border-radius: 8px; /* Adds a slight curve to the corners */
  margin: 1.5em 0;  /* Adds space above and below the image */
}

/* --- PRELOADER STYLES --- */

#preloader {
  position: fixed; /* Stays in place, covering the whole screen */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000; /* A solid black background */
  z-index: 9999; /* Ensures it's on top of all other content */
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1; /* Starts fully visible */
  visibility: visible;
  transition: opacity 0.75s ease, visibility 0.75s ease; /* Smooth fade-out transition */
}

/* Class to be added with JavaScript to hide the preloader */
#preloader.hidden {
  opacity: 0;
  visibility: hidden;
}

/* ======================================= */
/* ====== FINAL BLOCK DOMINO PRELOADER ====== */
/* ======================================= */

/* --- 1. Main Content Fade Transition (Unchanged) --- */
#sidenav-toggle,
header,
.home .media-icons,
#audio-player-container,
#xyz {
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}
body.loaded #sidenav-toggle,
body.loaded header {
    opacity: 1;
    transition-delay: 0.1s;
}
body.loaded .home .media-icons {
    opacity: 1;
    transition-delay: 0.3s;
}
body.loaded #audio-player-container,
body.loaded #xyz {
    opacity: 1;
    transition-delay: 0.5s;
}

/* --- 2. 3D Scene & Domino Runway --- */
#preloader {
  perspective: 1500px;
  transition: opacity 1.5s ease-in-out, visibility 1.5s ease-in-out;
}

.domino-runway {
  display: flex;
  justify-content: center;
  width: 100%;
  transform-style: preserve-3d;
  transform: rotateX(70deg) rotateZ(5deg); /* Angled top-down view */
}

/* --- 3. The Simple 3D Domino Block --- */
.domino {
  width: 15px;
  height: 70px;
  margin: 0 4px;
  background-color: #fff;
  position: relative;
  transform-style: preserve-3d;
  transform-origin: bottom center;
  animation: topple-glow-fade 2.2s ease-out forwards; /* Slower animation for 4s window */
}

/* The pseudo-element that creates the 3D "top edge" */
.domino::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8px; /* This is the thickness of the domino */
  background-color: #ccc; /* A slightly darker color for the top edge */
  transform-origin: top center;
  transform: rotateX(90deg);
}

/* --- 4. The Original Topple, Glow, & Fade Animation --- */
@keyframes topple-glow-fade {
  /* 0-10%: Stand still, no glow */
  0%, 10% {
      transform: rotateX(0deg);
      box-shadow: none;
      opacity: 1;
  }
  /* 15%: INTENSE GLOW just before falling (from example 1) */
  15% {
      box-shadow: 0 0 1em #fff, 0 0 1.5em #fff, 0 0 2em var(--clr-neon);
  }
  /* 40%: The fall is complete, glow returns to normal */
  40% {
      transform: rotateX(-90deg);
      box-shadow: none;
      opacity: 1;
  }
  /* 80-100%: The fade-out */
  80%, 100% {
      transform: rotateX(-90deg);
      opacity: 0;
  }
}

/* --- 5. Sequential Animation Delays (Slower for 4s window) --- */
.domino-runway .domino:nth-child(1) { animation-delay: 0s; }
.domino-runway .domino:nth-child(2) { animation-delay: 0.06s; }
.domino-runway .domino:nth-child(3) { animation-delay: 0.12s; }
.domino-runway .domino:nth-child(4) { animation-delay: 0.18s; }
.domino-runway .domino:nth-child(5) { animation-delay: 0.24s; }
.domino-runway .domino:nth-child(6) { animation-delay: 0.30s; }
.domino-runway .domino:nth-child(7) { animation-delay: 0.36s; }
.domino-runway .domino:nth-child(8) { animation-delay: 0.42s; }
.domino-runway .domino:nth-child(9) { animation-delay: 0.48s; }
.domino-runway .domino:nth-child(10) { animation-delay: 0.54s; }
.domino-runway .domino:nth-child(11) { animation-delay: 0.60s; }
.domino-runway .domino:nth-child(12) { animation-delay: 0.66s; }
.domino-runway .domino:nth-child(13) { animation-delay: 0.72s; }
.domino-runway .domino:nth-child(14) { animation-delay: 0.78s; }
.domino-runway .domino:nth-child(15) { animation-delay: 0.84s; }
.domino-runway .domino:nth-child(16) { animation-delay: 0.90s; }
.domino-runway .domino:nth-child(17) { animation-delay: 0.96s; }
.domino-runway .domino:nth-child(18) { animation-delay: 1.02s; }
.domino-runway .domino:nth-child(19) { animation-delay: 1.08s; }
.domino-runway .domino:nth-child(20) { animation-delay: 1.14s; }
.domino-runway .domino:nth-child(21) { animation-delay: 1.20s; }
.domino-runway .domino:nth-child(22) { animation-delay: 1.26s; }
.domino-runway .domino:nth-child(23) { animation-delay: 1.32s; }
.domino-runway .domino:nth-child(24) { animation-delay: 1.38s; }
.domino-runway .domino:nth-child(25) { animation-delay: 1.44s; }
.domino-runway .domino:nth-child(26) { animation-delay: 1.50s; }
.domino-runway .domino:nth-child(27) { animation-delay: 1.56s; }
.domino-runway .domino:nth-child(28) { animation-delay: 1.62s; }
.domino-runway .domino:nth-child(29) { animation-delay: 1.68s; }
.domino-runway .domino:nth-child(30) { animation-delay: 1.74s; }

/* --- NEW: Custom Shape Blockquote Style --- */

.blog-content blockquote {
  position: relative;
  margin: 1.5em 0;
  /* Adjust padding to control the space between the line and text */
  padding-left: calc(5px + 1em); 
  color: #aaa;
  font-style: normal;
}

/* This creates the custom vertical line */
.blog-content blockquote::before {
  content: '';
  position: absolute;
  left: 0; /* Position the line at the very start of the blockquote */
  top: 0;
  width: 5px; /* The thickness of the line */
  height: 100%;
  background-color: #444;
  /* Creates the custom shape extending to the right */
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* --- NEW: Image with Modal Border --- */

.bordered-image {
  /* For responsiveness, like your other image class */
  max-width: 100%;
  height: auto;
  
  /* --- Styles copied from your .modal-content class --- */
  
  /* 1. The rounded corners, set to 10px to match the modal */
  border-radius: 10px;
  
  /* 2. The exact 1px transparent white border from the modal */
  border: 1px solid rgba(255, 255, 255, 0.1);
  
  /* --- Extra details for a polished look --- */
  
  /* 3. A little padding to create space between the image and the border */
  padding: 1px;
  
  /* 4. Fills the padded space with the modal's dark, glassy background color */
  background-color: rgba(10, 15, 25, 0.2);
  
  box-sizing: border-box; /* Ensures padding and border don't add to the total width */
}

/* CSS adjacent sibling selector use */
/* Adds extra vertical space ONLY to paragraphs that come immediately after a code block */
.blog-content pre + p,
.blog-content pre + h1,
.blog-content pre + h2,
.blog-content pre + h3 {
  margin-top: 1.5em;
}

/* --- CONSOLIDATED & DEFINITIVE LIST STYLING --- */

/* Reset the parent list container */
.blog-content ul {
  list-style: none;
  padding-left: 0;
}

/* Style the list items directly and create space for the bullet */
.blog-content ul > li {
  position: relative;
  padding-left: 25px; /* Creates space for the bullet and indentation */
  margin-bottom: 1.5em; /* Vertical spacing between items */
}

/* Create the custom arrow bullet, hidden by default */
.blog-content ul > li::before {
  content: '→';
  position: absolute;
  left: 0;
  top: 0em; /* Position relative to the font size of the first line */
  /* The transform property is now removed */
  color: var(--clr-neon);
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

/* Reveal the bullet on hover */
.blog-content ul > li:hover::before {
  opacity: 1;
}

/* --- NEW: Table of Contents Glass Pills --- */

/* The container for the pills */
.toc-container {
  display: flex;
  flex-wrap: wrap; /* Allows pills to wrap to the next line */
  gap: 10px;       /* Space between pills */
  margin-bottom: 2.5em; /* Space after the entire block */
}

/* The style for each individual pill */
.toc-container a {
  /* Text and Link Styles */
  color: #ccc;
  text-decoration: none; /* Removes the default underline */
  font-family: 'Inter', sans-serif;
  font-size: 0.9em;

  /* Glassmorphism Styles */
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 8px 12px;
  border-radius: 8px;

  transition: all 0.2s ease-in-out;
}

/* The interactive hover effect */
.toc-container a:hover {
  background: rgba(0, 255, 255, 0.1);
  border-color: var(--clr-neon);
  color: #fff;
  transform: translateY(-2px); /* Lifts the pill slightly */
}

/* A subtle style for the sub-item marker */
.toc-sub-item-marker {
  color: rgba(255, 255, 255, 0.4);
  margin-right: 5px;
}

/* This is the new rule for forcing a line break in the flex container */
.flex-break {
  flex-basis: 100%;
  height: 0;
}

/* --- Table Styling for Blog & Skills --- */
.blog-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 2em 0;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
}

.blog-content th,
.blog-content td {
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 12px 15px;
  text-align: left;
}

.blog-content thead th {
  background-color: rgba(0, 255, 255, 0.05);
  color: #fff;
  font-weight: 600;
}

.blog-content tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

/* --- Nested List Styling --- */
/* This ensures nested lists are indented properly */
.blog-content ul ul {
  margin-top: 0.5em;
  padding-left: 25px; 
}

@keyframes slideOut {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-50px);
    opacity: 0;
  }
}

.modal-content.closing,
.command-menu.closing {
  animation: slideOut 0.3s ease-out forwards;
}

/* --- MathML and Equation Styling --- */
/* Apply the dedicated math font to all MathML elements */
.blog-content math,
.blog-content mi, /* Identifiers like variables (r, π) */
.blog-content mn, /* Numbers (2, 4) */
.blog-content mo, /* Operators (=, +) */
.blog-content sup, /* Superscripts */
.blog-content frac { /* Fractions */
  font-family: 'Latin Modern Math', sans-serif;
}

/* Apply the 'Inter' font specifically to text elements within math */
.blog-content mtext { /* Text like "Area of the circle" */
  font-family: 'Inter', sans-serif;
}

/* This block targets the deep browser rendering bug by completely
   isolating list items and math elements from the parent's
   'background-clip: text' effect, ensuring they are always visible. */
   .text-glow-on-hover:hover li,
   .text-glow-on-hover:hover math,
   .text-glow-on-hover:hover table {
     /* Force the color to be solid, overriding transparency */
     color: #ddd !important; 
     /* Explicitly remove any clipped background from the parent */
     background: none !important; 
     /* Force the element into its own rendering layer to fix painting bugs */
     isolation: isolate;
   }

   .blog-content math + p,
   .blog-content math + h1,
   .blog-content math + h2,
   .blog-content math + h3 {
     margin-top: 1.5em;
   }

   .blog-content figure:has(figcaption) {
    /* Sets top margin to 0.5em, left/right to 0, and bottom to 2em */
    margin: -1.5em 0 2em; 
  }

  /* --- No language or unstyled pre code blocks --- */
.blog-content pre > code:not([class*="language-"]) {
  color: #ccc !important; /* A light grey, visible color */
  font-family: 'Space Mono', monospace !important;
}

/* --- Command Menu (Spotlight/cmdk) Styles --- */

/* The main menu container */
.command-menu {
  width: 100%;
  max-width: 640px;
  margin: 6% auto;
  background: rgba(20, 25, 35, 0.5);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  animation: slideIn 0.5s ease-out;
  position: relative; /* CRITICAL: This allows the close button to be positioned correctly */
}

/* --- Close Button --- */
.command-close-btn {
  position: absolute;
  top: 14px;
  right: 10px;
  width: 28px;
  height: 28px;
  background-color: transparent; /* No background by default */
  border: none;
  border-radius: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: #aaa; /* Subtler default color */
  transition: all 0.2s ease;
  z-index: 10;
}
.command-close-btn:hover {
  background-color: var(--clr-neon);
  color: #000;
  transform: scale(1.1);
  box-shadow: 0 0 10px var(--clr-neon);
}

/* Wrapper for the search input and icon */
.command-input-wrapper {
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.command-input-wrapper i {
  color: #888;
  font-size: 1rem;
}

/* The search input field */
#command-search-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  padding: 16px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 1.2rem;
  color: #fff;
}
#command-search-input::placeholder {
  color: #888;
  font-weight: 300;
}

/* Container for the list and answer sections */
.command-body {
  display: flex;
  height: 350px;
}

/* The scrollable list of questions */
.command-list-container {
  flex: 1;
  overflow-y: auto;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}
#command-list {
  list-style: none;
  padding: 8px;
}

/* Individual question items */
#command-list li {
  padding: 12px 16px;
  font-family: 'Inter', sans-serif;
  color: #ccc;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
  border-left: 3px solid transparent;
  margin-bottom: 4px; /* NEW: Adds vertical space between questions */
}

/* Hover and active states to match blog sidebar */
#command-list li:hover {
  background-color: rgba(0, 255, 255, 0.1);
  color: #fff;
}
#command-list li.active {
  color: #fff;
  font-weight: normal;
  background-color: rgba(0, 255, 255, 0.1); 
  border-left: 3px solid var(--clr-neon);
}

/* The area where the answer is displayed */
.command-answer-container {
  flex: 1.5;
  padding: 24px;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
#command-answer-display p {
  font-family: 'Inter', sans-serif;
  color: #ddd;
  line-height: 1.7;
}
#command-answer-display p.placeholder {
  color: #888;
  text-align: center;
}

/* --- Custom Scrollbar for Command Menu --- */
.command-list-container::-webkit-scrollbar,
.command-answer-container::-webkit-scrollbar {
  width: 8px; /* A thinner scrollbar, consistent with your blog */
}

.command-list-container::-webkit-scrollbar-track,
.command-answer-container::-webkit-scrollbar-track {
  background: transparent;
}

.command-list-container::-webkit-scrollbar-thumb,
.command-answer-container::-webkit-scrollbar-thumb {
  background-color: #555;
  border-radius: 10px;
}

/* This rule explicitly disables any hover effect */
.command-list-container::-webkit-scrollbar-thumb:hover,
.command-answer-container::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* Keep the background color the same on hover */
}

/* --- NEW: Exclusion Tabs & PDF Loader Styling --- */

.exclusion-tabs-container {
  display: flex;
  justify-content: center;
  margin-bottom: 2em;
}
.exclusion-tabs {
  display: inline-flex;
  position: relative;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 5px;
  border-radius: 12px;
}
.exclusion-tab {
  background: none;
  border: none;
  padding: 10px 20px;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: #888;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: color 0.3s ease;
}
.exclusion-tab.active {
  color: #fff;
}
.exclusion-tab-indicator {
  position: absolute;
  top: 5px;
  bottom: 5px;
  height: auto;
  background-color: transparent;
  border-radius: 8px;
  border: 2px solid var(--clr-neon);
  box-shadow: 0 0 10px var(--clr-neon);
  z-index: 1;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.pdf-container {
  position: relative;
  display: none;
}

.pdf-loader {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Inter', sans-serif;
  color: #888;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.pdf-container.is-loading .pdf-loader {
  opacity: 1;
}

.pdf-container iframe {
  opacity: 0; /* Iframe invi by default */
  transition: opacity 3s ease-in-out;
}

.pdf-container.is-loaded iframe {
  opacity: 1;
}

/* --- Remove Focus Outline from Blog Content Area --- */
#blog-post-container:focus {
  outline: none;
}

/* --- NEW: Audio Player & Visualizer --- */

/* 1. Main container for the player elements */
#audio-player-container {
  position: fixed;
  bottom: 10px;
  left: 15px;
  z-index: 800;
  display: flex;
  align-items: center;
  gap: 15px;
}

/* 2. The Play/Pause button styling */
#play-pause-btn {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.4em; /* Wee bit smaller */
  cursor: pointer;
  transition: transform 0.3s ease, text-shadow 0.3s ease;
  padding: 5px;
  width: 30px;
  text-align: center;
  position: relative; /* Added for vertical positioning */
  top: 2px;           /* Nudged down slightly */
}
#play-pause-btn:hover {
  transform: scale(1.2);
  text-shadow: 0 0 8px var(--clr-neon);
}

/* Style for the icon itself, and for its paused state */
#play-pause-btn i {
  transition: opacity 0.3s ease;
}

#play-pause-btn i.paused {
  opacity: 0.5; /* This makes the icon faded/greyed out */
}

/* 3. The container for the horizontal bars */
#audio-visualizer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 22px; /* Adjusted height for 5 bars and more gap */
}

/* 4. Individual horizontal bar styling */
.bar {
  height: 3px;
  width: 0%;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 0 4px #fff;
  opacity: 0;
  transition: width 0.1s ease-out, opacity 0.5s ease-in-out;
}

/* 5. When playing, make the bars visible */
#audio-visualizer.playing .bar {
  opacity: 1;
}

/* =================================== */
/* ====== COMPLETE SIDENAV CODE ====== */
/* =================================== */

/* 1. The Toggle Icon (Hamburger/X) */
.sidenav-toggle {
  position: fixed;
  top: 20px;     /* MOVED UP: Was 80px */
  left: 20px;    /* MOVED LEFT: Was 20px */
  z-index: 1200;
  height: 35px;  /* MADE BIGGER: Was 30px */
  width: 35px;   /* MADE BIGGER: Was 30px */
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.sidenav-toggle .sidenav-btn-bar {
  display: block;
  width: 32px;   /* MADE BIGGER: Was 25px */
  height: 4px;   /* MADE THICKER: Was 3px */
  background: #fff;
  transition: all 0.3s ease-in-out;
  border-radius: 2px;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
  position: relative;
}

.sidenav-toggle .sidenav-btn-bar::before,
.sidenav-toggle .sidenav-btn-bar::after {
  content: '';
  position: absolute;
  left: 0;
  display: block;
  width: 32px;   /* MADE BIGGER: Was 25px */
  height: 4px;   /* MADE THICKER: Was 3px */
  background: #fff;
  transition: all 0.3s ease-in-out;
  border-radius: 2px;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
}

/* Increased spacing between the bars to match the new size */
.sidenav-toggle .sidenav-btn-bar::before { top: -10px; }
.sidenav-toggle .sidenav-btn-bar::after { top: 10px; }

.sidenav-toggle.open .sidenav-btn-bar {
  background: transparent;
  box-shadow: none;
}

.sidenav-toggle.open .sidenav-btn-bar::before {
  top: 0;
  transform: rotate(45deg);
}

.sidenav-toggle.open .sidenav-btn-bar::after {
  top: 0;
  transform: rotate(-45deg);
}

/* 2. The Sidenav Container */
#side-navigation {
  position: fixed;
  /* This position is ALWAYS below the toggle icon */
  top: 70px; 
  left: 15px;
  z-index: 1100;
  pointer-events: none;
}

#side-navigation.open {
  pointer-events: auto; /* Re-enables clicks for the open menu */
}

/* 3. The Glassy Menu Background (UL) */
#side-navigation ul {
  list-style: none;
  padding: 20px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
  background: rgba(10, 15, 25, 0.1);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
  
  /* Hide the background by default */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

#side-navigation.open ul {
  /* Show the background when open */
  opacity: 1;
  visibility: visible;
}

/* 4. The Menu Links (A) and their Hover State */
#side-navigation a {
  display: block; /* Simpler display property */
  padding: 5px 10px;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  font-size: 1.1rem;
  color: #ccc;
  border-radius: 8px;
  transition: color 0.2s ease-in-out, text-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
}

#side-navigation a:hover {
  background: transparent;
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8),
               0 0 20px rgba(255, 255, 255, 0.6);
  transform: scale(1.05);
}

/* 5. The Staggered Animation for Menu Items (LI) */
#side-navigation li {
  opacity: 0;
  transform: translateY(-15px);
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

/* Delays for the CLOSING animation (reverse order) */
#side-navigation li:nth-child(1) { transition-delay: 0.3s; }
#side-navigation li:nth-child(2) { transition-delay: 0.25s; }
#side-navigation li:nth-child(3) { transition-delay: 0.2s; }
#side-navigation li:nth-child(4) { transition-delay: 0.15s; }
#side-navigation li:nth-child(5) { transition-delay: 0.1s; }
#side-navigation li:nth-child(6) { transition-delay: 0.05s; }


/* When the menu is open, show the items... */
#side-navigation.open li {
  opacity: 1;
  transform: translateY(0);
}

/* ...with delays for the OPENING animation (forward order) */
#side-navigation.open li:nth-child(1) { transition-delay: 0.1s; }
#side-navigation.open li:nth-child(2) { transition-delay: 0.15s; }
#side-navigation.open li:nth-child(3) { transition-delay: 0.2s; }
#side-navigation.open li:nth-child(4) { transition-delay: 0.25s; }
#side-navigation.open li:nth-child(5) { transition-delay: 0.3s; }
#side-navigation.open li:nth-child(6) { transition-delay: 0.35s; }

/* --- NEW: Sidenav Active Indicator Triangle --- */

/* 1. Create the space for the triangle and hide it by default */
#side-navigation a::after {
  content: '';
  position: absolute;
  top: 50%;
  /* Position it outside the glassy background */
  right: -28px; 
  transform: translateY(-50%);
  width: 0;
  height: 0;
  
  /* The triangle shape */
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 7px solid #fff;
  
  /* The glow effect */
  filter: drop-shadow(0 0 4px var(--clr-neon));
  
  /* Hide and animate */
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 2. When the link is active, make the triangle visible */
#side-navigation a.sidenav-active::after {
  opacity: 1;
}

/* --- FIX: Remove focus outline from PrismJS code blocks --- */
.blog-content pre[class*="language-"]:focus,
.blog-content pre[class*="language-"]:focus-visible {
  outline: none;
}

/* hide non-mobile view things on larger screens */
.mobile-only {
  display: none;
}
.blog-back-btn {
  display: none;
}

/* --- JavaScript-Powered Animated Accordion --- */
/* Add padding to the summary itself */
.blog-content summary {
  padding: 0.8em;
}

/* This is the animation wrapper */
.blog-content details > div {
  overflow: hidden;
  transition: max-height 0.5s ease-in-out;
  max-height: 0;
  /* Add padding ONLY to the sides */
  padding: 0 0.8em;
}

/* CRITICAL FIX: Remove the bottom margin ONLY from the LAST element inside the spoiler */
.blog-content details > div > :last-child {
  margin-bottom: 0;
  /* Add padding to the bottom of the wrapper instead */
  padding-bottom: 0.8em;
}

/* Remove the default focus outline from the summary/spoiler */
.blog-content summary:focus,
.blog-content summary:focus-visible {
  outline: none;
}

/* --- NEW: Flex Container for Experience Modal Images --- */
.flex-container-exp {
  display: flex;
  align-items: center; /* Vertically centers items */
  justify-content: space-between; /* Pushes items to edges */
  gap: 4%; /* Creates space between the two 48% width items */
}
.flex-container-exp img {
  width: 48%; /* Assign a fixed percentage for a 50/50 split */
  height: auto;
  border-radius: 8px;
  flex-shrink: 0; /* Prevent the image from shrinking */
}
.info-image-caption {
  width: 48%;
  color: #fff;
  text-shadow: none; 
  font-family: 'Inter', sans-serif;
  font-weight: 200;
  font-size: 1.2rem; /* Reduced size to better fit three lines */
  line-height: 1.4; /* Slightly increased for readability */
  text-align: left;
  flex-shrink: 0;
}
.caption-title {
  display: block; /* Ensures it takes its own line */
  font-family: 'Inter', sans-serif; /* Use the same font as the description */
  font-weight: 500; /* A light bold */
  font-size: 1.8rem; /* Bigger font size */
  color: #fff;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.7); /* Subtle white glow */
  margin-bottom: 0.25em; /* Space between title and description */
}

/* Hide the scroll-to-top button by default (on desktop) */
.scroll-to-top-btn {
  display: none;
}

/* ======= RESPONSIVENESS ===== */
/* --- Breakpoint for Tablets & Small Laptops --- */
@media (max-width: 1040px){
  header{
    padding: 12px 20px;
  }
  section{
    padding: 100px 20px;
  }
  .home .media-icons{
    right: 15px;
  }
  /* Hide the desktop navigation */
  header .navigation { 
    display: none; 
  }
  /* Show the mobile overlay menu when active */
  header .navigation.active{ 
    position: fixed; 
    width: 100%; 
    height: 100vh; 
    top: 0; 
    left: 0; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    background: rgba(1, 1, 1, 0.5); 
  }
  header .navigation .navigation-items a{ 
    color: #222; 
    font-size: 1.2em; 
    margin: 20px; 
  }
  header .navigation .navigation-items a:before{ 
    background: #222; 
    height: 5px; 
  }
  header .navigation.active .navigation-items{ 
    background: #fff; 
    width: 600px; 
    max-width: 600px; 
    margin: 20px; 
    padding: 40px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    border-radius: 5px; 
    box-shadow: 0 5px 25px rgb(1 1 1 / 20%); 
  }
  .menu-btn{ 
    background: url(menu.png)no-repeat; 
    background-size: 30px; 
    background-position: center; 
    width: 40px; 
    height: 40px; 
    cursor: pointer; 
    transition: 0.3s ease; 
  }
  .menu-btn.active{ 
    z-index: 999; 
    background: url(close.png)no-repeat; 
    background-size: 25px; 
    background-position: center; 
    transition: 0.3s ease; 
  }
}

/* --- Breakpoint for Mobile Layouts (Tablets Portrait & Phones) --- */
@media (max-width: 768px) {

  /* --- 1. Make all modals fullscreen --- */
  .modal-content, .command-menu {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: 100%;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 30px 25px;
  }

  /* --- 3. Stack the Command Menu layout --- */
  .command-menu {
    display: flex;
    flex-direction: column;
  }
  .command-body {
    flex-direction: column;
    height: auto;
    flex-grow: 1; /* Allow body to fill remaining space */
  }
  .command-list-container {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    flex-grow: 1; /* Allow list to take up available space */
  }
  .command-answer-container {
    flex-grow: 1;
  }
  
  /* --- 4. Scale down font in Experience Modal --- */
  .info-text-container p {
    font-size: 1.0rem; /* Was 1.2rem */
    line-height: 1.6;
  }
  .info-text-container .info-header {
    font-size: 1.0rem; /* Was 1.1rem */
  }
  /* diagram */
  .flex-container-exp {
    /* No changes needed here, parent rules still work */
    gap: 4%;
  }
  .flex-container-exp img {
    width: 48%; /* Maintain the 50/50 split */
    height: auto;
  }
  .info-image-caption {
    width: 48%;
    font-size: 0.8rem; /* Reduced to fit three lines comfortably */
    line-height: 1.4;
    font-weight: 200;
  }
  .caption-title {
    display: block;
    font-weight: 500;
    font-size: 1.2rem; /* Scaled down for mobile */
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
    margin-bottom: 0.25em;
  }

  /* project modal */
  .list-view .project-info h3 {
    font-size: 0.9rem; /* Was 1.0rem */
  }
  
  .list-view .project-info p {
    font-size: 0.8rem; /* Was 0.9rem */
  }
  .list-view .project-info {
    /* This is the magic rule that allows flex items to shrink and wrap text */
    min-width: 0;
  }
  /* project text and desc */
  .desktop-only {
    display: none; /* Hide the long description on mobile */
  }
  .mobile-only {
    display: block; /* Show the short description on mobile */
  }

  /* BLOG POST MODAL */
  /* --- 2. Responsive Blog Modal (Master-Detail View) --- */
  .blog-container {
    position: relative;
    overflow: hidden;
    height: 100%;
  }

  .blog-sidebar, .blog-content {
    /* Position both views on top of each other for fading */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* This now works correctly */
    overflow-y: auto;
    padding: 30px 25px;
    /* Animation settings */
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  /* --- Default State: Show List, Hide Content --- */
  .blog-content {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  /* --- Content View State: Show Content, Hide List --- */
  .blog-container.view-content .blog-sidebar {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .blog-container.view-content .blog-content {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* --- Mobile-Only Back Button Styling --- */
  .blog-back-btn {
    display: flex;
    align-items: center;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ccc;
    padding: 8px 15px;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    cursor: pointer;
    margin-bottom: 2em;
    transition: all 0.2s ease;
  }
  .blog-back-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
  }
  .blog-back-btn i {
    margin-right: 10px;
  }
  /* Remove padding from the blog modal's container to allow for a true fullscreen view */
  .blog-modal-content {
    padding: 0;
  }
  /* --- 6. Scale down Blog Post Content fonts --- */
  .blog-content h1 {
    font-size: 1.8rem;
  }
  .blog-content h2 {
    font-size: 1.5rem;
  }
  .blog-content h3 {
    font-size: 1.2rem;
  }
  .blog-content p {
    font-size: 1.0rem; /* Base paragraph size for mobile */
    line-height: 1.7;
  }
  .blog-content li {
    font-size: 0.9rem; /* List items, smaller than p */
  }
  /* Target Prism's specific selectors to override the theme */
  .blog-content pre[class*="language-"],
  .blog-content pre[class*="language-"] code[class*="language-"] {
    font-size: 0.85rem !important;
  }
  /* --- Hide Sidenav & Toggle when a modal is open on mobile --- */
  body.modal-is-open #side-navigation,
  body.modal-is-open .sidenav-toggle {
    display: none;
  }
  /* for 'Software' and toggle options to not be cluttered */
  .project-section h2 {
    text-align: left; /* Align heading to the left */
    margin-bottom: 20px; /* Add space below the header bar */
  }
  .layout-toggle {
    /* Adjust position to align with the left-aligned heading */
    top: 40px;
    right: 60px;
  }
  /* Override close buttons for different modals for phone view */
  #projectsModal .close-btn {
    top: 18px;
    right: 15px;
  }
  #blogModal .close-btn {
    top: 12px;
  }
  #infoModal .close-btn {
    top: 9px;
  }
  .command-close-btn {
    top: 45px;
    right: 20px;
  }
  /* --- Main Page UI Fade Transition for Modals --- */
  .sidenav-toggle,
  .home .media-icons,
  #audio-player-container,
  #xyz {
    /* When the modal closes, fade back in over 0.5s after a 0.2s delay */
    transition: opacity 0.5s ease 0.2s;
  }

  /* When a modal is open, immediately fade the icons out */
  body.modal-is-open .sidenav-toggle,
  body.modal-is-open .home .media-icons,
  body.modal-is-open #audio-player-container,
  body.modal-is-open #xyz {
    opacity: 0;
    pointer-events: none; /* Make them unclickable when invisible */
    transition: opacity 0.2s ease; /* Fade out quickly */
  }
  /* Speed up the PDF fade-in on mobile for a snappier feel */
  .pdf-container iframe {
    transition: opacity 0.5s ease-in-out;
  }
  /* --- Responsive Blog Table Styling --- */
  .blog-content table {
    font-size: 0.9rem; /* Smaller font for mobile */
  }

  .blog-content th,
  .blog-content td {
    padding: 8px 10px; /* Reduced padding for a tighter look */
  }
  /* --- Responsive Animation Container --- */
  .blog-content .scene-container {
    overflow-x: auto;          /* Enables horizontal scrolling */
    justify-content: flex-start; /* Aligns animations to the left for scrolling */
    padding: 10px 0 20px 0;    /* Adds space for the scrollbar below */
    scrollbar-width: thin;       /* Styles scrollbar for Firefox */
    scrollbar-color: var(--clr-neon) transparent;
  }

  /* Custom scrollbar for WebKit browsers (Chrome, Safari) */
  .blog-content .scene-container::-webkit-scrollbar {
    height: 6px;
  }
  .blog-content .scene-container::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
  }
  .blog-content .scene-container::-webkit-scrollbar-thumb {
    background-color: var(--clr-neon);
    border-radius: 3px;
  }
  .blog-content .winter-animation-container {
    flex-shrink: 0; /* Prevents the animations from shrinking */
    transform: scale(0.85); /* Scales them down slightly for a better fit */
    margin: 0 -15px; /* Adjusts margin to reduce excess space from scaling */
  }
  /* --- Responsive Table Wrapper (Mobile Only) --- */
  .table-wrapper {
    overflow-x: auto; /* Enables horizontal scrolling */
    margin: 2em 0;    /* Takes the place of the table's original margin */
    scrollbar-width: thin;
    scrollbar-color: var(--clr-neon) transparent;
  }
  /* Custom scrollbar for WebKit browsers */
  .table-wrapper::-webkit-scrollbar {
    height: 6px;
  }
  .table-wrapper::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
  }
  .table-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--clr-neon);
    border-radius: 3px;
  }
  /* Remove the margin from the table itself when it's inside the wrapper on mobile */
  .blog-content .table-wrapper table {
    margin: 0;
  }
  /* --- Blog Post Mobile UX Improvements --- */
  /* 1. Hide the original close button ONLY when a post is active */
  .blog-modal-content:has(.blog-container.view-content) .close-btn {
    display: none;
  }
  /* 2. Style the new "scroll to top" button */
  .scroll-to-top-btn {
    display: block; /* Make the button visible again on mobile */
    position: fixed;
    bottom: -11px;
    right: -4px;
    z-index: 100;
    /* Appearance: REMOVED circle, fill, and border */
    background: none;
    border: none;
    color: var(--clr-neon);
    /* Sizing: Small, with a tight hitbox around the icon */
    padding: 10px; /* Creates a reasonable tap area */
    font-size: 1.3rem; /* A clear but sleek arrow icon */
    cursor: pointer;
    /* Animation */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease-in-out;
  }
  /* 3. The visible state with the fade-in animation */
  .scroll-to-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .scroll-to-top-btn i {
    display: inline-block; /* Ensures transform applies correctly */
    transform: scaleY(1.3); /* Stretches the icon vertically by 40% */
  }  
}
 
/* --- Breakpoint for Small Phones --- */
@media (max-width: 540px) {
  /* Force projects grid into a single column */
  .project-items.grid-view {
    grid-template-columns: 1fr;
  }
}

/* --- Blog Modal Close Button Fix (larger screens or non-mobile view) --- */
@media (min-width: 769px) {
  #blogModal .close-btn {
    position: sticky;
    float: right;
    margin-right: -20px;
  }
}
  
/* ======================================= */
/* ====== INTERESTS MODAL FILESYSTEM ====== */
/* ======================================= */

/* --- 1. Main Modal & Layout --- */
.filesystem-modal-content {
  max-width: 1100px;
  padding: 0;
  overflow: hidden;
}

.filesystem-container {
  display: flex;
  height: 85vh;
}

/* --- 2. Sidebar Styling --- */
.fs-sidebar {
  flex: 0 0 240px;
  background: rgba(0, 0, 0, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px 10px;
  display: flex;
  flex-direction: column;
  z-index: 10;
}

.fs-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 15px;
  font-family: 'Space Mono', monospace;
  color: #888;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: 15px;
}
.fs-header i {
  margin-right: 10px;
}

.fs-folder-list {
  list-style: none;
}

/* --- 3. Folder Item Styling --- */
.fs-folder-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  font-family: 'Inter', sans-serif;
  text-decoration: none;
  color: #ccc;
  border-radius: 6px;
  margin-bottom: 5px;
  border-left: 3px solid transparent;
  transition: all 0.2s ease-in-out;
}

.fs-folder-list a:hover {
  background-color: rgba(0, 255, 255, 0.1);
  color: #fff;
}

.fs-folder-list a.active {
  background-color: rgba(0, 255, 255, 0.1);
  color: #fff;
  border-left-color: var(--clr-neon);
}

.fs-folder-list a i {
  transition: color 0.2s ease-in-out;
}
.fs-folder-list a.active i {
  color: var(--clr-neon);
}

/* --- 4. Content Pane Styling (REBUILT) --- */
.fs-content-pane {
  flex-grow: 1;
  position: relative;
  min-width: 0;
}

/* --- 5. Content Item Styling (REBUILT) --- */
.fs-content-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 40px;
  
  /* FIXED: Each folder scrolls independently */
  overflow-y: auto;
  overflow-x: hidden; 

  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
}

.fs-content-item.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Style for the new placeholder */
#fs-content-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 1.2rem;
  color: #888;
  font-family: 'Inter', sans-serif;
}

.fs-content-item h2 {
  font-family: 'Playwrite DE Grund', cursive;
  color: #fff;
  font-size: 2rem;
}

.fs-content-item p {
  font-family: 'Inter', sans-serif;
  color: #ddd;
  line-height: 1.7;
  font-size: 1.1rem;
}

/* --- 6. Mobile Responsiveness --- */
@media (max-width: 768px) {
  .filesystem-container {
    flex-direction: column;
    height: 100%;
  }
  .fs-sidebar {
    flex: 0 0 auto;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
  .fs-folder-list {
    display: flex;
    justify-content: space-around;
  }
  .fs-folder-list a {
    margin-bottom: 0;
    border-left: none;
    border-bottom: 3px solid transparent;
  }
  .fs-folder-list a.active {
    border-bottom-color: var(--clr-neon);
  }
  .fs-content-item {
    padding: 30px 25px;
  }
  /* FIXED: Ensure text wraps properly on mobile */
  .fs-content-item p, .anime-card figcaption {
    white-space: normal;
    word-break: break-word;
    overflow-wrap: break-word;
  }
}

/* ======================================= */
/* == INTERESTS MODAL: POLISH & 3D ICONS == */
/* ======================================= */
.fs-folder-list a .fa-folder {
  position: relative;
  width: 1.2em;
  height: 1em;
  color: transparent;
  transition: transform 0.3s ease;
}

.fs-folder-list a .fa-folder::before,
.fs-folder-list a .fa-folder::after {
  content: '';
  position: absolute;
  left: 0;
  border-radius: 0.1em;
  transition: all 0.3s ease;
}

.fs-folder-list a .fa-folder::before {
  bottom: 0;
  width: 100%;
  height: 85%;
  background-color: #5a9ee5;
}

.fs-folder-list a .fa-folder::after {
  bottom: 0;
  width: 100%;
  height: 100%;
  background-color: #7badea;
  transform-origin: bottom;
  transform: skewX(15deg);
  box-shadow: -4px 0 10px rgba(0,0,0,0.2);
}

.fs-folder-list a.active .fa-folder::before {
  background-color: #6fb0f1;
}

.fs-folder-list a.active .fa-folder::after {
  background-color: #8cc6f5;
  transform: skewX(5deg) scale(1.02);
}

/* ======================================= */
/* ====== INTERESTS MODAL: SEARCH BAR ====== */
/* ======================================= */
#interests-search-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  padding: 12px 0;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  color: #fff;
}

#interests-search-input::placeholder {
  color: #888;
  font-weight: 400;
}

/* ================================================= */
/* == ANIME STEAM CARDS == */
/* ================================================= */
#fs-content-anime h2 {
  margin-bottom: 1em;
}

.anime-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 30px;
  padding: 10px 2px;
}

.anime-card {
  width: 100%;
  aspect-ratio: 2/3;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.5);
  transform-origin: center top;
  transform-style: preserve-3d;
  transform: translateZ(0);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  position: relative;
  cursor: default;
  border-radius: 8px;
}

.anime-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.anime-card figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 15px;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 1rem;
  font-weight: 500;
  transform: translateY(100%);
  transition: transform 0.4s ease;
  z-index: 2;
}

.anime-card::after {
  content: '';
  position: absolute;
  z-index: 10;
  width: 200%;
  height: 100%;
  top: -90%;
  left: -20px;
  opacity: 0.1;
  transform: rotate(45deg);
  background: linear-gradient(to top, transparent, #fff 15%, rgba(255,255,255,0.5));
  transition: transform 0.4s ease, top 0.4s ease, opacity 0.4s ease;
}

.anime-card:hover {
  box-shadow: 0 12px 24px 5px rgba(0,0,0,0.4);
  transform: translateY(-6px) rotateX(7deg);
}

.anime-card:hover figcaption {
  transform: translateY(0%);
}

.anime-card:hover::after {
  transform: rotate(25deg);
  top: -40%;
  opacity: 0.15;
}

@media (max-width: 768px) {
  .anime-card-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 20px;
  }
  .anime-card figcaption {
    font-size: 0.9rem;
  }
}

/* ================================================= */
/* == PHOTOS HORIZONTAL SCROLL GALLERY == */
/* ================================================= */

/* UPDATED: Changed ID to a reusable class */
.photo-gallery-container {
  padding: 0;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  height: 60vmin; /* Give the container a defined height */
}

.photo-gallery-container::before,
.photo-gallery-container::after {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  width: 150px;
  z-index: 2;
  pointer-events: none;
}

.photo-gallery-container::before {
  left: 0;
  background: linear-gradient(to right, rgba(16, 21, 28, 1) 0%, rgba(16, 21, 28, 0) 100%);
}

.photo-gallery-container::after {
  right: 0;
  background: linear-gradient(to left, rgba(16, 21, 28, 1) 0%, rgba(16, 21, 28, 0) 100%);
}

/* NEW: Rule to make gallery full-width in travel modal */
.travel-section .photo-gallery-container {
  margin: 2em -40px; 
}
@media (max-width: 768px) {
  .travel-section .photo-gallery-container {
    margin: 2em -25px; /* Matches mobile padding */
  }
}

/* UPDATED: Changed ID to a reusable class */
.image-track {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  overflow-x: scroll;
  overflow-y: hidden;
  scrollbar-width: none;
}

.image-track::-webkit-scrollbar {
  display: none;
}

.image-track > .image {
  width: 40vmin;
  height: 56vmin;
  object-fit: cover;
  object-position: 25% 50%;
  flex-shrink: 0;
  box-shadow: 0 10px 30px rgba(0,0,0, 0.4);
  margin: 0 0.5vmin;
}

.no-results-message {
  font-family: 'Inter', sans-serif;
  color: #888;
  text-align: center;
  padding: 40px 20px;
}

/* ================================================= */
/* == INTERESTS MODAL: CLOSE BTN == */
/* ================================================= */

/* 1. Hide the new mobile button by default on desktop */
#interests-close-btn-mobile {
  display: none;
}

/* 2. Media query for mobile screens */
@media (max-width: 768px) {
  /* Hide the large original close button on mobile */
  .filesystem-modal-content > .close-btn {
    display: none;
  }
  
  /* Show and style the new mobile-friendly close button */
  #interests-close-btn-mobile {
    /* Style copied from .command-close-btn */
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width: 28px;
    height: 28px;
    background-color: transparent;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    color: #aaa;
    transition: all 0.2s ease;
    
    /* Positioning copied from .command-close-btn on mobile */
    top: 30px;
    right: 20px;

    /* CRITICAL FIX: Ensure it's on top of the sidebar */
    z-index: 20; 
  }

  #interests-close-btn-mobile:hover {
    background-color: var(--clr-neon);
    color: #000;
    transform: scale(1.1);
    box-shadow: 0 0 10px var(--clr-neon);
  }
}

.no-results-message {
  font-family: 'Inter', sans-serif;
  color: #888;
  text-align: center;
  padding: 40px 20px;
}

/* ======================================= */
/* ====== TRAVEL MODAL STORYTELLING MAP ====== */
/* ======================================= */

/* --- 1. Main Modal Layout --- */
.travel-modal-content {
  padding: 0;
  max-width: calc(100vw - 380px);
  width: 90%;
  height: 85vh;
  overflow: hidden;
  position: relative;
  background-color: #1a202c;
  display: flex;
  flex-direction: column;
}

/* --- 2. Map Area (Absolute Background) --- */
.map-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 55%;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.map-container.visible {
  opacity: 1;
}

/* --- 3. Content Area (Scrolling Overlay with new Gradient) --- */
.travel-content {
  position: relative;
  height: 50%;
  z-index: 2;
  width: 100%;
  overflow-y: auto;
  padding: 0; /* CRITICAL FIX: Remove all padding from the container */
  box-sizing: border-box;
  background-color: rgb(16, 21, 28);
  box-shadow: 0 20px 30px 20px rgb(16, 21, 28);
}

/* Base styles for all sections */
.travel-section {
  padding: 0 40px; /* MOVED horizontal padding here */
  padding-bottom: 10vh;
  color: #ddd;
}

/* NEW: Adds top padding ONLY to the first text section */
.travel-section:first-of-type {
  padding-top: 25px;
}

/* Apply large height ONLY to sections with a data-path-id attribute */
.travel-section[data-path-id] {
  min-height: 200vh;
}

.travel-section:last-of-type {
  min-height: 100vh;
}
.travel-section h2, .travel-section h3 {
  font-family: 'Playwrite DE Grund', cursive;
  color: #fff;
  margin-bottom: 0.8em;
}
.travel-section p {
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
  max-width: none;
  margin-bottom: 1.2em;
}

/* --- 4. Mobile Responsiveness --- */
@media (max-width: 768px) {
  .travel-modal-content {
    max-width: none;
    width: 100%;
    height: 100%;
  }
  .travel-content {
    height: 45%;
  }
  .map-container {
    height: 55%;
  }
  /* On mobile, apply padding to sections, not the container */
  .travel-section {
    padding-left: 25px;
    padding-right: 25px;
  }
  .travel-section:first-of-type {
    padding-top: 30px;
  }
  .travel-section[data-path-id] {
    min-height: 150vh;
  }
  .travel-section h2 { font-size: 1.8rem; }
  .travel-section h3 { font-size: 1.5rem; }
  .travel-section p { font-size: 1.0rem; }
}

/* ======================================= */
/* ====== TRAVEL MAP AIRPLANE POINTER ====== */
/* ======================================= */

#map-pointer-plane {
  /* Inherit CSS variables from the example for elevation effect */
  --val: 0;
  --shadow: clamp(0.15em, calc(1em * sin(pi * var(--val) / 100)), 1em);
  --opacity: clamp(0.2, calc(1 - sin(pi * var(--val) / 100)), 0.4);
  --color: rgb(0 0 0 / var(--opacity));
  --primary: #f0f4fc;
  --secondary: #b55;

  /* Positioning and Sizing */
  position: absolute;
  /* Centered on its coordinates by transform */
  top: 0;
  left: 0;
  width: 4em;
  aspect-ratio: 1;
  pointer-events: none;
  z-index: 10;
  
  /* The transform will be updated by JavaScript for position, rotation, and scale */
  transform-origin: center;
  
  /* Copied from the example's ::-webkit-slider-thumb */
  background: 
    linear-gradient(var(--secondary) 0 0) 2% 50% / 13% 2.5% no-repeat,
    /* main frame */
    conic-gradient(at -40% 50%, #0000 84.75deg, var(--primary) 85deg 95deg, #0000 95.25deg) 0 0 / 80% 100%,
    /* pilot */
    radial-gradient(closest-side circle at calc(100% - 0.85em) 50%, #9cf 0.3em, #0000 0),
    radial-gradient(20% 10% at 80% 50%, var(--primary) 99%, #0000),
    /* tail */
    conic-gradient(at 45% -45%, #0000 150deg, var(--secondary) 151deg 174deg, #0000 175deg) -50% 40% / 53% 20%,
    conic-gradient(at 45% 145%, #0000 5deg, var(--secondary) 6deg 29deg, #0000 30deg) -50% 60% / 53% 20%,
    /* wings */
    conic-gradient(at 38% -45%, #0000 158deg, var(--secondary) 158.5deg 174deg, #0000 174.5deg) 0 0 / 100% 50%,
    conic-gradient(at 38% 145%, #0000 5deg, var(--secondary) 5.5deg 21deg, #0000 21.5deg) 0 100% / 100% 50%,
    /* engines */
    radial-gradient(80% 50%, #000 99%, #0000) 51% 22% / 21% 11%,
    radial-gradient(80% 50%, #000 99%, #0000) 51% 78% / 21% 11%;
  background-repeat: no-repeat;
  border-radius: 20% / 100%;
  filter: drop-shadow(calc(var(--shadow) * 2) calc(var(--shadow) * 1.25) var(--shadow) var(--color));
}

/* ================================================= */
/* == INTERESTS MODAL: MUSIC LIST STYLES == */
/* ================================================= */

.music-list {
  list-style: none;
  margin-top: 1.5em;
  /* Use negative margins to break out of the parent's padding */
  margin-left: -40px;
  margin-right: -40px;
  /* Initialize our custom counter */
  counter-reset: track-counter;
}

.music-track {
  display: flex;
  align-items: center;
  gap: 25px; /* Space between number and song info */
  padding: 12px 40px; /* Adjusted vertical padding */
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-family: 'Inter', sans-serif;
  position: relative;
  overflow: hidden;
  transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Added box-shadow transition */
  cursor: default;
}

.music-track:hover {
  background-color: rgba(0, 255, 255, 0.05);
  /* Add a subtle glow on hover */
  box-shadow: inset 0 0 15px -10px var(--clr-neon);
}

/* --- The Number --- */
.music-track::before {
  /* Create and style the track number */
  counter-increment: track-counter;
  content: counter(track-counter, decimal-leading-zero);
  color: #888;
  font-size: 0.95rem;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  width: 20px; /* Give it a fixed width for alignment */
  text-align: right;
  transition: all 0.3s ease;
}

/* --- UPDATED: The Number's Hover Effect --- */
.music-track:hover::before {
  /* Make the number change color and glow on hover */
  color: var(--clr-neon);
  text-shadow: 0 0 8px var(--clr-neon);
}


/* --- Vertical Song Info Layout --- */
.song-info {
  display: flex;
  flex-direction: column;
}

.song-title {
  color: #ddd;
  font-weight: 500;
  font-size: 1.05rem;
  transition: color 0.3s ease;
  font-family: 'Inter', sans-serif;
}

.song-artist {
  color: #888;
  font-size: 0.95rem;
  transition: color 0.3s ease;
  font-family: 'Inter', sans-serif;
}

.music-track:hover .song-title {
  color: #fff;
}
.music-track:hover .song-artist {
  color: #bbb;
}

/* --- Aesthetic Hover Underline (uses ::after) --- */
.music-track::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--clr-neon);
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.music-track:hover::after {
  transform: translateX(0%);
}

/* Media query for mobile view */
@media (max-width: 768px) {
  .music-list {
    margin-left: -25px;
    margin-right: -25px;
  }
  .music-track {
    padding: 12px 25px;
    gap: 20px;
  }
}