/*
  ========================================
  CAPYBEARISTA'S PORTFOLIO - STYLESHEET
  ========================================
  
  This CSS file contains all the styling for the portfolio website.
  It uses CSS custom properties (variables) for easy theming and includes both dark and light theme support.
  Enhanced with glassy liquid effects for a modern, fluid appearance.
  
  Filename: styles.css
  Author:   capyBearista
  Last Updated: 30 September 2025
*/

/*
  ========================================
  CSS CUSTOM PROPERTIES (VARIABLES)
  ========================================
  
  CSS variables define the color scheme and design tokens used throughout the site.
  This makes it easy to maintain consistent styling and switch between themes.
  All colors, spacing, and animation values are centralized here.
*/
:root {
  /* Dark theme colors (default) */
  --background: #0a0a0f;        /* Deeper dark background for glass effect */
  --sidebar-bg: rgba(35, 41, 54, 0.8);  /* Semi-transparent sidebar */
  --sidebar-accent: #00bcd4;    /* Accent color for sidebar - cyan */
  --sidebar-hover: rgba(38, 52, 69, 0.9);  /* Semi-transparent hover */
  --text-main: #e3eaf2;         /* Main text color - light gray */
  --text-secondary: #b0bac9;    /* Secondary text - lighter gray */
  --accent: #00bcd4;            /* Primary accent color - cyan */
  --card-bg: rgba(35, 41, 54, 0.6);  /* More transparent card background */
  --shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);  /* Enhanced glass shadow */
  --border-radius: 16px;        /* More rounded corners for glass effect */
  --transition: 0.3s cubic-bezier(.4, 0, .2, 1); /* Smooth transitions */
  --figure-bg: rgba(34, 34, 34, 0.6);  /* Semi-transparent figure background */
  
  /* Layout dimensions */
  --sidebar-width: 280px;       /* Sidebar width for consistent layout calculations */
  
  /* Glass effect properties */
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  --glass-backdrop: blur(16px);
  --glass-bg: rgba(255, 255, 255, 0.05);
  
  /* Liquid animation properties */
  --liquid-duration: 3s;
  --liquid-easing: cubic-bezier(0.4, 0, 0.2, 1);
  
  /* Animation timing variables */
  --animation-duration: 0.3s;
  --animation-timing: cubic-bezier(0.4, 0, 0.2, 1);
  --bounce-timing: cubic-bezier(0.68, -0.55, 0.265, 1.55);  /* Bouncy effect */
  --slide-timing: cubic-bezier(0.25, 0.46, 0.45, 0.94);     /* Smooth slide */
}

/*
  ========================================
  LIGHT THEME OVERRIDE
  ========================================
  
  When the .theme-light class is applied to the HTML element,
  these variables override the dark theme colors above.
*/
.theme-light {
  --background: #f0f2f5;        /* Light background with subtle tint */
  --sidebar-bg: rgba(255, 255, 255, 0.8);  /* Semi-transparent white */
  --sidebar-accent: #0891b2;    /* Darker cyan for light theme */
  --sidebar-hover: rgba(241, 245, 249, 0.9);  /* Semi-transparent hover */
  --text-main: #1e293b;         /* Dark text for light background */
  --text-secondary: #64748b;    /* Medium gray secondary text */
  --accent: #0891b2;            /* Darker cyan accent */
  --card-bg: rgba(255, 255, 255, 0.6);  /* Semi-transparent white */
  --shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);  /* Lighter shadow */
  --figure-bg: rgba(248, 250, 252, 0.6);  /* Semi-transparent light background */
  
  /* Light theme glass overrides */
  --glass-border: rgba(0, 0, 0, 0.1);
  --glass-bg: rgba(255, 255, 255, 0.25);
}

/* Light theme background override */
.theme-light body::before {
  background: 
    /* Base gradient layer - much more blue tones */
    linear-gradient(135deg, 
      #ffffff 0%, 
      #e6f3ff 25%, 
      #cce7ff 50%, 
      #b3dbff 75%, 
      #ffffff 100%),
    /* Much stronger blue accent gradient */
    radial-gradient(circle at 70% 30%, rgba(8, 145, 178, 0.35) 0%, transparent 60%),
    /* Additional strong blue accent gradient */
    radial-gradient(circle at 30% 70%, rgba(8, 145, 178, 0.25) 0%, transparent 50%),
    /* Third blue accent for maximum prominence */
    radial-gradient(circle at 50% 50%, rgba(8, 145, 178, 0.15) 0%, transparent 40%),
    /* Blur effect layer with increased intensity */
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.03) 0%, transparent 80%);
  background-blend-mode: normal;
}

/*
  ========================================
  DYNAMIC GRADIENT BACKGROUND
  ========================================
  
  Creates a sophisticated gradient background with multiple layers
  to provide rich visual depth and prevent color banding.
  The background adapts to the current theme.
*/
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    /* Base gradient layer - much lighter with prominent blue tones */
    linear-gradient(135deg, 
      #0a0a0f 0%, 
      #1a1a2e 25%, 
      #16213e 50%, 
      #0f3460 75%, 
      #0a0a0f 100%),
    /* Enhanced radial gradient for depth with increased intensity */
    radial-gradient(circle at 30% 70%, rgba(0, 188, 212, 0.25) 0%, transparent 60%),
    /* Additional blue accent for more prominence */
    radial-gradient(circle at 70% 30%, rgba(0, 188, 212, 0.15) 0%, transparent 50%),
    /* Third blue accent for maximum blue presence */
    radial-gradient(circle at 50% 50%, rgba(0, 188, 212, 0.1) 0%, transparent 40%),
    /* Blur effect layer with increased intensity */
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.04) 0%, transparent 80%);
  z-index: -1;
  background-blend-mode: normal;
}

