/* Portfolio — Warm Luxe / Studio */

html {
  scroll-behavior: smooth;
}

/* Fade-up animation for scroll reveals */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-up {
  animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  opacity: 0;
}

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.2s; }
.delay-3 { animation-delay: 0.3s; }
.delay-4 { animation-delay: 0.4s; }

/* Focus styles for keyboard navigation */
a:focus-visible,
button:focus-visible {
  outline: 2px solid #e07a5f;
  outline-offset: 2px;
  border-radius: 0.25rem;
}

/* Card hover lift */
.project-card {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(28, 25, 23, 0.12),
              0 8px 20px rgba(28, 25, 23, 0.06);
}

/* Screenshot image hover */
.screenshot-wrap {
  overflow: hidden;
  border-radius: 0.75rem;
}

.screenshot-wrap img {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.screenshot-wrap:hover img {
  transform: scale(1.04);
}

/* Photo placeholder fallback — hide when image loads */
.photo-placeholder-hero {
  position: absolute;
  inset: 0;
}

img:not(.hidden) ~ .photo-placeholder-hero {
  display: none;
}