/* ========================================
   CSS Variables
   ======================================== */
:root {
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Merriweather', Georgia, serif;

  --neutral-50: oklch(0.98 0.01 240);
  --neutral-100: oklch(0.92 0.015 240);
  --neutral-200: oklch(0.85 0.02 240);
  --neutral-300: oklch(0.75 0.025 240);
  --neutral-400: oklch(0.65 0.03 240);
  --neutral-500: oklch(0.55 0.035 240);
  --neutral-600: oklch(0.45 0.04 240);
  --neutral-700: oklch(0.35 0.045 240);
  --neutral-800: oklch(0.25 0.05 240);

  --accent-primary: oklch(0.65 0.15 160);
  --accent-secondary: oklch(0.7 0.12 40);
  --accent-active: oklch(0.7 0.15 30);

  --spacing-sm: 0.625rem;
  --spacing-md: 1.25rem;
  --spacing-lg: 1.875rem;
  --spacing-xl: 3.125rem;
  --max-width: 56.25rem;
}

/* ========================================
   Reset & Base Styles
   ======================================== */
* {
  box-sizing: border-box;
}

html,
body {
  block-size: 100%;
  margin: 0;
}

body {
  background: var(--neutral-50);
  color: var(--neutral-800);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 2rem;
  padding-block-start: 5rem;
}

/* ========================================
   Typography
   ======================================== */
h1,
h2,
h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  margin: 0 0 var(--spacing-md);
}

h1 {
  font-size: 2.5rem;
  line-height: 1.5;
}

h2 {
  font-size: 1.75rem;
}

h3 {
  font-size: 1.25rem;
}

/* ========================================
   Links & Buttons
   ======================================== */
a {
  color: var(--accent-primary);
  text-decoration: none;
}

a:hover {
  color: var(--accent-secondary);
}

.btn {
  background: var(--accent-primary);
  color: var(--neutral-50);
  text-transform: uppercase;
  font-size: 0.75rem;
  display: inline-block;
  padding: 0.4375rem;
  letter-spacing: 0.1em;
  line-height: 1;
  border-radius: 0.25rem;
  transition: all 0.3s ease;
}

.btn:hover {
  background: var(--accent-secondary);
  color: var(--neutral-50);
  transform: translateY(-0.125rem);
  box-shadow: 0 0.25rem 0.5rem oklch(from var(--accent-secondary) l c h / 0.3);
}

/* ========================================
   Layout Containers
   ======================================== */
.content-wrapper {
  margin: 0 auto;
  max-inline-size: var(--max-width);
  padding: var(--spacing-md);
}

/* ========================================
   Navigation
   ======================================== */
.main-nav {
  background: var(--neutral-800);
  padding-block: 0.5rem;
  position: fixed;
  inset-block-start: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  z-index: 100;
  inline-size: 100%;
}

.nav-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.logotype {
  color: var(--neutral-50);
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  text-decoration: none;
  transition: color 0.3s ease;
  animation: logotypeEntrance 1.2s ease-out;
}

