/* Use Avenir Next font */
body {
  margin: 0;
  font-family: 'Avenir Next', sans-serif;
  font-weight: normal;
  background-color: #3b2f2f; /* charcoal-chocolate brown */
  color: #a68a79; /* soft brown */
  text-transform: lowercase;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Hero Section */
.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 4px 4px;
  text-align: center;
  padding: 40px 20px;
  animation: shimmerFade 1.5s ease-out forwards;
}

.logo {
  width: 400px;
  max-width: 60%;
  margin-bottom: 20px;
  opacity: 0;
  animation: fadeIn 1.2s ease-out forwards;
}

/* Run the rubberband effect on hover */
.logo:hover {
  animation: fadeIn 1.2s ease-out forwards, rubberband 0.8s ease-in-out;
}

/* Rubberband stretch keyframes */
@keyframes rubberband {
  
  0%   { transform: scaleX(1); }
  30%  { transform: scaleX(1.25); }  /* big stretch */
  50%  { transform: scaleX(0.9); }   /* snap inward */
  70%  { transform: scaleX(1.1); }   /* rebound */
  100% { transform: scaleX(1); }

}

/* Fade-in keyframes (unchanged) */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}


.hero h1 {
  font-weight: 400;
  font-weight: normal;
  font-size: 1.8rem;
  color: #ffd700; /* yellow */
  margin: 10px 0;
  letter-spacing: 0.5px;
  opacity: 0;
  animation: slideUp 1.4s ease-out forwards;
  animation-delay: 0.3s;
}

.hero p {
  font-size: 1.5rem;
  max-width: 400px;
  margin: 5px auto;
  line-height: 1.6;
  opacity: 0;
  animation: slideUp 1.6s ease-out forwards;
  animation-delay: 0.6s;
}

/* Footer */
footer {
  text-align: center;
  padding: 20px;
  font-size: 0.9rem;
  color: #a68a79;
  opacity: 0;
  animation: fadeIn 2s ease-out forwards;
  animation-delay: 1s;
}

.social-icons a {
  margin: 0 10px;
  color: #a68a79;
  text-decoration: none;
  font-size: 1.2rem;
  transition: color 0.3s ease, transform 0.3s ease;
}

.social-icons a:hover {
  color: #ffd700;
  transform: translateY(-3px);
}

/* Animations */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes shimmerFade { from { opacity: 0; } to { opacity: 1; } }

/* Responsive */
@media (max-width: 600px) {
  .hero h1 { font-size: 1.2rem; }
  .hero p { font-size: 1.2rem; }
  .logo { width: 400px; }
}