/* ====== Base / Theme ====== */
:root{
  --bg: #070A0F;
  --panel: rgba(255,255,255,0.04);
  --panel-2: rgba(255,255,255,0.06);
  --border: rgba(255,255,255,0.10);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.62);

  --accent: #68F0FF;   /* tech cyan */
  --accent-2: #8B5CF6; /* subtle purple */
  --shadow: 0 10px 30px rgba(0,0,0,0.35);

  --radius: 16px;
  --max: 1400px;
  --hero-gap: 80px; /* will be controlled by JS */
}

*{ box-sizing: border-box; }
/*html{ scroll-behavior: smooth; }*/
body{
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: radial-gradient(1200px 600px at 10% 0%, rgba(104,240,255,0.10), transparent 60%),
              radial-gradient(900px 500px at 90% 10%, rgba(139,92,246,0.10), transparent 55%),
              var(--bg);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  line-height: 1.6;
}

/* Subtle “tech” overlays */
.bg-grid{
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(700px 350px at 50% 0%, black, transparent 70%);
  opacity: 0.25;
}
.bg-glow{
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(500px 300px at 50% 20%, rgba(104,240,255,0.14), transparent 60%);
  opacity: 0.55;
}

/* ====== Layout ====== */
.container{
  width: min(var(--max), calc(100% - 24px));
  margin: 0 auto;
}



.nav{
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
}

.nav a{
  color: var(--muted);
  text-decoration: none;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
  transition: 
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease;
}
.nav-cta:hover{
  color: var(--text) !important;
  border-color: var(--border) !important;
  background: rgba(255,255,255,0.03);
}
.nav-cta{
  color: var(--muted) !important;
  border-color: transparent !important;
  background: transparent;
}

.nav a.is-active{
  color: var(--text);
  background: linear-gradient(
    180deg,
    rgba(104,240,255,0.14),
    rgba(104,240,255,0.06)
  );
  border-color: rgba(104,240,255,0.25);
  box-shadow:
    0 4px 14px rgba(104,240,255,0.18),
    inset 0 1px 0 rgba(255,255,255,0.08);
}


.section{ padding: 64px 0; }
.section-head{ margin-bottom: 18px; }
.section-head h2{ margin: 0; font-size: 1.6rem; }
.muted{ color: var(--muted); }


.hero{
  padding-top: 72px; 
  padding-bottom: var(--hero-gap);          /* keeps room at bottom */
  transition: padding-bottom 120ms linear , min-height 120ms linear; /* makes it feel smooth even with tiny scrolls */
  
  display: flex;
  align-items: flex-start;
}

.hero .hero-grid{
  margin-top: 40px;              /* fine-tune how high it sits */
}

.kicker{
  display: inline-block;
  margin: 0 0 14px 0;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  color: var(--muted);
  font-size: 0.9rem;
}
.hero h1{
  margin: 0 0 12px 0;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.1;
}
.accent{
  color: var(--accent);
  text-shadow: 0 0 18px rgba(104,240,255,0.18);
}
.lead{
  margin: 0 0 22px 0;
  max-width: 75ch;
  color: rgba(255,255,255,0.78);
}

.hero-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.btn{
  display: inline-block;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(104,240,255,0.30);
  background: rgba(104,240,255,0.10);
  color: var(--text);
  text-decoration: none;
  transition: background 180ms ease, box-shadow 220ms ease, transform 180ms ease;
}
.btn:hover{ background: rgba(104,240,255,0.14); }
.btn-ghost{
  border-color: var(--border);
  background: rgba(255,255,255,0.03);
  box-shadow: none;
}
.btn-ghost:hover{ background: rgba(255,255,255,0.06); }

.hero-meta{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.chip{
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.03);
  color: var(--muted);
  font-size: 0.9rem;
}

.cards{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
}
.card{
  grid-column: span 12;
  padding: 18px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel), rgba(255,255,255,0.02));
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.card h3{ margin: 0 0 6px 0; }
.link-row{ display: flex; gap: 12px; flex-wrap: wrap; }

a{ color: var(--accent); }
a:hover{ filter: brightness(1.1); }

.timeline{ display: grid; gap: 14px; }
.tl-item{
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 12px;
  padding: 16px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel), rgba(255,255,255,0.02));
  border: 1px solid var(--border);
  align-items: start; /* align content to top so dot lines up with heading top */
}

.tl-dot{
  width: 10px;
  height: 10px;
  margin-top: 10px; /* increase this to push the dot further down (tweak to taste) */
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 16px rgba(104,240,255,0.5);
  /* alternative for finer control:
     transform: translateY(4px);
  */
}
.tl-content h3{ margin: 0 0 4px 0; }
.tl-content ul{ margin: 8px 0 0 18px; color: rgba(255,255,255,0.80); }