@keyframes logotypeEntrance {
  0% {
    opacity: 0;
    transform: translateY(-1.25rem) scale(0.8);
  }
  50% {
    opacity: 0.7;
    transform: translateY(-0.625rem) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.logotype:hover {
  color: var(--accent-secondary);
  transform: scale(1.05);
}

.nav-links {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: var(--spacing-md);
  align-items: center;
}

.nav-links li {
  margin: 0;
}

.nav-links a {
  color: var(--neutral-200);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: 0.25rem;
  border: 0.125rem solid transparent;
}

.nav-links a:hover {
  color: var(--accent-secondary);
  border-color: var(--accent-secondary);
  background: var(--neutral-700);
  transform: translateY(-0.125rem);
  box-shadow: 0 0.25rem 0.5rem oklch(from var(--accent-secondary) l c h / 0.2);
}

.nav-links a.active {
  color: var(--accent-active);
  background: var(--neutral-700);
  border-color: var(--accent-active);
}

.nav-links .btn {
  background: var(--neutral-800);
  color: var(--neutral-50);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: 0.25rem;
  border: 0.125rem solid transparent;
  transition: all 0.3s ease;
}

.nav-links .btn:hover {
  background: var(--neutral-700);
  color: var(--accent-secondary);
  border-color: var(--accent-secondary);
  transform: translateY(-0.125rem);
  box-shadow: 0 0.25rem 0.5rem oklch(from var(--accent-secondary) l c h / 0.2);
}

.nav-links .btn.active {
  background: var(--neutral-700);
  color: var(--accent-active);
  border-color: var(--accent-active);
}

#contact-trigger {
  background: var(--neutral-800);
  color: var(--neutral-50);
  text-transform: uppercase;
  font-size: 0.75rem;
  display: inline-block;
  padding: var(--spacing-sm) var(--spacing-md);
  letter-spacing: 0.1em;
  line-height: 1;
  border-radius: 0.25rem;
  border: 0.125rem solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  font-family: inherit;
  font-weight: 500;
}

#contact-trigger:hover {
  background: var(--neutral-700);
  color: var(--accent-secondary);
  border-color: var(--accent-secondary);
}

#contact-trigger:focus {
  outline: 0.125rem solid var(--accent-secondary);
  outline-offset: 0.125rem;
}

/* ========================================
   Home Page
   ======================================== */
.home {
  background: url(../images/bg-image.jpg) no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
}

.home .content-wrapper {
  flex: 1 0 auto;
}

.content-bg {
  background: oklch(from var(--neutral-50) l c h / 0.9);
  padding: var(--spacing-lg);
  margin-block-start: var(--spacing-lg);
}

/* ========================================
   Resume Page
   ======================================== */
.resume header::before,
.projects header::before,
.contact header::before,
.animations header::before {
  background: url(../images/bg-resume.jpg) center;
  background-size: cover;
  content: "";
  display: block;
  block-size: 30rem;
}

.resume-section {
  margin-block-end: var(--spacing-xl);
}

.profile {
  background: var(--neutral-100);
  padding: var(--spacing-md);
  border-radius: 0.5rem;
}

.work-item {
  margin: var(--spacing-lg) 0;
  background: var(--neutral-100);
  padding: var(--spacing-md);
  border-radius: 0.5rem;
}

.work-detail p {
  margin: 0;
}

.work-summary p:first-child {
  margin-block-start: 0;
}

.education-item {
  margin: var(--spacing-lg) 0;
  background: var(--neutral-100);
  padding: var(--spacing-md);
  border-radius: 0.5rem;
}

.education-item p {
  margin: 0;
}

/* ========================================
   Projects Page
   ======================================== */
.projects-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
  margin-block-start: var(--spacing-lg);
}

.project-card {
  background: var(--neutral-100);
  padding: var(--spacing-md);
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
}

.project-card img {
  inline-size: 100%;
  max-inline-size: 18.75rem;
  border-radius: 0.25rem;
  justify-self: center;
  margin-block-end: 0.5rem;
}

.project-card h3 {
  margin: 0 0 0.5rem 0;
  color: var(--neutral-800);
  line-height: 1.2;
}

.project-card p {
  margin: 0;
  line-height: 1.4;
  color: var(--neutral-600);
}

.project-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-block-start: 0.5rem;
}

.project-links .btn {
  margin: 0;
}

.project-items {
  margin: var(--spacing-lg) 0;
  background: var(--neutral-100);
  padding: var(--spacing-md);
  border-radius: 0.5rem;
}

.project-items img {
  inline-size: 100%;
  max-inline-size: 18.75rem;
  margin-block-end: var(--spacing-sm);
}

/* ========================================
   Contact Page
   ======================================== */
.contact-info {
  background: var(--neutral-100);
  padding: var(--spacing-md);
  border-radius: 0.5rem;
  margin: var(--spacing-lg) 0;
}