/*
  ========================================
  SMOOTH THEME TRANSITIONS & GLASS UTILITIES
  ========================================
*/
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Glass effect utility class to reduce duplication */
.glass-effect {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/*
  ========================================
  MOBILE WARNING MODAL
  ========================================
  
  A modal that appears only on mobile devices to warn users
  that the site wasn't optimized for mobile viewing.
*/
.mobile-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.mobile-modal.show {
  display: flex;
}

.mobile-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.mobile-modal-content {
  position: relative;
  max-width: 400px;
  width: 100%;
  padding: 2rem;
  text-align: center;
  z-index: 1;
  animation: modalSlideIn 0.3s ease-out;
}

.mobile-modal-content {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--border-radius);
}

.mobile-modal-content h2 {
  color: var(--accent);
  font-size: 1.5rem;
  margin: 0 0 1rem 0;
  font-weight: 700;
}

.mobile-modal-content p {
  color: var(--text-main);
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 0 1.5rem 0;
}

.mobile-modal-btn {
  background: var(--accent);
  color: var(--background);
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: var(--border-radius);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--animation-speed) ease;
  box-shadow: var(--shadow);
}

.mobile-modal-btn:hover {
  background: var(--accent-bright);
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.mobile-modal-btn:active {
  transform: translateY(0);
}

/* Modal animation keyframes */
@keyframes modalSlideIn {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Only show modal on mobile devices */
@media (min-width: 900px) {
  .mobile-modal {
    display: none !important;
  }
}

/*
  ========================================
  LIQUID ANIMATION KEYFRAMES
  ========================================
  
  Keyframes for liquid-like animations used in various elements.
*/
@keyframes liquidFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/*
  ========================================
  THEME TOGGLE BUTTON STYLES
  ========================================
  
  The theme toggle button appears in the sidebar and allows
  users to switch between dark and light themes. Enhanced with glass effects.
*/
.theme-toggle {
  display: flex;                 /* Makes the button a flex container */
  align-items: center;           /* Centers content vertically */
  justify-content: center;       /* Centers content horizontally */
  width: 40px;                  /* Fixed width */
  height: 40px;                 /* Fixed height */
  border: none;                 /* Removes default button border */
  background: var(--glass-bg);  /* Glass background */
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border: 1px solid var(--glass-border);
  color: var(--text-main);      /* Text color matches theme */
  cursor: pointer;              /* Shows pointer cursor on hover */
  border-radius: var(--border-radius);  /* Rounded corners */
  margin: 1rem auto;            /* Center the button with margin */
  transition: all 0.3s ease;    /* Smooth transitions */
  position: relative;           /* For positioning child elements */
  overflow: hidden;             /* Hides overflow content */
  box-shadow: var(--glass-shadow);
}

/* Hover effect for the theme toggle button */
.theme-toggle:hover {
  background: var(--sidebar-hover);
  transform: scale(1.05);
}

/* Focus state for keyboard accessibility */
.theme-toggle:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Styles for the SVG icons inside the toggle button */
.theme-toggle svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

/* Rotate icon slightly on hover */
.theme-toggle:hover svg {
  transform: rotate(15deg);
}

/*
  ========================================
  THEME TOGGLE ICON VISIBILITY
  ========================================
  
  These rules control which icon (sun or moon) is visible
  based on the current theme.
*/
.theme-toggle .icon-sun {
  display: none;
}

.theme-toggle .icon-moon {
  display: block;
}

/* Show sun icon in light theme */
.theme-light .theme-toggle .icon-sun {
  display: block;
}

/* Hide moon icon in light theme */
.theme-light .theme-toggle .icon-moon {
  display: none;
}

/*
  ========================================
  THEME TOGGLE CONTAINER
  ========================================
  
  This container holds the theme toggle button and provides
  spacing and a border separator.
*/
.theme-toggle-container {
  padding: 0 1.5rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 1rem;
}

/*
  ========================================
  ANIMATION KEYFRAMES
  ========================================
  
  Keyframes define custom animations that can be applied
  to elements. These create smooth entrance effects.
*/

/* Slide in from left animation */
@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Slide in from right animation */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Slide in from bottom animation */
@keyframes slideInUp {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Slide in from top animation */
@keyframes slideInDown {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Simple fade in animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Scale in animation with bounce effect */
@keyframes scaleIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Bouncy entrance animation */
@keyframes bounceIn {
  0% {
    transform: scale(0.3);
    opacity: 0;
  }
  50% {
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Typewriter effect animation */
@keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* Glowing effect animation */
@keyframes glow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(0, 188, 212, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(0, 188, 212, 0.6);
  }
}

/* Floating animation for subtle movement */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Pulsing animation for loading states */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/*
  ========================================
  RESET AND BASE STYLES
  ========================================
  
  These rules set up the basic styling for the entire page
  and ensure consistent behavior across browsers.
*/

/* Set the base font size for the entire page */
html {
  font-size: 16px;
  box-sizing: border-box;
}

/* Apply border-box to all elements */
*,
*:before,
*:after {
  box-sizing: inherit;
}

/* Main body styling */
body {
  margin: 0;
  font-family: 'JetBrains Mono', 'Roboto', monospace;
  background: var(--background);
  color: var(--text-main);
  min-height: 100vh;
  display: flex;
  overflow-x: hidden;
}

/*
  ========================================
  ACCESSIBILITY: REDUCED MOTION
  ========================================
  
  Respect user preferences for reduced motion.
  This helps users with vestibular disorders.
*/
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  /* Background is now static, so no animation to disable */
}

/*
  ========================================
  ACCESSIBILITY: SKIP NAVIGATION
  ========================================
  
  This provides a hidden link for keyboard users
  to skip directly to the main content.
*/
.skipnavigation a {
  position: absolute;
  top: -100px;
  left: 10px;
  background-color: #333;
  color: #fff;
  padding: 10px;
  text-decoration: none;
  z-index: 999;
  transition: top 0.3s;
}

/* Show the skip link when focused */
.skipnavigation a:focus {
  top: 0;
}
/* Accessibility: Focus-visible outlines for keyboard users */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Ensure sidebar links show a clear keyboard focus ring */
.sidebar-nav a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/*
  ========================================
  SIDEBAR STYLES
  ========================================
  
  The sidebar contains navigation links and the theme toggle.
  It's fixed to the left side of the screen with glass morphism effects.
*/
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: var(--sidebar-width);
  background: var(--sidebar-bg);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border-right: 1px solid var(--glass-border);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  z-index: 100;
  transition: var(--transition);
  /* animation: slideInLeft 0.8s var(--bounce-timing); */
}

/* Sidebar header with title */
.sidebar-header {
  padding: 2rem 1.5rem 1rem 1.5rem;

  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 1px;
  /* animation: fadeIn 0.6s ease-out 0.3s both; */
  position: relative;
  overflow: hidden;
}

/* Liquid effect for sidebar header */
.sidebar-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 188, 212, 0.1), transparent);
  animation: liquidFlow 3s ease-in-out infinite;
}

