@charset "UTF-8";

/*!
 * My Portfolio v1.0.0
 * Homepage: http://scripteden.com
 * Copyright 2015 Script Eden
 * Licensed under MIT
*/

/* Inter Variable Font with Full OpenType Features */
@font-face {
  font-family: "Inter";
  src: url("../fonts/InterVariable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/InterVariable-Italic.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  /* Typography Scale - Major Third (1.250) */
  --font-size-base: 1.25rem;
  --font-size-lg: 1.563rem; /* base * 1.250 */
  --font-size-xl: 1.953rem; /* base * 1.250² */
  --font-size-2xl: 2.441rem; /* base * 1.250³ */

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* Letter Spacing */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;

  /* Modular Spacing Scale - Major Third (1.250) */
  --space-3xs: 0.25rem; /* 4px */
  --space-2xs: 0.5rem; /* 8px */
  --space-xs: 0.75rem; /* 12px */
  --space-s: 1rem; /* 16px */
  --space-m: 1.25rem; /* 20px - matches base font size */
  --space-l: 1.563rem; /* 25px - space-m * 1.250 */
  --space-xl: 1.953rem; /* 31px - space-m * 1.250² */
  --space-2xl: 2.441rem; /* 39px - space-m * 1.250³ */
  --space-3xl: 3.052rem; /* 49px - space-m * 1.250⁴ */

  /* Layered Paper Shadow System */
  --shadow-color-base: 0, 0, 0;
  --shadow-color-warm: 120, 110, 95;

  /* Progressive paper stack elevations - subtle and refined */
  --paper-layer-1: 0 1px 2px rgba(var(--shadow-color-base), 0.12),
    0 1px 1px rgba(var(--shadow-color-base), 0.1),
    0 1px 3px rgba(var(--shadow-color-base), 0.08);
  --paper-layer-2: 0 2px 3px rgba(var(--shadow-color-base), 0.1),
    0 2px 6px rgba(var(--shadow-color-base), 0.08),
    0 1px 8px rgba(var(--shadow-color-base), 0.06);
  --paper-layer-3: 0 3px 4px rgba(var(--shadow-color-base), 0.09),
    0 3px 8px rgba(var(--shadow-color-base), 0.07),
    0 1px 12px rgba(var(--shadow-color-base), 0.05);
  --paper-layer-4: 0 4px 6px rgba(var(--shadow-color-base), 0.08),
    0 4px 12px rgba(var(--shadow-color-base), 0.06),
    0 2px 16px rgba(var(--shadow-color-base), 0.04);
  --paper-layer-5: 0 6px 8px rgba(var(--shadow-color-base), 0.07),
    0 6px 16px rgba(var(--shadow-color-base), 0.05),
    0 3px 20px rgba(var(--shadow-color-base), 0.03);
  --paper-layer-6: 0 8px 12px rgba(var(--shadow-color-base), 0.06),
    0 8px 20px rgba(var(--shadow-color-base), 0.04),
    0 4px 24px rgba(var(--shadow-color-base), 0.02);
}

body {
  color: rgb(0 0 0 / 87%);
  font-family: "Inter", sans-serif;
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-base);
  line-height: 1.6;
  background-color: #faf9f5;
  /* Full Inter font features including disambiguation and optical sizing */
  font-feature-settings:
    "kern" 1,
    /* Kerning for better character spacing */ "liga" 1,
    /* Standard ligatures for professional text */ "calt" 1,
    /* Contextual alternates for refined appearance */ "ss02" 0,
    /* Disambiguation stylistic set with zero */ "cv05" 1,
    /* Lowercase l with tail for l/I/1 clarity */ "cv08" 0,
    /* Uppercase I with serifs for distinction */ "cv01" 0; /* Alternate one for better distinction */
  font-variant-numeric: proportional-nums;
  font-variation-settings: "opsz" auto;
  /* Smart quotes for professional typography */
  quotes: '"' '"' "" " " "";
}

p {
  /* this results in a text line length of around 66 characters */
  max-width: 35em;
  margin: 0 auto var(--space-m);
  text-align: left;
  text-justify: inter-word;
  orphans: 3;
  widows: 3;
  text-wrap: pretty; /* Better line breaking when supported */
}

ul {
  /* this results in a text line length of around 66 characters */
  max-width: 35em;
  margin: 0 auto var(--space-m);
  padding-left: var(--space-m);
}

img {
  width: 11em;
  height: auto;
  display: block;
  margin: var(--space-l) auto;
}

/* Smart quotes implementation */
q {
  quotes: inherit;
}

q::before {
  content: open-quote;
}

q::after {
  content: close-quote;
}