.contact-info p {
  margin: var(--spacing-sm) 0;
}

/* ========================================
   Contact Popover
   ======================================== */
.contact-popover[popover] {
  display: none;
}

.contact-popover[popover]:popover-open {
  display: flex !important;
}

.contact-popover:not([popover]) {
  display: none;
}

.contact-popover:popover-open .popover-content {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.contact-popover {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
  background: oklch(from var(--neutral-800) l c h / 0.8);
  backdrop-filter: blur(0.5rem);
  -webkit-backdrop-filter: blur(0.5rem);
  inline-size: 100vw;
  block-size: 100vh;
}

.popover-content {
  position: relative;
  background: var(--neutral-50);
  border-radius: 0.75rem;
  box-shadow: 0 1.25rem 3.125rem oklch(from var(--neutral-800) l c h / 0.3);
  max-inline-size: 90vw;
  max-block-size: 90vh;
  min-inline-size: 20rem;
  min-block-size: 15rem;
  overflow: hidden;
  container-type: inline-size;
  container-name: popover;
  margin: auto;
  display: block;
  z-index: 1001;
}

.popover-close {
  position: absolute;
  inset-block-start: var(--spacing-sm);
  inset-inline-end: var(--spacing-sm);
  z-index: 10;
  background: var(--neutral-200);
  border: none;
  border-radius: 50%;
  inline-size: 2rem;
  block-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--neutral-600);
  cursor: pointer;
  transition: all 0.2s ease;
}

.popover-close:hover {
  background: var(--neutral-300);
  color: var(--neutral-800);
}

.popover-body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  inline-size: 100%;
  box-sizing: border-box;
}

.popover-image {
  display: flex;
  justify-content: center;
  align-items: center;
  inline-size: 100%;
}

.popover-image img {
  inline-size: 8rem;
  block-size: 8rem;
  border-radius: 50%;
  object-fit: cover;
  border: 0.25rem solid var(--neutral-200);
  display: block;
}

.popover-info h3 {
  margin: 0 0 var(--spacing-sm) 0;
  color: var(--neutral-800);
  text-align: center;
}

.popover-info .bio {
  margin: 0 0 var(--spacing-md) 0;
  color: var(--neutral-600);
  line-height: 1.5;
}

.contact-details {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.contact-details p {
  margin: 0;
  color: var(--neutral-700);
}

.contact-details a {
  color: var(--accent-primary);
  text-decoration: none;
}

.contact-details a:hover {
  color: var(--accent-secondary);
}

/* ========================================
   Animations Page
   ======================================== */
.animations-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-lg);
  margin-block-start: var(--spacing-lg);
}

.animation-card {
  background: var(--neutral-100);
  padding: var(--spacing-md);
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.animation-card:hover {
  transform: translateY(-0.25rem);
  box-shadow: 0 0.5rem 1rem oklch(from var(--neutral-800) l c h / 0.1);
}

.animation-card h3 {
  margin: 0 0 var(--spacing-sm) 0;
  color: var(--neutral-800);
  line-height: 1.2;
}

.animation-card p {
  margin: 0;
  line-height: 1.4;
  color: var(--neutral-600);
}

.animation-container {
  inline-size: 100%;
  block-size: 12rem;
  background: var(--neutral-200);
  border-radius: 0.5rem;
  margin-block-end: var(--spacing-md);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  contain: layout paint style;
}

.animated-shape {
  position: absolute;
  border-radius: 50%;
  will-change: transform, filter, clip-path;
}

.clip-path-animation .shape-1 {
  inline-size: 6rem;
  block-size: 6rem;
  background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary));
  -webkit-mask: radial-gradient(closest-side, oklch(0 0 0) 60%, transparent 62%) center/120% 120% no-repeat;
  mask: radial-gradient(closest-side, oklch(0 0 0) 60%, transparent 62%) center/120% 120% no-repeat;
  animation: clipPathMorph 3.5s ease-in infinite alternate, maskPulse 3.5s ease-in infinite alternate;
}