.site-footer{
  padding: 30px 0 40px 0;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid var(--border);
}
@media (max-width: 800px){
  .card{ grid-column: span 12; }
  .site-footer{ flex-direction: column; }
  .nav{ gap: 6px; }
  .nav a{ padding: 8px 8px; }
}


/* ====== Notch Header (floating + shrink) ====== */
.notch{
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);

  display: inline-flex;          /* shrink-wrap to content */
  align-items: center;
  justify-content: center;
  gap: 12px;

  border-radius: 0 0 26px 26px;
  border: 1px solid var(--border);
  border-top: 0;

  background: rgba(7,10,15,0.75);
  backdrop-filter: blur(12px);

  padding: 8px 20px;            /* slim pill */
  z-index: 50;

  transition: padding 180ms ease, border-radius 180ms ease, background 180ms ease;
  
  box-shadow:
    0 10px 30px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.06);
}


/* compact state */
.notch.is-compact{
  padding: 6px 16px;
  border-radius: 0 0 22px 22px;
  background: rgba(7,10,15,0.88);
}
/* since header is fixed now, give main top breathing room */
main.container{
  padding-top: 76px;
}




/* ====== Hero Grid with Photo ====== */
.hero-grid{
  display: grid;
  grid-template-columns: 1.6fr 0.8fr;
  gap: 264px;
  align-items: center;
}

.hero-photo{
  position: relative;
  display: grid;
  place-items: center end;
  padding-right: 1px; /* fine-tune spacing from edge */
  min-height: 260px;
}

.avatar{
  width: min(320px, 80vw);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 32px;
  border: 1px solid rgba(104, 240, 255, 0.3);
  box-shadow: 
    0 20px 50px rgba(0, 0, 0, 0.6),
    0 0 20px rgba(104, 240, 255, 0.1);
  filter: contrast(1.05) brightness(0.95);
}

.avatar:hover {
  transform: translateY(-5px) scale(1.02);
  border-color: var(--accent);
  box-shadow: 
    0 30px 60px rgba(0, 0, 0, 0.7),
    0 0 30px rgba(104, 240, 255, 0.3);
}
.avatar-ring{
  /*position: absolute;
  inset: 10px;
  border-radius: 28px;
  border: 1px solid rgba(104,240,255,0.22);
  box-shadow: 0 0 40px rgba(104,240,255,0.08);
  pointer-events: none; */

  display: none;
}

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


/* ====== 3-card grid for Education ====== */
.cards-3 .card{
  grid-column: span 4;
}
@media (max-width: 900px){
  .cards-3 .card{ grid-column: span 12; }
}

/* Prevent layout jump: reserve space for expanded education cards (desktop hover only) */
/* When any education card is hovered, nudge experience down smoothly */
@media (min-width: 901px){

  /* Base state */
  #experience{
    transition: transform 900ms cubic-bezier(.2,.9,.2,1);
    transition-delay: 400ms;  /* delay going UP */
    transform: translateY(0);
    will-change: transform;
  }

  /* Keep it down while the pointer is anywhere over the education grid */
  #education .cards-3:hover ~ #experience,
  /* Also keep it down while any card is hovered (covers scaled/overflow cases) */
  #education:has(.edu-card:hover) ~ #experience{
    transform: translateY(10px);
    transition-delay: 0ms;    /* no delay going DOWN */
  }
}


/* ====== Education Cards (Hover Expand) ====== */
.edu-card{
  height: 150px;                 /* collapsed card height */
  overflow: hidden;
  padding-top: 25px;
  will-change: transform, height, box-shadow;
  transform-origin: center center; /* scale from center so it grows both ways */
  transition:
    transform 360ms cubic-bezier(.2,.9,.2,1),
    box-shadow 360ms ease,
    border-color 300ms ease,
    height 900ms cubic-bezier(.2,.9,.2,1),
    opacity 360ms ease;
  position: relative;
}

.edu-top{
  display: flex;
  gap: 14px;
  align-items: stretch; /* keep edu-head same height as icon so top/bottom align */
  transition: transform 360ms cubic-bezier(.2,.9,.2,1), opacity 200ms ease;
}


