@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&display=swap');

html {
  scroll-behavior: smooth;
}

/* ========================================
   AWWWARDS-LEVEL ANIMATIONS & EFFECTS
   ======================================== */

/* ========================================
   AWWWARDS-LEVEL LOADING SCREEN
   ======================================== */
#loading-screen {
  position: fixed;
  inset: 0;
  background: #050508;
  z-index: 9999;
  overflow: hidden;
}

/* ---- Canvas (particle system) ---- */
.ls-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* ---- Scanline overlay ---- */
.ls-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(255,255,255,0.015) 2px,
    rgba(255,255,255,0.015) 4px
  );
  pointer-events: none;
  z-index: 1;
  animation: scanline-scroll 8s linear infinite;
}
@keyframes scanline-scroll {
  from { background-position: 0 0; }
  to   { background-position: 0 100px; }
}

/* ---- Grain texture ---- */
.ls-grain {
  position: absolute;
  inset: 0;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 128px;
  pointer-events: none;
  z-index: 1;
}

/* ---- Ambient orbs ---- */
.ls-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.35;
  z-index: 0;
  animation: ls-orb-float 7s ease-in-out infinite alternate;
}
.ls-orb-1 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(147,51,234,0.35) 0%, transparent 70%);
  top: -18%; left: -12%;
}
.ls-orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(6,182,212,0.3) 0%, transparent 70%);
  bottom: -14%; right: -10%;
  animation-delay: -3.5s;
}
.ls-orb-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(236,72,153,0.2) 0%, transparent 70%);
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  animation-delay: -5s;
}
@keyframes ls-orb-float {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(25px, -18px) scale(1.06); }
}

/* ---- Floating code snippets ---- */
.ls-codes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.ls-code {
  position: absolute;
  font-family: 'Geist Mono', monospace;
  font-size: 0.65rem;
  color: rgba(147,51,234,0.18);
  animation: ls-code-drift var(--cd) ease-in-out infinite alternate;
  animation-delay: var(--cdel);
  letter-spacing: 0.05em;
}
@keyframes ls-code-drift {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0.12; }
  50%  { opacity: 0.25; }
  100% { transform: translateY(-20px) rotate(3deg); opacity: 0.12; }
}

/* ---- Grid tiles (cinematic exit) ---- */
.ls-tiles {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(6, 1fr);
  z-index: 10;
  pointer-events: none;
}

@media (max-width: 768px) {
  .ls-scanlines {
    display: none !important;
  }
  
  .ls-orb {
    filter: blur(40px) !important;
    opacity: 0.25 !important;
  }
  
  .ls-tiles {
    grid-template-columns: repeat(5, 1fr) !important;
    grid-template-rows: repeat(4, 1fr) !important;
  }
  
  .ls-orbital {
    width: 280px !important;
    height: 280px !important;
  }
}
.ls-tile {
  background: #050508;
  opacity: 0;
}
#loading-screen.ls-exit .ls-tile {
  animation: ls-tile-out 0.55s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: calc((var(--tc) + var(--tr)) * 0.04s);
}
@keyframes ls-tile-out {
  0%   { opacity: 0; transform: scaleY(1); }
  40%  { opacity: 1; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(0); }
}

/* ---- Orbital rings ---- */
.ls-orbital {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 420px; height: 420px;
  z-index: 2;
  pointer-events: none;
}
.ls-rings-svg {
  width: 100%; height: 100%;
  opacity: 0;
  animation: ls-fade-in 1s ease 0.3s forwards;
}
.ls-ring {
  transform-origin: center;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
}
.ls-ring-1 {
  animation: ls-ring-draw 2s ease-out 0.5s forwards, ls-ring-spin 20s linear 2s infinite;
}
.ls-ring-2 {
  animation: ls-ring-draw 2s ease-out 0.8s forwards, ls-ring-spin 25s linear 2.5s infinite reverse;
}
.ls-ring-3 {
  animation: ls-ring-draw 2s ease-out 1.1s forwards, ls-ring-spin 30s linear 3s infinite;
}
@keyframes ls-ring-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes ls-ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Orbiting dots */
.ls-dot {
  transform-origin: 150px 150px;
  opacity: 0;
  animation: ls-fade-in 0.5s ease 1.5s forwards;
}
.ls-dot-1 { animation: ls-fade-in 0.5s ease 1.5s forwards, ls-ring-spin 6s linear 1.5s infinite; }
.ls-dot-2 { animation: ls-fade-in 0.5s ease 1.8s forwards, ls-ring-spin 8s linear 1.8s infinite reverse; }
.ls-dot-3 { animation: ls-fade-in 0.5s ease 2.1s forwards, ls-ring-spin 10s linear 2.1s infinite; }

@keyframes ls-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- Central content ---- */
.ls-center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* ---- Hexagon logo ---- */
.ls-logo-wrap {
  opacity: 0;
  animation: ls-hex-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}
.ls-hexagon {
  width: 100px; height: 100px;
  filter: drop-shadow(0 0 30px rgba(147,51,234,0.3));
}
.ls-hex-svg { width: 100%; height: 100%; }