/* Title text styling */
.sidebar-title {
  display: flex;
  position: relative;
  z-index: 1;
  justify-content: center;
}

/* Navigation list container */
.sidebar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  flex: 1 1 auto;
}

/* Individual navigation items */
.sidebar-nav li {
  margin: 0.5em 0;
  /* opacity: 0; */
  /* animation: slideInUp 0.5s ease-out both; */
}

/* Stagger the animation timing for each nav item */
/* .sidebar-nav li:nth-child(1) { animation-delay: 0.4s; }
.sidebar-nav li:nth-child(2) { animation-delay: 0.5s; }
.sidebar-nav li:nth-child(3) { animation-delay: 0.6s; } */

/* Navigation link styling */
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 1em;
  color: var(--text-main);
  text-decoration: none;
  font-size: 1.1em;
  padding: 0.75em 2em;
  border-radius: var(--border-radius);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border: 1px solid var(--glass-border);
  margin: 0.5em 1em;
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.2),
    0 2px 4px rgba(0, 188, 212, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

/* Hover and focus states for navigation links */
.sidebar-nav a:hover,
.sidebar-nav a:focus {
  background: var(--sidebar-hover);
  color: var(--accent);
  transform: translateX(6px) translateY(-2px) scale(1.01);
  border-color: var(--glass-border);
  box-shadow: 
    0 6px 12px rgba(0, 0, 0, 0.25),
    0 3px 6px rgba(0, 188, 212, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* Shimmer effect on hover */
.sidebar-nav a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, transparent, rgba(0, 188, 212, 0.2), transparent);
  transition: width 0.3s ease;
}

/* Expand shimmer on hover */
.sidebar-nav a:hover::before {
  width: 100%;
}

/*
  ========================================
  SIDEBAR ICON STYLING
  ========================================
  
  Icons in the sidebar navigation get special styling
  and hover effects.
*/
.sidebar-icon {
  width: 1.5em;
  height: 1.5em;
  margin-right: 0.8em;
  vertical-align: middle;
  display: inline-block;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.10));
  transition: filter 0.2s, transform 0.2s ease;
}

/* Icon effects on hover */
.sidebar-nav a:hover .sidebar-icon,
.sidebar-nav a:focus .sidebar-icon {
  filter: drop-shadow(0 2px 6px var(--accent));
  transform: scale(1.1) rotate(5deg);
}

/* Sidebar footer with contact links */
.sidebar-footer {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 1em 0.5em;
  border-top: 1px solid var(--glass-border);
  /* animation: slideInUp 0.6s ease-out 0.7s both; */
  background: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  margin: 0em 1em 1em 1em;
  border-radius: var(--border-radius);
}

/* Contact link styling */
.sidebar-contact {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 1.1em;
  font-weight: 600;
  transition: all 0.3s ease;
  padding: 0.4em 0.8em;
  border-radius: var(--border-radius);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border: 1px solid var(--glass-border);
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.2),
    0 2px 4px rgba(0, 188, 212, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
}

