/* --- 1. Variables & Root --- */
:root {
  /* Colors */
  --dark-navy: #020c1b;
  --navy: #0a192f;
  --light-navy: #112240;
  --lightest-navy: #233554;
  --navy-shadow: rgba(2, 12, 27, 0.7);
  --dark-slate: #495670;
  --slate: #8892b0;
  --light-slate: #a8b2d1;
  --lightest-slate: #ccd6f6;
  --white: #e6f1ff;
  --green: #64ffda;
  --green-tint2: rgba(100, 255, 218, 0.1);
  --green-tint: rgba(100, 255, 218, 0.434);
  --pink: #f57dff;
  --blue: #57cbff;

  /* Fonts */
  --font-sans: "Calibre-Regular", "Inter", "San Francisco", "SF Pro Text", -apple-system, system-ui, sans-serif;
  --font-mono: "SF Mono", "Consolas", "Fira Code", "Fira Mono", "Roboto Mono", monospace;

  /* Font Sizes - Converted to rem */
  --fz-xxs: 0.75rem;    /* 12px */
  --fz-xs: 0.8125rem;   /* 13px */
  --fz-sm: 0.875rem;    /* 14px */
  --fz-md: 1rem;       /* 16px */
  --fz-lg: 1.125rem;    /* 18px */
  --fz-xl: 1.25rem;     /* 20px */
  --fz-xxl: 1.375rem;    /* 22px */
  --fz-heading: 2rem;   /* 32px */

  /* Components */
  --border-radius: 0.25rem; /* 4px */
  --nav-height: 6.25rem;
  --transition: all 0.25s linear;
}

/* --- 2. Global Styles --- */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-width: thin;
  scrollbar-color: var(--dark-slate) var(--navy);
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background-color: var(--navy);
  color: var(--slate);
  font-size: var(--fz-xl);
  line-height: 1.3;
  margin: 0;
}

::selection {
  background-color: var(--lightest-navy);
  color: var(--lightest-slate);
}

p {
  margin: 0 0 1.25rem 0;
}

hr {
  width: 5.625rem;
  height: 1px;
  background-color: var(--light-slate);
  border: none;
}

a {
  text-decoration: none;
  transition: var(--transition);
}

.page {
  max-width: 75rem; /* 1200px equivalent */
  margin: 0 auto;
  padding: 0 1.25rem; /* Better for mobile scaling than fixed 150px */
}

.heading {
  color: var(--lightest-slate);
}

/* --- 3. Navigation --- */
.nav-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 1.25rem 3.125rem;
}

.nav-ctn {
  display: flex;
  align-items: center;
}

.nav-links {
  display: flex;
  list-style: none;
  margin-right: 1.25rem;
  font-family: var(--font-mono);
}

.nav-links a {
  color: var(--lightest-slate);
  font-size: var(--fz-xs);
  padding: 0.625rem;
}

.nav-links a:hover {
  color: var(--green);
}

/* --- 4. Switch / Dark Mode --- */
.switch {
  position: relative;
  display: inline-block;
  width: 3.375rem;
  height: 1.75rem;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 2.125rem;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1.25rem;
  width: 1.25rem;
  left: 0.25rem;
  bottom: 0.25rem;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider { background-color: var(--green); }
input:checked + .slider:before { transform: translateX(1.625rem); }

/* --- 5. Hero Section --- */
#hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding-left: 6.25rem;
}

#name {
  color: var(--green);
  font-family: var(--font-mono);
  margin: 0 0 1.5625rem 0.25rem;
}

#hero h1, #hero h2 {
  font-weight: 600;
  font-size: clamp(2.5rem, 8vw, 5rem); /* Scalable font size */
  margin: 0;
}

#hero h1 { color: var(--lightest-slate); }

#descr {
  max-width: 34.375rem;
  line-height: 1.4;
  margin-top: 1.875rem;
}

.button {
  display: inline-block;
  color: var(--green);
  border: 1px solid var(--green);
  background: transparent;
  border-radius: var(--border-radius);
  padding: 1.25rem 1.75rem;
  font-size: var(--fz-sm);
  font-family: var(--font-mono);
  margin-top: 3.125rem;
  transition: var(--transition);
}

.button:hover {
  box-shadow: 0.25rem 0.25rem 0 0 var(--green);
  transform: translate(-0.3125rem, -0.3125rem);
  cursor: pointer;
}