.edu-icon{
  width: 100px;          /* bigger badge */
  height: 100px;
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: rgba(104,240,255,0.12);
  border: 1px solid rgba(104,240,255,0.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
  transition: transform 500ms ease, opacity 200ms ease;
}

.edu-icon img{
  width: 100%;
  height: 100%;
  object-fit: cover;    /* fills the frame */
  padding: 0;           /* important */
  transform: none;      /* no need with cover */
}

/* added: base transition so entering and leaving hover both animate */
.edu-head{
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* h3 at top, course centered, meta at bottom */
  padding: 0;                      /* remove top/bottom padding so edges align with icon */
  min-height: 100%;
  transition: transform 320ms cubic-bezier(.2,.9,.2,1);
  will-change: transform;
  transform-origin: top left;      /* scale from top so top edge stays aligned */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  backface-visibility: hidden;
}

.edu-head h3{
  margin: 0;
  font-size: 1.35rem;     /* big, bold university name when not hovered */
  font-weight: 700;
  transition: transform 320ms cubic-bezier(.2,.9,.2,1);
  will-change: transform;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  backface-visibility: hidden;
}

/* reset margins so spacing is driven by flex only */
.edu-head h3,
.edu-course,
.edu-meta{
  margin: 0;
  transition: transform 320ms;
}

/* course styling (kept centered by space-between) */
.edu-course{
  padding: 0;
  font-size: 1.0rem;
  color: var(--muted);
  transition: transform 320ms cubic-bezier(.2,.9,.2,1);
}

/* HOVER: uniformly scale the whole edu-head down so all three lines keep equal distances */


/* keep any existing edu-head horizontal motion small/optional (remove big translate) */
#education .edu-card:hover{
  height: 500px; /* reveal content vertically */
  
  transform: scale(1.04) translateY(-10px); /* small scale for horizontal growth + lift */
  border-color: rgba(104,240,255,0.45);
  box-shadow:
    0 36px 90px rgba(0,0,0,0.70),
    0 0 40px rgba(104,240,255,0.25),
    0 0 80px rgba(104,240,255,0.12),
    inset 0 1px 0 rgba(255,255,255,0.08);
  z-index: 12;
}

#education .edu-card:hover .edu-head{
  padding: 4px 0;
  transform: translateX(-30px) translateY(-10px) scale(0.92);
  transition: transform 400ms ease;
  transform: translateX(6px);
  /* no padding change here — scaling preserves the spacing ratios */
}

/* When the education grid is hovered, dim the non-hovered cards */
#education .cards-3:hover .edu-card{
  opacity: 0.6;
}

/* Keep hovered card fully visible (no transform here, hover card handles it) */
#education .cards-3:hover .edu-card:hover{
  opacity: 1;
}

#education .edu-card:hover .edu-icon{
  box-shadow:
    0 0 18px rgba(104,240,255,0.35),
    inset 0 1px 0 rgba(255,255,255,0.12);
  
  transform: translateY(-20px) translateX(-16px) scale(0.70);
}

#education .edu-card:hover .edu-head h3{
  transform: scale(1.0);
  
}

#education .edu-card:hover .edu-course{
  transform: translateY(-8px);
  transition: transform 500ms ease;
}



/* reveal meta content when hovered — set a non-zero max-height so it can expand */
#education .edu-card:hover .edu-meta{
  transform: translateY(-12px);
  opacity: 1;
  max-height: 240px; /* was 0 — that prevented expansion and could cause layout jumps */
  transition: transform 500ms ease;
}

/* Here starts the list things */
/* hidden extra content inside the edu-card */
.edu-more{
  max-height: 0;                 /* collapsed by default */
  opacity: 0;
  overflow: hidden;
  margin-top: 14px;              /* spacing from the top row */
  color: rgba(255,255,255,0.86); /* readable body text */
  font-size: 0.95rem;            /* adjust to taste */
  line-height: 1.45;
  transition:
    max-height 360ms cubic-bezier(.2,.9,.2,1),
    opacity 260ms ease,
    transform 320ms cubic-bezier(.2,.9,.2,1);
  transform: translateY(-6px);   /* slight upward offset while hidden */
}

/* list spacing inside the revealed area */
.edu-more ul{
  margin: 8px 0 0 18px;
  padding: 0;
}

/* reveal state when the card is hovered */
#education .edu-card:hover .edu-more{
  max-height: 400px; /* large enough to show content; tune as needed */
  opacity: 1;
  transform: translateY(0);
}

/* ensure mobile always shows the content (no hover) */
@media (max-width: 900px){
  .edu-more{
    max-height: none;
    opacity: 1;
    transform: none;
  }
}

