/* =========================
   BASE / GLOBAL
   ========================= */
:root { color-scheme: light dark; }
html, body { background:#ffffff; color:#111; }

.text-max { max-width: 70ch; }

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================
   SHARED ANIMATIONS
   ========================= */
@keyframes heroGradient {
  0% { background-position: 90% 0%; }
  50% { background-position: 11% 100%; }
  100% { background-position: 90% 0%; }
}
@keyframes wave  { 0%{background-position-x:0} 100%{background-position-x:1000px} }
@keyframes wave2 { 0%{background-position-x:0} 100%{background-position-x:-1000px} }
@keyframes introName { 0%{opacity:0; transform:translateY(-28px)} 100%{opacity:1; transform:translateY(0)} }
@keyframes introText { 0%{opacity:0; transform:translateY(-16px)} 100%{opacity:1; transform:translateY(0)} }

/* =========================
   HERO (locked colors + overlay + safe stacking)
   ========================= */
#hero {
  position: relative;                        /* allow overlay & waves to stack */
  isolation: isolate;                        /* keep overlay effects contained */
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding-top: 50px;
  color: #fff;
  background: linear-gradient(207deg, #053069, #007abb);
  background-size: 600% 600%;
  animation: heroGradient 14s ease infinite;
  overflow: hidden;                          /* hide wave overflow on small screens */
}

/* soft gradient overlay behind text -> improves readability on any bg */
#hero::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(
    180deg,
    rgba(5,48,105,.85) 0%,
    rgba(5,48,105,.65) 40%,
    rgba(5,48,105,.35) 70%,
    rgba(5,48,105,0) 100%
  );
  z-index: 0;
}

/* Waves — scoped to #hero and always below content */
#hero .air {
  position: absolute; bottom: 0; left: 0; width: 100%; height: 100px;
  background: url(https://1.bp.blogspot.com/-xQUc-TovqDk/XdxogmMqIRI/AAAAAAAACvI/AizpnE509UMGBcTiLJ58BC6iViPYGYQfQCLcBGAsYHQ/s1600/wave.png);
  background-size: 1000px 100px;
  z-index: 0;                                /* under the text */
  pointer-events: none;
}
#hero .air.air1 { animation: wave 30s linear infinite; opacity: 1;  bottom: 0;  }
#hero .air.air2 { animation: wave2 15s linear infinite; opacity: .5; bottom: 10px; }
#hero .air.air3 { animation: wave 30s linear infinite;  opacity: .2; bottom: 15px; }
#hero .air.air4 { animation: wave2 5s  linear infinite;  opacity: .7; bottom: 20px; }

/* Hero text — ensure above overlay & waves */
.hero-name,
.introduction {
  position: relative;
  z-index: 1;                                /* sits above ::before and .air */
}

/* Hero text styles */
.hero-name{
  margin: 0 0 10px;
  text-align: center;
  font-family: "Jaro", sans-serif;
  letter-spacing: 5px;
  font-size: clamp(3rem, 8vw, 8rem);
  text-shadow: 0 2px 12px rgba(0,0,0,.25);   /* subtle lift over bg */
  animation: introName 1.2s ease both;
}
.hero-name span{ font-size: clamp(1.5rem, 5vw, 3rem); }

.introduction{
  font-size: clamp(1rem, 2vw, 1.3rem);
  margin-inline: auto; max-width: 70ch;
  line-height: 1.65;
  text-shadow: 0 1px 10px rgba(0,0,0,.20);
  animation: introText 1.2s ease .15s both;
}
.introduction > .key-words { font-weight: 700; }

/* =========================
   UNIVERSITY (Resume)
   ========================= */
#resume{
  min-height: auto; height: auto;
  display: grid; place-items: center;
  padding-block: 4rem;
}
@media (min-width: 992px){
  #resume{
    min-height: 100vh; height: 100vh;
    display: flex; justify-content: center; align-items: center;
    padding-block: 0;
  }
}

#resume h1{
  font-family: "Jaro", sans-serif;
  letter-spacing: 5px;
  font-size: clamp(2rem, 5vw, 6rem);
  background: -webkit-linear-gradient(#053069, #007abb);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.uni-text{ font-size: clamp(1.2rem, 3vw, 2rem); }
.university img{ width: clamp(120px, 18vw, 200px); height: auto; }

/* =========================
   PROJECTS — soft sky glow + grid
   ========================= */
#projects{
  min-height: 70vh;
  display: grid; place-items: center; text-align: center;
  padding-block: 4rem;
  position: relative; overflow: hidden;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(0,122,187,.12), transparent 60%),
    radial-gradient(900px 500px at 85% 10%,  rgba(5,48,105,.10), transparent 60%),
    linear-gradient(#ffffff, #ffffff);
}
#projects::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(transparent 31px, rgba(5,48,105,.06) 32px),
    linear-gradient(90deg, transparent 31px, rgba(0,122,187,.06) 32px);
  background-size: 32px 32px; mix-blend-mode: multiply; opacity: .45;
}

