/* ------------------------------------------------
   🎨 COLOR SYSTEM – CSS variables for light & dark
-------------------------------------------------- */






:root {
   /* New slow/muted background colors */

     /* MAIN COLOR  */

 --bg-soft-3:  #fff6e8; /* Warm Cream - subtle warmth */
 --bg-soft-5:  #e9f5db; /* Soft Mint - organic feel */
--bg-soft-6:  #f9f0ff; /* Lavender Mist - elegant */
 --bg-soft-12: #dcf0f0; /* Aqua Mist - calm & soothing */
--bg-soft-13: #faf5e4; /* Pale Lemon - warm & subtle */
 --bg-soft-16: #eaeaea; /* Soft Gray - neutral & clean */

  /* REST OF THE COLORS */

  --bg-soft-1:  #f0f4ff; /* Soft Periwinkle - Inspired by Microsoft */
  --bg-soft-2:  #e3f6f5; /* Light Aqua - Calm & fresh */
  --bg-soft-3:  #fff6e8; /* Warm Cream - subtle warmth */
  --bg-soft-4:  #ffe4e1; /* Misty Rose - gentle pink */
  --bg-soft-5:  #e9f5db; /* Soft Mint - organic feel */
  --bg-soft-6:  #f9f0ff; /* Lavender Mist - elegant */
  --bg-soft-7:  #e1e7f0; /* Powder Blue - stable & clean */
  --bg-soft-8:  #f0e4db; /* Sandstone - soft beige */
  --bg-soft-9:  #d7e9f7; /* Sky Blue - airy & light */
  --bg-soft-10: #f6f3ff; /* Light Lilac - fresh & soft */
  --bg-soft-11: #fef7f7; /* Blush Pink - warm & gentle */
  --bg-soft-12: #dcf0f0; /* Aqua Mist - calm & soothing */
  --bg-soft-13: #faf5e4; /* Pale Lemon - warm & subtle */
  --bg-soft-14: #e8f0fe; /* Blue Bell - tech inspired */
  --bg-soft-15: #f4f0f6; /* Orchid Mist - understated purple */
  --bg-soft-16: #eaeaea; /* Soft Gray - neutral & clean */


 /* icon BG */
--bg-strong-1:  #3b82f6; /* Bright Blue - action, tech */
  --bg-strong-2:  #06b6d4; /* Aqua Blue - energy, fresh */
  --bg-strong-3:  #f59e0b; /* Warm Amber - warmth, highlight */
  --bg-strong-4:  #ec4899; /* Rose Pink - bold but friendly */
  --bg-strong-5:  #22c55e; /* Bright Mint - organic, fresh */
  --bg-strong-6:  #8b5cf6; /* Lavender Violet - creative, modern */
  --bg-strong-7:  #64748b; /* Slate Blue - stable, neutral */
  --bg-strong-8:  #d97706; /* Sandstone - earthy tone */
  --bg-strong-9:  #0ea5e9; /* Sky Blue - vibrant, clear */
  --bg-strong-10: #7c3aed; /* Deep Lilac - sophisticated energy */
  --bg-strong-11: #f43f5e; /* Bold Blush - confident, warm */
  --bg-strong-12: #2dd4bf; /* Aqua Mist - bright & light */
  --bg-strong-13: #eab308; /* Yellow Gold - attention-grabbing */
  --bg-strong-14: #3b5ec6; /* Blue Bell - strong & calm */
  --bg-strong-15: #a855f7; /* Orchid - striking, modern */
  --bg-strong-16: #4b5563; /* Graphite Gray - neutral grounding */ 

  /* PRIMARY COLORS */
  --primary-dark: #1b1f24;           /* Dark navy for headings, identity */
  --primary-accent: #3a86ff;     /* Indigo 600 - Brand, buttons, links   #; */
  --highlight-accent: #facc15;       /* Yellow 400 - Highlights, logos, hover */
  --cool-accent: #0ea5e9;            /* Sky 500 - for links, secondary CTA */
  --warm-accent: #ef4444;            /* Red 500 - alerts, errors, warnings */
  --beige-accent: #f5f0e1;           /* Beige - for subtle backgrounds and accents */
   


  /* LIGHT THEME */
  --light-bg: #ffffff;               /* Main background */
  --card-bg: #f9fafb;                /* Card/section bg (gray-50) */
  --text-primary: #111827;           /* Text gray-900 */
  --text-secondary: #4f5664;         /* Text gray-500 */
  --shadow-light: 0 2px 6px rgba(0,0,0,0.05);  
  --shadow-hover: 0 4px 12px rgba(0,0,0,0.08);

  body.dark-theme {
  /* DARK THEME */
  --primary-dark: #e5e7eb;           /* Text gray-200 for dark backgrounds */
  --primary-accent: #6366f1;         /* Indigo 500 - brand buttons, links */
  --highlight-accent: #facc15;       /* Keep yellow highlight */
  --cool-accent: #38bdf8;            /* Sky 400 - bright cool tone */
  --warm-accent: #f87171;            /* Red 400 - warnings */

  --light-bg: #0f172a;               /* Slate 900 - deep dark bg */
  --card-bg: #1e293b;                /* Slate 800 - dark card bg */
  --text-primary: #ffffff;           /* Light body text */
  --text-secondary: #dbe1eb;         /* Gray 400 for metadata */
  --shadow-light: 0 2px 6px rgba(0,0,0,0.5);
  --shadow-hover: 0 4px 12px rgba(0,0,0,0.6);
}
}

