html { scroll-behavior: smooth; }
body { font-family: 'Sora', sans-serif; }
.font-display { font-family: 'Instrument Serif', Georgia, serif; }

.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-right.visible { opacity: 1; transform: translateX(0); }

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

.hero-bg {
  background-image:
    linear-gradient(120deg, rgba(12, 22, 18, 0.72) 0%, rgba(19, 32, 25, 0.45) 45%, rgba(12, 22, 18, 0.65) 100%),
    url('https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&w=2000&q=80');
  background-size: cover;
  background-position: center;
}

.page-hero {
  background-size: cover;
  background-position: center;
}

.nav-scrolled {
  background: rgba(12, 22, 18, 0.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(196, 163, 90, 0.15);
}

.progress-bar {
  width: 0;
  transition: width 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.progress-bar.filled { width: var(--target); }

.project-card { position: relative; overflow: hidden; }
.project-card img {
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.project-card:hover img { transform: scale(1.08); }
.project-overlay {
  background: linear-gradient(to top, rgba(12, 22, 18, 0.92) 0%, rgba(12, 22, 18, 0.2) 60%, transparent 100%);
  transition: background 0.4s ease;
}
.project-card:hover .project-overlay {
  background: linear-gradient(to top, rgba(12, 22, 18, 0.95) 0%, rgba(12, 22, 18, 0.4) 70%, rgba(12, 22, 18, 0.15) 100%);
}

.btn-primary { position: relative; overflow: hidden; z-index: 1; }
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #dfc88a;
  transform: translateX(-101%);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: -1;
}
.btn-primary:hover::before { transform: translateX(0); }

.line-accent {
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.line-accent.visible { transform: scaleX(1); }

.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
  opacity: 0;
}
.mobile-menu.open {
  max-height: 420px;
  opacity: 1;
}

.nav-link.active { color: #c4a35a !important; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.animate-float { animation: float 6s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right {
    opacity: 1; transform: none; transition: none;
  }
  * { animation: none !important; }
}