.ls-hex-border {
  stroke-dasharray: 450;
  stroke-dashoffset: 450;
  animation: ls-hex-draw 1.5s ease-out 0.4s forwards;
}
.ls-hex-letter {
  opacity: 0;
  animation: ls-letter-pop 0.6s ease-out 0.8s forwards;
}
@keyframes ls-hex-in {
  0%   { opacity: 0; transform: scale(0.5) rotate(-10deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes ls-hex-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes ls-letter-pop {
  0%   { opacity: 0; transform: translateY(6px) scale(0.8); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- Name characters (with glitch) ---- */
.ls-name {
  display: flex;
  gap: 3px;
  font-family: 'Geist', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.ls-char {
  display: inline-block;
  background: linear-gradient(135deg, #a855f7, #22d3ee, #e879f9);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 0;
  transform: translateY(18px) skewX(-8deg);
  animation: ls-char-in 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards, ls-gradient-shift 3s ease infinite;
  animation-delay: calc(0.2s + var(--ci) * 0.05s), 0s;
}
.ls-space { width: 0.5em; }

@keyframes ls-char-in {
  to { opacity: 1; transform: translateY(0) skewX(0deg); }
}
@keyframes ls-gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ---- Tagline ---- */
.ls-tagline {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'Geist', sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}
.ls-tag-word {
  color: rgba(255,255,255,0.8);
  opacity: 0;
  animation: ls-tag-reveal 0.5s ease forwards;
  animation-delay: calc(0.5s + var(--wi) * 0.1s);
}
.ls-tag-dot {
  color: #c084fc;
  font-size: 0.5rem;
  opacity: 0;
  animation: ls-tag-reveal 0.5s ease 0.6s forwards;
}
@keyframes ls-tag-reveal {
  0%   { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ---- Progress bar ---- */
.ls-progress-wrap {
  width: 220px;
  opacity: 0;
  animation: ls-fade-up 0.4s ease 0.7s forwards;
}
.ls-progress-track {
  position: relative;
  width: 100%;
  height: 2px;
  background: rgba(255,255,255,0.25);
  border-radius: 2px;
  overflow: visible;
}
.ls-progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #9333ea, #06b6d4, #ec4899);
  border-radius: 2px;
  transition: width 0.12s ease;
}
.ls-progress-glow {
  position: absolute;
  top: -4px;
  left: 0%;
  width: 10px;
  height: 10px;
  background: #06b6d4;
  border-radius: 50%;
  box-shadow: 0 0 14px #06b6d4, 0 0 28px rgba(147,51,234,0.4);
  transition: left 0.12s ease;
  transform: translateX(-50%);
}
.ls-progress-markers {
  display: flex;
  justify-content: space-between;
  padding-top: 6px;
}
.ls-progress-markers span {
  width: 1px;
  height: 5px;
  background: rgba(255,255,255,0.1);
}

/* ---- Counter ---- */
.ls-counter {
  font-family: 'Geist Mono', monospace;
  font-size: 2rem;
  font-weight: 200;
  letter-spacing: -0.03em;
  opacity: 0;
  animation: ls-fade-up 0.4s ease 0.8s forwards;
}
.ls-counter-val {
  background: linear-gradient(135deg, #c084fc, #22d3ee);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.ls-counter-pct {
  font-size: 1rem;
  color: rgba(255,255,255,0.6);
}

/* ---- Status text ---- */
.ls-status {
  font-family: 'Geist Mono', monospace;
  font-size: 0.6rem;
  color: rgba(255,255,255,0.9);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  opacity: 0;
  animation: ls-fade-up 0.4s ease 0.8s forwards, ls-status-blink 2s ease-in-out infinite;
}
@keyframes ls-status-blink {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

@keyframes ls-fade-up {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ---- Corner brackets ---- */
.ls-corners {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.ls-corner {
  position: absolute;
  width: 30px;
  height: 30px;
  opacity: 0;
  animation: ls-fade-in 0.6s ease 0.8s forwards;
}
.ls-corner-tl { top: 20px; left: 20px; border-top: 1px solid rgba(147,51,234,0.3); border-left: 1px solid rgba(147,51,234,0.3); }
.ls-corner-tr { top: 20px; right: 20px; border-top: 1px solid rgba(6,182,212,0.3); border-right: 1px solid rgba(6,182,212,0.3); }
.ls-corner-bl { bottom: 20px; left: 20px; border-bottom: 1px solid rgba(6,182,212,0.3); border-left: 1px solid rgba(6,182,212,0.3); }
.ls-corner-br { bottom: 20px; right: 20px; border-bottom: 1px solid rgba(236,72,153,0.3); border-right: 1px solid rgba(236,72,153,0.3); }

/* ---- Animated guide lines ---- */
.ls-line-h, .ls-line-v {
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
.ls-line-h {
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(147,51,234,0.08), transparent);
}
.ls-line-v {
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(6,182,212,0.08), transparent);
}
.ls-line-h1 { top: 30%; animation: ls-line-drift-h 12s ease-in-out infinite; }
.ls-line-h2 { top: 70%; animation: ls-line-drift-h 14s ease-in-out infinite reverse; }
.ls-line-v1 { left: 25%; animation: ls-line-drift-v 10s ease-in-out infinite; }
.ls-line-v2 { left: 75%; animation: ls-line-drift-v 13s ease-in-out infinite reverse; }
@keyframes ls-line-drift-h {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(30px); }
}
@keyframes ls-line-drift-v {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(20px); }
}

/* ---- Exit animations ---- */
#loading-screen.ls-exit {
  pointer-events: none;
}
#loading-screen.ls-exit .ls-center {
  animation: ls-center-out 0.6s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}
#loading-screen.ls-exit .ls-orbital {
  animation: ls-orbital-out 0.7s ease forwards;
}
#loading-screen.ls-exit .ls-orb {
  animation: ls-orb-out 0.6s ease forwards;
}
#loading-screen.ls-exit .ls-corner {
  animation: ls-corner-out 0.4s ease forwards;
}
#loading-screen.ls-exit .ls-canvas {
  animation: ls-canvas-out 0.8s ease forwards;
}
@keyframes ls-center-out {
  to { opacity: 0; transform: translate(-50%, -55%) scale(0.85); }
}
@keyframes ls-orbital-out {
  to { opacity: 0; transform: translate(-50%, -50%) scale(1.4) rotate(60deg); }
}
@keyframes ls-orb-out {
  to { opacity: 0; transform: scale(2); }
}
@keyframes ls-corner-out {
  to { opacity: 0; transform: scale(0.5); }
}
@keyframes ls-canvas-out {
  to { opacity: 0; }
}

/* ---- Mobile responsive ---- */
@media (max-width: 640px) {
  .ls-hexagon { width: 75px; height: 75px; }
  .ls-name { font-size: 1.1rem; letter-spacing: 0.14em; }
  .ls-tagline { font-size: 0.6rem; gap: 0.4rem; }
  .ls-progress-wrap { width: 160px; }
  .ls-counter { font-size: 1.5rem; }
  .ls-orbital { width: 280px; height: 280px; }
  .ls-orb-1 { width: 280px; height: 280px; }
  .ls-orb-2 { width: 220px; height: 220px; }
  .ls-orb-3 { width: 160px; height: 160px; }
  .ls-tiles {
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(8, 1fr);
  }
  .ls-code { font-size: 0.5rem; }
  .ls-corner { width: 20px; height: 20px; }
  .ls-corner-tl { top: 12px; left: 12px; }
  .ls-corner-tr { top: 12px; right: 12px; }
  .ls-corner-bl { bottom: 12px; left: 12px; }
  .ls-corner-br { bottom: 12px; right: 12px; }
}


/* ========================================
   MINIMALIST GEOMETRIC CURSOR
   ======================================== */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 10000;
  mix-blend-mode: difference;
}

/* Core cursor */
.cursor-core {
  position: fixed;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease, opacity 0.2s ease;
  pointer-events: none;
}

/* Outer circle */
.cursor-circle {
  position: fixed;
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
  pointer-events: none;
}

/* Hover state */
.custom-cursor.hover .cursor-core {
  width: 6px;
  height: 6px;
  opacity: 0.8;
}

.custom-cursor.hover .cursor-circle {
  width: 50px;
  height: 50px;
  border-width: 2px;
  border-color: rgba(255, 255, 255, 0.8);
}

/* Click state */
.custom-cursor.click .cursor-core {
  width: 14px;
  height: 14px;
}

.custom-cursor.click .cursor-circle {
  width: 30px;
  height: 30px;
}

/* Text selection state */
.custom-cursor.text .cursor-core {
  width: 2px;
  height: 20px;
  border-radius: 1px;
}

.custom-cursor.text .cursor-circle {
  opacity: 0;
}

/* Hidden state */
.custom-cursor.hidden {
  opacity: 0;
}

/* Light theme */
body.light-theme .custom-cursor {
  mix-blend-mode: normal;
}

body.light-theme .cursor-core {
  background: #000;
}

body.light-theme .cursor-circle {
  border-color: rgba(0, 0, 0, 0.4);
}

body.light-theme .custom-cursor.hover .cursor-circle {
  border-color: rgba(0, 0, 0, 0.6);
}

/* Hide on touch devices */
@media (pointer: coarse) {
  .custom-cursor {
    display: none !important;
  }

  body {
    cursor: auto !important;
  }
}

/* Noise Overlay */
.noise-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* Scroll-triggered Animations */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Text Reveal Animation */
.text-reveal {
  overflow: hidden;
  display: block;
  width: 100%;
}

.text-reveal.animate-in {
  animation: text-reveal 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes text-reveal {
  from {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
    opacity: 0;
  }
  to {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    opacity: 1;
  }
}

/* Fix for h3 text-reveal overflow */
h3.text-reveal {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  overflow: visible !important;
}

/* Stagger Animation for Children */
.animate-stagger>* {
  opacity: 0;
  transform: translateY(30px);
}

.animate-stagger.animate-in>* {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Scramble Text Effect */
.scramble-char {
  color: #9333ea;
  animation: scramble-flash 0.1s ease;
}

@keyframes scramble-flash {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

/* Magnetic Button Effect */
.cta-btn,
.view-project-btn,
.contact-submit-btn {
  position: relative;
  overflow: hidden;
}

.cta-btn::before,
.view-project-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(147, 51, 234, 0.3) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  transition: width 0.4s ease, height 0.4s ease;
  border-radius: 50%;
}

.cta-btn:hover::before,
.view-project-btn:hover::before {
  width: 300px;
  height: 300px;
}

/* Parallax Container */
.parallax-container {
  will-change: transform;
}

/* Hero Content Parallax */
.hero-content {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* Floating Animation Enhancement */
@keyframes float-smooth {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  25% {
    transform: translateY(-10px) rotate(2deg);
  }

  50% {
    transform: translateY(-20px) rotate(0deg);
  }

  75% {
    transform: translateY(-10px) rotate(-2deg);
  }
}

/* Glow Pulse Animation */
@keyframes glow-pulse {

  0%,
  100% {
    box-shadow: 0 0 20px rgba(147, 51, 234, 0.3), 0 0 40px rgba(147, 51, 234, 0.2);
  }

  50% {
    box-shadow: 0 0 30px rgba(147, 51, 234, 0.5), 0 0 60px rgba(147, 51, 234, 0.3);
  }
}

/* Scale In Animation */
@keyframes scale-in {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Slide Animations */
@keyframes slide-right {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-left {
  from {
    opacity: 0;
    transform: translateX(30px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade Animations */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Bounce Animation */
@keyframes bounce-subtle {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

/* Shimmer Effect */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.shimmer-effect {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

/* Gradient Border Animation */
@keyframes gradient-border {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.gradient-border-animate {
  background: linear-gradient(90deg, #9333ea, #06b6d4, #9333ea);
  background-size: 200% 200%;
  animation: gradient-border 3s ease infinite;
}

/* Project Card Hover Enhancement */
.project-card {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
}

.project-card:hover {
  transform: translateY(-10px) scale(1.02);
}

/* Button Ripple Effect */
@keyframes ripple-expand {
  to {
    transform: translate(-50%, -50%) scale(4);
    opacity: 0;
  }
}

/* Smooth Section Transitions */
section {
  opacity: 0;
  animation: fade-up 0.8s ease forwards;
  animation-delay: 0.2s;
}

section:nth-child(1) {
  animation-delay: 0s;
}

section:nth-child(2) {
  animation-delay: 0.1s;
}

section:nth-child(3) {
  animation-delay: 0.2s;
}

section:nth-child(4) {
  animation-delay: 0.3s;
}

section:nth-child(5) {
  animation-delay: 0.4s;
}

/* Hero Title Animation */
.hero-content h1 {
  animation: fade-up 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: 0.3s;
  opacity: 0;
}

.hero-content p {
  animation: fade-up 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: 0.5s;
  opacity: 0;
}

.hero-content .cta-btn {
  animation: fade-up 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: 0.7s;
  opacity: 0;
}

/* Social Icons Stagger */
.hero-content .flex.gap-3 a {
  opacity: 0;
  animation: scale-in 0.5s ease forwards;
}

.hero-content .flex.gap-3 a:nth-child(1) {
  animation-delay: 0.8s;
}

.hero-content .flex.gap-3 a:nth-child(2) {
  animation-delay: 0.9s;
}

.hero-content .flex.gap-3 a:nth-child(3) {
  animation-delay: 1s;
}

.hero-content .flex.gap-3 a:nth-child(4) {
  animation-delay: 1.1s;
}

.hero-content .flex.gap-3 a:nth-child(5) {
  animation-delay: 1.2s;
}

/* Hide cursor on touch devices */
@media (pointer: coarse) {
  .custom-cursor {
    display: none !important;
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .animate-on-scroll {
    opacity: 1;
    transform: none;
  }

  .hero-content h1,
  .hero-content p,
  .hero-content .cta-btn,
  .hero-content .flex.gap-3 a,
  section {
    opacity: 1;
    animation: none;
  }
}

/* Dark theme (default) */
:root {
  --bg-primary: #0a0a0f;
  --bg-secondary: #0f0f18;
  --bg-surface: rgba(18, 18, 24, 0.95);
  --bg-card: rgba(255, 255, 255, 0.05);
  --bg-card-hover: rgba(255, 255, 255, 0.1);

  --text-primary: #ffffff;
  --text-secondary: #d1d5db;
  --text-muted: #9ca3af;
  --text-accent: #a78bfa;

  --border-subtle: rgba(147, 51, 234, 0.2);
  --border-hover: rgba(147, 51, 234, 0.4);

  --accent-purple: #9333ea;
  --accent-cyan: #06b6d4;
  --accent-blue: #3b82f6;

  --shadow-glow: rgba(147, 51, 234, 0.15);
  --overlay-dark: rgba(0, 0, 0, 0.5);
}

/* Light theme overrides */
body.light-theme {
  --bg-primary: #f8fafc;
  --bg-secondary: #f1f5f9;
  --bg-surface: rgba(255, 255, 255, 0.95);
  --bg-card: rgba(0, 0, 0, 0.03);
  --bg-card-hover: rgba(0, 0, 0, 0.06);

  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-accent: #7c3aed;

  --border-subtle: rgba(147, 51, 234, 0.15);
  --border-hover: rgba(147, 51, 234, 0.35);

  --shadow-glow: rgba(147, 51, 234, 0.1);
  --overlay-dark: rgba(0, 0, 0, 0.3);
}

/* Light theme logo container */
body.light-theme .logo-container {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.1), rgba(59, 130, 246, 0.08));
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.15), 0 0 30px rgba(59, 130, 246, 0.1);
  filter: none;
  border: 1px solid rgba(6, 182, 212, 0.15);
}

body.light-theme .logo-mark-img {
  filter: brightness(0) invert(1) contrast(1.2);
}

/* Light theme loading screen */
body.light-theme #loading-screen {
  background: #fafbfc;
}

body.light-theme .ls-grain {
  opacity: 0.02;
}

body.light-theme .ls-tile {
  background: #fafbfc;
}

/* Drastically reduce orbs in light theme so they don't wash out the text */
body.light-theme .ls-orb {
  opacity: 0.15 !important;
  filter: blur(90px) !important;
}
body.light-theme .ls-orb-1 {
  background: radial-gradient(circle, rgba(147, 51, 234, 0.3) 0%, transparent 70%);
}
body.light-theme .ls-orb-2 {
  background: radial-gradient(circle, rgba(6, 182, 212, 0.25) 0%, transparent 70%);
}
body.light-theme .ls-orb-3 {
  background: radial-gradient(circle, rgba(236, 72, 153, 0.2) 0%, transparent 70%);
}

/* High-contrast dark text/icons for header controls */
body.light-theme .theme-btn {
  color: #0f172a !important;
}
body.light-theme .mobile-toggle .hamburger span {
  background: #0f172a !important;
}

body.light-theme .ls-char {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #0d1523 !important;
  color: #0d1523 !important;
  font-weight: 700 !important;
}

/* Force tagline to dark slate */
body.light-theme .ls-tag-word {
  color: #1e293b !important;
  font-weight: 600 !important;
}
body.light-theme .ls-tag-dot {
  color: #6d28d9 !important;
}

/* Force progress track to be clearly visible */
body.light-theme .ls-progress-track {
  background: rgba(148, 163, 184, 0.4) !important;
}
body.light-theme .ls-progress-fill {
  background: #6d28d9 !important;
}

/* Force counter to be dark and bold */
body.light-theme .ls-counter-val {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #0d1523 !important;
  color: #0d1523 !important;
  font-weight: 600 !important;
}
body.light-theme .ls-counter-pct {
  color: #475569 !important;
  font-weight: 500 !important;
}

/* Force status text to be visible */
body.light-theme .ls-status {
  color: #1e293b !important;
  font-weight: 600 !important;
}

/* Force hex border and letter to be visible */
body.light-theme .ls-hex-border {
  stroke: url(#hg);
  stroke-width: 2;
}

/* Force ring strokes to be visible */
body.light-theme .ls-ring {
  opacity: 0.5 !important;
}

/* Canvas gets reduced opacity so particles don't dominate */
body.light-theme .ls-canvas {
  opacity: 0.4;
}

/* Scanlines toned down */
body.light-theme .ls-scanlines {
  opacity: 0.3;
}

/* Progress markers more visible */
body.light-theme .ls-progress-markers span {
  background: rgba(100, 116, 139, 0.3);
}


body {
  background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
  color: var(--text-primary);
  font-family: 'Geist', sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 0.3s ease, color 0.3s ease;
}

body.light-theme {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  font-size: clamp(14px, 1vw + 12px, 18px);
  scroll-behavior: smooth;
}

/* Fluid spacing scale */
:root {
  --space-xs: clamp(0.25rem, 0.5vw, 0.5rem);
  --space-sm: clamp(0.5rem, 1vw, 1rem);
  --space-md: clamp(1rem, 2vw, 1.5rem);
  --space-lg: clamp(1.5rem, 3vw, 2.5rem);
  --space-xl: clamp(2rem, 4vw, 4rem);
  --space-2xl: clamp(3rem, 6vw, 6rem);
}

/* Prevent horizontal scroll on mobile */
body,
html {
  max-width: 100%;
  position: relative;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Better text wrapping */
h1,
h2,
h3,
h4,
h5,
h6,
p {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Custom animations removed per user request */

/* Navbar and mobile menu styles */
.site-header {
  background: linear-gradient(90deg, rgba(15, 11, 36, 0.75), rgba(10, 10, 16, 0.75));
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(147, 51, 234, 0.1);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
}

.nav-row {
min-height: clamp(56px, 8vh, 64px);
padding-top: clamp(0.5rem, 1vh, 0.75rem);
padding-bottom: clamp(0.5rem, 1vh, 0.75rem);
}

.logo-container {
position: relative;
width: clamp(40px, 6vw, 50px);
height: clamp(40px, 6vw, 50px);
border-radius: clamp(8px, 1.5vw, 12px);
background: linear-gradient(135deg, rgba(6, 182, 212, 0.15), rgba(59, 130, 246, 0.1));
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 0 15px rgba(6, 182, 212, 0.2), 0 0 30px rgba(59, 130, 246, 0.1);
animation: logo-bg-pulse 3s ease-in-out infinite;
padding: 6px;
border: 1px solid rgba(6, 182, 212, 0.2);
}

@keyframes logo-bg-pulse {

0%,
100% {
box-shadow: 0 0 15px rgba(6, 182, 212, 0.2), 0 0 30px rgba(59, 130, 246, 0.1);
}

50% {
box-shadow: 0 0 20px rgba(6, 182, 212, 0.3), 0 0 40px rgba(59, 130, 246, 0.15);
}
}

.logo-mark,
.logo-mark-img {
width: 100%;
height: 100%;
border-radius: clamp(6px, 1.2vw, 8px);
display: block;
object-fit: contain;
transition: transform 0.3s ease, filter 0.3s ease;
filter: brightness(0) invert(1);
  height: 100%;
  border-radius: clamp(6px, 1.2vw, 8px);
  display: block;
  object-fit: contain;
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: brightness(0) invert(1);
}

.logo-mark:hover,
.logo-mark-img:hover {
  transform: scale(1.05);
}

.site-title {
  color: #f3f4f6;
  letter-spacing: 0.2px;
  font-size: clamp(0.875rem, 2vw, 1rem);
  font-size: clamp(0.875rem, 2vw, 1rem);
  font-size: clamp(0.875rem, 2vw, 1rem);
}

.nav-center .nav-link,
.nav-right .nav-link {
  background: transparent;
  border: none;
  color: #d1d5db;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.nav-center .nav-link:hover,
.nav-center .mobile-link:hover,
.mobile-link.active {
  color: #a78bfa;
  background: rgba(147, 51, 234, 0.1);
  padding-left: 1.5rem;
}

.cta-btn {
  background: linear-gradient(90deg, #9b5cff, #00d4ff);
  color: white;
  box-shadow: 0 8px 20px rgba(99, 50, 255, 0.25);
  text-decoration: none;
  transition: all 0.3s ease;
}

.cta-btn:hover {
  box-shadow: 0 12px 32px rgba(99, 50, 255, 0.4);
  transform: translateY(-1px);
}

.theme-btn {
  background: transparent;
  color: #e6edf0;
  border: none;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.theme-btn:hover {
  background: rgba(147, 51, 234, 0.05);
}

/* Theme button icon transition: center icons and animate rotate+fade */

.theme-btn .theme-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-20deg) scale(.95);
  opacity: 0;
  width: 18px;
  height: 18px;
  transition: transform .38s cubic-bezier(.2, .9, .2, 1), opacity .28s ease;
  pointer-events: none;
  color: inherit
}

.theme-btn .theme-icon.show {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg) scale(1);
  pointer-events: auto
}

.theme-btn .theme-icon svg,
.theme-btn .theme-icon path {
  color: inherit
}

.mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  transition: all 0.2s ease;
  cursor: pointer;
}

.mobile-toggle:hover {
  background: rgba(147, 51, 234, 0.05);
}

.mobile-toggle .hamburger {
  display: inline-block;
  width: 20px; /* Slightly smaller for better balance */
  height: 16px;
  position: relative
}

.mobile-toggle .hamburger span {
  display: block;
  position: absolute;
  height: 2.5px;
  width: 100%;
  left: 0;
  background: linear-gradient(90deg, #a855f7, #06b6d4);
  border-radius: 2px;
  transition: transform .28s ease, opacity .2s ease
}

.mobile-toggle .hamburger span:nth-child(1) {
  top: 0
}

.mobile-toggle .hamburger span:nth-child(2) {
  top: 7px;
}

.mobile-toggle .hamburger span:nth-child(3) {
  top: 14px;
}

.mobile-toggle.open .hamburger span:nth-child(1) {
  transform: translateY(8px) rotate(45deg)
}

.mobile-toggle.open .hamburger span:nth-child(2) {
  opacity: 0
}

.mobile-toggle.open .hamburger span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg)
}

/* Mobile Compact Toggles */
@media (max-width: 768px) {
  .theme-btn,
  .mobile-toggle {
    width: 34px !important;
    height: 34px !important;
  }
}

/* Mobile overlay menu */
.mobile-menu {
  position: fixed;
  inset: 0 0 auto 0;
  top: 64px;
  height: calc(100% - 64px);
  background: linear-gradient(180deg, rgba(6, 6, 15, 0.98), rgba(10, 10, 18, 0.98));
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 28px 16px;
  opacity: 0;
  transform: translateY(-6%);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  backdrop-filter: blur(12px);
}

.mobile-menu .mobile-menu-inner {
  width: 100%;
  max-width: 520px;
}

.mobile-menu-backdrop {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 6, 20, 0.75), rgba(0, 0, 0, 0.7));
  backdrop-filter: blur(8px);
  z-index: 0;
}

.mobile-menu-inner {
  position: relative;
  z-index: 2;
  margin: 8px auto;
  background: rgba(15, 15, 24, 0.85);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(147, 51, 234, 0.2);
  border: 1px solid rgba(147, 51, 234, 0.15);
  backdrop-filter: blur(12px);
}

.mobile-menu-inner.compact {
  max-width: 420px;
  padding: 12px;
  border-radius: 12px;
}

.mobile-links.compact-links {
  gap: 10px
}

.mobile-link {
  background: transparent;
  color: #e5e7eb;
  padding: 14px 16px;
  border-radius: 10px;
  text-align: left;
  font-size: 1.05rem;
  font-weight: 600;
  border: none;
  transition: all 0.2s ease;
}

.mobile-link:hover {
  background: rgba(147, 51, 234, 0.15);
  color: #c4b5fd;
  transform: translateX(4px);
}

.mobile-cta .cta-btn {
  padding: 12px 16px;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(155, 92, 255, 0.3);
}

.mobile-menu.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto
}

/* Accessibility helper */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}

/* Focus-visible for keyboard users */
button:focus-visible,
a:focus-visible,
.cta-btn:focus-visible,
.mobile-link:focus-visible,
.nav-link:focus-visible,
.theme-btn:focus-visible,
.group:focus-visible {
  outline: 2px solid rgba(147, 51, 234, 0.85);
  outline-offset: 3px;
  border-radius: 8px;
  box-shadow: 0 6px 18px rgba(155, 92, 255, 0.12);
}

@media (min-width:768px) {
  .mobile-menu {
    display: none
  }
}

/* Light theme overrides */
.light-theme body,
.light-theme .antialiased {
  background: #f7f8fb !important;
  color: #0b1220 !important
}

/* Header, Footer, and Core UI - Light Theme */
.light-theme .site-header {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(250, 250, 250, 0.95));
  border-bottom-color: rgba(11, 17, 32, 0.04);
}

.light-theme .site-title {
  color: #0b1220
}

.light-theme .nav-center .nav-link {
  color: #334155
}

.light-theme .nav-center .nav-link:hover {
  color: #0b6bff
}

.light-theme .theme-btn {
  background: rgba(5, 10, 20, 0.03);
  color: #0b1220
}

.light-theme .cta-btn {
  background: linear-gradient(90deg, #6e6bff, #00c7ff);
  color: #fff
}

.light-theme .mobile-menu-backdrop {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(250, 250, 250, 0.85));
}

.light-theme .mobile-menu-inner {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(11, 17, 32, 0.04);
  color: #0b1220
}

.light-theme .mobile-link {
  color: #0b1220
}

.light-theme .mobile-link:hover,
.light-theme .mobile-link.active {
  color: #7c3aed;
  background: rgba(124, 58, 237, 0.08);
}

.light-theme footer {
  background: linear-gradient(90deg, #ffffff, #f7f7fb);
  color: #0b1220
}

/* Card / panel adjustments for light theme */
.light-theme .group.relative.bg-\[\#1a1a20\] {
  background: #ffffff !important;
  border-color: rgba(11, 17, 32, 0.06) !important
}

.light-theme .bg-\[\#1a1a20\] {
  background: #ffffff !important
}

.light-theme .text-gray-300 {
  color: #475569 !important
}

.light-theme .text-gray-400 {
  color: #64748b !important
}

.light-theme .text-gray-500 {
  color: #6b7280 !important
}

.light-theme .text-gray-600 {
  color: #4b5563 !important
}

/* Small helpers to keep contrast in light mode */
.light-theme .shadow-lg {
  box-shadow: 0 6px 18px rgba(2, 6, 23, 0.04) !important
}

.light-theme .border-gray-700\/50 {
  border-color: rgba(11, 17, 32, 0.06) !important
}

/* Light theme surface rework */
.light-theme main {
  background: linear-gradient(180deg, #f8faff 0%, #eef4ff 100%);
  color: #0b1220;
}

.light-theme section {
  color: #0b1220;
}

.light-theme .text-white,
.light-theme .text-gray-100,
.light-theme .text-gray-200 {
  color: #0b1220 !important;
}

.light-theme .text-gray-50 {
  color: #0b1220 !important;
}

.light-theme .bg-gray-950,
.light-theme .bg-\[\#0A0A0E\],
.light-theme .bg-\[\#0c0c0f\],
.light-theme .bg-\[\#18181b\],
.light-theme .bg-gray-900 {
  background: linear-gradient(135deg, #ffffff 0%, #f9fbff 100%) !important;
  color: #0b1220 !important;
}

.light-theme .bg-gray-800\/50,
.light-theme .bg-gray-800\/60 {
  background: rgba(99, 102, 241, 0.06) !important;
  color: #0b1220 !important;
  border: 1px solid rgba(99, 102, 241, 0.12);
}

.light-theme .border-purple-400\/30 {
  border-color: rgba(99, 102, 241, 0.25) !important;
}

.light-theme .bg-purple-600\/15 {
  background: rgba(99, 102, 241, 0.06) !important;
}

/* Hero Section - Light Theme */
.light-theme #home {
  background: linear-gradient(180deg, #fefeff 0%, #eaf3ff 100%) !important;
  color: #0b1220;
}

.light-theme #home .hero-gradient {
  opacity: 1;
  background: radial-gradient(1200px circle at 15% 0%, rgba(255, 230, 200, 0.4), transparent 50%) !important;
  mix-blend-mode: screen;
}

.light-theme #home .hero-base {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(228, 237, 255, 0.8)) !important;
}

.light-theme #home .hero-veil {
  background: radial-gradient(circle at 80% 20%, rgba(168, 216, 255, 0.25), transparent 45%), radial-gradient(circle at 10% 80%, rgba(255, 200, 230, 0.12), transparent 50%) !important;
}

.light-theme #home .hero-orbs div {
  background: radial-gradient(circle, rgba(255, 255, 255, 0.7) 0%, rgba(199, 210, 254, 0.4) 60%, transparent 100%) !important;
  filter: blur(50px);
  opacity: 0.8;
}

.light-theme #home .hero-grid {
  opacity: 0.35;
  background-image: linear-gradient(rgba(15, 23, 42, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 23, 42, 0.08) 1px, transparent 1px);
}

.light-theme #home .hero-pill {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(99, 102, 241, 0.25);
  color: #475569 !important;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
}

.light-theme #home .hero-pill .bg-green-400 {
  background-color: #16a34a !important;
}

.light-theme #home .hero-title {
  color: #0b1220 !important;
}

/* Global fix for all gradient text in light theme - removes box highlight but preserves gradient */
.light-theme .bg-gradient-to-r.text-transparent.bg-clip-text,
.light-theme span.bg-gradient-to-r.bg-clip-text {
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  display: inline !important;
}

/* Hero section gradient text - specific colors for light theme */
.light-theme #home .hero-title .bg-gradient-to-r {
  background: linear-gradient(90deg, #ff6cab, #7366ff) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.light-theme #home .hero-copy {
  color: #475569 !important;
}

.light-theme #home .hero-primary-cta {
  background: linear-gradient(120deg, #f97316, #eab308) !important;
  background-image: linear-gradient(120deg, #fde047, #f97316) !important;
  color: #000000 !important;
  box-shadow: 0 15px 40px rgba(249, 115, 22, 0.5) !important;
  border: none !important;
}

.light-theme #home .hero-primary-cta span.absolute.inset-0.bg-white\/20 {
  background: rgba(255, 255, 255, 0.2) !important;
}

.light-theme #home .hero-primary-cta .absolute {
  background: linear-gradient(120deg, rgba(253, 224, 71, 0.65), rgba(249, 115, 22, 0)) !important;
}

.light-theme #home .hero-primary-cta span svg {
  color: #000000 !important;
}

.light-theme #home .hero-secondary-cta {
  border-color: rgba(15, 23, 42, 0.2);
  color: #0b1220 !important;
  background: rgba(255, 255, 255, 0.7);
}

.light-theme #home .hero-secondary-cta svg {
  color: #0b1220;
}

.light-theme #home .hero-secondary-cta:hover {
  background: rgba(114, 138, 255, 0.15);
  border-color: rgba(114, 138, 255, 0.5);
}

