:root {
  --bg: #0D0D0D;
  --body-bg: #1A1A1A;
  --panel: #161616;
  --panel-2: #1D1D1D;
  --mint: #7EEDC8;
  --yellow: #F5C842;
  --pink: #FF6FA5;
  --blue: #5AC8E8;
  --green: #7FE3B4;
  --white: #F4F4F2;
  --muted: #9A9A9A;
  --muted-2: #6E6E6E;
  --border: #FFFFFF;
  --page-bg: #0D0D0D;
  --grid-color: rgba(255, 255, 255, 0.035);
  --display: 'Space Grotesk', sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --sans: 'Inter', sans-serif;

  /* Card Layered Shadow System Variables */
  --card-bg: #1A1A1A;
  --card-border: var(--border);
  --card-shadow-default: #353535;
  --shadow-yellow: #806600; /* Dark Mustard */
  --shadow-mint: #00664D;   /* Dark Teal */
  --shadow-pink: #731A3B;   /* Dark Pink */
  --shadow-blue: #144573;   /* Dark Blue */
  
  /* Navigation Background Variable */
  --nav-bg: rgba(13, 13, 13, 0.98);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--body-bg) url('../assets/images/fabric_pattern.png') repeat;
  background-size: 256px 256px;
  color: var(--white);
  font-family: var(--sans);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  padding: 24px;
}

a {
  color: inherit;
  text-decoration: none;
}

::selection {
  background: var(--mint);
  color: #0D0D0D;
}

.wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 48px;
  position: relative;
  z-index: 1;
}

/* ---------- OUTER FRAME & PROGRESS BAR ---------- */
body {
  padding-top: 12px; /* push page frame down to prevent overlap with fixed top bar */
}

/* Custom Browser Scrollbar (adaptable to light/dark themes) */
::-webkit-scrollbar {
  width: 14px;
}
::-webkit-scrollbar-track {
  background: var(--panel-2);
  border-left: 3px solid var(--border);
}
::-webkit-scrollbar-thumb {
  background: var(--yellow);
  border: 3px solid var(--border);
  border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--mint);
}

.top-strip {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 12px;
  background: var(--panel-2);
  border-bottom: 3px solid var(--border);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.top-strip-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  background: var(--yellow);
  transition: width 0.05s ease-out;
  z-index: 1;
}

.top-strip span.checkpoint {
  position: relative;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--panel);
  border: 2px solid var(--border);
  z-index: 2;
  transition: background-color 0.2s ease, transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform: translateY(0px);
  cursor: pointer;
}

.top-strip span.checkpoint:hover {
  transform: scale(1.4);
  background: var(--yellow) !important;
}

.top-strip span.checkpoint.active {
  background: var(--border);
}

.page-frame {
  max-width: 1400px; /* matched to reference site container size */
  margin: 16px auto 40px; /* reduced top gap to 16px */
  border: 4px solid var(--border);
  border-radius: 0px;
  overflow: hidden;
  background: var(--bg);
  background-image: 
    url('../assets/images/fabric_pattern.png'),
    linear-gradient(rgba(255, 255, 255, 0.035) 1.5px, transparent 1.5px),  
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1.5px, transparent 1.5px);
  background-size: 256px 256px, 26px 26px, 26px 26px;
  background-repeat: repeat, repeat, repeat;
  box-shadow: 16px 16px 0 var(--border);
  position: relative;
}

.page-frame.first-frame {
  border-bottom: none !important;
  margin-bottom: 0;
  box-shadow: 16px 0 0 var(--border) !important;
}

.page-frame.second-frame {
  border-top: none !important;
  margin-top: 0;
}

/* ---------- PAPER TEAR ---------- */
.paper-tear {
  max-width: 1400px; /* matched to reference site container size */
  margin: 0 auto;
  border-left: 4px solid var(--border);
  border-right: 4px solid var(--border);
  position: relative;
  z-index: 10;
  height: 30px;
  background: transparent;
  box-shadow: 16px 0 0 var(--border); /* right-side shadow to align with page shadow */
}

.paper-tear svg {
  display: block;
  width: 100%;
  height: 30px;
}

.paper-tear-top {
  margin-bottom: 0;
  z-index: 50 !important; /* render on top of the second frame and its shadow when attached */
}

.paper-tear-bottom {
  margin-top: 0;
}

/* Page gap spacer showing background */
.page-gap {
  max-width: 1400px; /* matched to reference site container size */
  margin: 0 auto;
  height: 220px !important;
  background: transparent;
  border-left: 4px solid var(--border);
  border-right: 4px solid var(--border);
  box-shadow: 16px 0 0 var(--border); /* right-side shadow to align with page shadow */
}

/* Base theme colors for paper tear shadow */
:root {
  --bg-tear: #1C1C1C;
}

body[data-theme="light"] {
  --bg-tear: #D0D0D0;
  --page-bg: #FFFFFF;
  --grid-color: #ECECEC;
}

body[data-theme="light"] .paper-tear {
  border-left-color: #000000;
  border-right-color: #000000;
  box-shadow: 12px 0 0 #000000 !important; /* right-side shadow override for light theme */
}

body[data-theme="light"] .page-gap {
  border-left: 4px solid #000000 !important;
  border-right: 4px solid #000000 !important;
  box-shadow: 12px 0 0 #000000 !important; /* right-side shadow override for light theme */
}

/* Yellow Tape Sticker */
.tear-tape-sticker {
  position: absolute;
  right: -32px; /* slightly more offset to stick out clearly on top of the border shadow */
  bottom: -15px; /* centers over the page gap intersection */
  width: 95px;
  height: 32px;
  background: rgba(245, 200, 66, 0.82); /* translucent yellow tape, matches neo-brutalist style */
  border: 2px solid #000000; /* crisp solid black border matching neo-brutalist buttons */
  transform: rotate(-10deg);
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.15);
  pointer-events: none;
  z-index: 25;
  opacity: 0; /* starts hidden, controlled dynamically via JS */
  transition: opacity 0.1s ease-out, transform 0.1s ease-out;
  transform-origin: center center;
}

body[data-theme="light"] .tear-tape-sticker {
  background: rgba(255, 217, 61, 0.82) !important; /* translucent reference yellow (#FFD93D) */
  border: 2px solid #000000 !important;
}

@media (max-width: 1400px) {
  .page-frame {
    margin: 0 auto;
    border-left: none;
    border-right: none;
    border-top: none;
    box-shadow: none;
  }
  
  .page-frame.first-frame {
    border-bottom: none !important;
    box-shadow: none !important;
  }
  
  .page-frame.second-frame {
    border-top: none !important;
  }
  
  .paper-tear {
    border-left: none;
    border-right: none;
    box-shadow: none !important;
  }
  
  .page-gap {
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
  }
}

.tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--display);
  font-weight: 850;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--mint);
  color: #000000;
  border: 3.5px solid #000000;
  border-radius: 0px;
  padding: 10px 24px;
  box-shadow: 4px 4px 0 #000000;
  margin-bottom: 24px;
  cursor: pointer;
  user-select: none;
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.15s ease, background-color 0.2s ease;
}

.tag:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #000000;
}

.tag:active {
  transform: translate(2px, 2px);
  box-shadow: 1.5px 1.5px 0 #000000;
}

.tag.green {
  background: var(--mint);
}

.tag.yellow {
  background: var(--yellow);
}

.tag.pink {
  background: var(--pink);
}

.tag.blue {
  background: var(--blue);
}

.card {
  background: var(--card-bg);
  border: 3.5px solid var(--card-border);
  border-radius: 0px;
  padding: 32px;
}

/* ---------- NEO-BRUTALIST LAYERED SHADOW CARDS ---------- */
.card-shadow {
  background: var(--card-bg);
  border: 3.5px solid var(--card-border);
  border-radius: 0px !important;
  box-shadow: 6px 6px 0px var(--shadow-color, var(--card-shadow-default));
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease;
}

.card-shadow:hover {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0px var(--shadow-color, var(--card-shadow-default)) !important;
}

/* Specific Accent Shadows */
.card-shadow.accent-yellow {
  --shadow-color: var(--shadow-yellow);
}
.card-shadow.accent-mint {
  --shadow-color: var(--shadow-mint);
}
.card-shadow.accent-pink {
  --shadow-color: var(--shadow-pink);
}
.card-shadow.accent-blue {
  --shadow-color: var(--shadow-blue);
}

.hlx {
  font-family: var(--sans);
  font-weight: 700;
  color: inherit;
  --hl-bg: var(--yellow);
  background: linear-gradient(to right, var(--hl-bg) 50%, transparent 50%);
  background-size: 200% 100%;
  background-position: calc(100% - var(--hlx-progress, 0%)) 0;
  padding: 2px 4px;
  border-radius: 0px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  transition: background-position 0.15s ease-out, color 0.15s ease;
}