@keyframes clipPathMorph {
  0% {
    clip-path: circle(50% at 50% 50%);
  }
  20% {
    clip-path: ellipse(60% 40% at 50% 50%);
  }
  40% {
    clip-path: polygon(50% 0%, 65% 30%, 100% 35%, 74% 55%, 82% 95%, 50% 75%, 18% 95%, 26% 55%, 0% 35%, 35% 30%);
  }
  60% {
    clip-path: polygon(50% 5%, 95% 50%, 50% 95%, 5% 50%);
  }
  80% {
    clip-path: circle(35% at 50% 50%);
  }
  100% {
    clip-path: circle(50% at 50% 50%);
  }
}

@keyframes maskPulse {
  0% {
    -webkit-mask-size: 130% 130%;
    mask-size: 130% 130%;
  }
  50% {
    -webkit-mask-size: 90% 90%;
    mask-size: 90% 90%;
  }
  100% {
    -webkit-mask-size: 130% 130%;
    mask-size: 130% 130%;
  }
}

.filter-animation .shape-2 {
  inline-size: 6rem;
  block-size: 6rem;
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
  animation: filterEffects 3s ease-in-out infinite;
  will-change: transform, filter;
}

@keyframes filterEffects {
  0% {
    filter: hue-rotate(0deg) brightness(1) blur(0);
    transform: scale(1);
  }
  33% {
    filter: hue-rotate(120deg) brightness(1.2) blur(0.125rem);
    transform: scale(1.1);
  }
  66% {
    filter: hue-rotate(240deg) brightness(0.8) blur(0);
    transform: scale(0.9);
  }
  100% {
    filter: hue-rotate(360deg) brightness(1) blur(0);
    transform: scale(1);
  }
}

.blend-mode-animation {
  background: var(--neutral-200);
}

.blend-mode-animation .shape-3 {
  inline-size: 5rem;
  block-size: 5rem;
  background: var(--accent-primary);
  animation: blendModeMove 2.5s ease-in-out infinite;
  mix-blend-mode: multiply;
}

.blend-mode-animation .shape-3-overlay {
  inline-size: 4rem;
  block-size: 4rem;
  background: var(--accent-secondary);
  animation: blendModeMove 2.5s ease-in-out infinite reverse;
  mix-blend-mode: screen;
}

@keyframes blendModeMove {
  0%, 100% {
    transform: translate(-1rem, -1rem) rotate(0deg);
  }
  25% {
    transform: translate(1rem, -1rem) rotate(90deg);
  }
  50% {
    transform: translate(1rem, 1rem) rotate(180deg);
  }
  75% {
    transform: translate(-1rem, 1rem) rotate(270deg);
  }
}

/* ========================================
   SVG Animation Project
   ======================================== */
.svg-animation-container {
  background: var(--neutral-100);
  padding: var(--spacing-xl);
  border-radius: 0.5rem;
  margin: var(--spacing-lg) 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-block-size: 25rem;
}

.svg-animation {
  inline-size: 100%;
  max-inline-size: 25rem;
  block-size: auto;
  display: block;
}

.svg-shape {
  opacity: 0;
  animation-fill-mode: forwards;
}

.svg-bg-circle {
  stroke: var(--neutral-300);
  animation: svgFadeIn 0.8s ease-out 0.2s forwards;
}

.svg-device-body {
  fill: var(--accent-primary);
  animation: svgSlideUp 0.6s ease-out 0.5s forwards;
  transform: translateY(1.25rem);
}

.svg-screen {
  fill: var(--neutral-50);
  animation: svgFadeIn 0.5s ease-out 0.8s forwards;
}

.svg-line-1,
.svg-line-2,
.svg-line-3 {
  stroke: var(--accent-secondary);
}

.svg-line-1 {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: svgDrawLine 0.6s ease-out 1.1s forwards;
}

.svg-line-2 {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: svgDrawLine 0.5s ease-out 1.4s forwards;
}