.light-theme #home .group.inline-flex span {
  color: #0b1220;
}

.light-theme #home a,
.light-theme .nav-link,
.light-theme p {
  color: #1f2a37;
}

.light-theme .bg-gradient-to-br {
  opacity: 0.7;
}

.light-theme .card-shadow {
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}

/* Dark Hero Section Enhancements */
body:not(.light-theme) #home .group p-2\.5 {
  background: rgba(18, 18, 26, 0.8);
  border: 1px solid rgba(147, 51, 234, 0.25);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 20px rgba(147, 51, 234, 0.1);
  transition: all 0.2s ease;
}

body:not(.light-theme) #home .group p-2\.5:hover {
  background: rgba(147, 51, 234, 0.15);
  border-color: rgba(147, 51, 234, 0.5);
  box-shadow: 0 12px 32px rgba(155, 92, 255, 0.3), 0 0 30px rgba(147, 51, 234, 0.2);
  transform: scale(1.1);
}

/* Light Theme - Skills Section Icon Styling */
/* Frontend (Purple) */
.light-theme #skills .icon-frontend {
  background: rgba(255, 255, 255, 0.95) !important;
  background-image: none !important;
  border: 1px solid rgba(147, 51, 234, 0.15);
  box-shadow: 0 8px 25px rgba(147, 51, 234, 0.15), 0 0 0 1px rgba(147, 51, 234, 0.08);
}