/* Contact link hover effects */
.sidebar-contact:hover,
.sidebar-contact:focus {
  color: #fff;
  background: var(--accent);
  transform: translateY(-4px) scale(1.02);
  box-shadow: 
    0 8px 16px rgba(0, 0, 0, 0.3),
    0 4px 8px rgba(0, 188, 212, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Liquid effect for contact links */
.sidebar-contact::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 188, 212, 0.1), transparent);
  animation: liquidFlow 3s ease-in-out infinite;
}

/*
  ========================================
  MAIN CONTENT AREA
  ========================================
  
  The main content area takes up the space to the right
  of the sidebar and contains the page content.
*/
.main-content {
  margin-left: var(--sidebar-width);
  flex: 1 1 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: transparent;
  transition: margin-left var(--transition);
  
  /* Center content in the available space (viewport minus sidebar) */
  width: calc(100vw - var(--sidebar-width));
  max-width: calc(100vw - var(--sidebar-width));
}

/* Inner container to constrain and center content */
.main-content > * {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* Page header styling */
header {
  padding: 2.5rem 2rem 1rem 2rem;
  text-align: left;
  /* animation: slideInDown 0.8s ease-out 0.2s both; */
  /* SLIDE DOWN ANIMATION FOR HEADER*/ 
}

/* Main page title */
h1 {
  font-size: 2.2em;
  font-weight: 700;
  color: var(--accent);
  margin: 0;
  position: relative;
}

/* Animated underline for title */
h1::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), transparent);
  animation: typewriter 1s ease-out 1s forwards;
}

/* Main content container */
main {
  flex-direction: column;
  gap: 2em;
  padding: 0 2rem 2rem 2rem;
}

/* Content sections */
section {
  flex: none;
}

/* Hero section with side-by-side layout */
.hero-section {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 4em;
  margin-bottom: 2em;
}

.hero-content {
  flex: 2 1 0;
  min-width: 0;
}

/* Hero Image Carousel Styles */
.hero-image-carousel {
  flex: 0 0 auto;
  width: 320px;
  max-width: 320px;
  margin: 0;
  margin-top: 1.5em;
  /* Ensure carousel maintains its size regardless of content */
  contain: layout style;
}

.carousel-container {
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  background: var(--card-bg);
  backdrop-filter: var(--glass-backdrop);
  width: 300px;
  height: 400px;
  /* Ensure this acts as positioning context for absolutely positioned children */
  isolation: isolate;
  /* Prevent any layout shifts and ensure stable dimensions */
  contain: layout style size;
  /* Force hardware acceleration for smoother transitions */
  will-change: transform;
}

.carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
  /* Ensure track fills container exactly */
  min-width: 300px;
  min-height: 400px;
}

.carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transform: translateX(100%);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  /* Ensure slide content is contained and doesn't shift */
  align-items: stretch;
  justify-content: flex-start;
  overflow: hidden;
  /* Prevent layout shifts during transitions */
  contain: layout style;
  /* Optimize for GPU rendering */
  will-change: transform, opacity;
}

.carousel-slide.active {
  opacity: 1;
  transform: translateX(0);
}

.carousel-slide.prev {
  transform: translateX(-100%);
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center; /* Ensure consistent centering */
  border-radius: var(--border-radius);
  /* Remove flex properties that could cause inconsistency */
  display: block;
  /* Prevent any shifting by ensuring stable dimensions */
  max-width: 300px;
  max-height: 400px;
  min-width: 300px;
  min-height: 400px;
  /* Prevent any focus/hover outlines */
  outline: none;
  border: none;
  /* Disable pointer events to prevent hover states */
  pointer-events: none;
}

.carousel-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
  color: white;
  text-align: center;
  padding: 3em 1em 0.75em;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  /* Ensure caption stays consistent regardless of image */
  z-index: 5;
  pointer-events: none; /* Prevent caption from interfering with interactions */
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(8px);
  border: 1px solid var(--glass-border);
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition);
  z-index: 10; /* Higher z-index to ensure buttons stay on top */
  opacity: 0;
  /* Ensure buttons are anchored to container, not affected by track transforms */
  pointer-events: auto;
  /* Prevent any interference with button visibility */
  visibility: visible;
  /* Ensure buttons maintain their properties during transitions */
  will-change: opacity, transform;
}

.carousel-container:hover .carousel-btn {
  opacity: 1;
}

.carousel-btn:hover,
.carousel-btn:focus,
.carousel-btn:active {
  background: rgba(0, 188, 212, 0.8);
  transform: translateY(-50%) scale(1.1);
  /* Prevent any positional shifts during hover */
  transform-origin: center center;
  opacity: 1; /* Ensure button stays visible during interaction */
}