.svg-line-3 {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: svgDrawLine 0.4s ease-out 1.7s forwards;
}

.svg-button-1,
.svg-button-2 {
  fill: var(--accent-secondary);
}

.svg-button-1 {
  animation: svgPulseIn 0.4s ease-out 2s forwards;
}

.svg-button-2 {
  animation: svgPulseIn 0.4s ease-out 2.2s forwards;
}

.svg-antenna {
  stroke: var(--neutral-600);
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation: svgDrawLine 0.5s ease-out 1.8s forwards;
}

.svg-antenna-tip {
  fill: var(--accent-primary);
  animation: svgScaleIn 0.3s ease-out 2.3s forwards;
  transform: scale(0);
  transform-origin: center;
}

.svg-orbit-group {
  transform-origin: 200px 200px;
}

.svg-orbit-wrapper-1 {
  transform: translate(200px, 200px) rotate(-135deg) translateY(-140px) rotate(135deg);
  animation: svgOrbit 4s linear 2.5s infinite;
  transform-origin: 200px 200px;
}

.svg-orbit-wrapper-2 {
  transform: translate(200px, 200px) rotate(-45deg) translateY(-140px) rotate(45deg);
  animation: svgOrbit 4s linear 2.7s infinite;
  transform-origin: 200px 200px;
}

.svg-orbit-wrapper-3 {
  transform: translate(200px, 200px) rotate(45deg) translateY(-140px) rotate(-45deg);
  animation: svgOrbit 4s linear 2.9s infinite;
  transform-origin: 200px 200px;
}

.svg-orbit-wrapper-4 {
  transform: translate(200px, 200px) rotate(135deg) translateY(-140px) rotate(-135deg);
  animation: svgOrbit 4s linear 3.1s infinite;
  transform-origin: 200px 200px;
}

.svg-orbit-path {
  stroke: var(--neutral-200);
}

.svg-orbit-1,
.svg-orbit-3 {
  fill: var(--accent-primary);
}

.svg-orbit-2,
.svg-orbit-4 {
  fill: var(--accent-secondary);
}

.svg-orbit-1 {
  animation: svgFadeIn 0.5s ease-out 2.5s forwards;
}

.svg-orbit-2 {
  animation: svgFadeIn 0.5s ease-out 2.7s forwards;
}

.svg-orbit-3 {
  animation: svgFadeIn 0.5s ease-out 2.9s forwards;
}

.svg-orbit-4 {
  animation: svgFadeIn 0.5s ease-out 3.1s forwards;
}

.svg-star-1,
.svg-star-4 {
  fill: var(--accent-secondary);
}

.svg-star-2,
.svg-star-3 {
  fill: var(--accent-primary);
}

.svg-star-1 {
  animation: svgTwinkle 2s ease-in-out 2.4s infinite, svgFadeIn 0.4s ease-out 2.4s forwards;
}

.svg-star-2 {
  animation: svgTwinkle 2s ease-in-out 2.6s infinite, svgFadeIn 0.4s ease-out 2.6s forwards;
}

.svg-star-3 {
  animation: svgTwinkle 2s ease-in-out 2.8s infinite, svgFadeIn 0.4s ease-out 2.8s forwards;
}

.svg-star-4 {
  animation: svgTwinkle 2s ease-in-out 3s infinite, svgFadeIn 0.4s ease-out 3s forwards;
}

