/* Fonts + Theme variables */
:root{
  /* Uniform off-white background for light/default theme */
  --bg: #fbfbfd;
  --bg-solid: #fbfbfd;
  --text: #0f1115;
  --muted: rgba(15,17,21,0.65);
  --nav-bg: rgba(255,255,255,0.6);
  --accent: #6c5ce7;
  --glass-blur: 10px;
  --quote-base: rgba(0,0,0,0.36);
  --quote-hover-main: #000000;
  --quote-hover-alt: rgba(0,0,0,0.72);
}

[data-theme="dark"]{
  /* Flat ChatGPT-like dark background (adjustable) */
  --bg: #0b1220; /* flat color used for dark theme */
  --bg-solid: #0b1220;
  --text: #eef1f4;
  --muted: rgba(238,241,244,0.78);
  --nav-bg: rgba(36,39,42,0.62);
  --accent: #8ab4ff;
  --glass-blur: 8px;
  --quote-base: rgba(255,255,255,0.38);
  --quote-hover-main: #ffffff;
  --quote-hover-alt: rgba(255,255,255,0.7);
}

html{
  height:100%;
  scroll-behavior:smooth;
}
body{
    -webkit-font-smoothing: antialiased;
    padding-bottom: 70px;
    min-height:100vh;
    margin:0;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background: var(--bg);
    color:var(--text);
    transition: background 0.45s ease, color 0.45s ease, opacity .9s ease;
}

/* Subtle blur fade at bottom of viewport */
body::after{
  content:"";position:fixed !important;bottom:0;left:0;right:0;height:180px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(251,251,253,0.15));
  pointer-events:none;z-index:1;will-change:auto;
}

[data-theme="dark"] body::after{
  background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(11,18,32,0.12));
}

/* Page load subtle blur (on content wrapper so fixed nav stays viewport-fixed) */
body{opacity:0;transition:background 0.95s cubic-bezier(.2,.9,.2,1),color 0.95s cubic-bezier(.2,.9,.2,1),opacity .9s ease}
body.loaded{opacity:1}

.page{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding-left:0;
  min-height:100vh;
  filter:blur(10px);
  transition:filter .9s ease;
}
body.loaded .page{filter:blur(0)}

.bottom-nav {
  position: fixed;
  bottom: 20px; /* Gives it a floating look so it's not glued to the edge */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin: 0;
  background: var(--nav-bg);
  padding: 8px 12px;
  border-radius: 999px;
  box-shadow: 0 8px 30px rgba(12, 14, 20, 0.12);
  backdrop-filter: blur(var(--glass-blur));
  z-index: 9999; /* This ensures it stays above your "reveal" sections */
  transition: box-shadow .45s ease, background .6s ease;
  width: fit-content;
}
.bottom-nav a{
  width:44px;height:44px;display:flex;align-items:center;justify-content:space-around;border-radius:10px;
  background:transparent;color:var(--text);text-decoration:none;position:relative;
  transition:background .2s ease;box-shadow:none;
}
.bottom-nav a:hover{background:rgba(108,92,231,0.15);transform: translateY(-2px); /* Lifts the button up */
  box-shadow: 0 10px 20px rgba(0,0,0,0.15); /* Adds a soft shadow */}

/* tooltip above icon on hover (uses title attribute) */
.bottom-nav a::before{
  content:attr(title);position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(6px);
  background:var(--bg-solid);color:var(--text);padding:6px 10px;border-radius:6px;font-size:11px;font-weight:500;
  opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease;white-space:nowrap;
  box-shadow:0 6px 18px rgba(12,14,20,0.12);
}
.bottom-nav a:hover::before,.bottom-nav a:focus::before{opacity:1;transform:translateX(-50%) translateY(-2px)}

main{margin:0 auto;max-width:800px;padding:72px 24px 100px 24px}

/* Hero */
.hero{display:flex;gap:28px;align-items:center}
.profile-pic{
  width:120px;height:120px;border-radius:999px;object-fit:cover;box-shadow:0 8px 24px rgba(12,14,20,0.08);
  transition:transform .3s ease,box-shadow .3s ease
}
.profile-pic:hover{transform:scale(1.12);box-shadow:0 8px 24px rgba(12,14,20,0.12)}
.hero-text h1{font-size:46px;margin:0 0 6px 0;font-weight:900;letter-spacing:-0.6px;font-family:Space Grotesk, Inter, sans-serif}
.hero-text .role{margin:0;color:var(--muted);font-weight:600}
.lead{margin-top:12px;color:var(--muted);max-width:60ch}

section{margin:72px 0}
h1,h2,h3{font-weight:700}
h2{font-size:20px;margin:0 0 12px 0}