.hlx.highlighted {
  color: #0D0D0D !important;
}

.hlx.pink {
  --hl-bg: var(--pink);
}

.hlx.blue {
  --hl-bg: var(--blue);
}

.hlx.green {
  --hl-bg: var(--green);
}

.hlx.mint {
  --hl-bg: var(--mint);
}

/* ---------- NAV ---------- */
nav {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 48px);
  max-width: 1400px;
  z-index: 60;
  background: rgba(13, 13, 13, 0.95);
  backdrop-filter: blur(8px);
  border: 3px solid var(--border);
  box-shadow: 5px 5px 0 var(--border);
  border-radius: 0px;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.15s ease, opacity 0.25s ease;
}

nav.nav-hidden {
  transform: translate(-50%, -130px) rotate(-0.5deg);
  opacity: 0;
  pointer-events: none;
}

nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 66px;
  gap: 20px;
  flex-wrap: wrap;
}

.logo {
  width: 44px;
  height: 44px;
  border: 3px solid var(--border);
  border-radius: 4px;
  background: var(--blue); /* blue background matching reference */
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 850;
  font-size: 1.15rem;
  color: #000000;
  flex-shrink: 0;
  box-shadow: 4px 4px 0 var(--border);
  cursor: pointer;
  outline: none;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  user-select: none;
}

.logo:hover {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--border);
}

.logo:active {
  transform: translate(3px, 3px);
  box-shadow: 1px 1px 0 var(--border);
}

.navlinks {
  display: flex;
  gap: 26px;
  align-items: center;
}

.navlinks a {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 15px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  transition: color .2s;
}

.navlinks a:hover {
  color: var(--mint);
}

.nav-pill {
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--white);
  border: 2.5px solid var(--border);
  border-radius: 0px;
  padding: 8px 16px;
  background: var(--panel-2);
  box-shadow: 2px 2px 0 var(--border);
}

.nav-pill:hover {
  border-color: var(--mint);
  color: var(--mint);
}

.navlinks .cta {
  background: var(--mint);
  color: #0D0D0D;
  padding: 10px 18px;
  border: 3px solid var(--border);
  border-radius: 0px;
  font-weight: 700;
  font-family: var(--display);
  font-size: 14.5px;
  box-shadow: 3px 3px 0 var(--border);
}

.navlinks .cta:hover {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--border);
  color: #0D0D0D;
}

@media (max-width: 820px) {
  .navlinks {
    display: none;
  }
}

/* ---------- HERO ---------- */
header.hero {
  padding: 164px 0 56px;
  scroll-margin-top: 110px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
}

@media (max-width: 780px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
}

.wave {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 18px;
  font-weight: 700;
  background: var(--yellow);
  color: #000000 !important;
  border: 3.5px solid #000000;
  padding: 8px 18px;
  box-shadow: 4px 4px 0 #000000;
  margin-bottom: 18px;
  transform: rotate(-2deg);
  transform-origin: left center;
  cursor: pointer;
  user-select: none;
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.15s ease;
}

.wave:hover {
  transform: rotate(-2deg) translate(-2px, -2px);
  box-shadow: 6px 6px 0 #000000;
}

.wave:active {
  transform: rotate(-2deg) translate(2px, 2px);
  box-shadow: 1.5px 1.5px 0 #000000;
}

@keyframes wave-animation {
  0% { transform: rotate( 0.0deg) }
  10% { transform: rotate(14.0deg) }
  20% { transform: rotate(-8.0deg) }
  30% { transform: rotate(14.0deg) }
  40% { transform: rotate(-4.0deg) }
  50% { transform: rotate(10.0deg) }
  60% { transform: rotate( 0.0deg) }
  100% { transform: rotate( 0.0deg) }
}

.waving-hand {
  display: inline-block;
  animation: wave-animation 2.5s infinite;
  transform-origin: 70% 70%;
}

h1.name {
  font-family: var(--display);
  font-size: clamp(38px, 6.5vw, 58px);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 16px;
  color: var(--white);
  letter-spacing: -0.02em;
}

.lede {
  font-size: 19px;
  line-height: 1.6;
  font-weight: 500;
  color: var(--muted);
  max-width: 550px;
  margin-bottom: 22px;
}

.lede .hlx {
  --hlx-progress: 100%;
  color: #0D0D0D !important;
}

.hero-stack-container {
  margin-top: 50px;
  padding-top: 24px;
}

body[data-theme="light"] .hero-stack-container {
  /* removed border-top-color override */
}

.hero-stack-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.stack-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 14.5px;
  font-weight: 700;
  color: var(--white);
  background: var(--panel-2);
  border: 2.5px solid var(--border);
  border-radius: 4px;
  padding: 10px 18px;
  cursor: pointer;
  user-select: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s;
  box-shadow: 3.5px 3.5px 0 var(--border);
}

.stack-pill:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5.5px 5.5px 0 var(--border);
  border-color: var(--mint);
}

.stack-pill:active {
  transform: translate(2px, 2px);
  box-shadow: 1.5px 1.5px 0 var(--border);
}

.cta-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.btn {
  font-family: var(--display);
  font-weight: 750;
  font-size: 15.5px;
  padding: 14px 28px;
  border-radius: 0px;
  border: 3px solid var(--border) !important;
  box-shadow: 4px 4px 0 var(--border);
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.15s ease, background-color 0.2s ease;
  cursor: pointer;
}

.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--border);
  opacity: 1;
}

.btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1.5px 1.5px 0 var(--border);
}

.btn.primary {
  background: var(--mint);
  color: #0D0D0D;
}

.btn.ghost {
  background: transparent;
  color: var(--white);
  border-color: var(--border);
}

.resume-badge-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 0;
  cursor: pointer;
  text-decoration: none;
}

.resume-badge-text {
  font-family: 'Caveat', cursive;
  font-size: 24px;
  color: var(--white);
  transform: rotate(-4deg);
  margin-right: 12px;
  margin-top: 8px;
  white-space: nowrap;
  font-weight: 700;
}

body[data-theme="light"] .resume-badge-text {
  color: #000000;
}

.resume-arrow-svg {
  width: 80px;
  height: 60px;
  color: var(--muted);
  margin-right: 12px;
  transform: translateY(6px);
}

body[data-theme="light"] .resume-arrow-svg {
  color: #555555;
}

.resume-circle-badge {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 3.5px solid #000000;
  background: var(--pink);
  box-shadow: 4px 4px 0 #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.resume-circle-badge i {
  font-size: 20px;
  color: #000000;
}

.resume-badge-wrapper:hover .resume-circle-badge {
  transform: scale(1.15) rotate(8deg);
  box-shadow: 5px 5px 0 #000000;
  background: var(--yellow);
}

.resume-badge-wrapper:active .resume-circle-badge {
  transform: scale(0.95) translate(2px, 2px);
  box-shadow: 1.5px 1.5px 0 #000000;
}

.social-row {
  display: flex;
  gap: 16px;
}

.soc {
  width: 48px;
  height: 48px;
  border: 3px solid var(--border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
  background: var(--panel);
  box-shadow: 3px 3px 0 var(--border);
}

.soc:hover {
  border-color: var(--mint);
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--border);
}

.soc:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--border);
}

.soc i {
  font-size: 20px;
  color: var(--white);
  transition: color .2s;
}

.soc:hover i {
  color: var(--mint);
}

/* avatar */
.avatar-stage {
  position: relative;
  width: 100%;
  max-width: 400px;
  height: 380px;
  margin: 0 auto;
}