@keyframes svgFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes svgSlideUp {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes svgDrawLine {
  to {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

@keyframes svgPulseIn {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes svgScaleIn {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes svgOrbit {
  from {
    transform: translate(200px, 200px) rotate(0deg) translateY(-140px) rotate(0deg);
  }
  to {
    transform: translate(200px, 200px) rotate(360deg) translateY(-140px) rotate(-360deg);
  }
}

@keyframes svgTwinkle {
  0%, 100% {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

/* ========================================
   Footer
   ======================================== */
footer {
  background: var(--neutral-800);
  color: var(--neutral-200);
  padding: var(--spacing-md);
  text-align: center;
}

footer a {
  color: var(--neutral-100);
}

footer a:hover {
  color: var(--accent-secondary);
}

.socials {
  list-style-type: none;
  padding: 0;
  margin: var(--spacing-sm) 0 0;
}

.socials li {
  display: inline-block;
  margin-inline-start: var(--spacing-sm);
}

.socials img {
  inline-size: 2rem;
}

.socials img:hover {
  opacity: 0.5;
}

/* ========================================
   Media Queries
   ======================================== */
@media screen and (min-width: 768px) {
  body {
    padding: var(--spacing-lg);
    padding-top: 5rem;
  }

  .nav-content {
    flex-wrap: nowrap;
  }

  .nav-links {
    gap: var(--spacing-lg);
  }

  h1 {
    font-size: 3.5rem;
  }

  h2 {
    font-size: 2rem;
  }

  h3 {
    font-size: 1.5rem;
    display: inline-block;
    margin: auto;
  }

  .home .content-wrapper {
    padding: var(--spacing-lg);
  }

  .content-bg {
    padding: var(--spacing-xl);
  }

  .resume header::before {
    height: 18.75rem;
  }

  .project-items {
    display: flow-root;
  }

  .project-items img {
    float: left;
    margin-right: var(--spacing-md);
    padding-inline-start: 3rem;
  }

  .project-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--spacing-md);
  }

  .project-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
  }

  .project-links .btn {
    margin: 0;
  }

  .work-item {
    display: grid;
    grid-template-columns: 18.75rem 1fr;
    column-gap: var(--spacing-md);
  }

  .popover-content {
    max-width: 33.333vw;
    min-width: 30rem;
    width: auto;
  }

  .popover-body {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--spacing-lg);
    align-items: start;
    padding: var(--spacing-lg);
  }

  .popover-image {
    justify-content: start;
    align-items: start;
  }

  .popover-image img {
    width: 10rem;
    height: 10rem;
  }

  .popover-info h3 {
    text-align: left;
    margin-bottom: var(--spacing-sm);
  }

  .popover-info .bio {
    display: block;
    text-align: left;
  }

  .contact-details {
    text-align: left;
  }

  .animations-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .svg-animation-container {
    min-block-size: 30rem;
  }

  .svg-animation {
    max-width: 30rem;
  }
}

@media screen and (max-width: 767px) {
  .popover-content {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    margin: 0;
  }

  .popover-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-lg);
    height: 100%;
    justify-content: center;
    gap: var(--spacing-lg);
  }

  .popover-image {
    margin-bottom: 0;
    width: 100%;
    justify-content: center;
  }

  .popover-image img {
    width: 12rem;
    height: 12rem;
  }

  .popover-info {
    width: 100%;
  }

  .popover-info h3 {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-md);
    text-align: center;
  }

  .popover-info .bio {
    font-size: 1.125rem;
    line-height: 1.6;
    margin-bottom: var(--spacing-lg);
    text-align: center;
  }

  .contact-details {
    gap: var(--spacing-md);
    text-align: center;
  }

  .contact-details p {
    font-size: 1.125rem;
  }
}

@media screen and (min-width: 1200px) {
  body {
    padding: var(--spacing-xl);
    padding-top: 5rem;
  }

  h1 {
    font-size: 4.375rem;
  }

  .home {
    min-height: 100vh;
  }

  .resume header::before {
    height: 40rem;
  }

  .projects-grid {
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(auto-fit, minmax(0, 1fr));
    gap: var(--spacing-lg);
  }

  .project-card {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 4;
    gap: 0;
    align-content: start;
    align-items: start;
  }

  footer {
    display: flex;
    justify-content: space-between;
    padding: 0 var(--spacing-lg);
    text-align: left;
  }

  .animations-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .svg-animation-container {
    min-block-size: 35rem;
  }

  .svg-animation {
    max-width: 35rem;
  }
}