/* Contact form */
.contact-intro{
  margin:0 0 14px 0;
  color:var(--muted);
}
.contact-form{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:8px;
  padding:14px;
  border-radius:12px;
  background:var(--nav-bg);
  backdrop-filter:blur(var(--glass-blur));
  box-shadow:0 8px 24px rgba(12,14,20,0.08);
}
.contact-label{
  font-size:0.86rem;
  font-weight:600;
  color:var(--muted);
}
.contact-input,
.contact-textarea{
  width:100%;
  border:1px solid rgba(15,17,21,0.14);
  border-radius:10px;
  background:var(--bg-solid);
  color:var(--text);
  font:inherit;
  padding:10px 12px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
[data-theme="dark"] .contact-input,
[data-theme="dark"] .contact-textarea{
  border-color:rgba(238,241,244,0.2);
}
.contact-input:focus,
.contact-textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(108,92,231,0.15);
}
[data-theme="dark"] .contact-input:focus,
[data-theme="dark"] .contact-textarea:focus{
  box-shadow:0 0 0 3px rgba(138,180,255,0.18);
}
.contact-textarea{
  min-height:120px;
  resize:vertical;
}
.contact-submit{
  margin-top:4px;
  border:none;
  border-radius:10px;
  padding:11px 14px;
  font:inherit;
  font-weight:700;
  color:var(--bg-solid);
  background:var(--text);
  cursor:pointer;
  transition:transform .2s ease, opacity .2s ease;
}
.contact-submit:hover{
  transform:translateY(-1px);
  opacity:0.94;
}
.contact-submit:disabled{
  opacity:0.6;
  cursor:not-allowed;
  transform:none;
}
.contact-status{
  margin:4px 0 0 0;
  min-height:1.2em;
  font-size:0.9rem;
  color:var(--muted);
}
.micro-confetti{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:10000;
}
.micro-confetti-piece{
  position:fixed;
  width:7px;
  height:11px;
  border-radius:2px;
  opacity:0.95;
  will-change:transform, opacity;
  animation:confetti-fall .9s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes confetti-fall{
  0%{transform:translate3d(0,0,0) rotate(0deg);opacity:0.95}
  100%{transform:translate3d(var(--tx), var(--ty), 0) rotate(var(--rot));opacity:0}
}

/* Projects */
.projects-section h2{margin-bottom:14px}
.project-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:22px;
}
.project-card{
  display:flex;
  flex-direction:column;
  gap:18px;
  padding:18px;
  border-radius:16px;
  background:var(--nav-bg);
  box-shadow:0 10px 28px rgba(12,14,20,0.1);
  backdrop-filter:blur(var(--glass-blur));
  border:1px solid rgba(15,17,21,0.08);
  overflow:visible;
  transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
[data-theme="dark"] .project-card{
  border-color:rgba(238,241,244,0.12);
}
.project-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 38px rgba(12,14,20,0.16);
  border-color:rgba(108,92,231,0.32);
}
[data-theme="dark"] .project-card:hover{
  border-color:rgba(138,180,255,0.42);
}
.project-media{
  position:relative;
  min-height:260px;
  border-radius:14px;
  background:
    radial-gradient(circle at 80% 10%, rgba(108,92,231,0.34), transparent 40%),
    radial-gradient(circle at 10% 90%, rgba(138,180,255,0.38), transparent 42%),
    linear-gradient(145deg, rgba(15,17,21,0.12), rgba(15,17,21,0.02));
  border:1px solid rgba(15,17,21,0.1);
  overflow:hidden;
  transform:translateY(0) scale(1);
  transition:transform .32s cubic-bezier(.2,.9,.2,1), box-shadow .32s cubic-bezier(.2,.9,.2,1);
}
[data-theme="dark"] .project-media{
  border-color:rgba(238,241,244,0.14);
}
.project-card:hover .project-media{
  transform:translateY(-12px) scale(1.03);
  box-shadow:0 24px 30px rgba(2,6,23,0.28);
}
.project-media-label{
  position:absolute;
  left:14px;
  bottom:14px;
  font-size:0.84rem;
  font-weight:700;
  letter-spacing:0.02em;
  color:var(--text);
  background:var(--bg-solid);
  border-radius:8px;
  padding:6px 10px;
  box-shadow:0 4px 12px rgba(12,14,20,0.16);
}
.project-body h3{
  margin:0;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:1.2rem;
}
.coming-soon-note{
  margin:8px 0 0 0;
  color:var(--muted);
  font-weight:500;
  opacity:1;
}
.wave-hand{
  display:inline-block;
  transform-origin:70% 70%;
}
.reveal.visible .wave-hand{
  animation:wave-hand .75s ease-in-out 0s 7;
}