.avatar-backer {
  position: absolute;
  width: 320px;
  height: 320px;
  background: var(--border);
  border-radius: 4px;
  border: 3px solid var(--border);
  top: 18px;
  left: 50%;
  transform: translateX(-50%) rotate(4deg);
  z-index: 1;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.avatar-ring {
  width: 320px;
  height: 320px;
  margin: 0 auto;
  border-radius: 4px;
  background: var(--panel-2);
  border: 3px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  overflow: hidden;
  transform: rotate(-3deg); /* slight slant for hanging look */
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
}

.badge-pill {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  background: var(--green);
  color: #0D0D0D;
  font-family: var(--display);
  font-weight: 800;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 0px;
  border: 3px solid var(--border);
  box-shadow: 3px 3px 0 var(--border);
  white-space: nowrap;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease, background 0.3s ease, opacity 0.6s ease;
  animation: floatPill 3s ease-in-out infinite;
}

/* Avatar Cards & Tape Styling */
.avatar-tape {
  position: absolute;
  top: -15px;
  right: 15px;
  width: 70px;
  height: 24px;
  background: rgba(245, 200, 66, 0.7); /* translucent yellow tape */
  border: 1px solid rgba(0,0,0,0.1);
  transform: rotate(15deg);
  z-index: 4;
  box-shadow: 1px 1px 2px rgba(0,0,0,0.05);
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Base state when body is loading */
body.is-loading .avatar-card {
  opacity: 0 !important;
  transform: scale(0) rotate(-180deg) !important;
}

.avatar-card {
  position: absolute;
  width: 56px;
  height: 56px;
  border: 3px solid #000000;
  box-shadow: 4px 4px 0 #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-weight: 800;
  font-size: 20px;
  color: #000000;
  z-index: 3;
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.6s ease, box-shadow 0.2s ease, background 0.2s ease;
}

/* Stagger delays for beautiful sequential entry pop */
body:not(.is-loading) .card-code {
  transition-delay: 0.3s;
}
body:not(.is-loading) .card-save {
  transition-delay: 0.5s;
}
body:not(.is-loading) .card-terminal {
  transition-delay: 0.7s;
}

/* Snappy hover responses without delays */
.avatar-stage:hover .avatar-card,
.avatar-card:hover {
  transition-delay: 0s !important;
}

.avatar-card i {
  font-size: 20px;
  color: #000000;
}

.card-code {
  top: -5%;
  left: 2%;
  background: var(--blue);
  transform: rotate(-10deg);
  animation: floatCard1 3s ease-in-out infinite 1.2s; /* delay starts after entry pop */
}

.card-save {
  bottom: 22%;
  left: -2%;
  background: var(--mint);
  transform: rotate(8deg);
  animation: floatCard2 3.2s ease-in-out infinite 1.4s; /* delay starts after entry pop */
}

.card-terminal {
  bottom: 18%;
  right: -2%;
  background: var(--yellow);
  transform: rotate(-6deg);
  animation: floatCard3 3.4s ease-in-out infinite 1.6s; /* delay starts after entry pop */
}

/* Hover States: Go straight and stiff! */
.avatar-stage:hover .avatar-ring {
  transform: rotate(0deg) scale(1.03); /* straightens and pops slightly */
}

.avatar-stage:hover .avatar-backer {
  transform: translateX(-50%) rotate(0deg) translate(6px, 6px); /* aligns shadow straight */
}

.avatar-stage:hover .avatar-tape {
  transform: rotate(4deg) scale(0.95); /* tape tenses slightly */
}

.avatar-stage:hover .badge-pill {
  animation: none !important;
  transform: translateX(-50%) scale(1.08) translateY(-4px) !important;
  box-shadow: 5px 5px 0 var(--border) !important;
}

.avatar-card:hover {
  animation: none !important; /* freeze animation on direct card hover to allow scale up */
  transform: scale(1.2) rotate(0deg) !important;
  box-shadow: 5px 5px 0 #000000;
  z-index: 5;
}

@keyframes floatPill {
  0%, 100% {
    transform: translateX(-50%) translate(0, 0);
  }
  50% {
    transform: translateX(-50%) translate(-3px, -11px);
  }
}

@keyframes floatCard1 {
  0%, 100% {
    transform: rotate(-10deg) translate(0, 0);
  }
  50% {
    transform: rotate(-13deg) translate(-5px, -12px);
  }
}

@keyframes floatCard2 {
  0%, 100% {
    transform: rotate(8deg) translate(0, 0);
  }
  50% {
    transform: rotate(11deg) translate(5px, -12px);
  }
}

@keyframes floatCard3 {
  0%, 100% {
    transform: rotate(-6deg) translate(0, 0);
  }
  50% {
    transform: rotate(-3deg) translate(-5px, -12px);
  }
}

@media (max-width: 780px) {
  .avatar-stage {
    max-width: 280px;
    height: 270px;
    margin-top: 30px;
  }
  .avatar-ring, .avatar-backer {
    width: 210px;
    height: 210px;
  }
  .avatar-backer {
    top: 10px;
  }
  .badge-pill {
    bottom: 25px;
    font-size: 12.5px;
    padding: 8px 14px;
  }
  .avatar-card {
    width: 44px;
    height: 44px;
    font-size: 15px;
    border-width: 2px;
    box-shadow: 2px 2px 0 #000000;
  }
  .avatar-card i {
    font-size: 15px;
  }
  .avatar-tape {
    width: 50px;
    height: 18px;
    top: -10px;
    right: 25px;
  }
  .card-code {
    top: -8%;
    left: 8%;
  }
  .card-save {
    bottom: 20%;
    left: 2%;
  }
  .card-terminal {
    bottom: 16%;
    right: 2%;
  }
}

/* ---------- SECTION SHELL ---------- */
section {
  padding: 32px 0; /* tightened padding to reduce excessive vertical space between sections */
  scroll-margin-top: 110px; /* leaves enough room for the sticky nav bar and progress strip */
}

h2.sec-title {
  font-family: var(--display);
  font-size: 38px;
  font-weight: 800;
  margin-bottom: 26px;
  color: var(--white);
  letter-spacing: -0.015em;
}

.divider-wave {
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--mint) 0 8px, transparent 8px 16px);
  opacity: 0.4;
  border: none;
}



/* ---------- ABOUT ---------- */
.about-card p {
  color: var(--white);
  font-size: 18.5px;
  line-height: 1.8;
  margin-bottom: 18px;
}

.about-card p:last-child {
  margin-bottom: 0;
}

/* ---------- JOURNEY ---------- */
/* ---------- JOURNEY ---------- */
.journey-section {
  margin-bottom: 1.5rem; /* reduced bottom margin to tighten spacing before skills section */
}

.journey-title-container {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.journey-title-block {
  text-align: center;
  background: var(--panel);
  border: 3px solid var(--border);
  border-radius: 0px;
  padding: 14px 40px;
  box-shadow: 4px 4px 0 var(--border);
  font-family: var(--display);
  font-size: 28px;
  font-weight: 800;
  color: var(--white);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-block;
}

.journey-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  max-width: 100%;
  margin: 0;
  position: relative;
}

@media (min-width: 769px) {
  .journey-container {
    display: grid;
    grid-template-columns: 460px 1fr;
    gap: 0;
    align-items: stretch;
    perspective: 2000px;
    position: relative;
    min-height: 600px;
  }

  .journey-timeline {
    grid-column: 1;
    grid-row: 1;
    transform-origin: right center;
    transition: transform 0.1s ease-out;
    transform: rotateY(180deg);
  }

  .journey-timeline-back {
    display: flex !important;
    position: absolute;
    left: 0;
    top: 0;
    width: 460px;
    height: 600px;
    z-index: 100;
    pointer-events: none;
    transform-origin: right center;
    transition: transform 0.1s ease-out;
  }

  .journey-map-container {
    height: 600px;
    grid-column: 2;
    z-index: 1;
  }
}

.journey-timeline {
  background: var(--panel);
  padding: 1.5rem;
  border: 3px solid var(--mint);
  box-shadow: 8px 8px 0 var(--mint);
  height: 600px;
  position: relative;
  overflow-y: auto;
}

.journey-timeline-back {
  display: none;
  background: var(--panel);
  border: 3px solid var(--mint);
  box-shadow: 8px 8px 0 var(--mint);
  height: 600px;
  align-items: center;
  justify-content: center;
}

.treasure-map-svg {
  width: 100%;
  height: 100%;
}

.timeline-header {
  font-size: 1.25rem;
  font-weight: 700;
  margin: -1.5rem -1.5rem 1.5rem -1.5rem;
  padding: 1.5rem 1.5rem 1rem 1.5rem;
  border-bottom: 3px solid var(--mint);
  position: sticky;
  top: -25px;
  background: var(--panel);
  z-index: 10;
  color: var(--white);
}

.timeline-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.timeline-item-flat {
  display: flex;
  gap: 1rem;
  position: relative;
  cursor: pointer;
  transition: transform 0.2s ease;
  padding: 10px;
}

.timeline-item-flat:hover {
  transform: translateX(5px);
}

.timeline-item-flat:hover .timeline-dot {
  background: var(--yellow);
  transform: scale(1.3);
}

.timeline-dot {
  min-width: 12px;
  width: 12px;
  height: 12px;
  background: var(--border);
  border: 2px solid var(--mint);
  border-radius: 50%;
  margin-top: 0.25rem;
  position: relative;
  z-index: 2;
  transition: all 0.2s ease;
}

.timeline-item-flat:not(:last-child) .timeline-dot::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: 2px;
  height: 120px;
  background: var(--border);
  opacity: 0.3;
}

.timeline-content-flat {
  flex: 1;
}

.timeline-title {
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 0.35rem;
  line-height: 1.4;
  color: var(--white);
}

.timeline-date {
  font-size: 0.95rem;
  color: var(--mint);
  font-weight: 700;
  opacity: 0.95;
  margin-bottom: 0.5rem;
  font-family: var(--mono);
}

.timeline-description {
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 0.6rem;
  color: var(--muted);
}

.timeline-location {
  font-size: 0.95rem;
  color: var(--white);
  opacity: 0.95;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-weight: 600;
}