blockquote {
  quotes: inherit;
  font-style: italic;
  margin: var(--space-l) 0;
  padding-left: var(--space-m);
  border-left: var(--space-3xs) solid rgba(44, 90, 160, 0.3);
}

blockquote::before {
  content: open-quote;
  font-size: 1.2em;
  color: rgba(44, 90, 160, 0.7);
}

blockquote::after {
  content: close-quote;
  font-size: 1.2em;
  color: rgba(44, 90, 160, 0.7);
}

/* Base link styling - maintains visual hierarchy while ensuring accessibility */
a {
  color: #2c5aa0; /* Darker blue for better contrast */
  text-decoration: underline;
  text-decoration-color: rgba(44, 90, 160, 0.4); /* Subtle underline */
  text-decoration-skip-ink: auto; /* Skip descenders for cleaner underlines */
  text-underline-offset: 0.2em;
  transition: all 0.2s ease;
}

a:hover {
  color: #1e3d6f; /* Even darker on hover for clear state change */
  text-decoration-color: #1e3d6f; /* Full opacity underline on hover */
  text-decoration-thickness: 0.125em;
}

/* External link indicators */
a[href^="http"]:not([href*="localhost"]):not([href*="127.0.0.1"])::after {
  content: "↗";
  font-size: 0.8em;
  margin-left: 0.2em;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

a[href^="http"]:not([href*="localhost"]):not([href*="127.0.0.1"]):hover::after {
  opacity: 1;
}

a:focus {
  outline: 2px solid #2c5aa0;
  outline-offset: 2px;
  background-color: rgba(44, 90, 160, 0.1);
  border-radius: 2px;
}

/* Navigation links - transparent state (light text over dark background) */
.navbar-light .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.9); /* Light text for transparent navbar */
  font-size: 0.75em;
  text-transform: uppercase;
  letter-spacing: 0.125em;
  padding: 0;
  margin: 0 0.5em;
  text-decoration: none; /* Remove underline for nav */
  position: relative;
  transition: color 0.3s ease;
}

/* Navigation links - glassmorphism state (enhanced white text with shadow) */
.navbar.glassmorphism .navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.95) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  font-weight: 500;
}

.navbar.glassmorphism .navbar-nav .nav-link:hover,
.navbar.glassmorphism .navbar-nav .nav-link.active {
  color: rgba(255, 255, 255, 1) !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Navigation links - scrolled state (dark text over light background) */
.navbar.scrolled .navbar-nav .nav-link {
  color: #222 !important;
}

.navbar-light .navbar-nav .nav-link::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background-color: rgba(
    255,
    255,
    255,
    0.8
  ); /* Light underline for transparent state */
  transition:
    width 0.3s ease,
    background-color 0.3s ease;
}

/* Enhanced underline effect for glassmorphism state */
.navbar.glassmorphism .navbar-nav .nav-link::after {
  background-color: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

/* Underline color for scrolled state */
.navbar.scrolled .navbar-nav .nav-link::after {
  background-color: #2c5aa0 !important;
}

.navbar-light .navbar-nav .nav-link:hover::after,
.navbar-light .navbar-nav .nav-link:focus::after {
  width: 100%;
}

/* Transparent state active/hover - brighter white */
.navbar-light .nav-item .nav-link.active,
.navbar-light .nav-item:hover .nav-link {
  color: rgba(255, 255, 255, 1);
}

/* Scrolled state active/hover - brand blue */
.navbar.scrolled .nav-item .nav-link.active,
.navbar.scrolled .nav-item:hover .nav-link {
  color: #2c5aa0 !important;
}

.navbar-light .navbar-nav .nav-link.active::after {
  width: 100%;
}

/* Active link underline for scrolled state */
.navbar.scrolled .navbar-nav .nav-link.active::after {
  background-color: #2c5aa0 !important;
  width: 100%;
}

/* Focus states for transparent navbar */
.navbar-light .navbar-nav .nav-link:focus {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Focus states for glassmorphism navbar */
.navbar.glassmorphism .navbar-nav .nav-link:focus {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 2px;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  color: rgba(255, 255, 255, 1) !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

/* Focus states for scrolled navbar */
.navbar.scrolled .navbar-nav .nav-link:focus {
  outline: 2px solid #2c5aa0;
  outline-offset: 2px;
  background-color: rgba(44, 90, 160, 0.1);
  border-radius: 2px;
  color: #2c5aa0 !important;
}

/* ---------------------------------------------- /*
 * Typography
/* ---------------------------------------------- */

.name {
  color: #fff;
  font-size: 1em;
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-normal);
  margin: 1em 0;
}

.hero-name {
  color: rgb(255 255 255 / 85%);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-base);
  text-align: center;
  text-transform: none;
  letter-spacing: var(--letter-spacing-normal);
  margin: 0 0 var(--space-l) 0;
  text-rendering: optimizeLegibility;
}

.hero-focus {
  color: rgb(255 255 255 / 100%);
  font-weight: 800;
  font-size: 2.067em;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.125em;
  margin-top: 0.125em;
  text-rendering: optimizeLegibility;
  text-wrap: balance;
}

h1 {
  color: rgb(255 255 255 / 100%);
  font-weight: 800;
  font-size: 2.067em;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.125em;
  margin-top: 0.125em;
  text-rendering: optimizeLegibility;
  text-wrap: balance;
}

h2 {
  color: rgb(255 255 255 / 99%);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xl);
  text-align: center;
  letter-spacing: var(--letter-spacing-tight);
  margin-top: 1.5em;
  margin-bottom: 2.5em;
  position: relative;
  display: inline-block;
  padding: 0.5em 1.5em;
  z-index: 1;
  transition:
    color 0.3s ease,
    letter-spacing 0.3s ease;
  text-rendering: optimizeLegibility;
  text-wrap: balance;
}