@keyframes wave-hand{
  0%{transform:rotate(0deg)}
  25%{transform:rotate(16deg)}
  50%{transform:rotate(-10deg)}
  75%{transform:rotate(12deg)}
  100%{transform:rotate(0deg)}
}
@keyframes soon-fade{
  0%{opacity:1;filter:blur(0)}
  55%{opacity:1;filter:blur(0)}
  80%{opacity:.5;filter:blur(2px)}
  100%{opacity:0;filter:blur(8px)}
}

/* Quote block */
.quote-section{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
}
.quote-main{
  --mx:50%;
  --my:50%;
  margin:0;
  max-width:24ch;
  font-family:Space Grotesk, Inter, sans-serif;
  font-size:clamp(1.9rem, 6vw, 3.6rem);
  font-weight:900;
  line-height:0.95;
  letter-spacing:-0.02em;
  position:relative;
  display:inline-block;
  color:var(--quote-base);
  transition:color .35s ease;
}
.quote-main::after{
  content:attr(data-quote);
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,var(--quote-hover-main),var(--quote-hover-alt));
  color:transparent;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-mask-image:radial-gradient(circle 170px at var(--mx) var(--my), rgba(0,0,0,1) 0%, rgba(0,0,0,0.78) 40%, rgba(0,0,0,0) 72%);
  mask-image:radial-gradient(circle 170px at var(--mx) var(--my), rgba(0,0,0,1) 0%, rgba(0,0,0,0.78) 40%, rgba(0,0,0,0) 72%);
  opacity:0;
  transition:opacity .28s ease;
}
.quote-main.is-hovered::after{opacity:1}
.quote-author{
  margin:0;
  font-size:0.82rem;
  font-weight:500;
  color:var(--muted);
  letter-spacing:0.02em;
}

/* Cards and grids */
.uniform-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.uniform-card{
  display:flex;gap:14px;padding:14px;border-radius:10px;background:transparent;
  transition:transform .3s ease,background .3s ease,box-shadow .3s ease;cursor:pointer
}
.uniform-card:hover{transform:scale(1.02);background:transparent;box-shadow:0 8px 20px rgba(12,14,20,0.08)}
.card-logo{width:56px;height:56px;border-radius:6px;object-fit:cover;flex-shrink:0}
.card-content{flex:1;display:flex;flex-direction:column}
.card-content h3{margin:0;font-size:0.95rem;font-weight:700}
.card-content .date-range,.card-content .issuer{font-size:0.85rem;color:var(--muted);margin-top:2px}
.dropdown-toggle{
  background:none;border:none;cursor:pointer;color:var(--text);font-size:12px;
  padding:0;margin-top:6px;align-self:flex-start;transition:transform .3s cubic-bezier(.2,.9,.2,1);pointer-events:none
}
.dropdown-toggle.active{transform:rotate(180deg)}
.dropdown-menu{
  max-height:0;overflow:hidden;margin-top:0;padding:0;border-top:none;
  transition:max-height .35s cubic-bezier(.2,.9,.2,1),padding .35s cubic-bezier(.2,.9,.2,1),margin .35s ease,border .35s ease;
  border-top:1px solid rgba(15,17,21,0.1)
}
[data-theme="dark"] .dropdown-menu{border-top-color:rgba(238,241,244,0.1)}
.dropdown-menu.open{
  max-height:200px;padding:8px 0;margin-top:8px;border-top:1px solid rgba(15,17,21,0.1)
}
[data-theme="dark"] .dropdown-menu.open{border-top-color:rgba(238,241,244,0.1)}
.dropdown-menu a{
  display:block;padding:6px 0;color:var(--text);text-decoration:none;font-size:0.9rem;
  transition:color .2s ease;cursor:pointer
}
.dropdown-menu a:hover{color:var(--accent)}

/* Reveal animation with small stagger support */
.reveal{opacity:0;transform:translateY(26px);filter:blur(8px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.9,.2,1),filter .7s}
.reveal.visible{opacity:1;transform:none;filter:blur(0)}

/* Theme toggle */
.theme-toggle{position:fixed;right:24px;top:22px;background:var(--nav-bg);border:none;padding:10px;border-radius:12px;cursor:pointer;z-index:220;backdrop-filter:blur(var(--glass-blur));box-shadow:0 6px 18px rgba(2,6,23,0.08);transition:background .6s ease,color .6s ease,transform .3s ease}
.theme-toggle i{font-size:14px;color:var(--text);transition:color .6s ease}

/* Responsive adjustments */
@media (max-width:768px){
  .hero-text h1{font-size:33px}
  main{padding:48px 18px 100px 18px}
  .profile-pic{width:96px;height:96px}
  .hero{flex-direction:column;align-items:center;text-align:center}
  .project-media{min-height:210px}
  .project-card{padding:14px}
  .project-body h3{font-size:1.06rem}
  .quote-author{font-size:0.8rem}
}

/* Utility */
.muted{color:var(--muted)}