.timeline-location i {
  color: var(--mint);
}

.journey-map-container {
  border: 3px solid var(--mint);
  box-shadow: 8px 8px 0 var(--mint);
  height: 600px;
  position: relative;
  overflow: hidden;
}

#journey-map {
  width: 100%;
  height: 600px;
  border: none;
}

.map-overlay-lines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 999;
  opacity: 0.15;
}

.map-pirate-overlay-placeholder {
  position: absolute;
  bottom: 4px;
  left: 4px;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  transform: scale(0) translateY(50px) rotate(15deg);
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.6s ease;
  transform-origin: bottom left;
}

.map-pirate-overlay-placeholder.active {
  opacity: 1;
  transform: scale(1) translateY(0) rotate(0deg);
}

.map-pirate-img {
  height: 150px;
  width: auto;
  display: block;
  filter: drop-shadow(3px 3px 0 #000000); /* crisp neo-brutalist outline shadow */
}

/* Leaflet popup styling */
.leaflet-popup-content-wrapper {
  background: var(--panel) !important;
  border: 4px solid var(--mint) !important;
  border-radius: 0 !important;
  box-shadow: 6px 6px 0 var(--mint) !important;
  padding: 0 !important;
  font-family: var(--sans) !important;
  color: var(--white) !important;
}

.leaflet-popup-content {
  margin: 0 !important;
  min-width: 200px !important;
}

.leaflet-popup-tip-container {
  display: none !important;
}

.leaflet-container a.leaflet-popup-close-button {
  font-size: 24px !important;
  color: var(--white) !important;
  padding: 0 !important;
  font-weight: 700 !important;
  width: 35px !important;
  height: 35px !important;
  line-height: 35px !important;
  text-align: center !important;
  border-radius: 0 !important;
  background: var(--panel) !important;
  border-left: 4px solid var(--mint) !important;
  border-bottom: 4px solid var(--mint) !important;
  transition: all 0.2s !important;
}

.leaflet-container a.leaflet-popup-close-button:hover {
  background: var(--mint) !important;
  color: #0D0D0D !important;
  transform: translate(2px, 2px) !important;
}

.map-popup {
  padding: 0;
  background: var(--panel);
}

.map-popup-country {
  font-size: 1.1rem;
  font-weight: 700;
  color: #0D0D0D;
  padding: 0.75rem 1.25rem;
  background: var(--mint);
  border-bottom: 4px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.map-popup-company {
  padding: 1.25rem 1.5rem;
}

.map-popup-company strong {
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  display: block;
  margin-bottom: 0.5rem;
}

.map-popup-company span {
  font-size: 0.85rem;
  font-weight: 600;
  color: #0D0D0D;
  display: inline-block;
  margin-bottom: 0.5rem;
  background: var(--yellow);
  padding: 0.25rem 0.5rem;
  border: 2px solid var(--border);
}

.map-popup-company small {
  font-size: 0.8rem;
  opacity: 0.8;
  display: block;
  font-family: var(--mono);
  margin-top: 0.25rem;
  font-weight: 600;
  color: var(--muted);
}

.map-popup-divider {
  height: 3px;
  background: var(--border);
}

/* Neo-brutalist custom markers */
.neo-marker {
  background: transparent;
  border: none;
}

.neo-marker-label {
  position: absolute;
  top: -42px;
  left: 50%;
  transform: translateX(-70%);
  background: var(--yellow);
  border: 3px solid var(--border);
  box-shadow: 3px 3px 0 var(--border);
  padding: 3px 8px;
  font-weight: 700;
  font-size: 10px;
  white-space: nowrap;
  font-family: var(--sans);
  color: #0d0d0d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  z-index: 10;
}

.neo-marker-pin {
  width: 28px;
  height: 28px;
  background: var(--yellow);
  border: 3px solid var(--border);
  border-radius: 50%;
  box-shadow: 4px 4px 0 var(--border);
  position: relative;
  animation: bounce 2s ease-in-out infinite;
  cursor: pointer;
}

.neo-marker-pin::after {
  content: '';
  width: 10px;
  height: 10px;
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.neo-marker-pin-current {
  width: 35px;
  height: 35px;
  background: var(--mint);
  border: 4px solid var(--border);
  box-shadow: 5px 5px 0 var(--border);
  animation: pulse 2s ease-in-out infinite;
}

.neo-marker-pin-current::after {
  width: 14px;
  height: 14px;
  border: 3px solid var(--border);
}

.neo-marker-label-current {
  background: var(--mint);
  font-size: 11px;
  padding: 4px 10px;
  box-shadow: 4px 4px 0 var(--border);
}

/* Color overrides for markers */
.neo-marker-red .neo-marker-pin,
.neo-marker-red .neo-marker-label {
  background: var(--pink) !important;
}

.neo-marker-green .neo-marker-pin,
.neo-marker-green .neo-marker-label {
  background: var(--mint) !important;
}

.neo-marker-yellow .neo-marker-pin,
.neo-marker-yellow .neo-marker-label {
  background: var(--yellow) !important;
}

/* Leaflet controls styling */
.leaflet-control-zoom {
  border: none !important;
  box-shadow: none !important;
}

.leaflet-control-zoom a {
  background: var(--panel) !important;
  color: var(--white) !important;
  font-weight: 700;
  font-size: 20px !important;
  border: 3px solid var(--mint) !important;
  border-radius: 8px !important;
  box-shadow: 5px 5px 0 var(--mint) !important;
  width: 45px !important;
  height: 45px !important;
  line-height: 37px !important;
  margin-bottom: 12px !important;
  transition: all 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.leaflet-control-zoom a:first-child {
  border-radius: 8px !important;
}

.leaflet-control-zoom a:last-child {
  margin-bottom: 0 !important;
  border-radius: 8px !important;
}

.leaflet-control-zoom a:hover {
  background: var(--mint) !important;
  color: #0D0D0D !important;
  transform: translate(5px, 5px) !important;
  box-shadow: 0 0 0 var(--mint) !important;
}

/* Custom home button */
.leaflet-control-home {
  border: none !important;
  box-shadow: none !important;
  margin-top: 15px !important;
}

.leaflet-control-home a {
  background: var(--panel) !important;
  color: var(--white) !important;
  border: 3px solid var(--mint) !important;
  border-radius: 8px !important;
  box-shadow: 5px 5px 0 var(--mint) !important;
  width: 45px !important;
  height: 45px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  font-size: 16px !important;
}

.leaflet-control-home a:hover {
  background: var(--mint) !important;
  color: #0D0D0D !important;
  transform: translate(5px, 5px) !important;
  box-shadow: 0 0 0 var(--mint) !important;
}

/* Scrollbar in timeline */
.journey-timeline::-webkit-scrollbar {
  width: 10px;
}

.journey-timeline::-webkit-scrollbar-track {
  background: #2A2A2A;
  border-radius: 6px;
}

.journey-timeline::-webkit-scrollbar-thumb {
  background: var(--yellow);
  border-radius: 6px;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

@media (max-width: 768px) {
  .journey-timeline {
    height: 400px;
    box-shadow: 3px 3px 0 var(--mint);
  }

  .timeline-header {
    margin: -1rem -1rem 1rem -1rem;
    padding: 1rem 1rem 0.75rem 1rem;
    top: -1px;
  }

  .journey-map-container {
    height: 400px;
    box-shadow: 3px 3px 0 var(--mint);
  }

  #journey-map {
    height: 400px;
  }
}

/* ---------- SKILLS ---------- */
.skill-groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

@media (max-width: 820px) {
  .skill-groups {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .skill-groups {
    grid-template-columns: 1fr;
  }
}

.skill-group {
  padding: 24px 20px;
}

.sg-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--border);
}

.sg-head svg {
  width: 24px;
  height: 24px;
}

.sg-head span {
  font-family: var(--display);
  font-weight: 850;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--white);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  font-family: var(--mono);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--white);
  background: var(--panel-2);
  border: 2.5px solid var(--card-border);
  padding: 8px 14px;
  border-radius: 4px;
  transition: transform 0.15s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.15s ease, background-color 0.15s;
  cursor: pointer;
  user-select: none;
  box-shadow: 3.5px 3.5px 0px var(--chip-shadow, var(--card-shadow-default));
}

.chip:hover {
  transform: translate(1.5px, 1.5px);
  box-shadow: 2px 2px 0px var(--chip-shadow, var(--card-shadow-default)) !important;
}

.chip:active {
  transform: translate(3.5px, 3.5px);
  box-shadow: 0px 0px 0px var(--chip-shadow, var(--card-shadow-default)) !important;
}

/* Auto Accent chip shadows inside accent-styled containers */
.accent-blue .chip { --chip-shadow: var(--shadow-blue); }
.accent-yellow .chip { --chip-shadow: var(--shadow-yellow); }
.accent-mint .chip { --chip-shadow: var(--shadow-mint); }
.accent-pink .chip { --chip-shadow: var(--shadow-pink); }

/* Category-specific light background hover states */
.skill-group:nth-child(1) .chip:hover {
  background: #BAE6FD !important;
  color: #000000 !important;
  border-color: var(--border) !important;
}

.skill-group:nth-child(2) .chip:hover {
  background: #FEF08A !important;
  color: #000000 !important;
  border-color: var(--border) !important;
}

.skill-group:nth-child(3) .chip:hover {
  background: #FBCFE8 !important;
  color: #000000 !important;
  border-color: var(--border) !important;
}

.skill-group:nth-child(4) .chip:hover {
  background: #BBF7D0 !important;
  color: #000000 !important;
  border-color: var(--border) !important;
}

.skill-group:nth-child(5) .chip:hover {
  background: #BAE6FD !important;
  color: #000000 !important;
  border-color: var(--border) !important;
}

.skill-group:nth-child(6) .chip:hover {
  background: #FBCFE8 !important;
  color: #000000 !important;
  border-color: var(--border) !important;
}

.chip.learning {
  border-style: dashed;
  color: var(--muted);
}

.chip.learning:hover {
  border-color: var(--yellow);
  color: var(--yellow);
}

/* ---------- ARCHITECTURE & METHODOLOGIES ---------- */
.skills-extra-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 32px;
}