/* Backend (Cyan) */
.light-theme #skills .icon-backend {
  background: rgba(255, 255, 255, 0.95) !important;
  background-image: none !important;
  border: 1px solid rgba(6, 182, 212, 0.15);
  box-shadow: 0 8px 25px rgba(6, 182, 212, 0.15), 0 0 0 1px rgba(6, 182, 212, 0.08);
}

/* Databases (Blue) */
.light-theme #skills .icon-db {
  background: rgba(255, 255, 255, 0.95) !important;
  background-image: none !important;
  border: 1px solid rgba(59, 130, 246, 0.15);
  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.15), 0 0 0 1px rgba(59, 130, 246, 0.08);
}

.light-theme #skills .icon-frontend svg {
  color: #7c3aed !important;
}

.light-theme #skills .icon-backend svg {
  color: #0891b2 !important;
}

.light-theme #skills .icon-db svg {
  color: #2563eb !important;
}

/* Light Theme - About Section Icon Styling */
/* My Story icon (Purple to Cyan gradient) */
.light-theme #about .w-8.h-8.bg-gradient-to-r.from-purple-600.to-cyan-600 {
  background: rgba(255, 255, 255, 0.95) !important;
  background-image: none !important;
  border: 1px solid rgba(147, 51, 234, 0.15);
  box-shadow: 0 4px 12px rgba(147, 51, 234, 0.12);
}

.light-theme #about .w-8.h-8.bg-gradient-to-r.from-purple-600.to-cyan-600 svg {
  color: #7c3aed !important;
}

/* Core Expertise icon (Cyan to Blue gradient) */
.light-theme #about .w-8.h-8.bg-gradient-to-r.from-cyan-600.to-blue-600 {
  background: rgba(255, 255, 255, 0.95) !important;
  background-image: none !important;
  border: 1px solid rgba(6, 182, 212, 0.15);
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.12);
}

.light-theme #about .w-8.h-8.bg-gradient-to-r.from-cyan-600.to-blue-600 svg {
  color: #0891b2 !important;
}

/* ============================================
   GLOBAL MOBILE OPTIMIZATIONS
   ============================================ */

/* Extra small devices (phones, less than 360px) */
@media (max-width: 360px) {
  body {
    font-size: clamp(13px, 3.5vw, 14px);
  }

  .site-title {
    font-size: clamp(0.8rem, 3vw, 0.875rem) !important;
  }

  .nav-link,
  .mobile-link {
    font-size: clamp(0.8rem, 3vw, 0.875rem);
  }

  /* Hero adjustments for very small screens */
  #home {
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: clamp(4.5rem, 15vw, 5rem);
    padding-bottom: clamp(1.5rem, 5vw, 2rem);
  }

  .hero-pill {
    padding: clamp(0.375rem, 2vw, 0.5rem) clamp(0.75rem, 3vw, 1rem) !important;
    font-size: clamp(0.7rem, 2.5vw, 0.8rem) !important;
  }
}

/* Small phones (360px - 480px) */
@media (min-width: 361px) and (max-width: 480px) {
  #home {
    padding-top: clamp(4.5rem, 12vw, 5.5rem);
    padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
  }
}

/* Medium phones and small tablets (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
  #home {
    padding-top: clamp(5rem, 10vw, 6rem);
    padding-bottom: clamp(2rem, 4vw, 3rem);
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {

  /* Increase tap targets for touch devices */
  .nav-link,
  .mobile-link,
  .cta-btn,
  .theme-btn {
    min-height: 36px;
    min-width: 36px;
  }

  .menu-toggle {
    min-height: 36px;
    min-width: 36px;
  }
}

/* Landscape orientation optimizations */
@media (max-width: 768px) and (orientation: landscape) {

  /* Ensure hero remains fully visible and scrollable on mobile landscape */
  #home {
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;
    padding-top: clamp(5rem, 12vh, 8rem);
    padding-bottom: clamp(2rem, 5vh, 3.5rem);
    overflow: visible;
  }

  /* Compact content for landscape */
  .hero-title {
    font-size: clamp(1.5rem, 4.5vw, 2.5rem) !important;
    line-height: 1.1 !important;
  }

  .hero-copy {
    font-size: clamp(0.75rem, 2vw, 1rem) !important;
    max-width: min(680px, 90vw) !important;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-primary-cta,
  .hero-secondary-cta {
    padding: clamp(0.5rem, 1.5vh, 0.75rem) clamp(1.5rem, 4vw, 2.5rem) !important;
    font-size: clamp(0.8rem, 1.5vw, 0.95rem) !important;
  }

  .hero-orbs div {
    opacity: 0.2 !important;
  }

  .space-y-4,
  .space-y-6,
  .space-y-8 {
    gap: clamp(0.75rem, 2vh, 1.5rem) !important;
  }
}

/* Extremely small vertical space (e.g., phone landscape with browser chrome) */
@media (max-height: 480px) and (orientation: landscape) {
  #home {
    height: auto;
    min-height: 120dvh;
    padding-top: clamp(4rem, 15vh, 6.5rem);
    padding-bottom: clamp(2rem, 8vh, 4.5rem);
  }

  .hero-title {
    font-size: clamp(1.25rem, 5vw, 2rem) !important;
    line-height: 1.05 !important;
  }

  .hero-copy {
    font-size: clamp(0.7rem, 1.8vw, 0.9rem) !important;
    line-height: 1.4 !important;
  }

  .hero-primary-cta,
  .hero-secondary-cta {
    padding: clamp(0.4rem, 1.2vh, 0.65rem) clamp(1.25rem, 3.5vw, 2rem) !important;
    font-size: clamp(0.75rem, 1.5vw, 0.875rem) !important;
  }

  .hero-pill {
    padding: clamp(0.375rem, 1vh, 0.5rem) clamp(0.75rem, 2vw, 1rem) !important;
    font-size: clamp(0.7rem, 1.5vw, 0.8rem) !important;
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .hero-orbs div,
  .animate-pulse,
  .animate-highlight-glow,
  .animate-highlight-pulse {
    animation: none !important;
  }
}

/* Print styles */
@media print {

  .site-header,
  .mobile-menu,
  .cta-btn,
  .form-submit {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }
}

/* Desktop Compact Header */
@media (min-width: 1024px) {
  .nav-row {
    min-height: clamp(56px, 6vh, 60px);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .logo-mark {
    width: clamp(36px, 3.5vw, 40px);
    height: clamp(36px, 3.5vw, 40px);
  }

  .site-title {
    font-size: clamp(0.9rem, 1.2vw, 1rem);
  }

  .nav-center .nav-link,
  .nav-right .nav-link {
    padding: clamp(0.25rem, 0.5vw, 0.375rem) clamp(0.75rem, 1.5vw, 1rem);
    font-size: clamp(0.875rem, 1vw, 0.95rem);
  }

  .cta-btn {
    padding: clamp(0.5rem, 1vw, 0.625rem) clamp(1.25rem, 2vw, 1.5rem);
    font-size: clamp(0.875rem, 1vw, 0.95rem);
  }

  #home {
    padding-top: clamp(5rem, 8vh, 6rem);
    padding-bottom: clamp(2rem, 4vh, 3rem);
  }
}

/* Large desktops (1440px+) */
@media (min-width: 1440px) {
  #home {
    padding-top: clamp(6rem, 10vh, 8rem);
    padding-bottom: clamp(3rem, 5vh, 4rem);
  }
}

/* Tech stack badge text shadow in dark mode */
.dark .projects-section span[class*="dark:text-"] {
  text-shadow: 0 0 0 rgba(255, 255, 255, 0.8);
}

/* Carousel styles */
.carousel {
  overflow: hidden;
  width: 100%;
}

.animate-right-to-left {
  animation: scroll-right-to-left 30s linear infinite;
}

.animate-left-to-right {
  animation: scroll-left-to-right 30s linear infinite;
}