h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(
      ellipse 30% 30% at 35% 50%,
      rgba(0, 0, 0, 0.8) 0%,
      rgba(0, 0, 0, 0.4) 70%,
      rgba(0, 0, 0, 0.2) 85%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 30% 30% at 58% 50%,
      rgba(0, 0, 0, 0.8) 0%,
      rgba(0, 0, 0, 0.4) 70%,
      rgba(0, 0, 0, 0.2) 85%,
      transparent 100%
    ),
    url("../img/brush-stroke.svg") no-repeat center;
  background-size: 100% 100%;
  z-index: -1;
  transform: rotate(-0.3deg);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) brightness(0.4) contrast(2)
    invert(1);
  mix-blend-mode: multiply;
}

h3 {
  color: #000;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-lg);
  text-align: center;
  letter-spacing: var(--letter-spacing-tight);
  margin-top: 1em;
  position: relative;
  display: inline-block;
  padding: 0.4em 1.2em;
  z-index: 1;
  transition:
    color 0.3s ease,
    letter-spacing 0.3s ease;
  text-rendering: optimizeLegibility;
  text-wrap: balance;
}

h3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(
      ellipse 12% 20% at 40% 50%,
      #000 0%,
      #000 75%,
      rgba(0, 0, 0, 0.7) 90%,
      transparent 100%
    ),
    radial-gradient(
      ellipse 12% 20% at 60% 50%,
      #000 0%,
      #000 75%,
      rgba(0, 0, 0, 0.7) 90%,
      transparent 100%
    ),
    url("../img/brush-stroke.svg") no-repeat center;
  background-size: 100% 100%;
  z-index: -1;
  transform: rotate(-0.2deg);
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3)) brightness(0.4) contrast(2)
    invert(1);
  mix-blend-mode: multiply;
}

/* Brush heading centering */
section h2,
section h3 {
  width: 100%;
  text-align: center;
}

section {
  text-align: left;
}

section h2::before {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Responsive brush effects for mobile */
@media (max-width: 768px) {
  h2 {
    font-size: 1.4em;
    padding: 0.4em 1.2em;
  }

  h3 {
    font-size: 1.1em;
    padding: 0.3em 1em;
  }

  h2::before {
    background:
      radial-gradient(
        ellipse 30% 30% at 35% 50%,
        #000 0%,
        #000 70%,
        rgba(0, 0, 0, 0.1) 85%,
        transparent 100%
      ),
      radial-gradient(
        ellipse 30% 30% at 58% 50%,
        #000 0%,
        #000 70%,
        rgba(0, 0, 0, 0.1) 85%,
        transparent 100%
      ),
      url("../img/brush-stroke.svg") no-repeat center;

    background-size: 100% 100%;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)) brightness(0.4)
      contrast(2) invert(1);
    mix-blend-mode: multiply;
  }
}

@media (max-width: 480px) {
  h2 {
    font-size: 1.2em;
    padding: 0.35em 1em;
  }

  h3 {
    font-size: 1em;
    padding: 0.25em 0.8em;
  }
}

/* Accessibility: High contrast mode support */
@media (prefers-contrast: high) {
  h2::before {
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
  }

  h2 {
    color: #fff;
  }
}

/* ---------------------------------------------- /*
 * Modern Parallax System
/* ---------------------------------------------- */