/* Ensure buttons stay visible briefly after interaction */
.carousel-btn:focus-visible {
  opacity: 1;
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.carousel-btn svg {
  width: 20px;
  height: 20px;
}

.carousel-prev {
  left: 10px;
  /* Ensure button stays in place regardless of any transforms */
  transform-origin: center;
}

.carousel-next {
  right: 10px;
  /* Ensure button stays in place regardless of any transforms */
  transform-origin: center;
}

.carousel-indicators {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 1em;
}

.indicator {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: var(--text-secondary);
  opacity: 0.5;
  cursor: pointer;
  transition: all var(--transition);
}

.indicator.active {
  background: var(--accent);
  opacity: 1;
  transform: scale(1.2);
}

.indicator:hover {
  opacity: 0.8;
  transform: scale(1.1);
}

/* Carousel responsive adjustments */
@media (max-width: 600px) {
  .hero-image-carousel {
    width: 280px;
    max-width: 280px;
  }
  
  .carousel-container {
    width: 280px;
    height: 350px;
  }
  
  .carousel-track {
    height: 100%;
    min-width: 280px;
    min-height: 350px;
  }
  
  .carousel-slide img {
    max-width: 280px;
    max-height: 350px;
    min-width: 280px;
    min-height: 350px;
  }
  
  .carousel-btn {
    width: 35px;
    height: 35px;
  }
  
  .carousel-btn svg {
    width: 18px;
    height: 18px;
  }
  
  .carousel-prev {
    left: 8px;
  }
  
  .carousel-next {
    right: 8px;
  }
  
  .carousel-caption {
    padding: 2.5em 0.8em 0.6em;
    font-size: 0.9rem;
  }
}

/* Section headings */
h2 {
  color: var(--text-main);
  font-size: 1.5em;
  margin-top: 1.5em;
  margin-bottom: 1em;
}

/* Main content links styling - matches project preview card links */
.main-content section a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
  padding: 0.3em 0.1em 0.3em 0.1em;
  border-radius: 4px;
  border: 1px solid transparent;
}

.main-content section a:hover,
.main-content section a:focus {
  color: var(--text-main);
  background: var(--accent);
  border-color: var(--accent);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 188, 212, 0.3);
}

/*
  ========================================
  ASIDE (CONTACT/INFO BOX)
  ========================================
  
  The aside element contains additional information
  and appears below the main content. Enhanced with glass effects.
*/
aside {
  margin-top: 3em;
  align-self: stretch;
  background: transparent;
  color: var(--text-secondary);
  padding: 1em 1.5em 2em 1.5em;
  border-radius: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 1em;
  animation: slideInUp 0.8s ease-out 1.2s both;
  transition: none;
  position: relative;
}

/* Light theme aside border override */
.theme-light aside {
  border-top: 1px solid rgba(8, 145, 178, 0.4);
}





/*
  ========================================
  PROJECT PREVIEW CARDS
  ========================================
  
  These cards appear on the home page and showcase
  each project with an image and description.
  They feature glass morphism effects with subtle hover animations.
*/
.project-preview {
  background: var(--card-bg);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  margin-bottom: 2em;
  padding: 3em 3em 3em 3em;
  transition: box-shadow var(--transition), transform 0.3s ease;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 5em;
  position: relative;
  overflow: hidden;
}

/* Liquid effect for project cards */
.project-preview::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 188, 212, 0.03), transparent);
  animation: liquidFlow 5s ease-in-out infinite;
}

/* Hover effect for project cards */
.project-preview:hover {
  box-shadow: 0 12px 40px 0 rgba(0, 188, 212, 0.15);
  transform: translateY(-8px) scale(1.00);
}

/* Project card content area */
.project-preview-content {
  flex: 2 1 0;
  min-width: 0;
  position: relative;
  z-index: 1;
}

/* Project card headings */
.project-preview h3 {
  font-size: 1.3em;
}

/* Project title links */
.project-preview h3 a {
  color: var(--accent);
  text-decoration: none;
  transition: all 0.2s ease;
  padding: 0.3em 0.1em 0.3em 0.1em;
  border-radius: 4px;
  margin: -0.2em -0.4em;
  display: inline-block;
}

.project-preview h3 a:hover,
.project-preview h3 a:focus {
  color: var(--text-main);
  background: var(--accent);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 188, 212, 0.3);
}

/* Project card image container */
.project-preview figure {
  flex: 1 1 180px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin: 0;
  max-width: 300px;
  width: 100%;
  border-radius: var(--border-radius);
  overflow: hidden;
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.2);
  background: var(--figure-bg);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border: 1px solid var(--glass-border);
  z-index: 1;
  font-size: 14px;
  text-align: center;
}

/* Project card images */
.project-preview img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  border-radius: var(--border-radius);
  object-fit: contain;
  background: var(--figure-bg);
}

/*
  ========================================
  PROJECT CARD LINKS AND TECHNOLOGY TAGS
  ========================================
  
  Links within project cards for repositories and documentation,
  plus styling for technology tags that show what tools were used.
*/
.project-preview-content a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  transition: all 0.2s ease;
  padding: 0.2em 0.4em;
  border-radius: 4px;
  border: 1px solid transparent;
}

.project-preview-content a:hover,
.project-preview-content a:focus {
  color: var(--text-main);
  background: var(--accent);
  border-color: var(--accent);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 188, 212, 0.3);
}

/* Technologies section styling */
.technologies-section {
  margin: 1.5em 0;
  padding: 1em;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius);
  box-shadow: var(--glass-shadow);
}

.technologies-section h4 {
  margin: 0 0 0.75em 0;
  font-size: 1em;
  font-weight: 600;
  color: var(--text-main);
}

/* Technology tags container */
.tech-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

/* Individual technology tags */
.tech-tag {
  display: inline-block;
  padding: 0.3em 0.6em;
  background: var(--accent);
  color: var(--background);
  font-size: 0.85em;
  font-weight: 600;
  border-radius: 16px;
  border: 1px solid var(--accent);
}