@media (max-width: 768px) {
  .skills-extra-grid {
    grid-template-columns: 1fr;
  }
}

.skill-extra-card {
  background: var(--yellow);
  border: 3.5px solid #000000 !important;
  box-shadow: 6px 6px 0px var(--shadow-color, var(--card-shadow-default));
  padding: 24px 20px;
  border-radius: 0px;
  color: #000000 !important;
}

.skill-extra-card.accent-pink {
  background: var(--pink);
}

.extra-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #000000;
}

.extra-card-head i {
  font-size: 24px;
  color: #000000;
}

.extra-card-head span {
  font-family: var(--display);
  font-weight: 850;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #000000;
}

.extra-card-divider {
  border-top: 2px solid #000000;
  margin: 12px 0 16px 0;
}

.extra-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.skill-extra-card .chip {
  background: #FFFFFF !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  box-shadow: 3px 3px 0 #000000 !important;
}

.skill-extra-card .chip:hover {
  transform: translate(-1.5px, -1.5px) !important;
  box-shadow: 4.5px 4.5px 0 #000000 !important;
  background: #FFFFFF !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

.skill-extra-card .chip:active {
  transform: translate(1.5px, 1.5px) !important;
  box-shadow: 1px 1px 0 #000000 !important;
}

/* ---------- PROJECTS REDESIGN ---------- */
.project-section-title {
  font-family: 'Caveat', cursive;
  font-size: 32px;
  font-weight: 700;
  color: var(--white);
  text-align: center;
  margin-bottom: 30px;
  text-transform: none;
  letter-spacing: 0.02em;
}

body[data-theme="light"] .project-section-title {
  color: #000000;
}

.project-neo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  max-width: 1000px;
  margin: 0 auto;
}

@media (min-width: 769px) {
  .project-neo-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
}

.project-neo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
}

.project-neo-card {
  width: 100%;
  height: 110px;
  background: var(--yellow);
  border: 3.5px solid #000000 !important;
  box-shadow: 6px 6px 0px var(--shadow-color, var(--card-shadow-default));
  display: flex;
  align-items: center;
  padding: 0 30px;
  gap: 20px;
  margin-bottom: 20px;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease;
}

.project-neo-card.accent-pink {
  background: var(--pink);
}

.project-neo-card:hover {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0px var(--shadow-color, var(--card-shadow-default)) !important;
}

.project-neo-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.project-neo-icon i {
  font-size: 40px;
  color: #000000;
}

.project-neo-name {
  font-family: var(--display);
  font-size: 32px;
  font-weight: 850;
  color: #000000;
  margin: 0;
  letter-spacing: -0.02em;
}

.project-neo-desc {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--muted);
  margin: 0 0 20px 0;
  padding: 0 10px;
  max-width: 440px;
  flex-grow: 1; /* pushes CTA button to the bottom */
}

.project-neo-btn-row {
  width: 100%;
  display: flex;
  justify-content: center;
}

.project-neo-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FFFFFF;
  color: #000000;
  border: 3px solid #000000;
  box-shadow: 4px 4px 0 #000000;
  padding: 10px 24px;
  font-family: var(--display);
  font-weight: 750;
  font-size: 14.5px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.project-neo-btn:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #000000;
}

/* ---------- EDU / LANG ---------- */
.split-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 760px) {
  .split-2 {
    grid-template-columns: 1fr;
  }
}

.info-row {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  border-top: 1px dashed var(--border);
  font-size: 13.5px;
  color: var(--white);
}

.info-row span:first-child {
  color: var(--muted);
  font-weight: 600;
}

.info-row span:last-child {
  font-weight: 800;
}

.split-2 .chip:hover {
  background: var(--mint) !important;
  color: #000000 !important;
  border-color: var(--border) !important;
}

.info-row:first-of-type {
  border-top: none;
}

.info-row span:last-child {
  font-weight: 700;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--mint);
}

/* ---------- CONTACT ---------- */
.contact-panel {
  background: var(--panel);
  border: 2px solid var(--mint);
  border-radius: 18px;
  padding: 44px;
  text-align: center;
}

.contact-panel h2 {
  font-family: var(--display);
  font-size: 26px;
  margin-bottom: 10px;
  color: var(--white);
}

.contact-panel p {
  color: var(--muted);
  font-size: 14.5px;
  margin-bottom: 26px;
}

.contact-links {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

footer.site-footer {
  border-top: 2px solid var(--mint);
  padding: 30px 0;
}

.foot-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 20px;
}

.foot-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  color: var(--white);
}

.foot-role {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}

.foot-links {
  display: flex;
  gap: 20px;
  align-items: center;
}

.foot-links a {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  text-transform: uppercase;
}

.foot-links a:hover {
  color: var(--mint);
}

.foot-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
  gap: 12px;
}

.foot-copy {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted-2);
}

.term-pill {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--mint);
  border: 1.5px solid var(--mint);
  border-radius: 20px;
  padding: 6px 14px;
}

.term-pill:hover {
  background: var(--mint);
  color: #0D0D0D;
}

/* ---------- LOADER (unchanged, still yellow intro) ---------- */
#loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transition: opacity .5s ease, visibility .5s ease;
}

#loader.loader-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

body.is-loading {
  overflow: hidden;
}

.loader-float {
  position: absolute;
  background: #fff;
  border: 3px solid #141414;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  box-shadow: 3px 3px 0 #141414;
}

.loader-float svg {
  width: 24px;
  height: 24px;
}

.lf-1 {
  top: 12%;
  left: 10%;
  background: #5AC8E8;
  animation: popIn1 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both, lfFloat1 4.5s ease-in-out infinite 0.8s;
}

.lf-2 {
  top: 18%;
  right: 9%;
  background: #fff;
  animation: popIn2 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both, lfFloat2 4s ease-in-out infinite 0.95s;
}

.lf-3 {
  bottom: 16%;
  left: 14%;
  background: #5AC8E8;
  animation: popIn3 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s both, lfFloat3 5s ease-in-out infinite 1.1s;
}

@keyframes popIn1 {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-180deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(-8deg);
  }
}