/* Base parallax element optimization */
.parallax-element {
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* Performance optimizations for smooth parallax */
.parallax-container {
  overflow: hidden;
  position: relative;
  transform: translateZ(0); /* Force GPU acceleration */
}

/* Disable parallax on mobile and reduced motion */
@media (max-width: 768px), (prefers-reduced-motion: reduce) {
  .parallax-element {
    transform: none !important;
    will-change: auto !important;
  }
}

/* Section background parallax styling */
.section-bg-parallax {
  position: absolute;
  top: -20%;
  left: 0;
  right: 0;
  bottom: -20%;
  background-attachment: fixed;
  z-index: -1;
}

/* ---------------------------------------------- /*
 * Section Transition Animations
/* ---------------------------------------------- */

/* Initial hidden state for sections */
.section-animate {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 1.2s linear,
    transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Early fade-in when section first enters viewport */
.section-animate.section-entering {
  opacity: 0.3;
  transform: translateY(25px);
}

/* Full visibility when section is well into viewport */
.section-animate.section-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered animation delays for layered effect */
.section-animate:nth-of-type(1) {
  transition-delay: 0ms;
}
.section-animate:nth-of-type(2) {
  transition-delay: 100ms;
}
.section-animate:nth-of-type(3) {
  transition-delay: 200ms;
}
.section-animate:nth-of-type(4) {
  transition-delay: 300ms;
}
.section-animate:nth-of-type(5) {
  transition-delay: 400ms;
}
.section-animate:nth-of-type(6) {
  transition-delay: 500ms;
}

/* Enhanced transitions for content within sections */
.section-animate .container {
  transition:
    transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s,
    opacity 0.6s linear 0.2s;
}

.section-animate.section-visible .container {
  transform: translateY(0);
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .section-animate,
  .section-animate .container {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Reduced complexity on mobile for better performance */
@media (max-width: 768px) {
  .section-animate {
    transform: translateY(20px);
    transition:
      opacity 0.8s linear,
      transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  .section-animate.section-entering {
    opacity: 0.4;
    transform: translateY(12px);
  }

  .section-animate.section-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .section-animate:nth-of-type(n) {
    transition-delay: 0ms; /* Remove stagger on mobile */
  }
}

/* ---------------------------------------------- /*
 * General Styles
/* ---------------------------------------------- */

/* ---------------------------------------------- /*
 * 3D Floating Content System
/* ---------------------------------------------- */

/* Content sections appear to float above video background */
section {
  padding: var(--space-3xl) 0;
  position: relative;
}

/* Layer 1: About section - highest layer, slides over hero video */
section#about {
  position: relative;
  z-index: 16;
  margin-top: 0; /* No negative margin for clean separation */
  padding-top: var(--space-3xl);

  /* Solid background for clean appearance */
  background: rgba(250, 249, 245, 1);

  /* Strongest shadow - top of the stack */
  box-shadow: var(--paper-layer-6);

  /* No rounded corners at top for clean edge against hero */
  border-radius: 0;
  border: 1px solid rgba(255, 255, 255, 0.3);

  /* Performance optimization */
  transform: translateZ(5px);
  will-change: transform;
}

/* Layer 2: IT section - slides under about section */
section#it {
  background: rgba(250, 249, 245, 0.98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* Lighter shadow - lower in the stack */
  box-shadow: var(--paper-layer-5);

  /* Soft layering effect */
  transform: translateZ(4px);
  position: relative;
  z-index: 15;
}

/* Layer 3: Governance section - slides under IT section */
section#governance {
  background: rgba(250, 249, 245, 0.98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateZ(3px);
  position: relative;
  z-index: 14;

  /* Medium shadow */
  box-shadow: var(--paper-layer-4);
}

/* Layer 4: Projects section - slides under governance section */
section#projects {
  background: rgba(250, 249, 245, 0.98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateZ(2px);
  position: relative;
  z-index: 13;

  /* Light shadow */
  box-shadow: var(--paper-layer-3);
}

/* Layer 5: Media section - slides under projects section */
section#media {
  background: rgba(250, 249, 245, 0.98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transform: translateZ(1px);
  position: relative;
  z-index: 12;

  /* Lighter shadow */
  box-shadow: var(--paper-layer-2);
}

/* Layer 6: Sleeping rat section - revealed bottom layer (no shadow) */
section#sleeping-rat {
  background: rgba(250, 249, 245, 0.95);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-radius: 0 0 24px 24px;

  /* No shadow - this is the revealed bottom layer */
  box-shadow: none;

  transform: translateZ(0px);
  position: relative;
  z-index: 11;
}

/* Hero section maintains its own background */
section#home {
  padding: 0;
  z-index: 1; /* Behind floating content */
}

/* ---------------------------------------------- /*
 * 3D Effect Responsive Optimizations
/* ---------------------------------------------- */

/* Tablet optimization - reduce complexity */
@media (max-width: 1024px) {
  section#about {
    /* Simplified shadow for tablets */
    box-shadow:
      0 -8px 25px rgba(0, 0, 0, 0.12),
      0 0 0 1px rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
  }

  section#it,
  section#governance,
  section#projects,
  section#media {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
}

/* Mobile optimization - clean positioning with visual styling */
@media (max-width: 768px) {
  section#about {
    margin-top: 0;
    padding-top: var(--space-3xl);
    border-radius: 0;

    /* Clean solid background for mobile */
    background: rgba(250, 249, 245, 1);

    /* Mobile top layer - strongest shadow */
    box-shadow: var(--paper-layer-6);
    border: 1px solid rgba(255, 255, 255, 0.4);
  }

  section#it {
    /* Mobile second layer from top */
    box-shadow: var(--paper-layer-5);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transform: none; /* Remove 3D transforms on mobile */
  }

  section#governance {
    /* Mobile third layer from top */
    box-shadow: var(--paper-layer-4);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transform: none;
  }

  section#projects {
    /* Mobile fourth layer from top */
    box-shadow: var(--paper-layer-3);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transform: none;
  }

  section#media {
    /* Mobile fifth layer from top */
    box-shadow: var(--paper-layer-2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transform: none;
  }

  section#sleeping-rat {
    border-radius: 0 0 16px 16px;
    /* Mobile bottom layer - no shadow (revealed layer) */
    box-shadow: none;
  }
}