.projects-title{
  font-family: "Jaro", sans-serif;
  letter-spacing: 5px;
  font-size: clamp(2rem, 5vw, 5rem);
  background: -webkit-linear-gradient(#053069, #007abb);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  position: relative; display: inline-block;
}
.projects-title::after{
  content:""; position:absolute; left:0; right:0; bottom:-0.4rem; height:6px;
  background: linear-gradient(90deg, #053069, #007abb);
  border-radius: 999px; transform: translateY(8px); opacity: .85;
}

.project-title{ font-family: "Jaro", sans-serif; font-size: 1.2rem; }

/* Cards */
.feature{
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.78));
  border: 1px solid rgba(5,48,105,.10);
  box-shadow: 0 10px 30px rgba(5,48,105,.08);
  border-radius: 18px; padding: 1.25rem;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  backdrop-filter: saturate(120%) blur(3px);
}
.feature:hover{
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(5,48,105,.12);
  border-color: rgba(0,122,187,.25);
}
#projects .feature p{ font-size: clamp(.95rem, .9rem + .2vw, 1.05rem); }

.feature-icon{
  width: 84px; height: 84px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffffff, #eaf4ff);
  box-shadow: inset 0 0 0 1px rgba(5,48,105,.10), 0 10px 30px rgba(0,122,187,.20);
  transition: transform .25s ease, box-shadow .25s ease;
}
.feature:hover .feature-icon{ transform: translateY(-2px) scale(1.04); }
.feature svg{ filter: drop-shadow(0 2px 6px rgba(0,0,0,.12)); }

/* Buttons */
#projects .btn{
  border-radius: 999px; border: 1px solid rgba(5,48,105,.20);
  padding: .55rem 1.1rem;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
  background: linear-gradient(180deg, #ffffff, #f2f7ff);
  box-shadow: 0 6px 16px rgba(5,48,105,.10);
}
#projects .btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(5,48,105,.14);
  background: linear-gradient(180deg, #f9fbff, #eaf2ff);
}
#projects .btn .view-btn-txt{ font-family: "Jaro", sans-serif; font-size: 20px; color: #053069; }

/* Spacing */
#projects .container{ padding-top: clamp(2rem, 4vw, 3rem); }
#projects .row{ row-gap: clamp(1rem, 2vw, 2rem); }

/* =========================
   CONTACT → FOOTER blend
   ========================= */
#contact{
  min-height: 70vh;
  display: grid; place-items: center; text-align: center;
  padding-block: 4rem;
  position: relative; isolation: isolate;
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(0,122,187,.10), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f6f9ff 50%, #eef5ff 90%, #eef5ff 100%);
}
#contact::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:40px;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(5,48,105,0) 0%, rgba(5,48,105,.10) 100%);
  mix-blend-mode: multiply; opacity: .25; z-index: 0;
}

.contact-title{
  font-family: "Jaro", sans-serif;
  letter-spacing: 5px;
  font-size: clamp(3rem, 7vw, 8rem);
  background: -webkit-linear-gradient(#053069, #007abb);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.contact-button{ background: -webkit-linear-gradient(#053069, #007abb); }
#contact img{ width: clamp(120px, 16vw, 160px); height: auto; }
.con-but-image{ width: clamp(42px, 8vw, 90px); height: clamp(42px, 8vw, 90px); }

/* =========================
   FOOTER (pure CSS curve + shadow)
   ========================= */
#footer{
  position: relative; isolation: isolate;
  background: linear-gradient(207deg, #053069, #007abb);
  background-size: 600% 600%;
  animation: heroGradient 14s ease infinite;
  min-height: 100px;
  padding-top: 1.5rem;
}
#footer::before{
  content:""; position:absolute; left:0; right:0;
  top: -70px; height: 150px;
  background: #eef5ff; /* matches #contact bottom */
  clip-path: ellipse(125% 92% at 50% 0%);
  z-index: 0;
}
#footer::after{
  content:""; position:absolute; left:0; right:0;
  top: -2px; height: 10px;
  background: linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,0));
  filter: blur(5px); opacity: .14; pointer-events:none; z-index: 0;
}

/* Footer content + links */
#footer .container,
#footer footer { position: relative; z-index: 1; }
#footer p, #footer a { color: #fff; text-decoration: none; }
#footer a:hover { text-decoration: underline; color: #ffde59; }

/* Extra breathing room at the seam */
#contact .px-4.py-5.my-5 { padding-bottom: 5rem !important; }
footer.py-4 { padding-top: 2.75rem !important; }

/* =========================
   RESPONSIVE TWEAKS
   ========================= */