@keyframes popIn2 {
  0% {
    opacity: 0;
    transform: scale(0) rotate(180deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(4deg);
  }
}

@keyframes popIn3 {
  0% {
    opacity: 0;
    transform: scale(0) rotate(-180deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(-4deg);
  }
}

@keyframes lfFloat1 {
  0%, 100% {
    transform: translateY(0) rotate(-8deg);
  }
  50% {
    transform: translateY(-16px) rotate(6deg);
  }
}

@keyframes lfFloat2 {
  0%, 100% {
    transform: translateY(0) rotate(4deg);
  }
  50% {
    transform: translateY(14px) rotate(-6deg);
  }
}

@keyframes lfFloat3 {
  0%, 100% {
    transform: translateY(0) rotate(-4deg);
  }
  50% {
    transform: translateY(-12px) rotate(5deg);
  }
}

.loader-mark {
  display: flex;
  gap: 14px;
  margin-bottom: 26px;
}

.loader-letter {
  width: 78px;
  height: 78px;
  border: 3px solid #141414;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: 40px;
  color: #141414;
  box-shadow: 5px 5px 0 #141414;
  opacity: 0;
  transform: rotate(-160deg) scale(0.4);
  animation: letterSpin .7s cubic-bezier(.2, .9, .3, 1.2) forwards;
}

.loader-letter.l-m {
  background: #5AC8E8;
  animation-delay: .15s;
}

.loader-letter.l-i {
  background: #FF6FA5;
  animation-delay: .4s;
}

@keyframes letterSpin {
  0% {
    opacity: 0;
    transform: rotate(-160deg) scale(0.4);
  }
  100% {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}

.loader-bar-track {
  width: 220px;
  height: 16px;
  border: 3px solid #141414;
  border-radius: 9px;
  background: #fff;
  box-shadow: 3px 3px 0 #141414;
  overflow: hidden;
  opacity: 0;
  animation: barIn .4s ease forwards;
  animation-delay: .9s;
}

@keyframes barIn {
  to {
    opacity: 1;
  }
}

.loader-bar-fill {
  height: 100%;
  width: 0%;
  background: #141414;
  animation: barFill 1.1s ease forwards;
  animation-delay: 1s;
}

@keyframes barFill {
  to {
    width: 100%;
  }
}

/* ---------- BRAND ICONS & CHIPS ---------- */
.chip i, .stack-pill i {
  margin-right: 8px;
  font-size: 19px;
  vertical-align: middle;
}

/* ---------- JOURNEY DECORATIONS ---------- */
.journey-deco {
  position: absolute;
  font-family: var(--mono);
  color: var(--mint);
  opacity: 0.12;
  font-weight: 700;
  pointer-events: none;
  z-index: 0;
  user-select: none;
}

.deco-slash {
  top: 8%;
  left: 3%;
  font-size: 80px;
  letter-spacing: -10px;
}

.deco-x {
  bottom: 12%;
  left: 6%;
  font-size: 60px;
  color: var(--pink);
}

.deco-plus {
  top: 15%;
  right: 5%;
  font-size: 50px;
  color: var(--yellow);
}

.deco-pointer {
  bottom: 18%;
  right: 8%;
  font-size: 55px;
  color: var(--blue);
}

/* ---------- THEME TOGGLE BUTTON ---------- */
.theme-toggle-btn {
  background: var(--panel-2);
  color: var(--white);
  border: 2px solid var(--border);
  border-radius: 8px;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 3px 3px 0 var(--border);
  margin-left: 15px;
}

.theme-toggle-btn:hover {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--border);
  border-color: var(--mint);
  color: var(--mint);
}

/* ---------- LIGHT MODE COLOR PALETTE ---------- */
body[data-theme="light"] {
  --bg: #F4F4F2;
  --panel: #FFFFFF;
  --panel-2: #E8E8E5;
  --white: #0D0D0D;
  --muted: #4A4A4A;
  --muted-2: #5E5E5E;
  --border: #0D0D0D;

  /* Card Layered Shadow overrides for light theme */
  --card-bg: #FFFFFF;
  --card-border: #000000;
  --card-shadow-default: #000000;
  --shadow-yellow: #000000;
  --shadow-mint: #000000;
  --shadow-pink: #000000;
  --shadow-blue: #000000;

  /* Light Mode Navigation Dropdown background */
  --nav-bg: #FFD93D;
}

/* ---------- CONTACT STICKY NOTES ---------- */
.contact-links {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 32px;
}

.contact-note {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  border: 3px solid #000000;
  box-shadow: 6px 6px 0 #000000;
  transition: all 0.2s ease;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  color: #000000 !important;
  text-decoration: none;
  cursor: pointer;
}

/* Tape styling at the top of the notes */
.contact-note::before {
  content: '';
  position: absolute;
  top: -10px;
  width: 55px;
  height: 20px;
  background: rgba(255, 255, 255, 0.45);
  border: 1.5px solid rgba(0, 0, 0, 0.15);
  transform: rotate(-3deg);
  box-shadow: 1px 1px 2px rgba(0,0,0,0.05);
}

.contact-note i {
  font-size: 32px;
  margin-bottom: 12px;
  color: #000000;
}

.note-blue {
  background: var(--blue);
  transform: rotate(-3deg);
}

.note-yellow {
  background: var(--yellow);
  transform: rotate(2deg);
}

.note-pink {
  background: var(--pink);
  transform: rotate(-1deg);
}

.contact-note:hover {
  transform: scale(1.05) rotate(0deg);
  box-shadow: 8px 8px 0 #000000;
  z-index: 5;
}

/* ---------- LIGHT MODE COMPREHENSIVE BRUTALIST OVERRIDES ---------- */
body[data-theme="light"] {
  --bg: #F4F4F2;
  --body-bg: #C0C0BD;
  --panel: #FFFFFF;
  --panel-2: #E8E8E5;
  --white: #0D0D0D;
  --muted: #333333;
  --muted-2: #444444;
  --border: #000000;
}

body[data-theme="light"] {
  background: #E8E8E5;
  color: #000000;
}

body[data-theme="light"] .top-strip {
  background: #FFFFFF !important;
  border-bottom: 3.5px solid #000000 !important;
}

body[data-theme="light"] .top-strip span.checkpoint {
  background: #FFFFFF !important;
  border: 2.5px solid #000000 !important;
}

body[data-theme="light"] .top-strip span.checkpoint.active {
  background: #000000 !important;
}

body[data-theme="light"] .page-frame {
  border: 4px solid #000000 !important;
  border-radius: 0px !important;
  background: var(--page-bg) !important; /* white graph background matching reference */
  background-image: 
    url('../assets/images/fabric_pattern.png'),
    linear-gradient(#ECECEC 1.5px, transparent 1.5px),  
    linear-gradient(90deg, #ECECEC 1.5px, transparent 1.5px) !important;
  background-size: 256px 256px, 26px 26px, 26px 26px !important;
  background-repeat: repeat, repeat, repeat !important;
  box-shadow: 12px 12px 0 #000000 !important;
}

body[data-theme="light"] .page-frame.first-frame {
  border-bottom: none !important;
  box-shadow: 12px 0 0 #000000 !important;
}

body[data-theme="light"] .page-frame.second-frame {
  border-top: none !important;
}

body[data-theme="light"] nav {
  background: #FFD93D !important; /* specific reference yellow */
  border: 3px solid #000000 !important;
  box-shadow: 5px 5px 0 #000000 !important;
}

body[data-theme="light"] nav .logo {
  color: #000000 !important;
  background: #5AC8E8 !important; /* light blue background matching reference button */
  border-color: #000000 !important;
  box-shadow: 4px 4px 0 #000000 !important;
}

body[data-theme="light"] nav .logo:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 5px 5px 0 #000000 !important;
}

body[data-theme="light"] nav .logo:active {
  transform: translate(3px, 3px) !important;
  box-shadow: 1px 1px 0 #000000 !important;
}

body[data-theme="light"] .navlinks a {
  color: #000000 !important;
}

body[data-theme="light"] .soc i {
  color: #000000 !important;
}

body[data-theme="light"] .soc:hover i {
  color: var(--mint) !important;
}

body[data-theme="light"] .nav-pill {
  background: #FFFFFF !important;
  border: 3px solid #000000 !important;
  border-radius: 0px !important;
  box-shadow: 3px 3px 0 #000000 !important;
  color: #000000 !important;
}

body[data-theme="light"] .nav-pill:hover {
  transform: translate(1px, 1px);
  box-shadow: 2px 2px 0 #000000 !important;
  border-color: #000000 !important;
}

body[data-theme="light"] .navlinks .cta {
  background: var(--mint) !important;
  border: 3px solid #000000 !important;
  border-radius: 0px !important;
  box-shadow: 4px 4px 0 #000000 !important;
  color: #000000 !important;
}

body[data-theme="light"] .navlinks .cta:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #000000 !important;
}

body[data-theme="light"] .theme-toggle-btn {
  background: #FFFFFF !important;
  border: 3px solid #000000 !important;
  border-radius: 0px !important;
  box-shadow: 3px 3px 0 #000000 !important;
  color: #000000 !important;
}

body[data-theme="light"] .theme-toggle-btn:hover {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #000000 !important;
}

/* Hero elements */
body[data-theme="light"] .wave {
  color: #000000 !important;
}

body[data-theme="light"] h1.name {
  color: #000000 !important;
}

body[data-theme="light"] .lede {
  color: #333333 !important;
}

body[data-theme="light"] .lede .hlx {
  color: #000000 !important;
  border-radius: 0px !important;
}

body[data-theme="light"] .stack-pill {
  background: #FFFFFF !important;
  border: 2.5px solid #000000 !important;
  border-radius: 4px !important;
  box-shadow: 3.5px 3.5px 0 #000000 !important;
  color: #000000 !important;
}

body[data-theme="light"] .stack-pill:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 5.5px 5.5px 0 #000000 !important;
}

body[data-theme="light"] .stack-pill:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 1.5px 1.5px 0 #000000 !important;
}

body[data-theme="light"] .btn.primary {
  background: var(--mint) !important;
  color: #000000 !important;
  border: 3.5px solid #000000 !important;
  border-radius: 0px !important;
  box-shadow: 5px 5px 0 #000000 !important;
}