@keyframes scroll-right-to-left {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@keyframes scroll-left-to-right {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

/* Experience & Education Panel Transitions */
.experience-panel-container,
.education-panel-container {
  position: relative;
  overflow: hidden;
}

.experience-panel,
.education-panel {
  display: none;
  opacity: 0;
  transform: translateY(15px);
}

/* Panel animation removed */
.experience-panel.active,
.education-panel.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* =========================================
   LIGHT THEME SPECIFIC STYLES
   ========================================= */

/* --- Navigation in Light Theme --- */
body.light-theme .site-header {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.9));
  border-bottom: 1px solid rgba(147, 51, 234, 0.1);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

body.light-theme .nav-link {
  color: #475569;
}

body.light-theme .nav-link:hover {
  color: #9333ea;
}

body.light-theme .mobile-menu {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
}

/* --- Section Backgrounds in Light Theme --- */
body.light-theme .bg-gray-950,
body.light-theme section {
  background: var(--bg-primary) !important;
}

body.light-theme .projects-section,
body.light-theme .skills-section,
body.light-theme .contact-section {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
}

/* --- Text Colors in Light Theme --- */
body.light-theme .text-white {
  color: var(--text-primary) !important;
}

body.light-theme .text-gray-200,
body.light-theme .text-gray-300,
body.light-theme .text-gray-400 {
  color: var(--text-secondary) !important;
}

body.light-theme .text-gray-500 {
  color: var(--text-muted) !important;
}

/* --- Cards and Surfaces in Light Theme --- */
body.light-theme .bg-white\/5,
body.light-theme .bg-white\/10 {
  background: rgba(147, 51, 234, 0.03) !important;
}

body.light-theme .backdrop-blur-sm {
  background: rgba(255, 255, 255, 0.7) !important;
}

body.light-theme [class*="border-purple-500\/"],
body.light-theme [class*="border-cyan-500\/"],
body.light-theme [class*="border-blue-500\/"] {
  border-color: rgba(147, 51, 234, 0.15) !important;
}

/* --- Project Cards in Light Theme --- */
body.light-theme .projects-section .group {
  background: rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(147, 51, 234, 0.12) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}

body.light-theme .projects-section .group:hover {
  border-color: rgba(147, 51, 234, 0.3) !important;
  box-shadow: 0 8px 32px rgba(147, 51, 234, 0.12);
}

/* --- Skill Cards in Light Theme --- */
body.light-theme .skills-section .group {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(147, 51, 234, 0.1) !important;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04);
}

body.light-theme .skills-section .group:hover {
  background: rgba(255, 255, 255, 1) !important;
  border-color: rgba(147, 51, 234, 0.25) !important;
  box-shadow: 0 4px 24px rgba(147, 51, 234, 0.1);
}

/* Skill icon backgrounds in light theme */
body.light-theme .skills-section [class*="bg-gray-100"],
body.light-theme .skills-section [class*="bg-gray-800"] {
  background: rgba(147, 51, 234, 0.08) !important;
}

/* --- Contact Section in Light Theme --- */
body.light-theme .contact-section .group {
  background: rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(147, 51, 234, 0.1) !important;
}

body.light-theme .contact-section .group:hover {
  background: rgba(255, 255, 255, 1) !important;
  border-color: rgba(147, 51, 234, 0.25) !important;
}