/* Contact links styling */
.contact-links {
  margin-top: 1.5em;
}

.contact-item {
  margin: 0.8em 0;
  display: flex;
  align-items: center;
  gap: 0.5em;
  flex-wrap: wrap;
}

.contact-item strong {
  color: var(--text-main);
  min-width: 5em;
  font-size: 0.95em;
}

.contact-username {
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-weight: 500;
  padding: 0.2em 0.4em;
  background: var(--glass-bg);
  border-radius: 4px;
  border: 1px solid var(--glass-border);
}

/* Regular paragraph and list text */
p,
li {
  font-size: 1em;
  color: var(--text-main);
  line-height: 1.7;
}

/* Text utility classes */
.italic {
  font-style: italic;
  padding-top: 0.5em;
}

.bold {
  font-weight: bold;
}

.underline {
  text-decoration: underline;
}

/* Small caption text */
.small-caption {
  font-size: 0.85em;
  opacity: 0.8;
}

/*
  ========================================
  HOME PAGE SPECIFIC STYLES
  ========================================
*/

/* Enhanced typography for home page main content */
.main-content section p {
  font-size: 1.1em;
  line-height: 1.8;
  margin-bottom: 1.5em;
}

/* Make the About Me heading more prominent */
.main-content section h2 {
  font-size: 1.8em;
  margin-bottom: 1.2em;
  color: var(--accent);
}

/* Style the Learn More section */
.main-content section h3 {
  font-size: 1.3em;
  margin-top: 0em;
  margin-bottom: 1em;
  color: var(--text-main);
}

/* Add some spacing around the emojis */
.main-content section p:last-of-type {
  margin-bottom: 2em;
}

/*
  ========================================
  INTERESTS PAGE SPECIFIC STYLES
  ========================================
*/

/* Photography gallery placeholder */
.photography-gallery {
  margin: 2em 0;
  padding: 1.5em;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius);
  box-shadow: var(--glass-shadow);
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1em;
  margin-top: 1em;
}

.photo-placeholder {
  aspect-ratio: 4/3;
  background: var(--card-bg);
  border: 2px dashed var(--glass-border);
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  font-style: italic;
  transition: all 0.3s ease;
}

.photo-placeholder:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* Coffee section */
.coffee-section {
  margin: 2em 0;
  padding: 1.5em;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius);
  box-shadow: var(--glass-shadow);
}

.coffee-placeholder {
  padding: 1em;
  background: var(--card-bg);
  border: 2px dashed var(--glass-border);
  border-radius: var(--border-radius);
  text-align: center;
  color: var(--text-secondary);
}

.coffee-placeholder:hover {
  border-color: var(--accent);
}

/*
  ========================================
  BISCUIT PHOTO GALLERY
  ========================================
  
  Pinterest-style masonry grid layout for Biscuit's photo gallery.
  Features responsive design, hover effects, and modal integration.
*/

/* Gallery container */
.biscuit-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  grid-auto-rows: 200px;
  gap: 1rem;
  padding: 2rem 0;
  margin: 2rem 0;
}

/* Individual photo container */
.biscuit-photo {
  position: relative;
  border-radius: var(--border-radius);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  background: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/* Smart aspect ratio-based layout */
.biscuit-photo--portrait { grid-row-end: span 3; }     /* Tall photos get more height */
.biscuit-photo--landscape { grid-row-end: span 2; }    /* Standard landscape photos */
.biscuit-photo--square { grid-row-end: span 2; }       /* Square photos */
.biscuit-photo--panorama { grid-row-end: span 1; }     /* Wide panoramic photos */

/* Fallback Pinterest-style for photos without aspect ratio data */
.biscuit-photo:not([data-aspect-ratio]):nth-child(4n+1) { grid-row-end: span 2; }
.biscuit-photo:not([data-aspect-ratio]):nth-child(6n+2) { grid-row-end: span 3; }
.biscuit-photo:not([data-aspect-ratio]):nth-child(8n+3) { grid-row-end: span 2; }
.biscuit-photo:not([data-aspect-ratio]):nth-child(10n+4) { grid-row-end: span 3; }

/* Photo image */
.biscuit-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

/* Photo overlay with info */
.biscuit-photo-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  color: white;
  padding: 1rem;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

.biscuit-photo-info h3 {
  margin: 0 0 0.25rem 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
}

.biscuit-photo-date {
  font-size: 0.875rem;
  opacity: 0.9;
  margin: 0;
}

/* Hover effects */
.biscuit-photo:hover,
.biscuit-photo:focus {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
  border-color: var(--accent);
}

.biscuit-photo:hover .biscuit-photo-img {
  transform: scale(1.05);
}

.biscuit-photo:hover .biscuit-photo-overlay,
.biscuit-photo:focus .biscuit-photo-overlay {
  transform: translateY(0);
}

/* Gallery introduction and stats */
.page-intro {
  text-align: center;
  margin-bottom: 2rem;
}

.gallery-note {
  font-style: italic;
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-top: 1rem;
}

.gallery-footer {
  text-align: center;
  margin-top: 3rem;
  padding: 2rem;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius);
  box-shadow: var(--glass-shadow);
}