body[data-theme="light"] .btn.ghost {
  background: #FFFFFF !important;
  color: #000000 !important;
  border: 3.5px solid #000000 !important;
  border-radius: 0px !important;
  box-shadow: 5px 5px 0 #000000 !important;
}

body[data-theme="light"] .btn:hover {
  transform: translate(2px, 2px);
  box-shadow: 3px 3px 0 #000000 !important;
}



/* Sections */
body[data-theme="light"] h2.sec-title {
  color: #000000 !important;
}

body[data-theme="light"] .tag {
  border: 3.5px solid #000000 !important;
  border-radius: 0px !important;
  box-shadow: 4px 4px 0 #000000 !important;
  color: #000000 !important;
  font-weight: 850 !important;
}

body[data-theme="light"] .card {
  background: #FFFFFF !important;
  border: 3.5px solid #000000 !important;
  border-radius: 0px !important;
  box-shadow: 7px 7px 0 #000000 !important;
  color: #000000 !important;
}

body[data-theme="light"] .card p {
  color: #000000 !important;
}

body[data-theme="light"] .info-row span:last-child {
  color: #000000 !important;
}

body[data-theme="light"] .hlx {
  border-radius: 0px !important;
}

/* Journey section */
body[data-theme="light"] .journey-timeline {
  background: #FFFFFF !important;
  border: 3.5px solid #000000 !important;
  border-radius: 0px !important;
  box-shadow: 8px 8px 0 #000000 !important;
}

body[data-theme="light"] .timeline-header {
  background: #FFFFFF !important;
  color: #000000 !important;
  border-bottom: 3.5px solid #000000 !important;
}

body[data-theme="light"] .timeline-title {
  color: #000000 !important;
}

body[data-theme="light"] .timeline-description {
  color: #333333 !important;
}

body[data-theme="light"] .timeline-location {
  color: #000000 !important;
}

body[data-theme="light"] .journey-timeline-back {
  background: #FFFFFF !important;
  border: 3.5px solid #000000 !important;
  border-radius: 0px !important;
  box-shadow: 8px 8px 0 #000000 !important;
}

body[data-theme="light"] .journey-map-container {
  border: 3.5px solid #000000 !important;
  border-radius: 0px !important;
  box-shadow: 8px 8px 0 #000000 !important;
}

/* Skills section */
body[data-theme="light"] .skill-group {
  background: #FFFFFF !important;
  border: 3.5px solid #000000 !important;
  border-radius: 0px !important;
  box-shadow: 6px 6px 0 #000000 !important;
}

body[data-theme="light"] .sg-head span {
  color: #000000 !important;
}

body[data-theme="light"] .sg-head {
  border-bottom-color: #000000 !important;
}

body[data-theme="light"] .chip {
  background: #FFFFFF !important;
  border: 2.5px solid #000000 !important;
  border-radius: 4px !important;
  box-shadow: 3.5px 3.5px 0 #000000 !important;
  color: #000000 !important;
}

body[data-theme="light"] .chip:hover {
  transform: translate(-2px, -2px) !important;
  box-shadow: 5.5px 5.5px 0 #000000 !important;
}

body[data-theme="light"] .chip:active {
  transform: translate(2px, 2px) !important;
  box-shadow: 1.5px 1.5px 0 #000000 !important;
}

body[data-theme="light"] .chip.learning {
  border-style: dashed !important;
}



/* Edu / Lang section */
body[data-theme="light"] .edu-card {
  background: #FFFFFF !important;
  border: 3.5px solid #000000 !important;
  border-radius: 0px !important;
  box-shadow: 7px 7px 0 #000000 !important;
}

body[data-theme="light"] .edu-card h3 {
  color: #000000 !important;
}

body[data-theme="light"] .edu-card p {
  color: #333333 !important;
}

body[data-theme="light"] .lang-grid {
  background: #FFFFFF !important;
  border: 3.5px solid #000000 !important;
  border-radius: 0px !important;
  box-shadow: 7px 7px 0 #000000 !important;
}

body[data-theme="light"] .lang-row span {
  color: #000000 !important;
}

/* Contact section */
body[data-theme="light"] .contact-panel {
  background: #FFFFFF !important;
  border: 4px solid #000000 !important;
  border-radius: 0px !important;
  box-shadow: 10px 10px 0 #000000 !important;
  color: #000000 !important;
}

body[data-theme="light"] .contact-panel form input,
body[data-theme="light"] .contact-panel form textarea {
  background: #F4F4F2 !important;
  border: 3px solid #000000 !important;
  border-radius: 0px !important;
  color: #000000 !important;
}

body[data-theme="light"] .contact-panel form input:focus,
body[data-theme="light"] .contact-panel form textarea:focus {
  background: #FFFFFF !important;
  border-color: var(--pink) !important;
}

body[data-theme="light"] footer {
  border-top-color: #000000 !important;
}

body[data-theme="light"] .theme-toggle-btn {
  background: #FFFFFF !important;
  box-shadow: 3px 3px 0 #000000 !important;
}

/* Light mode Leaflet overrides */
body[data-theme="light"] .leaflet-popup-content-wrapper {
  background: #FFFFFF !important;
  border-color: #0D0D0D !important;
  box-shadow: 6px 6px 0 #0D0D0D !important;
}

body[data-theme="light"] .leaflet-container a.leaflet-popup-close-button {
  background: #FFFFFF !important;
  color: #0D0D0D !important;
  border-left-color: #0D0D0D !important;
  border-bottom-color: #0D0D0D !important;
}

body[data-theme="light"] .leaflet-container a.leaflet-popup-close-button:hover {
  background: var(--yellow) !important;
}

body[data-theme="light"] .map-popup {
  background: #FFFFFF !important;
}

body[data-theme="light"] .map-popup-country {
  border-bottom-color: #0D0D0D !important;
  color: #0D0D0D !important;
}

body[data-theme="light"] .map-popup-company strong {
  color: #0D0D0D !important;
}

body[data-theme="light"] .map-popup-company small {
  color: #5E5E5E !important;
}

body[data-theme="light"] .map-popup-divider {
  background: #0D0D0D !important;
}

body[data-theme="light"] .leaflet-control-zoom a,
body[data-theme="light"] .leaflet-control-home a {
  background: #FFFFFF !important;
  color: #0D0D0D !important;
  border-color: #0D0D0D !important;
  box-shadow: 5px 5px 0 #0D0D0D !important;
}

body[data-theme="light"] .leaflet-control-zoom a:hover,
body[data-theme="light"] .leaflet-control-home a:hover {
  background: var(--yellow) !important;
  box-shadow: 0 0 0 #0D0D0D !important;
}

/* ---------- INK SPILL THEME TOGGLE ---------- */
#inkCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 999990;
}

.ink-toggle-btn {
  position: fixed;
  right: 32px;
  bottom: 32px;
  z-index: 100000;
  width: 60px;
  height: 60px;
  background: var(--yellow);
  color: #000000;
  border: 3.5px solid #000000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 4px 4px 0 #000000;
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease, background-color 0.3s ease;
  padding: 0;
}

.ink-toggle-btn:hover {
  transform: translate(-3px, -3px) scale(1.05);
  box-shadow: 7px 7px 0 #000000;
  background: var(--mint);
}

.ink-toggle-btn:active {
  transform: translate(2px, 2px) scale(0.95);
  box-shadow: 1px 1px 0 #000000;
}

