/* ── Nash Tire Service — Shared Styles ──────────────────────────────── */

body { font-family: 'Inter', sans-serif; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .font-headline { font-family: 'Space Grotesk', sans-serif; }
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; display: block; }

/* ── Hero animations ─────────────────────────────────────────────────── */
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero-bg { animation: fadeIn 1.4s ease forwards; opacity: 0; }
.hero-1  { animation: fadeSlideUp 0.8s cubic-bezier(0.16,1,0.3,1) forwards; animation-delay: 0.05s; opacity: 0; }
.hero-2  { animation: fadeSlideUp 0.9s cubic-bezier(0.16,1,0.3,1) forwards; animation-delay: 0.20s; opacity: 0; }
.hero-3  { animation: fadeSlideUp 1.0s cubic-bezier(0.16,1,0.3,1) forwards; animation-delay: 0.40s; opacity: 0; }
.hero-4  { animation: fadeSlideUp 0.9s cubic-bezier(0.16,1,0.3,1) forwards; animation-delay: 0.60s; opacity: 0; }

/* ── Scroll reveal ───────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1);
}
.reveal.from-left  { transform: translateX(-32px); }
.reveal.from-right { transform: translateX(32px); }
.reveal.is-visible { opacity: 1; transform: translate(0,0); }

/* ── Navbar ──────────────────────────────────────────────────────────── */
#navbar { transition: background 0.3s ease, box-shadow 0.3s ease; }
#navbar.scrolled { background: rgba(0,0,0,0.97); box-shadow: 0 1px 0 rgba(255,255,255,0.06); }

/* ── Hamburger ───────────────────────────────────────────────────────── */
#mobile-menu { display: none; }
#mobile-menu.open { display: block; }

.bar {
  display: block;
  width: 24px;
  height: 2px;
  background: #4AABF0;
  transition: transform 0.3s ease, opacity 0.3s ease;
  border-radius: 1px;
}
#mobile-menu-btn.open .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
#mobile-menu-btn.open .bar:nth-child(2) { opacity: 0; }
#mobile-menu-btn.open .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ── Diagonal clip paths ─────────────────────────────────────────────── */
.clip-angled-bottom { clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); }
.clip-angled-top    { clip-path: polygon(0 5%, 100% 0, 100% 100%, 0 100%); }

/* ── Blue band texture ───────────────────────────────────────────────── */
.band-texture {
  background-image: repeating-linear-gradient(
    -45deg, transparent, transparent 10px,
    rgba(0,0,0,0.05) 10px, rgba(0,0,0,0.05) 20px
  );
}

/* ── Form focus ──────────────────────────────────────────────────────── */
input:focus, textarea:focus, select:focus { outline: none; box-shadow: none; }

/* ── Photo grid ──────────────────────────────────────────────────────── */
.photo-grid img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.photo-grid .photo-wrap:hover img { transform: scale(1.05); }
.photo-wrap { overflow: hidden; }