.gallery-stats {
  margin: 0 0 1rem 0;
  color: var(--text-secondary);
}

.gallery-love {
  margin: 0;
  font-style: italic;
  color: var(--accent);
}

/* Empty state when no photos are available */
.gallery-empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 3rem 2rem;
}

.empty-state-content {
  text-align: center;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius);
  box-shadow: var(--glass-shadow);
  padding: 2rem;
  max-width: 500px;
}

.empty-state-content h3 {
  margin: 0 0 1rem 0;
  color: var(--accent);
  font-size: 1.5rem;
}

.empty-state-content p {
  margin: 0 0 1rem 0;
  color: var(--text-main);
}

.empty-state-note {
  font-size: 0.9rem;
  color: var(--text-secondary);
  font-style: italic;
}

/* Enhanced modal for Biscuit photos */
.biscuit-enhanced.image-modal .image-modal-content {
  max-width: 95vw;
  max-height: 95vh;
  display: flex;
  flex-direction: row;
  overflow: hidden;
}

.biscuit-modal-image-container {
  flex: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--background-dark);
  min-height: 300px;
}

.biscuit-modal-image {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: var(--border-radius);
}

.biscuit-modal-info {
  flex: 1;
  padding: 2rem;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  display: flex;
  flex-direction: column;
  min-width: 300px;
  max-width: 400px;
}

.biscuit-modal-caption {
  margin: 0 0 1rem 0;
  color: var(--accent);
  font-size: 1.5rem;
  line-height: 1.3;
}

.biscuit-modal-date {
  display: block;
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  font-style: italic;
}

.biscuit-modal-story {
  color: var(--text-main);
  line-height: 1.6;
  font-size: 1rem;
}

/* Mobile responsive adjustments */
@media (max-width: 900px) {
  .biscuit-gallery {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 0.75rem;
    padding: 1rem 0;
  }
  
  .biscuit-photo:nth-child(n) {
    grid-row-end: span 2;
  }
  
  .biscuit-enhanced.image-modal .image-modal-content {
    flex-direction: column;
    max-height: 90vh;
  }
  
  .biscuit-modal-image-container {
    flex: none;
    max-height: 50vh;
  }
  
  .biscuit-modal-info {
    flex: none;
    min-width: auto;
    max-width: none;
    padding: 1.5rem;
  }
}

@media (max-width: 600px) {
  .biscuit-gallery {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  
  .biscuit-photo-overlay {
    padding: 0.75rem;
  }
  
  .biscuit-modal-info {
    padding: 1rem;
  }
  
  .biscuit-modal-caption {
    font-size: 1.25rem;
  }
}

/* Accessibility improvements */
.biscuit-photo:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Prefers-reduced-motion support */
@media (prefers-reduced-motion: reduce) {
  .biscuit-photo {
    transition: none;
  }
  
  .biscuit-photo:hover {
    transform: none;
  }
  
  .biscuit-photo-img {
    transition: none;
  }
  
  .biscuit-photo:hover .biscuit-photo-img {
    transform: none;
  }
}

/*
  ========================================
  FOOTER STYLING
  ========================================
  
  The footer appears at the bottom of each page
  and contains contact information with glass morphism effects.
*/
footer {
  background: var(--sidebar-bg);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border-top: 1px solid var(--glass-border);
  color: var(--text-main);
  text-align: center;
  padding: 2em 0 2em 0;
  font-size: 1.15em;
  margin-top: auto;
  margin-bottom: 20px;
  letter-spacing: 0.03em;
  box-shadow: 0 -4px 20px 0 rgba(0, 188, 212, 0.08);
  transition: background 0.3s;
  animation: slideInUp 0.8s ease-out 1.4s both;
  position: relative;
  overflow: hidden;
  border-radius: var(--border-radius);
}

/* Liquid effect for footer */
footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 188, 212, 0.05), transparent);
  animation: liquidFlow 6s ease-in-out infinite;
}

/* Footer paragraph styling */
footer p {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.5em;
  position: relative;
  z-index: 1;
}

/* Bold text in footer */
footer .bold {
  font-weight: 700;
  color: var(--accent);
  margin-right: 0.5em;
  letter-spacing: 0.05em;
}

/* Footer links */
footer a {
  color: var(--accent);
  text-decoration: none;
  margin: 0 0.3em;
  font-weight: 500;
  transition: color 0.2s, text-decoration 0.2s, transform 0.2s ease;
  padding: 0.1em 0.3em;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

/* Underline effect for footer links */
footer a::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.3s ease;
}

/* Expand underline on hover */
footer a:hover::before {
  width: 100%;
}

/* Footer link hover effects */
footer a:hover,
footer a:focus {
  color: #fff;
  background: var(--accent);
  text-decoration: underline;
  transform: translateY(-2px);
}

/*
  ========================================
  IMAGE EXPANSION MODAL
  ========================================
  
  Modal system for expanding images when clicked.
  Features glass morphism effects consistent with site design.
*/

/* Modal overlay - hidden by default */
.image-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  cursor: pointer;
}

/* Show modal when active */
.image-modal.active {
  opacity: 1;
  visibility: visible;
}

/* Modal content container */
.image-modal-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border: 1px solid var(--glass-border);
  border-radius: var(--border-radius);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  cursor: default;
}