/* ---------------------------------
   BASE & RESET
------------------------------------ */

 html {
    scroll-behavior: smooth;
  }
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: var(--light-bg);
  color: var(--text-primary);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.6;
  transition: all 0.8s ease-in-out;
  
}

/* ---------------------------------
   HEADER & NAVIGATION
------------------------------------ */
header {
  background-color: var(--light-bg);
  padding: 1rem 2rem;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* .navbar seems unused, but keep if you use it */
.navbar {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.nav-toggle {
  font-size: 1.8rem;
  color: var(--light-bg);
  background: none;
  border: none;
  cursor: pointer;
}

#theme-toggle {
  background-color: var(--primary-accent);
  border: 2px solid #fff;
  color: #fff;
  font-size: 0.9rem;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}

#theme-toggle:hover,
#theme-toggle:focus {
  background-color: var(--primary-accent);
  outline: none;
}

/* Nav links container */
.nav-links {
  background-color: var(--light-bg);
  
}

.nav-links a {
  color: var(--primary-dark);
  font-weight: 600;
  font-family: inherit;
  padding: 0.5rem 0.75rem;
  border-radius: 20%;
  transition: color 0.3s ease, background-color 0.3s ease;
}

.nav-links a:hover,
.nav-links a:focus {
  color: var(--highlight-accent);
  background-color: rgba(255 255 255 / 0.1);
  border-radius: 20%;
 
}

.nav-links ul  {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

@media (max-width: 768px) {
  .nav-links ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
  }
}
/* ---------------------------------
   CONTENT WRAPPER
------------------------------------ */
.layout-wrapper {
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  padding: 1rem;
}