/* Staggered reveal for items inside .edu-more
   - items start slightly up and transparent, then slide/opacity in when the card expands
   - delays are set on the :hover state so exit animates back immediately (no long wait)
*/
.edu-more li{
  opacity: 0;
  transform: translateY(-8px);
  transition:
    transform 360ms cubic-bezier(.2,.9,.2,1),
    opacity 260ms ease;
  transition-delay: 0ms; /* default for non-hover (collapse) */
}

/* reveal items on card hover */
#education .edu-card:hover .edu-more li{
  opacity: 1;
  transform: translateY(0);
}

/* staggered delays so items appear top → bottom following the card growth
   tweak timings to sync with your card height/scale transition (currently ~360ms)
*/
#education .edu-card:hover .edu-more li:nth-child(1){ transition-delay: 140ms; }
#education .edu-card:hover .edu-more li:nth-child(2){ transition-delay: 200ms; }
#education .edu-card:hover .edu-more li:nth-child(3){ transition-delay: 260ms; }
#education .edu-card:hover .edu-more li:nth-child(4){ transition-delay: 320ms; }
#education .edu-card:hover .edu-more li:nth-child(5){ transition-delay: 380ms; }
#education .edu-card:hover .edu-more li:nth-child(6){ transition-delay: 440ms; }
/* Here Ends the list things */


/* Timeline dot: base + hover glow */
.tl-dot{
  transition: box-shadow 320ms ease, transform 320ms ease, filter 320ms ease;
}

.tl-item:hover .tl-dot{
  box-shadow:
    0 0 14px rgba(104,240,255,0.55),
    0 0 28px rgba(104,240,255,0.35),
    0 0 48px rgba(104,240,255,0.20);
  transform: scale(1.15);
  filter: brightness(1.1);
}


/* Job title underline "sneak in" */
.tl-content h3{
  position: relative;
  display: inline-block;         /* keeps underline only under text width */
}

.tl-content h3::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 2px;
  width: 100%;
  background: rgba(104,240,255,0.85);

  transform: translateX(-10px) scaleX(0);
  transform-origin: left;
  opacity: 0.5;

  transition: transform 900ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease;
}

.tl-item:hover .tl-content h3::after{
  transform: translateX(0) scaleX(1);
  opacity: 1;
}



/* ====== Projects Grid ====== */
.cards-projects .card{
  grid-column: span 4; /* 12-col -> 3 per row */
}

@media (max-width: 1100px){
  .cards-projects .card{ grid-column: span 6; } /* 2 per row */
}
@media (max-width: 700px){
  .cards-projects .card{ grid-column: span 12; } /* 1 per row */
}

.project-card{
  padding: 14px;
  display: flex;
  flex-direction: column;
  min-height: 460px; /* taller cards */
  transition: box-shadow 320ms ease, border-color 280ms ease, background 280ms ease;
}

.project-img{
  width: 100%;
  height: 210px; /* slightly taller image */
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  display: block;
}

.project-body{
  margin-top: 12px;
  flex: 1; /* pushes footer to the bottom */
}

.project-body h3{
  margin: 0 0 8px 0;
  font-size: 1.15rem;
}

.project-body p{
  margin: 0;
  line-height: 1.55;
}

/* Footer pinned to bottom */
.project-footer{
  margin-top: 14px;
}

/* Hover glow ONLY (no lift) */
.project-card:hover{
  border-color: rgba(104,240,255,0.40);
  box-shadow:
    0 28px 80px rgba(0,0,0,0.70),
    0 0 30px rgba(104,240,255,0.18),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

/* Remove "dim others" behavior (delete these if you added them earlier) */
/* (intentionally no .cards-projects:hover opacity rules) */

/* Placeholder card (optional) */
.project-card--placeholder{
  display: grid;
  place-items: center;
  min-height: 460px;
  border-style: dashed;
  opacity: 0.8;
}

/* Glowy Read more button */
.btn-glow{
  border-color: rgba(104,240,255,0.42);
  background: rgba(104,240,255,0.12);
  box-shadow:
    0 16px 40px rgba(0,0,0,0.45),
    0 0 26px rgba(104,240,255,0.18);
}
.btn-glow:hover{
  background: rgba(104,240,255,0.16);
  box-shadow:
    0 22px 60px rgba(0,0,0,0.55),
    0 0 40px rgba(104,240,255,0.22);
}


/* ====== Projects: Hover underline (same style as Experience) ====== */



/* ====== Project title as link ====== */
.project-link{
  color: var(--text);
  text-decoration: none;
  position: relative;
  display: inline-block;
}

/* Keep underline animation working on the link instead of h3 */
.project-link::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  height: 2px;
  width: 100%;
  background: rgba(104,240,255,0.85);

  transform: translateX(-10px) scaleX(0);
  transform-origin: left;
  opacity: 0.5;

  transition:
    transform 900ms cubic-bezier(.2,.9,.2,1),
    opacity 220ms ease;
}