/* Expanded image styling */
.image-modal img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 85vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: var(--border-radius);
}

/* Close button */
.image-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 40px;
  height: 40px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  color: var(--text-main);
  font-size: 1.5rem;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 1001;
  box-shadow: var(--glass-shadow);
}

/* Close button hover effect */
.image-modal-close:hover,
.image-modal-close:focus {
  background: var(--accent);
  color: var(--background);
  transform: scale(1.1);
  outline: none;
}

/* Image caption in modal */
.image-modal-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-backdrop);
  -webkit-backdrop-filter: var(--glass-backdrop);
  border-top: 1px solid var(--glass-border);
  color: var(--text-main);
  padding: 1rem;
  font-size: 0.9rem;
  line-height: 1.4;
  text-align: center;
}

/* Make images clickable - add visual cue */
img[data-expandable] {
  cursor: zoom-in;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover effect for expandable images */
img[data-expandable]:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 16px rgba(0, 188, 212, 0.2);
}

/* Loading state for images */
.image-modal img[data-loading] {
  opacity: 0.5;
}

/* Animation for modal entrance */
@keyframes modalZoomIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Apply animation to modal content */
.image-modal.active .image-modal-content {
  animation: modalZoomIn 0.3s var(--animation-timing);
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .image-modal {
    transition: opacity 0.01ms, visibility 0.01ms;
  }
  
  .image-modal.active .image-modal-content {
    animation: none;
  }
  
  img[data-expandable]:hover {
    transform: none;
  }
}

/*
  ========================================
  MOBILE RESPONSIVENESS
  ========================================
  
  These styles ensure the site works well on mobile devices
  and smaller screens, with optimized touch interactions.
*/
@media (max-width: 600px) {
  /* Stack footer content vertically on mobile */
  footer p {
    flex-direction: column;
    gap: 0.7em;
  }
  
  /* Reduce animation intensity on mobile */
  .project-preview:hover {
    transform: translateY(-4px) scale(1.01);
  }
  
  /* Reduce sidebar hover effect on mobile */
  .sidebar-nav a:hover {
    transform: translateX(5px);
  }
  
  /* Mobile responsiveness for image modal */
  .image-modal-content {
    max-width: 95vw;
    max-height: 95vh;
    margin: 1rem;
  }
  
  .image-modal img {
    max-width: 90vw;
    max-height: 90vh;
  }
  
  .image-modal-close {
    top: 0.5rem;
    right: 0.5rem;
    width: 35px;
    height: 35px;
    font-size: 1.3rem;
  }
  
  .image-modal-caption {
    font-size: 0.8rem;
    padding: 0.75rem;
  }
  
}

/* Disable some hover effects on touch devices */
@media (hover: none) {
  .project-preview:hover {
    transform: none;
  }
  
  .sidebar-nav a:hover {
    transform: none;
  }
}
  
  /*
    ========================================
    ENHANCED RESPONSIVE LAYOUT (≤ 900px)
    ========================================
    
    Converts the fixed sidebar into a horizontal top-bar and stacks
    project preview cards for better readability on small and medium
    screens.
  */
  @media (max-width: 900px) {
    /* Sidebar becomes top navigation */
    .sidebar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: auto;
      flex-direction: row;
      align-items: center;
      padding: 0.5em 0.75em;
      overflow-x: auto;
      z-index: 999;
    }
    /* Remove shadow so it feels like a top bar */
    .sidebar {
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    }
    /* Adjust header/title spacing */
    .sidebar-header {
      padding: 0 0.75em;
    }
    /* Move theme toggle inline and remove divider */
    .theme-toggle-container {
      margin: 0 0.5em 0 0.5em;
      border-bottom: none;
      padding: 0;
    }
    /* Horizontal navigation list */
    .sidebar-nav {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      flex: 1 1 auto;
      padding: 0;
      margin: 0;
    }
    .sidebar-nav li {
      margin: 0 0.25em;
      opacity: 1; /* Show instantly */
      animation: none;
    }
    .sidebar-nav a {
      margin: 0;
      padding: 0.6em 0.9em;
      white-space: nowrap;
    }
    /* Hide sidebar footer to save space */
    .sidebar-footer {
      display: none;
    }
    /* Main content now fills full width and is pushed below top bar */
    .main-content {
      margin-left: 0;
      width: 100vw;
      max-width: 100vw;
      padding-top: 80px; /* Height of the top navigation */
    }
    
    /* Override the inner container centering for mobile */
    .main-content > * {
      margin-left: 0;
      margin-right: 0;
      padding-left: 1rem;
      padding-right: 1rem;
    }
    /* Stack project preview card content */
    .project-preview {
      flex-direction: column;
      align-items: stretch;
    }
    .project-preview figure {
      max-width: 100%;
      width: 100%;
    }
    .project-preview-content {
      width: 100%;
    }
    
    /* Stack hero section vertically on mobile */
    .hero-section {
      flex-direction: column;
      gap: 2em;
    }
    
    .hero-image-carousel {
      max-width: 100%;
      align-self: center;
    }
  }

/*
  ========================================
  SCROLL-TRIGGERED ANIMATIONS
  ========================================
  
  These classes provide smooth entrance animations
  for elements as they come into view during scrolling.
*/
.fade-in-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

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