/* Contact overlay specific icon overrides */
/* High specificity needed to override global gradient rule */
body.light-theme .contact-section .contact-icon-box.bg-gradient-to-r.from-purple-600.to-cyan-600 {
  background: #ffffff !important;
  border: 1px solid rgba(147, 51, 234, 0.15) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Profile glow preservation in light mode */
.light-theme .profile-glow {
  background: linear-gradient(to right, #9333ea, #0891b2) !important;
  opacity: 0.6 !important;
}

body.light-theme .contact-section .contact-icon-svg {
  color: #7c3aed !important;
}

/* Contact button specific overrides */
.contact-submit-btn {
  background: linear-gradient(to right, #9333ea, #0891b2);
}

.contact-submit-btn:hover {
  background: linear-gradient(to right, #a855f7, #06b6d4);
}

body.light-theme .contact-submit-btn {
  background: #ffffff !important;
  color: #7c3aed !important;
  /* Purple to match theme */
  border: 1px solid rgba(124, 58, 237, 0.3) !important;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.1) !important;
}

body.light-theme .contact-submit-btn:hover {
  background: #fdf4ff !important;
  /* Very light purple on hover */
  border-color: #7c3aed !important;
  box-shadow: 0 6px 16px rgba(124, 58, 237, 0.2) !important;
}

/* Form inputs in light theme */
body.light-theme input,
body.light-theme textarea {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(147, 51, 234, 0.15) !important;
  color: var(--text-primary) !important;
}

body.light-theme input::placeholder,
body.light-theme textarea::placeholder {
  color: var(--text-muted) !important;
}

body.light-theme input:focus,
body.light-theme textarea:focus {
  border-color: rgba(147, 51, 234, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1) !important;
}

/* Form container in light theme */
body.light-theme .contact-section .rounded-2xl {
  background: rgba(255, 255, 255, 0.9) !important;
}

/* --- Carousel/Tags in Light Theme --- */
body.light-theme .carousel span,
body.light-theme [class^="bg-purple-500/10"],
body.light-theme [class*=" bg-purple-500/10"] {
  background-color: rgba(147, 51, 234, 0.1) !important;
  color: #7c3aed !important;
  border-color: rgba(147, 51, 234, 0.2) !important;
}

body.light-theme [class^="text-purple-300"],
body.light-theme [class*=" text-purple-300"] {
  color: #7c3aed !important;
}

body.light-theme [class^="bg-cyan-500/10"],
body.light-theme [class*=" bg-cyan-500/10"] {
  background-color: rgba(6, 182, 212, 0.12) !important;
  color: #0891b2 !important;
  border-color: rgba(6, 182, 212, 0.25) !important;
}

body.light-theme [class^="text-cyan-300"],
body.light-theme [class*=" text-cyan-300"] {
  color: #0891b2 !important;
}

body.light-theme [class^="bg-blue-500/10"],
body.light-theme [class*=" bg-blue-500/10"] {
  background-color: rgba(59, 130, 246, 0.12) !important;
  color: #2563eb !important;
  border-color: rgba(59, 130, 246, 0.25) !important;
}

body.light-theme [class^="text-blue-300"],
body.light-theme [class*=" text-blue-300"] {
  color: #2563eb !important;
}

body.light-theme [class^="bg-green-500/10"],
body.light-theme [class*=" bg-green-500/10"] {
  background-color: rgba(34, 197, 94, 0.12) !important;
  color: #16a34a !important;
  border-color: rgba(34, 197, 94, 0.25) !important;
}

body.light-theme [class^="text-green-300"],
body.light-theme [class*=" text-green-300"] {
  color: #16a34a !important;
}

/* Category Badges (Full-time, Remote, etc) in Light Theme */
body.light-theme [class^="bg-purple-500/20"],
body.light-theme [class*=" bg-purple-500/20"] {
  background-color: rgba(147, 51, 234, 0.15) !important;
  color: #6b21a8 !important; /* Deeper purple for smaller text */
  border-color: rgba(147, 51, 234, 0.3) !important;
}

body.light-theme [class^="bg-cyan-500/20"],
body.light-theme [class*=" bg-cyan-500/20"] {
  background-color: rgba(6, 182, 212, 0.15) !important;
  color: #0e7490 !important;
  border-color: rgba(6, 182, 212, 0.3) !important;
}

body.light-theme [class^="bg-blue-500/20"],
body.light-theme [class*=" bg-blue-500/20"] {
  background-color: rgba(59, 130, 246, 0.15) !important;
  color: #1d4ed8 !important;
  border-color: rgba(59, 130, 246, 0.3) !important;
}

/* --- Footer in Light Theme --- */
body.light-theme footer {
  background: linear-gradient(to right, #f1f5f9, #ffffff, #f1f5f9) !important;
  border-top-color: rgba(147, 51, 234, 0.1) !important;
}

body.light-theme footer p {
  color: var(--text-secondary) !important;
}

/* --- Social Icons in Light Theme --- */
body.light-theme [class*="bg-gray-800\/"] {
  background: rgba(147, 51, 234, 0.08) !important;
}

body.light-theme .text-gray-400:hover {
  color: #9333ea !important;
}

/* --- Gradient (text-only clip) --- */
/* Keep gradient colors vibrant in light theme for text that uses bg-clip-text */
body.light-theme .bg-gradient-to-r.from-purple-600.to-cyan-600.text-transparent.bg-clip-text {
  background: linear-gradient(to right, #7c3aed, #0891b2) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
}

/* --- Gradient (background for non-text elements) --- */
/* Ensure non-text elements (bars, icons, buttons) keep the gradient background */
body.light-theme .bg-gradient-to-r.from-purple-600.to-cyan-600:not(.text-transparent) {
  background: linear-gradient(to right, #7c3aed, #0891b2) !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
}

/* --- Hero Grid Pattern in Light Theme --- */
body.light-theme .hero-grid {
  opacity: 0.4;
}

/* --- Experience/Education Sections in Light Theme --- */
body.light-theme .experience-section,
body.light-theme .education-section {
  background: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%) !important;
}

body.light-theme .experience-section .bg-white\/5,
body.light-theme .experience-section .bg-white\/10,
body.light-theme .education-section .bg-white\/5,
body.light-theme .education-section .bg-white\/10 {
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

/* --- Buttons in Light Theme --- */
/* --- Buttons in Light Theme --- */
body.light-theme .hero-primary-cta {
  background: linear-gradient(to right, #f97316 0%, #eab308 100%) !important;
  /* Orange-500 to Yellow-500 */
  color: #000000 !important;
  box-shadow: 0 4px 16px rgba(249, 115, 22, 0.4) !important;
  border: none !important;
}

body.light-theme .hero-primary-cta:hover {
  background: linear-gradient(to right, #fde047 0%, #f97316 100%) !important;
  /* Yellow-300 to Orange-500 */
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.5) !important;
}

body.light-theme .hero-primary-cta .absolute.inset-0.bg-white\/20 {
  background: rgba(255, 255, 255, 0.2) !important;
}

/* Maintain other buttons style if they used the purple gradient class, but target specifically not the hero CTA if needed, or leave as is if this only applies to hero button */
body.light-theme .bg-gradient-to-r.from-purple-600:not(.hero-primary-cta) {
  box-shadow: 0 4px 16px rgba(147, 51, 234, 0.3);
}

body.light-theme .bg-gradient-to-r.from-purple-600:not(.hero-primary-cta):hover {
  box-shadow: 0 6px 20px rgba(147, 51, 234, 0.4);
}

/* Sticky Stack Projects */
.sticky-stack-container {
  position: relative;
  /* Min height to allow scrolling through cards */
  min-height: 100vh;
}

.sticky-card-wrapper {
  /* This wrapper handles the sticky positioning */
  /* Height is set inline or via utility class, but let's ensure it's responsive */
  width: 100%;
  transform-origin: center top;
  transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}

.sticky-card {
  /* The card design itself */
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
  /* Shadow upward to separate from card behind */
  transition: transform 0.5s ease;
}

/* Light theme for sticky stack */
.light-theme .sticky-card {
  background: #ffffff !important;
  border-color: rgba(147, 51, 234, 0.1) !important;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.05) !important;
}

.light-theme .sticky-card-wrapper img {
  opacity: 0.9;
}

.light-theme .sticky-card .text-white {
  color: #0b1220 !important;
}

.light-theme .sticky-card .text-gray-400 {
  color: #64748b !important;
}

.light-theme .sticky-card .bg-white\/5 {
  background: rgba(147, 51, 234, 0.05) !important;
  color: #475569 !important;
}

.light-theme .sticky-card .bg-gray-900\/50 {
  background: linear-gradient(to left, #f8fafc, transparent) !important;
}

.light-theme .sticky-card .bg-gradient-to-l {
  background-image: linear-gradient(to left, #ffffff, transparent) !important;
}

/* Hexagonal Projects Grid */
.hex-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  justify-items: center;
  max-width: 1200px;
  margin: 0 auto;
}

.hex-card {
  position: relative;
  width: 280px;
  height: 320px;
  margin: 1rem 0;
}

.hex-inner {
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.5s ease;
}

.hex-inner:hover {
  transform: scale(1.05) rotate(2deg);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.hex-content {
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
}

.hex-image {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hex-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.hex-card:hover .hex-image img {
  transform: scale(1.1);
}

.hex-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.5s ease;
  padding: 1rem;
}

.hex-card:hover .hex-overlay {
  opacity: 1;
}

.overlay-content {
  text-align: center;
  color: white;
  transform: translateY(20px);
  transition: transform 0.5s ease;
}

.hex-card:hover .overlay-content {
  transform: translateY(0);
}

.category-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 1rem;
  border: 1px solid;
  font-size: 0.75rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
}

.tech-stack {
  justify-content: center;
  margin-bottom: 0.625rem;
}

.tech-tag {
  background: rgba(255, 255, 255, 0.1);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.view-project-btn {
  display: inline-block;
  color: white;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  margin-top: 0.5rem;
}

.view-project-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Light theme overrides for hex grid */
.light-theme .hex-inner {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(147, 51, 234, 0.2);
}

.light-theme .hex-overlay {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.6) 100%);
}

.light-theme .overlay-content {
  color: #0b1220;
}

.light-theme .tech-tag {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  color: #475569;
}

.light-theme .view-project-btn {
  color: #0b1220;
  border-color: rgba(0, 0, 0, 0.2);
}

.light-theme .view-project-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.3);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hex-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .hex-card {
    width: 250px;
    height: 280px;
  }

  .overlay-content h3 {
    font-size: 1rem;
  }

  .overlay-content p {
    font-size: 0.75rem;
  }
}

/* New Project Cards Layout - Mobile First */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.project-card {
  background: linear-gradient(135deg, rgba(15, 15, 18, 0.95) 0%, rgba(20, 20, 28, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.5rem;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.3s ease;
  transform-origin: top center;
  will-change: transform;
  height: auto;
  min-height: clamp(380px, 48vw + 100px, 440px);
  position: relative;
  backdrop-filter: blur(10px);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(255, 255, 255, 0.05);
}

.project-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(147, 51, 234, 0.6), transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.project-card:hover::before {
  opacity: 1;
}

.project-card:hover,
.project-card:active,
.project-card.active {
  border-color: rgba(147, 51, 234, 0.4);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.3),
    0 0 0 1px rgba(147, 51, 234, 0.2),
    0 0 30px rgba(147, 51, 234, 0.1);
  transform: translateY(-8px) scale(1.01);
}

.card-content {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
}

.card-text {
  position: absolute;
  inset: 0;
  padding: clamp(1rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  z-index: 1;
  opacity: 0;
  transform: translateY(20px);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease;
}

.project-card:hover .card-text,
.project-card:active .card-text,
.project-card.active .card-text {
  opacity: 1;
  transform: translateY(0);
}

.category-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  border: 1px solid;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.card-text h3 {
  font-size: clamp(1.5rem, 3vw + 0.5rem, 2rem);
  font-weight: 700;
  line-height: 1.3;
  color: #ffffff;
  padding-bottom: 0.1em;
}

.card-text p {
  font-size: clamp(0.75rem, 1.4vw + 0.18rem, 0.9rem);
  line-height: 1.4;
  margin-bottom: clamp(0.5rem, 1.2vw, 0.75rem);
  color: rgba(255, 255, 255, 0.85);
}

.project-meta {
  font-size: clamp(0.65rem, 1.2vw + 0.1rem, 0.75rem);
  color: rgba(255, 255, 255, 0.6);
  padding: clamp(0.2rem, 0.6vw, 0.3rem) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  margin-bottom: clamp(0.3rem, 0.8vw, 0.5rem);
}

.project-features {
  margin-bottom: clamp(0.875rem, 1.8vw, 1.25rem);
}

.feature-item {
  display: flex;
  align-items: center;
  gap: clamp(0.375rem, 0.8vw, 0.5rem);
  font-size: clamp(0.75rem, 1.4vw + 0.15rem, 0.85rem);
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: clamp(0.25rem, 0.6vw, 0.375rem);
  transition: all 0.2s ease;
}

.feature-item:hover {
  color: rgba(255, 255, 255, 0.9);
  transform: translateX(1px);
}

.tech-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(0.875rem, 1.8vw, 1.25rem);
}

.tech-tag {
  background: rgba(255, 255, 255, 0.08);
  padding: clamp(0.375rem, 1vw, 0.5rem) clamp(0.75rem, 1.8vw, 0.875rem);
  border-radius: 1rem;
  font-size: clamp(0.75rem, 1.4vw + 0.15rem, 0.85rem);
  font-weight: 500;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  transition: all 0.2s ease;
}

.tech-tag:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-1px);
}

.view-project-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.9);
  text-decoration: none;
  font-weight: 600;
  font-size: clamp(0.8rem, 1.5vw + 0.2rem, 0.9rem);
  padding: clamp(0.625rem, 1.5vw, 0.75rem) clamp(1.25rem, 3vw, 1.5rem);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 2rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  flex: 1;
  justify-content: center;
  min-width: 0;
  pointer-events: auto;
}

.view-project-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.card-image {
  position: absolute;
  inset: 0;
  opacity: 1;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
}

.project-card:hover .card-image,
.project-card:active .card-image,
.project-card.active .card-image {
  opacity: 0;
  transform: scale(0.98);
  pointer-events: none;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center center;
  backface-visibility: hidden;
}

/* Mobile-first responsive */
@media (max-width: 768px) {
  .projects-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .project-card {
    height: auto;
    min-height: 340px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .card-text h3 {
    font-size: clamp(1.375rem, 3.2vw + 0.5rem, 1.875rem);
  }

  .card-text p {
    font-size: clamp(0.875rem, 1.8vw + 0.25rem, 1rem);
    line-height: 1.5;
  }

  .category-badge {
    font-size: clamp(0.75rem, 1.5vw + 0.2rem, 0.85rem);
  }

  .tech-tag {
    font-size: clamp(0.8rem, 1.6vw + 0.2rem, 0.9rem);
    padding: 0.4rem 0.8rem;
  }

  .feature-item {
    font-size: clamp(0.8rem, 1.6vw + 0.2rem, 0.9rem);
  }

  .view-project-btn {
    font-size: clamp(0.85rem, 1.7vw + 0.25rem, 0.95rem);
    padding: 0.65rem 1.35rem;
  }

  .project-card:hover,
  .project-card:active,
  .project-card.active {
    transform: translateY(-4px) scale(1.01);
  }

  /* Make cards toggleable on touch devices */
  @media (hover: none) {
    .project-card {
      transition: all 0.3s ease;
    }

    .project-card.active .card-text {
      opacity: 1;
      transform: translateY(0);
    }

    .project-card.active .card-image {
      opacity: 0;
    }
  }
}

@media (max-width: 480px) {
  .project-card {
    height: auto;
    min-height: 290px;
    cursor: pointer;
  }

  .card-text {
    padding: 0.875rem 1rem;
  }

  .card-text h3 {
    font-size: 1.15rem;
    margin-bottom: 0.35rem;
  }

  .card-text p {
    font-size: 0.775rem;
    line-height: 1.35;
    margin-bottom: 0.4rem;
  }

  .category-badge {
    font-size: 0.65rem;
    padding: 0.2rem 0.6rem;
    margin-bottom: 0.4rem;
  }

  .tech-stack {
    gap: 0.3rem;
    margin-bottom: 0.5rem;
  }

  .tech-tag {
    font-size: 0.65rem;
    padding: 0.2rem 0.5rem;
  }

  .project-features {
    margin-bottom: 0.5rem;
  }

  .feature-item {
    font-size: 0.725rem;
    gap: 0.25rem;
    margin-bottom: 0.15rem;
  }

  .view-project-btn {
    font-size: 0.775rem;
    padding: 0.45rem 0.85rem;
    margin-top: 0.2rem;
  }
}

/* Web View Enhancements - Desktop */
@media (min-width: 769px) {
  .projects-grid {
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 2.5rem;
  }

  .project-card {
    height: auto;
    min-height: clamp(480px, 28vw + 180px, 550px);
    cursor: pointer;
  }

  .card-text h3 {
    font-size: clamp(1.25rem, 2.5vw + 0.4rem, 1.625rem);
    margin-bottom: 0.625rem;
  }

  .card-text p {
    font-size: clamp(0.8rem, 1.4vw + 0.18rem, 0.9rem);
    line-height: 1.45;
    margin-bottom: 0.875rem;
  }

  .category-badge {
    font-size: 0.75rem;
    padding: 0.4rem 0.875rem;
    margin-bottom: 0.75rem;
  }

  .tech-tag {
    font-size: 0.8rem;
    padding: 0.375rem 0.75rem;
  }

  .feature-item {
    font-size: 0.8rem;
    margin-bottom: 0.3rem;
  }

  .view-project-btn {
    font-size: 0.85rem;
    padding: 0.625rem 1.25rem;
  }

  .project-card:hover {
    transform: translateY(-12px) scale(1.02) rotateX(1deg);
    box-shadow:
      0 25px 50px rgba(0, 0, 0, 0.4),
      0 0 0 1px rgba(147, 51, 234, 0.3),
      0 0 40px rgba(147, 51, 234, 0.15),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }

  .project-features {
    margin-bottom: 0.875rem;
  }

  .feature-item:hover {
    transform: translateX(2px);
  }

  .tech-stack {
    gap: 0.5rem;
    margin-bottom: 0.875rem;
  }

  .tech-tag:hover {
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  .view-project-btn {
    margin-top: auto;
  }

  .view-project-btn:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  }

  .project-card:hover .card-text {
    transform: translateY(-15px);
  }

  .project-card:hover .card-image {
    opacity: 0;
    transform: scale(0.98);
  }

  .project-card:hover .card-image img {
    transform: scale(1.08) rotate(1deg);
  }

  /* Add floating particles effect on hover */
  .project-card::after {
    content: '';
    position: absolute;
    top: 20px;
    right: 20px;
    width: 6px;
    height: 6px;
    background: rgba(147, 51, 234, 0.6);
    border-radius: 50%;
    opacity: 0;
    animation: float 3s ease-in-out infinite;
    transition: opacity 0.4s ease;
  }

  .project-card:hover::after {
    opacity: 1;
  }

  .project-card::before {
    content: '';
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 4px;
    height: 4px;
    background: rgba(6, 182, 212, 0.6);
    border-radius: 50%;
    opacity: 0;
    animation: float 4s ease-in-out infinite reverse;
    transition: opacity 0.4s ease;
  }

  .project-card:hover::before {
    opacity: 1;
  }
}

@media (min-width: 1200px) {
  .projects-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
  }

  .project-card {
    height: auto;
    min-height: clamp(460px, 25vw + 180px, 520px);
  }

  .card-text h3 {
    font-size: 1.5rem;
  }

  .card-text p {
    font-size: 0.875rem;
    line-height: 1.45;
  }
}

/* Floating animation for decorative elements */
@keyframes float {

  0%,
  100% {
    transform: translateY(0px) scale(1);
    opacity: 0.6;
  }

  50% {
    transform: translateY(-10px) scale(1.2);
    opacity: 1;
  }
}

/* ========================================
   Hero Glyphs Random Floating Animation
   ======================================== */

/* Glyphs are animated via JavaScript for truly random movement */
.hero-glyphs svg {
  transition: opacity 0.3s ease;
  will-change: transform;
}

/* Light theme adjustments for hero glyphs - improved visibility */
.light-theme .hero-glyphs svg {
  opacity: 0.7;
  filter: saturate(1.5) brightness(0.85);
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .hero-glyphs svg {
    transform: none !important;
  }
}

/* Light theme overrides for project cards */
.light-theme .project-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.05),
    0 0 0 1px rgba(0, 0, 0, 0.03);
}