/* Accessibility: Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  section#about,
  section#it,
  section#governance,
  section#projects,
  section#media,
  section#sleeping-rat {
    transform: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    /* Use solid backgrounds when motion is reduced */
    background: rgba(255, 255, 255, 1) !important;

    /* Simplified shadows */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  section#about,
  section#it,
  section#governance,
  section#projects,
  section#media,
  section#sleeping-rat {
    background: #ffffff !important;
    border: 2px solid #000000;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  section#about {
    border-top: none; /* Smooth connection to video */
  }
}

/* Performance optimization for older devices */
@media (max-width: 480px) {
  section#about,
  section#it,
  section#governance,
  section#projects,
  section#media,
  section#sleeping-rat {
    /* Disable advanced effects on very small screens */
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transform: none;
    will-change: auto;

    /* Use simple, effective shadows */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    background: rgba(255, 255, 255, 0.98);
  }
}

/* ---------------------------------------------- /*
 * Home
/* ---------------------------------------------- */

#home {
  height: 100vh; /* Standard full viewport height */
  min-height: 25em;
  position: relative;
  overflow: hidden;
  background-color: #222; /* Fallback color */
  perspective: 0.0625em;
}

#hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translateX(-50%) translateY(-50%);
  z-index: -1;
  object-fit: cover;
}

/* Fallback for browsers that don't support video or object-fit */
@supports not (object-fit: cover) {
  #hero-video {
    display: none;
  }

  #home {
    background-image: url("../img/cover.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
  }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  #hero-video {
    display: none;
  }

  #home {
    background-image: url("../img/cover-video-fallback.jpg");
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
  }
}

.home-overlay {
  background: radial-gradient(
    ellipse at center,
    rgba(0, 0, 0, 0.75) 0%,
    rgba(44, 62, 80, 0.5) 40%,
    rgba(0, 0, 0, 0.3) 100%
  );
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 0;
}

.intro {
  position: absolute;
  width: 100%;
  top: 45%; /* TODO fix for mobile, adjust down again for desktop? */
  left: 0;
  text-align: center;
  transform: translate(0%, -50%);
  z-index: 1;
}

/* Glassmorphism container for hero text */
.intro::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 120%;
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 0;
  z-index: -1;
}

/* Fallback for browsers that don't support backdrop-filter */
@supports not (backdrop-filter: blur(20px)) {
  .intro::before {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
}

/* Mobile optimization */
@media (max-width: 768px) {
  .intro {
    top: 40%; /* Fix mobile positioning */
  }

  .intro::before {
    width: 100vw;
    height: 125%;
    border-radius: 0;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
  }
}

/* Enhanced contrast system for accessibility */
@media (prefers-contrast: high) {
  body {
    color: #000;
    background-color: #fff;
  }

  /* Remove subtle variations in high contrast mode */
  section#about,
  section#governance,
  section#media,
  section#it,
  section#projects,
  section#sleeping-rat {
    background-color: #fff;
  }

  .home-overlay {
    background: rgba(0, 0, 0, 0.9);
  }

  .intro::before {
    background: rgba(0, 0, 0, 0.8);
    border: 3px solid rgba(255, 255, 255, 0.9);
  }

  /* Enhanced link contrast */
  a {
    color: #0000ee; /* High contrast blue */
    text-decoration-color: #0000ee;
    text-decoration-thickness: 0.125em;
    font-weight: var(--font-weight-medium);
  }

  a:hover {
    color: #000080;
    background-color: #ffff99; /* High contrast background */
    text-decoration-thickness: 0.1875em;
  }

  a:focus {
    outline: 3px solid #0000ee;
    outline-offset: 2px;
    background-color: #ffff99;
  }

  /* Enhanced text contrast */
  h1,
  h2,
  h3 {
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
  }

  /* Button and interactive element contrast */
  .scroll-up a:hover,
  .scroll-up a:active {
    background-color: #000;
    color: #fff;
  }
}

