/* ====================================
   HOME PAGE ANIMATIONS
   ==================================== */

/* Text shadow for headers */
h1, h2, h3 {
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
}

/* Background zoom animation */
body.home-page {
  animation: zoomOut 1s ease-in-out forwards;
}

@keyframes zoomOut {
  from {
    background-size: 120%;
  }
  to {
    background-size: 100%;
  }
}

/* Slide-in animation for text */
.shift {
  display: inline-block;
  opacity: 0;
  transform: translateX(-40px);
  animation: slideIn 0.6s forwards;
}

@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Social icons stamp-in animation */
.icons a {
  display: inline-block;
  opacity: 0;
  transform: translateY(-50px) scale(0.8);
  animation: stampIn 0.6s forwards;
}

.icons a:nth-child(1) { animation-delay: 0.2s; }
.icons a:nth-child(2) { animation-delay: 0.4s; }
.icons a:nth-child(3) { animation-delay: 0.6s; }
.icons a:nth-child(4) { animation-delay: 0.8s; }
.icons a:nth-child(5) { animation-delay: 1s; }

@keyframes stampIn {
  0% {
    opacity: 0;
    transform: translateY(-50px) scale(0.8);
  }
  60% {
    opacity: 1;
    transform: translateY(10px) scale(1.1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ====================================
   MOBILE RESPONSIVENESS
   ==================================== */

/* Disable animations on mobile for better performance */
@media screen and (max-width: 736px) {
  body.home-page {
    animation: zoomOut 0.5s ease-in-out forwards;
  }

  .shift {
    animation: slideIn 0.4s forwards;
  }

  .icons a {
    animation: stampIn 0.4s forwards;
  }

  /* Adjust header spacing on mobile */
  #header {
    padding: 1em;
  }

  /* Better touch targets for mobile */
  .icons a {
    padding: 0.5em;
    font-size: 1.2em;
  }
}

/* ====================================
   SIDEBAR
   ==================================== */

:root {
  --sidebar-w: 22em; /* pick your preferred width */
}

#sidebar { width: var(--sidebar-w); }
#sidebar > .inner { width: var(--sidebar-w); }
#sidebar .toggle { left: var(--sidebar-w); }
#sidebar.inactive { margin-left: calc(-1 * var(--sidebar-w)); }

/* Optional: different widths by breakpoint */
@media (max-width: 1680px) {
  :root { --sidebar-w: 20em; }
}