/* Trigger underline when card OR link is hovered/focused */
.project-card:hover .project-link::after,
.project-link:hover::after,
.project-link:focus-visible::after{
  transform: translateX(0) scaleX(1);
  opacity: 1;
}

/* Subtle color lift on hover/focus */
.project-link:hover,
.project-link:focus-visible{
  color: var(--accent);
  outline: none;
}


/* ====== Projects Detail Page ====== */
.project-detail {
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.detail-card {
  padding: 40px;
  background: rgba(255, 255, 255, 0.03);
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

@media (max-width: 900px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }
  .detail-media {
    order: -1; /* Image on top on mobile */
  }
}

.detail-info h3 {
  margin-top: 30px;
  color: var(--accent);
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}



/* from here I started playing around for the projects page*/



/* ====== Projects Page Layout Cleaned ====== */
.project-container {
  position: relative; /* Essential for the ghost anchor to work */
  margin-bottom: 100px;
}

.ghost-anchor {
    position: absolute;
    /* Adjust this value to change where the website "thinks" the section begins */
    top: 155px; 
    left: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Single, definitive Hero style */
.project-hero {
  display: grid;
  grid-template-columns: 320px 1fr; /* Image fixed, Text fills rest */
  gap: 24px;
  align-items: start; /* Aligns title with top of image */
  padding-top: 40px;
  margin-bottom: 32px;
}

.project-hero .hero-photo {
  display: flex;
  justify-content: flex-start;
  width: 320px;       /* Ensures the column stays consistent */
}

.project-hero .hero-text h1 {
  margin: 0 0 12px 0;
  line-height: 1.1;
}

.project-hero .hero-meta {
  margin-bottom: 24px;
}

.hero-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

/* Slider System */
.project-body-card {
  position: relative;
  padding: 0;
  overflow: hidden;
}

.slider-viewport {
  width: 100%;
  overflow: hidden;
}

.slider-track {
  display: flex;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.slide {
  min-width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

.slide-text { 
  padding: 60px; 
}

.slide-media img {
  width: 100%;
  height: 450px;
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

/* Navigation & Controls */
.nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--muted);
  font-size: 2.5rem;
  cursor: pointer;
  z-index: 10;
  padding: 20px;
  transition: all 0.3s ease;
}

.nav-arrow:hover {
  color: var(--accent);
  transform: translateY(-50%) scale(1.2);
}

.nav-arrow.prev { left: 5px; }
.nav-arrow.next { right: 5px; }

.slider-controls {
  padding: 25px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.01); /* Very subtle contrast */
}

.dots {
  display: flex;
  gap: 12px; /* Controlled spacing between dots */
}

.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15); /* Muted inactive state */
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  margin: 0 6px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  
}

.dot:hover {
  background: var(--muted);
  transform: scale(1.2);
}

.dot.active { 
  background: #FFF;     /* Pure white core for maximum shine */
  transform: scale(1.2);
  border-color: var(--accent);
  /* The "Old Version" Glow: multiple layers of cyan shadow */
  box-shadow: 
    0 0 10px #FFF, 
    0 0 20px var(--accent), 
    0 0 35px rgba(104, 240, 255, 0.6);
}

/* Unified Responsive Rules */
@media (max-width: 900px) {
  .project-hero {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 30px;
  }
  
  .project-hero .hero-photo {
    justify-content: center;
    order: -1;
  }

  .slide {
    grid-template-columns: 1fr;
  }

  .slide-text {
    padding: 30px;
  }

  .nav-arrow {
    display: none; /* Keep mobile clean, use dots */
  }
}

html {
  scroll-behavior: smooth;
  /* This is the magic line. 120px covers the notch header + extra breathing room */
  scroll-padding-top: 120px; 
}

/* Projects page specific nav styling */
.projects-page .nav a {
  min-width: 40px;
  text-align: center;
  font-family: "Courier New", Courier, monospace; /* Optional: gives it a technical 'roman numeral' feel */
  font-weight: bold;
}

/* Re-using your existing .is-active glow logic for the projects page */
.projects-page .nav a.is-active {
  color: var(--text);
  background: linear-gradient(180deg, rgba(104,240,255,0.14), rgba(104,240,255,0.06));
  border-color: rgba(104,240,255,0.25);
  box-shadow: 0 4px 14px rgba(104,240,255,0.18), inset 0 1px 0 rgba(255,255,255,0.08);
}