.light-theme .project-card::before {
  background: linear-gradient(90deg, transparent, rgba(147, 51, 234, 0.4), transparent);
}

.light-theme .project-card:hover {
  border-color: rgba(147, 51, 234, 0.3);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(147, 51, 234, 0.15),
    0 0 30px rgba(147, 51, 234, 0.08);
}

.light-theme .card-text h3 {
  background: linear-gradient(135deg, #0b1220 0%, #334155 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.light-theme .card-text p {
  color: rgba(15, 23, 42, 0.8);
}

.light-theme .category-badge.text-purple-300 {
  color: #7e22ce !important; /* purple-700 */
  background-color: rgba(126, 34, 206, 0.1) !important;
  border-color: rgba(126, 34, 206, 0.2) !important;
}

.light-theme .category-badge.text-cyan-300 {
  color: #0e7490 !important; /* cyan-700 */
  background-color: rgba(14, 116, 144, 0.1) !important;
  border-color: rgba(14, 116, 144, 0.2) !important;
}

.light-theme .category-badge.text-pink-300 {
  color: #be185d !important; /* pink-700 */
  background-color: rgba(190, 24, 93, 0.1) !important;
  border-color: rgba(190, 24, 93, 0.2) !important;
}

.light-theme .tech-tag {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(15, 23, 42, 0.8);
}

.light-theme .tech-tag:hover {
  background: rgba(0, 0, 0, 0.08);
}

.light-theme .view-project-btn {
  color: rgba(15, 23, 42, 0.9);
  border-color: rgba(0, 0, 0, 0.15);
}

.light-theme .view-project-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.25);
}

/* Light theme overrides for project cards */
.light-theme .project-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.05),
    0 0 0 1px rgba(0, 0, 0, 0.03);
}

.light-theme .project-card::before {
  background: linear-gradient(90deg, transparent, rgba(147, 51, 234, 0.4), transparent);
}

.light-theme .project-card:hover {
  border-color: rgba(147, 51, 234, 0.3);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(147, 51, 234, 0.15),
    0 0 30px rgba(147, 51, 234, 0.08);
}

.light-theme .card-text h3 {
  background: linear-gradient(135deg, #0b1220 0%, #334155 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.light-theme .card-text p {
  color: rgba(15, 23, 42, 0.8);
}

.light-theme .tech-tag {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(15, 23, 42, 0.8);
}

.light-theme .tech-tag:hover {
  background: rgba(0, 0, 0, 0.08);
}

.light-theme .view-project-btn {
  color: rgba(15, 23, 42, 0.9);
  border-color: rgba(0, 0, 0, 0.15);
}

.light-theme .view-project-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.25);
}

/* ========================================
   Profile Card 3D Flip Animation (540° Enhanced)
   ======================================== */

/* Profile card 3D flip animation */
.profile-card-container {
  perspective: 1200px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.profile-card {
  transform-style: preserve-3d;
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
  transform: rotateY(0deg);
}

.profile-card-container:hover .profile-card,
.profile-card.flipped {
  transform: rotateY(540deg);
}

/* Profile picture enhancements */
.profile-card-front .relative.mb-6 {
  margin-bottom: 2.5rem;
}

.profile-card-front img.lazy-img,
.profile-card-back img.lazy-img {
  width: 180px;
  height: 180px;
  object-fit: cover;
  object-position: center 20%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: none !important;
}

.profile-card-front img.lazy-img {
  border: none !important;
}

.profile-card-back img.lazy-img {
  border: none !important;
  margin-bottom: 1.5rem;
}

/* Glow effect enhancement */
.profile-card-front .absolute.inset-0.bg-gradient-to-r {
  display: none !important;
}

@keyframes pulse-glow {

  0%,
  100% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1);
  }

  50% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1.05);
  }
}

/* Hover effect for profile images */
.profile-card:hover .profile-card-front img.lazy-img {
  transform: scale(1.05);
  box-shadow: 0 25px 50px rgba(147, 51, 234, 0.4), 0 0 0 6px rgba(147, 51, 234, 0.2);
}

.profile-card-face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Tap hint styling for profile card */
.tap-hint {
  color: rgba(167, 139, 250, 0.7); /* text-purple-400 */
  z-index: 5;
}

body.light-theme .tap-hint {
  color: rgba(147, 51, 234, 0.8) !important; /* text-purple-600 */
}

/* Stats grid mobile optimization */
@media (max-width: 480px) {
  .profile-card-container+.grid.grid-cols-3 {
    gap: 0.5rem;
    margin-top: 1.5rem;
  }

  .profile-card-container+.grid.grid-cols-3>div {
    padding: 0.75rem 0.25rem;
  }

  .profile-card-container+.grid.grid-cols-3 .text-2xl {
    font-size: 1.25rem;
  }
}

.profile-card-back {
  transform: rotateY(180deg);
}

/* Utility classes for 3D transforms */
.perspective-1000 {
  perspective: 1000px;
}

.transform-style-preserve-3d {
  transform-style: preserve-3d;
}

.backface-hidden {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.rotate-y-180 {
  transform: rotateY(180deg);
}

/* About section enhancements */
.about-section {
  background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-primary) 100%);
}

/* Responsive adjustments for profile card */
@media (max-width: 1279px) {
  .profile-card-container {
    max-width: 320px;
    margin: 0 auto;
  }

  .profile-card {
    width: 100%;
    height: 400px;
  }
}

@media (max-width: 640px) {
  .profile-card-container {
    max-width: 280px;
  }

  .profile-card {
    height: 360px;
  }
}

/* Projects Section Shader Overrides */
.light-theme .project-bg-shader-1 {
  background-color: rgba(147, 51, 234, 0.2) !important;
  opacity: 1 !important;
}

.light-theme .project-bg-shader-2 {
  background-color: rgba(6, 182, 212, 0.2) !important;
  opacity: 1 !important;
}

/* Project Card Hover Glow for Light Theme */
.light-theme .project-card .group-hover\:opacity-100 {
  background: linear-gradient(to right, rgba(147, 51, 234, 0.2), rgba(6, 182, 212, 0.2)) !important;
}

/* Light theme adjustments for profile card */
.light-theme .profile-card-face {
  background: #ffffff !important;
  border-color: rgba(147, 51, 234, 0.15) !important;
  border-radius: 1.5rem !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08) !important;
  backdrop-filter: none !important;
  filter: none !important;
}

.light-theme .profile-card-front .bg-gradient-to-br {
  background: #ffffff !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

.light-theme .profile-card-back .bg-gradient-to-br {
  background: #ffffff !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

.light-theme .profile-card h3,
.light-theme .profile-card p {
  color: var(--text-primary) !important;
}

.light-theme .profile-card .text-purple-300 {
  color: #7c3aed !important;
}

.light-theme .profile-card .text-cyan-300 {
  color: #0891b2 !important;
}

.light-theme .profile-card .text-gray-400 {
  color: var(--text-muted) !important;
}

.gradient-name-animate {
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;
}

@keyframes gradient-shift {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

/* Light theme profile picture adjustments */
.light-theme .profile-card-front img.lazy-img {
  border-color: rgba(147, 51, 234, 0.2);
  box-shadow: 0 8px 16px rgba(147, 51, 234, 0.1), 0 0 0 3px rgba(147, 51, 234, 0.05);
  opacity: 1 !important;
  filter: none !important;
}

.light-theme .profile-card-back img.lazy-img {
  border-color: rgba(6, 182, 212, 0.25);
  box-shadow: 0 8px 16px rgba(6, 182, 212, 0.1), 0 0 0 3px rgba(6, 182, 212, 0.05);
  opacity: 1 !important;
  filter: none !important;
}

.light-theme .profile-card:hover .profile-card-front img.lazy-img {
  box-shadow: 0 25px 50px rgba(147, 51, 234, 0.25), 0 0 0 6px rgba(147, 51, 234, 0.15);
}

.light-theme .profile-card-front .absolute.inset-0.bg-gradient-to-r {
  opacity: 0;
}

/* Experience Section Responsive Design */
@media (max-width: 1024px) {
  .experience-section .grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .experience-section .lg\:grid-cols-\[minmax\(0\,1\.2fr\)_minmax\(0\,1\.8fr\)\] {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .experience-section {
    padding: 2rem 0 !important;
  }

  .experience-section .max-w-7xl {
    padding: 0 1rem;
  }

  .experience-section .text-center.mb-12 {
    margin-bottom: 2rem;
  }

  .experience-section h2 {
    margin-bottom: 1rem;
  }

  /* Timeline adjustments for mobile */
  .experience-section .absolute.left-6 {
    left: 1rem;
  }

  .experience-section .pl-8 {
    padding-left: 2rem;
  }

  .experience-item {
    padding: 0.75rem !important;
    gap: 0.75rem !important;
  }

  .experience-item .text-sm {
    font-size: 0.8rem;
  }

  .experience-item .text-xs {
    font-size: 0.7rem;
  }

  /* Detail panel mobile optimization */
  .experience-panel-container {
    padding: 1rem !important;
  }

  .experience-panel h3 {
    font-size: 1.25rem !important;
  }

  .experience-panel .text-sm {
    font-size: 0.8rem;
  }

  .experience-panel .mb-6 {
    margin-bottom: 1rem;
  }

  .experience-panel .space-y-3 {
    gap: 0.5rem;
  }

  /* Status badges mobile */
  .experience-panel .flex.flex-wrap.gap-2 {
    gap: 0.5rem;
  }

  .experience-panel .rounded-full.px-3.py-1 {
    padding: 0.25rem 0.75rem;
    font-size: 0.65rem;
  }
}

@media (max-width: 480px) {
  .experience-section .grid {
    gap: 1rem;
  }

  .experience-section .rounded-2xl {
    border-radius: 1rem;
  }

  .experience-section .p-6 {
    padding: 1rem !important;
  }

  .experience-item {
    padding: 0.5rem !important;
    gap: 0.5rem !important;
  }

  .experience-item .h-3.w-3 {
    height: 0.625rem;
    width: 0.625rem;
  }

  .experience-panel h3 {
    font-size: 1.125rem !important;
    line-height: 1.3;
  }

  .experience-panel .text-gray-400 {
    font-size: 0.7rem;
  }

  /* Tech stack tags mobile */
  .experience-panel .flex.flex-wrap.gap-2.text-xs span {
    padding: 0.2rem 0.5rem;
    font-size: 0.6rem;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  .experience-item {
    min-height: 44px;
    /* Touch target size */
  }

  .experience-item:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }

  .experience-panel {
    /* Ensure content is easily scrollable on touch devices */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .experience-item {
    border-width: 2px;
  }

  .experience-item.active {
    border-color: #ffffff;
  }

  .experience-panel {
    border-width: 2px;
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {

  .experience-item,
  .experience-panel {
    transition: none;
  }

  .experience-item .h-3.w-3 {
    transition: none;
  }
}

/* Experience Section Enhanced Interactions */
.experience-item {
  position: relative;
  overflow: hidden;
}

.experience-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(147, 51, 234, 0.1), transparent);
  transition: left 0.6s ease;
}

.experience-item:hover::before {
  left: 100%;
}

.experience-item.active {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(147, 51, 234, 0.5) !important;
  box-shadow: 0 4px 20px rgba(147, 51, 234, 0.2);
}

.experience-item.active .h-3.w-3 {
  background: #06b6d4 !important;
  --tw-ring-color: rgba(6, 182, 212, 0.3) !important;
  transform: scale(1.25);
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.4);
}

/* Panel transition improvements */
.experience-panel-container {
  position: relative;
}

.experience-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}

.experience-panel.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  position: relative;
}

/* Loading state for panels */
.experience-panel-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(147, 51, 234, 0.6), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.experience-panel-container.loading::before {
  transform: translateX(100%);
}

/* Achievement bullets animation */
.experience-panel ul li {
  opacity: 0;
  transform: translateX(-10px);
  animation: slideInLeft 0.5s ease forwards;
}

.experience-panel.active ul li:nth-child(1) {
  animation-delay: 0.1s;
}

.experience-panel.active ul li:nth-child(2) {
  animation-delay: 0.2s;
}

.experience-panel.active ul li:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes slideInLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Tech stack tags hover effects */
.experience-panel .rounded-full {
  transition: all 0.3s ease;
  cursor: default;
}

.experience-panel .rounded-full:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Status badges enhanced styling */
.experience-panel .flex.flex-wrap.items-center.gap-2 span {
  position: relative;
  overflow: hidden;
}

.experience-panel .flex.flex-wrap.items-center.gap-2 span::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.experience-panel .flex.flex-wrap.items-center.gap-2 span:hover::before {
  left: 100%;
}

/* Focus states for accessibility */
.experience-item:focus {
  outline: 2px solid rgba(147, 51, 234, 0.8);
  outline-offset: 2px;
}

.experience-item:focus-visible {
  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.3);
}

/* Dark theme specific enhancements */
body:not(.light-theme) .experience-item:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(147, 51, 234, 0.4);
}