/* Tilted state when spilling */
.ink-toggle-btn.spilling {
  animation: inkSpillTilt 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes inkSpillTilt {
  0% { transform: rotate(0deg) scale(1.05); }
  30% { transform: rotate(-55deg) translate(-5px, -5px) scale(1.1); }
  70% { transform: rotate(-55deg) translate(-5px, -5px) scale(1.1); }
  100% { transform: rotate(0deg) scale(1); }
}

.ink-bottle-svg {
  width: 32px;
  height: 32px;
  transition: transform 0.3s ease;
}

/* Fluid level inside bottle */
.ink-toggle-btn .ink-level {
  transition: transform 0.4s ease, fill 0.3s ease;
  transform-origin: bottom center;
}

/* Dark mode specific button overrides */
body[data-theme="dark"] .ink-toggle-btn {
  background: var(--pink);
  color: #FFFFFF;
}

body[data-theme="dark"] .ink-toggle-btn .ink-level {
  transform: scaleY(0.2); /* looks empty or low ink! */
  fill: #FFFFFF;
}

body[data-theme="dark"] .ink-toggle-btn .bottle-label {
  fill: #1A1A1A;
  stroke: #FFFFFF;
}

/* Responsive adjust for mobile */
@media (max-width: 768px) {
  .ink-toggle-btn {
    right: 20px;
    bottom: 20px;
    width: 50px;
    height: 50px;
  }
  .ink-bottle-svg {
    width: 26px;
    height: 26px;
  }
}

/* ---------- SKILLS ICONS & HOVER ANIMATIONS ---------- */
.sg-head svg, .extra-card-head svg {
  width: 24px;
  height: 24px;
  margin-right: 12px;
  flex-shrink: 0;
  stroke: var(--border);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.extra-card-head svg {
  stroke: #000000; /* extra cards are always yellow with black outlines */
}

/* 1. Frontend Brackets pulse */
.code-bracket-left, .code-bracket-right {
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.skill-group:hover .code-bracket-left {
  transform: translateX(-3px);
}
.skill-group:hover .code-bracket-right {
  transform: translateX(3px);
}

/* 2. Languages terminal cursor blink */
.terminal-cursor {
  opacity: 1;
  transition: opacity 0.15s ease;
}
.skill-group:hover .terminal-cursor {
  animation: cursorBlink 0.6s step-end infinite;
}
@keyframes cursorBlink {
  50% { opacity: 0; }
}

/* 3. Backend server light flashing */
.server-dot-1, .server-dot-2 {
  transition: fill 0.2s ease;
}
.skill-group:hover .server-dot-1 {
  animation: serverFlash1 0.8s infinite step-end;
}
.skill-group:hover .server-dot-2 {
  animation: serverFlash2 0.8s infinite step-end;
}
@keyframes serverFlash1 {
  0%, 100% { fill: currentColor; }
  50% { fill: var(--mint); }
}
@keyframes serverFlash2 {
  0%, 100% { fill: currentColor; }
  50% { fill: var(--pink); }
}

/* 4. Cloud Icon float */
.skill-group:hover .cloud-path {
  animation: cloudFloat 2.5s infinite ease-in-out;
}
@keyframes cloudFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* 5. Databases cylinder squeeze */
.db-disc-top, .db-disc-mid, .db-disc-bot {
  transform-origin: center;
  transition: transform 0.3s ease;
}
.skill-group:hover .db-disc-top {
  animation: dbDiscPulse 1s infinite ease-in-out;
}
.skill-group:hover .db-disc-mid {
  animation: dbDiscPulse 1s infinite ease-in-out 0.2s;
}
.skill-group:hover .db-disc-bot {
  animation: dbDiscPulse 1s infinite ease-in-out 0.4s;
}
@keyframes dbDiscPulse {
  0%, 100% { transform: scaleY(1) translateY(0); }
  50% { transform: scaleY(0.9) translateY(1.2px); }
}

/* 6. Tools wrench rocking */
.wrench-tool {
  transform-origin: 6px 18px;
  transition: transform 0.3s ease;
}
.skill-group:hover .wrench-tool {
  animation: wrenchRock 1s infinite ease-in-out;
}
@keyframes wrenchRock {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-12deg); }
  75% { transform: rotate(12deg); }
}

/* 7. Architecture Node Pulse */
.arch-node-top, .arch-node-left, .arch-node-right {
  transform-origin: center;
  transition: transform 0.3s ease;
}
.skill-extra-card:hover .arch-node-top {
  animation: nodePulse 0.9s infinite ease-in-out;
}
.skill-extra-card:hover .arch-node-left {
  animation: nodePulse 0.9s infinite ease-in-out 0.2s;
}
.skill-extra-card:hover .arch-node-right {
  animation: nodePulse 0.9s infinite ease-in-out 0.4s;
}
@keyframes nodePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* 8. Methodologies Git node pulse */
.git-branch-node {
  transform-origin: center;
  transition: transform 0.3s ease;
}
.skill-extra-card:hover .git-branch-node {
  animation: branchPulse 1s infinite ease-in-out;
}
@keyframes branchPulse {
  0%, 100% { transform: scale(1); fill: none; }
  50% { transform: scale(1.3); fill: #000000; }
}

/* ---------- SCROLL ANCHOR MARGIN OFFSETS ---------- */
#about, #journey, #skills, #projects, #project-agritwin, #project-travelx, #contact {
  scroll-margin-top: 110px;
}

/* ---------- RESPONSIVE HAMBURGER & MOBILE DROPDOWN ---------- */
.nav-toggle {
  display: none;
  background: var(--yellow);
  border: 3.5px solid var(--border);
  box-shadow: 4px 4px 0 var(--border);
  width: 46px;
  height: 46px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  z-index: 100;
}

body[data-theme="light"] .nav-toggle {
  background: #5AC8E8 !important; /* light blue button in light mode */
  border-color: #000000 !important;
  box-shadow: 3px 3px 0 #000000 !important;
}

.nav-toggle:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--border);
}

.hamburger {
  position: relative;
  width: 20px;
  height: 3px;
  background: var(--border);
  transition: background 0.2s ease;
}

body[data-theme="light"] .hamburger,
body[data-theme="light"] .hamburger::before,
body[data-theme="light"] .hamburger::after {
  background: #000000 !important;
}

.hamburger::before, .hamburger::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px;
  height: 3px;
  background: var(--border);
  transition: transform 0.25s ease, top 0.25s ease;
}

.hamburger::before {
  top: -7px;
}

.hamburger::after {
  top: 7px;
}

/* Toggle Open State */
.nav-toggle.active .hamburger {
  background: transparent !important;
}

.nav-toggle.active .hamburger::before {
  transform: rotate(45deg);
  top: 0;
}

.nav-toggle.active .hamburger::after {
  transform: rotate(-45deg);
  top: 0;
}

/* ---------- RESPONSIVE BREAKPOINTS ---------- */
@media (max-width: 768px) {
  /* Prevent horizontal scrolling layout-wide */
  html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
  }
  
  body {
    padding: 12px;
  }

  /* Page Frame mobile shadow reduction */
  .page-frame {
    box-shadow: 8px 8px 0 var(--border) !important;
    margin: 8px auto 24px;
    width: 100%;
  }

  .page-frame.first-frame {
    box-shadow: 8px 0 0 var(--border) !important;
  }

  body[data-theme="light"] .page-frame {
    box-shadow: 8px 8px 0 #000000 !important;
  }

  body[data-theme="light"] .page-frame.first-frame {
    box-shadow: 8px 0 0 #000000 !important;
  }

  /* Sticky Navigation mobile dropdown */
  nav {
    width: calc(100% - 24px); /* fits viewport margins */
    top: 12px;
    margin: 0;
  }

  .nav-toggle {
    display: flex;
  }

  .navlinks {
    display: none;
    flex-direction: column;
    width: 100%;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--nav-bg);
    border-top: 3.5px solid var(--border);
    padding: 24px 20px;
    gap: 16px;
    box-shadow: 0 10px 15px rgba(0,0,0,0.5);
    z-index: 99;
  }

  body[data-theme="light"] .navlinks {
    border-top-color: #000000 !important;
    box-shadow: 0 10px 15px rgba(0,0,0,0.1);
  }

  .navlinks.active {
    display: flex;
  }

  .navlinks a {
    width: 100%;
    text-align: center;
    padding: 10px 0;
    font-size: 16px;
  }

  .navlinks .cta, .navlinks .nav-pill {
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    text-align: center;
  }

  /* Scale Down Section titles */
  h2.sec-title {
    font-size: clamp(26px, 5.5vw, 32px);
    text-align: center;
  }

  /* Journey section height adjustments */
  .journey-timeline, 
  .journey-map-container, 
  #journey-map {
    height: 420px;
  }

  /* Mobile Recommendation Toast */
  .mobile-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translate(-50%, 150px);
    opacity: 0;
    width: calc(100% - 32px);
    max-width: 440px;
    background: var(--mint);
    border: 3px solid #000000;
    box-shadow: 4px 4px 0 #000000;
    padding: 14px 18px;
    z-index: 10000;
    pointer-events: none;
    box-sizing: border-box;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s ease;
  }

  .mobile-toast.visible {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
  }

  .toast-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .toast-message {
    font-family: var(--sans);
    font-size: 13.5px;
    font-weight: 700;
    color: #000000;
    line-height: 1.4;
  }

  .toast-close {
    background: transparent;
    border: none;
    font-family: var(--mono);
    font-size: 20px;
    font-weight: 700;
    color: #000000;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
    transition: transform 0.15s ease;
  }

  .toast-close:hover {
    transform: scale(1.15);
  }

  @media (prefers-reduced-motion: reduce) {
    .mobile-toast {
      transition: opacity 0.25s ease !important;
      transform: translate(-50%, 0) !important;
    }
  }
}

@media (max-width: 480px) {
  /* Profile stage card scaling */
  .avatar-ring, .avatar-backer {
    width: 270px;
    height: 270px;
  }
  .avatar-stage {
    height: 320px;
  }
  
  /* Buttons stacking on small mobile */
  .cta-row {
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
  }
  .cta-row .btn {
    text-align: center;
    justify-content: center;
  }
}