/* More contrast preference support */
@media (prefers-contrast: more) {
  a {
    text-decoration-thickness: 0.1em;
    font-weight: var(--font-weight-medium);
  }

  h2,
  h3 {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }
}

/* Performance optimization for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .intro::before {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }

  /* Remove transitions for users who prefer reduced motion */
  a,
  .navbar-light .navbar-nav .nav-link::after {
    transition: none;
  }
}

/* ---------------------------------------------- /*
 * Footer and social links
/* ---------------------------------------------- */

.links {
  text-align: center;
}

.social-links {
  display: inline-block;
  list-style: none;
  padding: 0;
  margin: 0;
}

.social-links,
.social-links-footer {
  display: inline-block;
  list-style: none;
  padding: 0;
  margin: 0;
}

.social-links li {
  display: inline-block;
  margin: 0.3em;
}

.social-links-footer li {
  display: inline-block;
  margin: 0.3em;
}

.social-links a {
  width: 2.5em;
  height: 2.5em;
  display: block;
  line-height: 2.3em;
  text-align: center;
  border: 0.0625em solid rgba(255, 255, 255, 0);
  border-radius: 0.25em;
  font-size: 0.7em;
}

.social-links-footer a {
  width: 2.5em;
  height: 2.5em;
  display: block;
  line-height: 2.3em;
  text-align: center;
  border: 0.0625em solid rgba(255, 255, 255, 0.2);
  border-radius: 0.25em;
  font-size: 0.7em;
  color: rgba(255, 255, 255, 0.5);
}

/* Social media links - remove underlines but maintain accessibility */
.social-links a,
.social-links-footer a {
  text-decoration: none;
}

.social-links a:hover {
  border: 0.0625em solid rgba(0, 0, 0, 0.5);
  color: rgba(0, 0, 0, 0.8);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.social-links a:focus {
  outline: 2px solid #2c5aa0;
  outline-offset: 2px;
  background-color: rgba(44, 90, 160, 0.1);
}

.social-links-footer a:hover {
  border: 0.0625em solid rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.8);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.social-links-footer a:focus {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
  background-color: rgba(255, 255, 255, 0.1);
}

#footer {
  margin-top: 3em;
  background: #222;
  text-align: center;
  padding: 2em 0;
  color: #fff;
}

#footer p {
  font-size: 0.8em;
  text-align: center;
  margin: 0 auto 0.5em;
}

/* ---------------------------------------------- /*
 * Navigation
/* ---------------------------------------------- */

/* Transparent navbar initial state (over dark hero background) */
.navbar.fixed-top {
  background-color: transparent !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: background-color, backdrop-filter;
}