@media (max-width: 576px){
  .hero-name, .projects-title, .contact-title { letter-spacing: 2px; }
  #projects, #contact, #resume { padding-block: 3rem; }
}
@media (min-width: 577px) and (max-width: 768px){
  #projects .row { row-gap: 2rem; }
  #resume .uni-text { font-size: 1.5rem; }
  #contact .btn { padding: .6rem 1rem; }
}
@media (min-width: 769px) and (max-width: 1199px){
  #projects .row { row-gap: 2rem; }
}
@media (min-width: 1600px){
  .hero-name { font-size: clamp(6rem, 9vw, 12rem); }
  .projects-title { font-size: clamp(4rem, 6vw, 8rem); }
  .contact-title { font-size: clamp(5rem, 7vw, 8rem); }
}
@media (min-width: 481px) and (max-width: 600px){
  #contact { min-height: auto; }
}


/* =========================
   DARK MODE (waves OFF + readable colors)
   ========================= */
@media (prefers-color-scheme: dark) {
  html, body { background:#0b1220; color:#e9eef7; }

  /* HERO — keep gradient, remove waves */
  #hero {
    background: linear-gradient(207deg, #1d4480, #1a70bb);
    color:#fff;
  }
  #hero::before{
    background: linear-gradient(
      180deg,
      rgba(35, 82, 165, 0.65) 0%,
      rgba(5, 41, 103, 0.45) 40%,
      rgba(55, 109, 204, 0.2) 70%,
      rgba(11,26,51,0) 100%
    );
  }
  #hero .air { opacity: 0 !important; }   /* waves hidden */

  .hero-name { text-shadow: 0 2px 14px rgba(0,0,0,.55); }
  .introduction { text-shadow: 0 1px 10px rgba(0,0,0,.35); }

  /* RESUME */
  #resume { background:#0b1220; }
  #resume h1{
    background: -webkit-linear-gradient(#aed8ff, #89b8e7);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  }
  .uni-text { color:#cfd9e6; }

  /* PROJECTS */
  #projects{
    color:#e9eef7;
    background:
      radial-gradient(1200px 600px at 15% -10%, rgba(53,132,187,.18), transparent 60%),
      radial-gradient(900px 500px at 85% 10%,  rgba(18,36,66,.25), transparent 60%),
      linear-gradient(#0f1726, #0f1726);
  }
  #projects::after{
    background:
      linear-gradient(transparent 31px, rgba(122,185,255,.07) 32px),
      linear-gradient(90deg, transparent 31px, rgba(53,132,187,.08) 32px);
    opacity:.35;
  }
  .projects-title{
    background: -webkit-linear-gradient(#9fd0ff, #6cb6ff);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  }
  .project-title { color:#e9eef7; }

  /* Cards */
  .feature{
    color:#dce6f4;
    background: linear-gradient(180deg, rgba(20,28,46,.88), rgba(16,23,37,.80));
    border:1px solid rgba(160,200,255,.16);
    box-shadow: 0 10px 30px rgba(0,0,0,.45);
  }
  .feature:hover{
    border-color: rgba(160,200,255,.28);
    box-shadow: 0 16px 40px rgba(0,0,0,.55);
  }
  .feature-icon{
    background: radial-gradient(circle at 30% 30%, #1d2742, #121a2e);
    box-shadow: inset 0 0 0 1px rgba(160,200,255,.18), 0 10px 30px rgba(0,0,0,.35);
  }

  /* Buttons */
  #projects .btn{
    color:#e9eef7;
    background: linear-gradient(180deg, #142034, #101a2e);
    border-color: rgba(160,200,255,.28);
    box-shadow: 0 6px 16px rgba(0,0,0,.45);
  }
  #projects .btn:hover{
    background: linear-gradient(180deg, #1a2a45, #15243d);
    box-shadow: 0 10px 24px rgba(0,0,0,.6);
  }
  #projects .btn .view-btn-txt{ color:#9fd0ff; }

  /* CONTACT */
  #contact{
    color:#e9eef7;
    background:
      radial-gradient(60% 40% at 50% 0%, rgba(53,132,187,.18), transparent 60%),
      linear-gradient(180deg, #0f1726 0%, #0e1624 50%, #0d1420 100%);
  }
  .contact-title{
    background: -webkit-linear-gradient(#9fd0ff, #6cb6ff);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  }
  .contact-button{
    background: -webkit-linear-gradient(#6cb6ff, #3f8fd8);
    border:1px solid rgba(160,200,255,.25);
  }
  .contact-button-text { color:#0b1220; }

  /* FOOTER */
  #footer{ background: linear-gradient(207deg, #091a33, #073257); }
  #footer::before{ background:#0d1420; }
  #footer p, #footer a { color:#dce6f4; }
  #footer a:hover { color:#ffde59; }

  /* Links & borders */
  a { color:#9fd0ff; }
  a:hover { color:#c6e2ff; }
  hr, .border, .feature { border-color: rgba(160,200,255,.18); }
}