/* --- 6. About Section --- */
.about-ctn {
  margin-top: 18.75rem;
}

.about-heading {
  display: flex;
  align-items: center;
  margin-bottom: 2.5rem;
}

.about-heading hr {
  width: clamp(100px, 30vw, 400px);
  margin-left: 1.25rem;
  background-color: var(--lightest-navy);
}

.about-descr-ctn {
  display: flex;
  flex-wrap: wrap;
  gap: 6.25rem;
}

#about-descr { flex: 1; min-width: 18.75rem; max-width: 36.875rem; }

.recent-tech {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 200px));
  gap: 0 0.625rem;
  padding: 0;
  list-style: none;
}

.recent-tech ul {
  list-style: none;
  padding: 0;
  font-family: var(--font-mono);
  font-size: var(--fz-md);
}

.recent-tech li::before {
  content: "▹";
  color: var(--green);
  margin-right: 0.625rem;
  font-family: var(--font-mono);
}

/* --- 7. Images & Glaze --- */
.img-wrapper {
  position: relative;
  display: inline-block;
}

.about-img-ctn {
  position: relative;
  display: inline-block;
  z-index: 0; /* establishes stacking context */
}

.about-img-ctn::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100%;
  height: 300px;
  border: 2px solid var(--green);
  z-index: -1; /* 👈 truly behind */
}

#me-img {
  width: 18.75rem;
  height: 18.75rem;
  display: block;
  z-index: 2;
}

.img-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--green-tint);
  transition: var(--transition);
  pointer-events: none;
  z-index: 3;
}

.img-wrapper:hover::after { opacity: 0; }

/* heading lime */

.lime {
  color: var(--green);
  font-family: var(--font-mono);
  font-weight: 500;
}

.lime2 {
  color: var(--green);
  font-weight: 400;
}

.num-head {
  font-size: 22px;
}

/* What I Do Section */

.what-i-do-ctn {
  margin: 500px 0;
}

.what-i-do-header {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 3.125rem;
}

.what-i-do-header h2 {
  color: var(--lightest-slate);
  line-height: 1.1;
  font-size: var(--fz-heading);
  font-family: var(--font-sans);
}

.what-i-do-header hr {
  width: 18.75rem;
  height: 1px;
  background-color: var(--lightest-navy);;
  margin: 0 1.25rem;
}

.thirds-ctn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: right;
  gap: 12.5rem;
}

.thirds-ctn img {
  width: 14rem;
  height: 14rem;
  border-radius: 50%;
  margin-bottom: 0.625rem;
}

.icon {
  width: 14rem;
  height: 14rem;
  border-radius: 50%;
  margin-bottom: 3.125rem;
  background-color: var(--dark-navy);
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: center; /* horizontal centering */
  align-items: center;     /* vertical centering */
  color: var(--slate);
}

.spin {
  display: inline-block;           /* REQUIRED for transform */
  transition: transform 0.6s ease;
}

.spin:hover {
  transform: rotate(360deg);
}

.thirds-ctn p {
  color: var(--slate);
  font-family: var(--font-sans);
  margin: 2rem 3.125rem;
  width: 25rem;
}

.third {
  text-align: center;
  color: var(--green-tint);
  font-family: var(--font-mono);
  
}

/* Experience Section */

.experience-ctn {
  margin-top: 62.5rem;
  margin-left: 6.25rem;
}

.experience-header {
  display: flex;
  align-items: center;
  justify-content: right;
  margin-bottom: 6.25rem;
  color: var(--lightest-slate);;
}

.experience-header hr {
  width: 18.75rem;
  height: 1px;
  background-color: var(--lightest-navy);;
  margin: 0 1.25rem;
}

#projects {
  display: flex;
  flex-direction: column;
}

.project {
  position: relative;
  margin-bottom: 6.25rem;
}

.glaze {
  height: 22.625rem;
  width: 36.19rem;
  border-radius: 1%;
  flex-shrink: 0;
  overflow: hidden;
}

.project-details {
  position: absolute;
  top: 50%;
  z-index: 5;
}

.pd-right {
  right: 5rem; 
  transform: translateY(-50%);                 /* 🔑 THIS */
  text-align: right;
}

.pd-left {
  left: 0; 
  transform: translateY(-50%);                 /* 🔑 THIS */
  text-align: left;
}