/* Glassmorphism navbar state (hero section scrolling) */
.navbar.fixed-top.glassmorphism {
  background: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(15px) brightness(110%) saturate(120%);
  -webkit-backdrop-filter: blur(15px) brightness(110%) saturate(120%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(15px)) {
  .navbar.fixed-top.glassmorphism {
    background: rgba(255, 255, 255, 0.25) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }
}

/* Scrolled navbar state (over light content sections) */
.navbar.fixed-top.scrolled {
  background-color: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* Mobile hamburger button styling */
.navbar-light .navbar-toggler {
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: border-color 0.3s ease;
}

.navbar.glassmorphism .navbar-toggler {
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.navbar.scrolled .navbar-light .navbar-toggler {
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.navbar-light .navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

.navbar.glassmorphism .navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.4);
}

.navbar.scrolled .navbar-light .navbar-toggler:focus {
  box-shadow: 0 0 0 0.2rem rgba(44, 90, 160, 0.25);
}

/* Accessibility: Disable glassmorphism for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .navbar.fixed-top.glassmorphism {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255, 255, 255, 0.4) !important;
    transition: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .navbar.fixed-top.glassmorphism {
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 2px solid #000;
  }

  .navbar.glassmorphism .navbar-nav .nav-link {
    color: #000 !important;
    text-shadow: none !important;
    font-weight: 600;
  }
}

/* Custom hamburger icon for light theme on dark background */
.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar.scrolled .navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (max-width: 992px) {
  .navbar .navbar-nav {
    display: inline-block;
    float: none;
    vertical-align: top;
  }

  .navbar .navbar-collapse {
    text-align: center;
  }

  /* Mobile menu background for transparent state */
  .navbar-collapse {
    background-color: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin-top: 0.5rem;
    border-radius: 8px;
    padding: 1rem;
    transition: background-color 0.3s ease;
  }

  /* Mobile menu background for scrolled state */
  .navbar.scrolled .navbar-collapse {
    background-color: rgba(255, 255, 255, 0.95);
  }

  /* Ensure mobile menu text colors are correct */
  .navbar-collapse .navbar-nav .nav-link {
    color: rgba(255, 255, 255, 0.9) !important;
  }

  .navbar.scrolled .navbar-collapse .navbar-nav .nav-link {
    color: #222 !important;
  }

  .navbar.scrolled .navbar-collapse .navbar-nav .nav-link:hover,
  .navbar.scrolled .navbar-collapse .navbar-nav .nav-link.active {
    color: #2c5aa0 !important;
  }
}

/* ---------------------------------------------- /*
 * Scroll to top
/* ---------------------------------------------- */

.scroll-up {
  position: fixed;
  display: none;
  z-index: 999;
  bottom: 2em;
  right: 2em;
}

.scroll-up a {
  background-color: rgba(135, 135, 135, 0.5);
  display: block;
  width: 2.5em;
  height: 2.5em;
  text-align: center;
  color: #fff;
  font-size: 0.7em;
  line-height: 2.3em;
  border-radius: 0.25em;
}

/* Scroll-up button - remove underline but maintain accessibility */
.scroll-up a {
  text-decoration: none;
}

.scroll-up a:hover,
.scroll-up a:active {
  background-color: rgba(235, 235, 235, 0.8);
  color: #2c5aa0;
}

.scroll-up a:focus {
  outline: 2px solid #2c5aa0;
  outline-offset: 2px;
}

/* ---------------------------------------------- /*
 *Scroll Down
/* ---------------------------------------------- */

.scroll-down {
  position: absolute;
  left: 50%;
  bottom: 2.5em;
  border: 0.125em solid #fff;
  border-radius: 50%;
  height: 2.5em;
  width: 2.5em;
  margin-left: -1em;
  display: block;
  z-index: 10;
  text-align: center;
  text-decoration: none;
}

.scroll-down:focus {
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
  background-color: rgba(255, 255, 255, 0.1);
}

.scroll-down span {
  position: relative;
  color: #fff;
  animation-name: drop;
  animation-duration: 1.5s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-play-state: running;
}

@keyframes drop {
  0% {
    top: 0em;
    opacity: 0;
  }
  30% {
    top: 0.4em;
    opacity: 1;
  }
  100% {
    top: 1em;
    opacity: 0;
  }
}

/* ---------------------------------------------- /*
 * Preloader
/* ---------------------------------------------- */

#preloader {
  background: #fff;
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 9999;
}

#status {
  background-image: url(../img/preloader.gif);
  background-position: center;
  background-repeat: no-repeat;
  height: 14em;
  left: 50%;
  margin: -7em 0 0 -7em;
  position: absolute;
  top: 50%;
  width: 14em;
}

/* ---------------------------------------------- /*
 * Enhanced Mobile Navigation System
/* ---------------------------------------------- */

/* Mobile Navigation Toggle Button */
.mobile-nav-toggle {
  display: none;
  position: relative;
  z-index: 1001;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hamburger container */
.hamburger {
  width: 24px;
  height: 18px;
  display: block;
  position: relative;
  transform: rotate(0deg);
  transition: 0.5s ease-in-out;
}

/* Hamburger lines */
.hamburger-line {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 1px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: 0.25s ease-in-out;
}

.hamburger-line:nth-child(1) {
  top: 0px;
}

.hamburger-line:nth-child(2) {
  top: 8px;
}

.hamburger-line:nth-child(3) {
  top: 16px;
}

/* Hamburger to X transformation */
.mobile-nav-open .hamburger-line:nth-child(1) {
  top: 8px;
  transform: rotate(135deg);
}

.mobile-nav-open .hamburger-line:nth-child(2) {
  opacity: 0;
  left: -30px;
}

.mobile-nav-open .hamburger-line:nth-child(3) {
  top: 8px;
  transform: rotate(-135deg);
}

/* Hamburger colors for different navbar states */
.navbar.glassmorphism .hamburger-line {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.navbar.scrolled .hamburger-line {
  background: rgba(0, 0, 0, 0.8);
}

/* Mobile Navigation Backdrop */
.mobile-nav-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mobile-nav-backdrop.active {
  opacity: 1;
  visibility: visible;
}

/* Mobile Navigation Drawer */
.mobile-nav-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: 280px;
  max-width: 85vw;
  height: 100%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px) brightness(110%);
  -webkit-backdrop-filter: blur(20px) brightness(110%);
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  z-index: 1000;
  transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);
}