/* Light theme specific styles */
body.light-theme .experience-item {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.1);
  color: #1f2937;
}

body.light-theme .experience-item:hover {
  background: rgba(147, 51, 234, 0.08) !important;
  border-color: rgba(147, 51, 234, 0.3);
}

body.light-theme .experience-item.active {
  background: rgba(147, 51, 234, 0.15) !important;
  border-color: rgba(147, 51, 234, 0.5) !important;
}

body.light-theme .experience-panel {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(0, 0, 0, 0.1);
  color: #1f2937;
}

body.light-theme .experience-panel h3 {
  color: #1f2937;
}

body.light-theme .experience-panel .text-gray-300 {
  color: #4b5563 !important;
}

body.light-theme .experience-panel .text-gray-400 {
  color: #6b7280 !important;
}

/* Education Section Responsive Design */
@media (max-width: 1024px) {
  .education-section .grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .education-section .lg\:grid-cols-\[minmax\(0\,1\.2fr\)_minmax\(0\,1\.8fr\)\] {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .education-section {
    padding: 2rem 0 !important;
  }

  .education-section .max-w-7xl {
    padding: 0 1rem;
  }

  .education-section .text-center.mb-12 {
    margin-bottom: 2rem;
  }

  .education-section h2 {
    margin-bottom: 1rem;
  }

  /* Timeline adjustments for mobile */
  .education-section .absolute.left-6 {
    left: 1rem;
  }

  .education-section .pl-8 {
    padding-left: 2rem;
  }

  .education-item {
    padding: 0.75rem !important;
    gap: 0.75rem !important;
  }

  .education-item .text-sm {
    font-size: 0.8rem;
  }

  .education-item .text-xs {
    font-size: 0.7rem;
  }

  /* Detail panel mobile optimization */
  .education-panel-container {
    padding: 1rem !important;
  }

  .education-panel h3 {
    font-size: 1.25rem !important;
  }

  .education-panel .text-sm {
    font-size: 0.8rem;
  }

  .education-panel .mb-6 {
    margin-bottom: 1rem;
  }

  .education-panel .space-y-3 {
    gap: 0.5rem;
  }

  /* Status badges mobile */
  .education-panel .flex.flex-wrap.gap-2 {
    gap: 0.5rem;
  }

  .education-panel .rounded-full.px-3.py-1 {
    padding: 0.25rem 0.75rem;
    font-size: 0.65rem;
  }
}

@media (max-width: 480px) {
  .education-section .grid {
    gap: 1rem;
  }

  .education-section .rounded-2xl {
    border-radius: 1rem;
  }

  .education-section .p-6 {
    padding: 1rem !important;
  }

  .education-item {
    padding: 0.5rem !important;
    gap: 0.5rem !important;
  }

  .education-item .h-3.w-3 {
    height: 0.625rem;
    width: 0.625rem;
  }

  .education-panel h3 {
    font-size: 1.125rem !important;
    line-height: 1.3;
  }

  .education-panel .text-gray-400 {
    font-size: 0.7rem;
  }

  /* Subject tags mobile */
  .education-panel .flex.flex-wrap.gap-2.text-xs span {
    padding: 0.2rem 0.5rem;
    font-size: 0.6rem;
  }
}

/* Touch device optimizations for education */
@media (hover: none) and (pointer: coarse) {
  .education-item {
    min-height: 44px;
    /* Touch target size */
  }

  .education-item:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }

  .education-panel {
    /* Ensure content is easily scrollable on touch devices */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* High contrast mode support for education */
@media (prefers-contrast: high) {
  .education-item {
    border-width: 2px;
  }

  .education-item.active {
    border-color: #ffffff;
  }

  .education-panel {
    border-width: 2px;
  }
}

/* Reduced motion preferences for education */
@media (prefers-reduced-motion: reduce) {

  .education-item,
  .education-panel {
    transition: none;
  }

  .education-item .h-3.w-3 {
    transition: none;
  }
}

/* Education Section Enhanced Interactions */
.education-item {
  position: relative;
  overflow: hidden;
}

.education-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(147, 51, 234, 0.1), transparent);
  transition: left 0.6s ease;
}

.education-item:hover::before {
  left: 100%;
}

.education-item.active {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(147, 51, 234, 0.5) !important;
  box-shadow: 0 4px 20px rgba(147, 51, 234, 0.2);
}

.education-item.active .h-3.w-3 {
  background: #06b6d4 !important;
  --tw-ring-color: rgba(6, 182, 212, 0.3) !important;
  transform: scale(1.25);
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.4);
}

/* Panel transition improvements for education */
.education-panel-container {
  position: relative;
}

.education-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}

.education-panel.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  position: relative;
}

/* Loading state for education panels */
.education-panel-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(147, 51, 234, 0.6), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}

.education-panel-container.loading::before {
  transform: translateX(100%);
}

/* Achievement bullets animation for education */
.education-panel ul li {
  opacity: 0;
  transform: translateX(-10px);
  animation: slideInLeft 0.5s ease forwards;
}

.education-panel.active ul li:nth-child(1) {
  animation-delay: 0.1s;
}

.education-panel.active ul li:nth-child(2) {
  animation-delay: 0.2s;
}

.education-panel.active ul li:nth-child(3) {
  animation-delay: 0.3s;
}

.education-panel.active ul li:nth-child(4) {
  animation-delay: 0.4s;
}

/* Subject tags hover effects for education */
.education-panel .rounded-full {
  transition: all 0.3s ease;
  cursor: default;
}

.education-panel .rounded-full:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Status badges enhanced styling for education */
.education-panel .flex.flex-wrap.items-center.gap-2 span {
  position: relative;
  overflow: hidden;
}

.education-panel .flex.flex-wrap.items-center.gap-2 span::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}

.education-panel .flex.flex-wrap.items-center.gap-2 span:hover::before {
  left: 100%;
}

/* Focus states for accessibility - education */
.education-item:focus {
  outline: 2px solid rgba(147, 51, 234, 0.8);
  outline-offset: 2px;
}

.education-item:focus-visible {
  box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.3);
}

/* Dark theme specific enhancements for education */
body:not(.light-theme) .education-item:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(147, 51, 234, 0.4);
}

/* Light theme specific styles for education */
body.light-theme .education-item {
  background: rgba(0, 0, 0, 0.03) !important;
  border-color: rgba(0, 0, 0, 0.1);
  color: #1f2937;
}

body.light-theme .education-item:hover {
  background: rgba(147, 51, 234, 0.08) !important;
  border-color: rgba(147, 51, 234, 0.3);
}

body.light-theme .education-item.active {
  background: rgba(147, 51, 234, 0.15) !important;
  border-color: rgba(147, 51, 234, 0.5) !important;
}

body.light-theme .education-panel {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(0, 0, 0, 0.1);
  color: #1f2937;
}

body.light-theme .education-panel h3 {
  color: #1f2937;
}

body.light-theme .education-panel .text-gray-300 {
  color: #4b5563 !important;
}

body.light-theme .education-panel .text-gray-400 {
  color: #6b7280 !important;
}

/* Fix for project card heading text clipping */
.project-card .card-text h3 {
  color: #ffffff !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: #ffffff !important;
  background-clip: unset !important;
}

.light-theme .project-card .card-text h3 {
  color: #0b1220 !important;
  -webkit-text-fill-color: #0b1220 !important;
}

/* Experience Stack - Mobile Optimized */
@media (max-width: 1023px) {
  .experience-stack-container {
    position: relative;
    height: 410px !important; /* Compacted to fit content nicely */
    perspective: 1000px;
    margin-top: 0.5rem;
    overflow: visible !important;
  }

  .experience-panel {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 1rem !important; /* Reduced padding to remove bottom whitespace */
    background: rgba(15, 23, 42, 0.95) !important;
    backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(168, 85, 247, 0.3) !important;
    border-radius: 1.5rem !important;
    display: flex !important;
    flex-direction: column;
    visibility: hidden;
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6) !important;
    z-index: 10;
  }

  body.light-theme .experience-panel {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(147, 51, 234, 0.2) !important;
    box-shadow: 0 10px 30px -10px rgba(147, 51, 234, 0.1) !important;
  }

  .experience-panel.active {
    visibility: visible;
    opacity: 1;
    transform: translateY(0) scale(1);
    z-index: 20;
    border-color: rgba(168, 85, 247, 0.5) !important;
  }

  /* Stacked depth effect */
  .experience-panel.next-stack {
    visibility: visible;
    opacity: 0.6;
    transform: translateY(12px) scale(0.96);
    z-index: 15;
    pointer-events: none;
  }

  /* Swiping translations */
  .experience-panel.swiping {
    transition: none !important;
  }

  .experience-panel.swipe-left {
    transform: translateX(-120%) rotate(-10deg) scale(0.8) !important;
    opacity: 0 !important;
    transition: all 0.4s ease-out !important;
  }

  .experience-panel.swipe-right {
    transform: translateX(120%) rotate(10deg) scale(0.8) !important;
    opacity: 0 !important;
    transition: all 0.4s ease-out !important;
  }

  /* Typography tweaks for stack */
  .experience-panel h3 {
    font-size: 1.125rem !important;
    line-height: 1.2 !important;
  }
  
  .experience-panel ul {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
  }

  /* Swipe Hint Visibility */
  .mobile-swipe-hint {
    transition: color 0.3s ease;
  }

  body.light-theme .mobile-swipe-hint .text-cyan-400 {
    color: #0891b2 !important; /* Cyan-600 for better light-mode contrast */
  }
}

/* ============================================
   MOBILE PERFORMANCE OVERRIDES (<= 768px)
   ============================================ */
@media (max-width: 768px) {
  /* Simplify backdrop blurs - heavy for mobile GPUs */
  .site-header,
  .mobile-menu,
  .mobile-menu-inner,
  .project-card,
  .tech-tag,
  .view-project-btn,
  .backdrop-blur-sm,
  .backdrop-blur-md {
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
  }
  
  /* Simplify box shadows */
  .shadow-2xl,
  .shadow-xl,
  .project-card,
  .profile-card-face {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  }
  
  /* Disable non-essential infinite animations */
  .logo-container {
    animation: none !important;
  }
  
  .hero-orbs div {
    animation-duration: 10s !important; /* Slow down instead of full disable */
    filter: blur(30px) !important; /* Reduce blur intensity */
  }
  
  .animate-pulse,
  .animate-highlight-glow,
  .animate-highlight-pulse {
    animation-duration: 4s !important;
  }
  
  .gradient-name-animate {
    animation: none !important;
    background-size: 100% 100% !important;
  }

  /* Optimize marquee animations */
  .animate-right-to-left,
  .animate-left-to-right {
    animation-duration: 45s !important; /* Slower is easier on CPU */
  }
}