/* =========================================================
   Quei Bravi Ragazzi Barberia — Custom Styles
   ========================================================= */

/* Base */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

/* ─── Fade-in animation ─── */
.fade-in {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children inside grids */
.grid .fade-in:nth-child(2) { transition-delay: 0.08s; }
.grid .fade-in:nth-child(3) { transition-delay: 0.16s; }
.grid .fade-in:nth-child(4) { transition-delay: 0.24s; }
.grid .fade-in:nth-child(5) { transition-delay: 0.32s; }
.grid .fade-in:nth-child(6) { transition-delay: 0.40s; }

/* ─── Hero decorative elements ─── */
.hero-texture {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 79px,
      rgba(192, 176, 156, 0.07) 79px,
      rgba(192, 176, 156, 0.07) 80px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 79px,
      rgba(192, 176, 156, 0.07) 79px,
      rgba(192, 176, 156, 0.07) 80px
    );
  pointer-events: none;
  z-index: 0;
}

.hero-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #4B3C28 0%, #C0B09C 50%, transparent 100%);
}

/* ─── Service card hover ─── */
.service-card {
  transition: background-color 0.2s ease;
}

.service-card:hover {
  background-color: #fdfcfb;
}

/* ─── Header scroll shadow ─── */
#site-header {
  transition: box-shadow 0.3s ease;
}

#site-header.scrolled {
  box-shadow: 0 2px 24px rgba(75, 60, 40, 0.08);
}

/* ─── Selection color ─── */
::selection {
  background-color: #4B3C28;
  color: #F9F9F9;
}

/* ─── Focus rings ─── */
a:focus-visible {
  outline: 2px solid #C0B09C;
  outline-offset: 3px;
}

/* ─── Gallery photo cards ─── */
.photo-card {
  cursor: default;
}

.photo-img {
  transition: transform 0.5s ease, filter 0.5s ease;
  filter: brightness(0.95) saturate(0.9);
}

.photo-card:hover .photo-img {
  transform: scale(1.04);
  filter: brightness(1) saturate(1);
}