.mobile-nav-drawer.active {
  right: 0;
}

/* Mobile Navigation Header */
.mobile-nav-header {
  padding: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 64px;
}

/* Mobile Navigation Close Button */
.mobile-nav-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
  position: relative;
}

.close-icon {
  width: 20px;
  height: 20px;
  display: block;
  position: relative;
}

.close-line {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 1px;
  top: 50%;
  left: 0;
  transition: 0.25s ease-in-out;
}

.close-line:nth-child(1) {
  transform: translateY(-50%) rotate(45deg);
}

.close-line:nth-child(2) {
  transform: translateY(-50%) rotate(-45deg);
}

.mobile-nav-close:hover {
  background: rgba(0, 0, 0, 0.08);
}

.mobile-nav-close:focus {
  outline: 2px solid #2c5aa0;
  outline-offset: 2px;
  background: rgba(44, 90, 160, 0.1);
}

/* Mobile Navigation Content */
.mobile-nav-content {
  flex: 1;
  padding: 20px 0;
  overflow-y: auto;
}

.mobile-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-nav-item {
  margin: 0;
  opacity: 0;
  transform: translateX(30px);
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Staggered animation for menu items */
.mobile-nav-drawer.active .mobile-nav-item:nth-child(1) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.1s;
}

.mobile-nav-drawer.active .mobile-nav-item:nth-child(2) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.2s;
}

.mobile-nav-drawer.active .mobile-nav-item:nth-child(3) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.3s;
}

.mobile-nav-drawer.active .mobile-nav-item:nth-child(4) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.4s;
}

.mobile-nav-drawer.active .mobile-nav-item:nth-child(5) {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.5s;
}

.mobile-nav-link {
  display: block;
  padding: 16px 24px;
  color: rgba(0, 0, 0, 0.87);
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
  border-radius: 8px;
  margin: 0 16px;
  position: relative;
}

.mobile-nav-link:hover {
  background: rgba(44, 90, 160, 0.08);
  color: #2c5aa0;
  transform: translateX(4px);
}

.mobile-nav-link:focus {
  outline: 2px solid #2c5aa0;
  outline-offset: 2px;
  background: rgba(44, 90, 160, 0.1);
  color: #2c5aa0;
}

.mobile-nav-link:active {
  background: rgba(44, 90, 160, 0.15);
  transform: translateX(2px);
}

/* Show mobile navigation only on small screens */
@media (max-width: 991.98px) {
  .mobile-nav-toggle {
    display: block;
  }

  .desktop-nav {
    display: none !important;
  }
}

/* Hide mobile navigation on large screens */
@media (min-width: 992px) {
  .mobile-nav-toggle,
  .mobile-nav-backdrop,
  .mobile-nav-drawer {
    display: none !important;
  }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  .mobile-nav-toggle,
  .hamburger,
  .hamburger-line,
  .mobile-nav-backdrop,
  .mobile-nav-drawer,
  .mobile-nav-close,
  .close-line,
  .mobile-nav-item,
  .mobile-nav-link {
    transition: none !important;
    animation: none !important;
  }

  .mobile-nav-drawer.active .mobile-nav-item {
    opacity: 1;
    transform: translateX(0);
    transition-delay: 0s !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .mobile-nav-drawer {
    background: #ffffff;
    border-left: 3px solid #000000;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .mobile-nav-header {
    border-bottom: 2px solid #000000;
  }

  .mobile-nav-link {
    color: #000000;
    border: 1px solid transparent;
  }

  .mobile-nav-link:hover,
  .mobile-nav-link:focus {
    background: #000000;
    color: #ffffff;
    border: 1px solid #000000;
  }

  .hamburger-line,
  .close-line {
    background: #000000;
  }

  .navbar.glassmorphism .hamburger-line,
  .navbar.scrolled .hamburger-line {
    background: #000000;
  }
}

/* Performance optimizations */
.mobile-nav-drawer {
  will-change: transform;
}

.mobile-nav-item {
  will-change: opacity, transform;
}

/* Remove will-change after animations complete */
.mobile-nav-drawer:not(.active) {
  will-change: auto;
}

.mobile-nav-drawer:not(.active) .mobile-nav-item {
  will-change: auto;
}