@media (min-width: 768px) {
  .layout-wrapper {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media (min-width: 1024px) {
  .layout-wrapper {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

/* ---------------------------------
   SECTIONS
------------------------------------ */
.section {
  margin: auto;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease-in-out;
  outline-offset: 4px;
  font-family: inherit;
  background-color: var(--light-bg) ;
  color: var(--text-primary);
  



}

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

h1, h2, h3 {
  color: var(--primary-dark);
  margin-bottom: 1rem;
  font-family: "Calibre", "Helvetica Neue", Calibre, sans-serif;
  font-weight: 700;
}

/* ---------------------------------
   SKILLS GRID
------------------------------------ */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

/* Lists */
ul {
  margin-left: 1.5rem;
  list-style-type: disc;
  color: var(--text-primary);
}

/* Links */
a {
  color: var(--primary-accent);
  transition: color 0.3s ease;
}

a:hover,
a:focus {
  text-decoration: underline;
  outline: none;
  color: var(--highlight-accent);
}

/* ---------------------------------
   FOOTER
------------------------------------ */
.footer {
  text-align: center;
  padding: 2rem;
  background-color: var(--primary-accent);
  color: white;
  font-size: 0.9rem;
  font-family: inherit;
}

/* ---------------------------------
   TYPOGRAPHY ANIMATIONS & HIGHLIGHTS
------------------------------------ */
.intro-text {
  margin: 3rem 0;
  color: var(--text-primary);
  letter-spacing: 0.4px;
}

.name-highlight {
  display: inline-block;
  color: #fff;
  padding: 0.2rem 0.4rem;
  transition: all 0.3s ease;
  letter-spacing: 0.06em;
  background-color: var(--highlight-accent);
  font-family: inherit;
}

.name-highlight:hover {
  background-color: transparent !important;
  color: #000;
  -webkit-text-stroke: 1.3px currentColor;
  text-stroke: 1.3px currentColor;
}

.hover-fill {
  display: inline-block;
  color: transparent;
  -webkit-text-stroke: 1.3px var(--primary-dark);
  text-stroke: 1.3px var(--primary-dark);
  font-weight: 1000;
  padding: 0.2rem 0.4rem;
  letter-spacing: 0.06em;
  transition: all 0.4s ease;
}

.hover-fill:hover {
  color: var(--text-secondary);
  -webkit-text-stroke: 0;
  text-stroke: 0;
  cursor: pointer;
}

/* ---------------------------------
   RESPONSIVE MEDIA QUERIES
------------------------------------ */
@media (max-width: 768px) {
  .nav-toggle {
    display: block;
  }

  .nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
    background-color: var(--primary-accent);
    padding: 1rem 0;
    gap: 1rem;
  }

  .nav-links.active {
    display: flex;
  }

  .nav-links .dropdown {
    position: static;
    border: none;
    background: none;
    padding: 0;
  }

  .nav-links .dropdown li a {
    padding-left: 1.5rem;
  }

  .logo {
    font-size: 1.2rem;
  }

  .nav-links a {
    font-size: 0.9rem;
  }

  #theme-toggle {
    font-size: 0.8rem;
    padding: 0.4rem 0.8rem;
  }

  .section {
    padding: 2rem 1rem;
  }

  .familiar-card {
    padding: 1rem;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .section {
    padding: 3rem 2rem;
  }

  .skills-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }
}

@media (min-width: 1025px) {
  .section {
    padding: 4rem 3rem;
  }

  .skills-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

/* ---------------------------------
   FAMILIAR CARD FLOAT ANIMATIONS
------------------------------------ */
@keyframes float1 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(10px, 8px); }
}
@keyframes float2 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-8px, 10px); }
}
@keyframes float3 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(12px, -8px); }
}
@keyframes float5 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(8px, 12px); }
}
@keyframes float6 {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-12px, 10px); }
}

.animate-float2 { animation: float1 2s ease-in-out infinite; }
.animate-float3 { animation: float2 3s ease-in-out infinite; }
.animate-float4 { animation: float4 4s ease-in-out infinite; }
.animate-float5 { animation: float5 5s ease-in-out infinite; }
.animate-float6 { animation: float6 6s ease-in-out infinite; }

/* Slow float animations for background circles */
@keyframes floatSlow {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(15px, 10px); }
}
@keyframes floatSlowReverse {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-15px, -20px); }
}
.animate-floatSlow {
  animation: floatSlow 5s ease-in-out infinite;
}
.animate-floatSlowReverse {
  animation: floatSlowReverse 10s ease-in-out infinite;
}

/* ---------------------------------
   MOUSE CURSOR
------------------------------------ */
/* Hide default cursor on devices that support hovering */
@media (hover: hover) and (pointer: fine) {
  body {
    cursor: none;
  }
}


.cursor-hover {
  width: 48px !important;
  height: 48px !important;
  background: radial-gradient(circle, #93c5fd, #2563eb) !important;
  box-shadow: 0 0 12px rgba(147, 197, 253, 0.9), 0 0 32px rgba(96, 165, 250, 0.75) !important;
  opacity: 1 !important;
}


#magnifier {
  position: absolute;
  
  border-radius: 50%;
  cursor: none;
  width:300px;
  height: 300px;
  overflow: hidden;
  display: none; /* hide initially */
  box-shadow: 0 0 12px rgba(147, 197, 253, 0.9), 0 0 32px rgba(96, 165, 250, 0.75) !important;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 10000;

  background-color: white;      /* add this */
  /* remove any opacity or transparency */
  opacity: 1 !important;
}









/* ---------------------------------
   SCROLL REVEAL ANIMATION
------------------------------------ */
.scroll-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-reveal.active {
  opacity: 1;
  transform: translateY(0);
}


  /* Animation for path draw HCD */
            .draw-line {
                animation: draw 5s ease forwards;
            }

            @keyframes draw {
                to {
                    stroke-dashoffset: 0;
                }
            }


 .hcd-step {
  transition: all 0.2s ease;
}