/* ============================================
   Cut & Edge 716 — Custom Styles
   ============================================ */

/* --- Base / Reset --- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }

/* --- Navigation transitions --- */
.nav-text-transition { transition: color 0.4s ease; }
.nav-link { transition: color 0.3s ease, text-shadow 0.3s ease; }
.nav-link:hover { text-shadow: 0 0 20px rgba(253, 249, 244, 0.4); }

/* Nav background states */
.nav-scrolled #nav {
  background: rgba(101, 48, 35, 0.95);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 30px rgba(82, 40, 29, 0.2);
}

.nav-scrolled .nav-link { color: rgba(253, 249, 244, 0.85); }
.nav-scrolled .nav-link:hover { color: #FDF9F4; }

/* --- Hero animations --- */
.hero-eyebrow {
  animation: fadeDown 0.8s ease forwards;
  opacity: 0;
  animation-delay: 0.2s;
}

.hero-headline {
  animation: fadeUp 1s ease forwards;
  opacity: 0;
  animation-delay: 0.4s;
}

.hero-sub {
  animation: fadeUp 1s ease forwards;
  opacity: 0;
  animation-delay: 0.7s;
}

.hero-cta {
  animation: fadeUp 1s ease forwards;
  opacity: 0;
  animation-delay: 0.9s;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Scroll dot */
.scroll-dot { animation: scrollDot 2s ease-in-out infinite; }
@keyframes scrollDot {
  0%   { top: 0; opacity: 1; }
  50%  { top: 16px; opacity: 0.4; }
  100% { top: 32px; opacity: 0; }
}

/* --- Section labels --- */
.section-label { display: block; }
.section-title { }
.section-desc  { }

/* --- Service cards --- */
.service-card { cursor: default; }

/* --- Gallery --- */
.gallery-item { cursor: pointer; }
.gallery-item img {
  transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* --- Reveal animations (progressive enhancement) --- */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s ease, transform 0.7s ease;
  }
  .reveal.revealed {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Default state — always visible, no JS needed */
.reveal {
  opacity: 1;
  transform: translateY(0);
}

/* When JS is active and user prefers motion, add initial hidden state */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 1;
    transform: translateY(0);
    transition: none;
  }
}

/* --- Mobile menu --- */
.mobile-nav-link {
  display: block;
  padding: 0.5rem 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.25rem;
}

/* --- Utility --- */
@media (max-width: 767px) {
  .section-title { font-size: 2.5rem; }
}