.feature {
  margin: 0.625rem 0px;
  color: var(--green);
  font-family: var(--font-mono);
  font-size: var(--fz-xs);
  font-weight: 400;
}

h4 {
  font-weight: 600;
  color: var(--lightest-slate);
  line-height: 1.1;
  font-size: 1.75rem;
  margin: 0;
  margin-bottom: 1.25rem;
}

.project-synopsis {
  position: relative;
  padding: 1.56rem;
  background-color: var(--light-navy);
  color: var(--light-slate);
  font-size: 1.125rem;
  box-shadow: 0 0.625rem 1.875rem -0.94rem var(--navy-shadow);
  width: 27.81rem;
  height: auto;
} 

.tech-stack {
  font-family: var(--font-mono);
  font-size: var(--fz-xs);
  white-space: nowrap;
  letter-spacing: 0.3em;
  margin: 1.25rem 0;
  color: var(--light-slate);
}

.project-details i {
  color: var(--lightest-slate);
}


/* --- 9. Contact Form --- */

.contact-ctn {
  margin-top: 300px;
}

.contact-header {
  display: flex;
  align-items: center;
  justify-content: left;
  margin-bottom: 3.125rem;
  color: var(--lightest-slate);;
}

.contact-header hr {
  width: 18.75rem;
  height: 1px;
  background-color: var(--lightest-navy);;
  margin: 0 1.25rem;
}

.contact-ctn h3 {
  font-weight: 300;
  text-align: center;
  font-size: 2.5rem;
  font-family: "IBM Plex Sans";
  margin-bottom: 1.85rem;
}

.form {
  margin: 6.875rem auto;
  width: 31.25rem;
  color: white;
  font-weight: bold;
}

#get-in-touch {
  width: 6.25rem;
  height: 1px;
  background-color: var(--green);;
  margin: 0.625rem auto;
}

.contact-message {
  text-align: center;
  margin: 1.875rem 0px;
  color: var(--light-slate)
}

.form input,
textarea {
  color: white;
  font-size: large;
 }

input:focus,
textarea:focus {
  outline: none;
  box-shadow: none;
  --webkit-appearance: none;
}

.input-wrapper {
  position: relative;
  margin: 0 0 1.56rem;
}

.input-wrapper label {
  display: block;
  margin-bottom: -0.625rem; /* Increased to overcome input padding */
  position: relative;
  z-index: 2;           /* Ensure it sits above the input */
  pointer-events: none; /* Allows clicks to pass through to the input */
  font-size: 0.9em;
}

.input-wrapper input,
.input-wrapper textarea {
  display: block;
  width: 100%;
  padding: 1.25rem 0 0.625rem; /* Room for the label to sit inside */
  background-color: var(--navy);
  border: none;
  border-bottom: 1px solid white;
  font-family: var(--font-sans);
  font-weight: 100;
  color: white;
  outline: none;
  resize: none;
}


.input-wrapper label,
.input-wrapper input,
.input-wrapper textarea {
  transition: all 0.3s ease;
}

/* 2. Target the label when the wrapper is focused */
.input-wrapper:focus-within label {
  color: var(--green);            /* Your Green */
  transform: translateY(-15px); /* Moves it up exactly 5px */
  font-size: 0.8em;              /* Shrinks it down */
}


/* 3. Create the "expanding" green border */
.input-wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0; /* Start at zero width */
  height: 2px; /* Slightly thicker than the base border to stand out */
  background-color: var(--green); /* Your green */
  transition: width 0.4s ease-in-out;
}

.input-wrapper:focus-within::after {
  width: 100%; /* Expand to full width from left to right */
}



/* --- 10. Footer & Banners --- */
.banner {
  position: fixed;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  width: 2.5rem;
}

.banner::after {
  content: "";
  width: 1px;
  height: 5.625rem;
  background-color: var(--slate);
}

.left { left: 1.875rem; }
.right { right: 1.875rem; }

.banner a i {
  font-size: 1.25rem;
  color: var(--light-slate);
  transition: var(--transition);
}

.banner a:hover i,
.banner p:hover {
  color: var(--green);
  transform: translateY(-5px);
}

.right p {
  writing-mode: vertical-rl;
  font-family: var(--font-mono);
  font-size: var(--fz-xxs);
  letter-spacing: 0.2em;
  transition: var(--transition);
  cursor: pointer;
  margin: 0;
}