/* =====================================================
   Studio Noir — Custom Styles
   Memphis Accents · Glassmorphism · Scroll Animations
   ===================================================== */

/* --- Memphis Dot Pattern --- */
.squiggle-accent {
  background-image: radial-gradient(#8e4d31 1.5px, transparent 1.5px);
  background-size: 12px 12px;
}

/* --- Hard-Shadow Memphis Effect --- */
.memphis-shadow-primary {
  box-shadow: 8px 8px 0px 0px #8e4d31;
}

/* --- Glass Navigation --- */
.glass-nav {
  background: rgba(251, 249, 244, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.glass-nav.scrolled {
  border-bottom-color: rgba(195, 200, 193, 0.5);
  box-shadow: 0 2px 24px rgba(27, 28, 25, 0.06);
}

/* --- Scroll Fade-In Sections --- */
.fade-in-section {
  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);
}

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

/* Stagger child elements inside a visible section */
.fade-in-section.is-visible .stagger-child:nth-child(1) { transition-delay: 0.05s; }
.fade-in-section.is-visible .stagger-child:nth-child(2) { transition-delay: 0.15s; }
.fade-in-section.is-visible .stagger-child:nth-child(3) { transition-delay: 0.25s; }
.fade-in-section.is-visible .stagger-child:nth-child(4) { transition-delay: 0.35s; }
.fade-in-section.is-visible .stagger-child:nth-child(5) { transition-delay: 0.45s; }

.stagger-child {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

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

/* --- Material Symbols --- */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  font-size: 24px;
  line-height: 1;
  vertical-align: middle;
}

/* --- Mobile Menu Slide --- */
#mobile-menu {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.3s ease;
}

#mobile-menu.open {
  max-height: 480px;
  opacity: 1;
}

/* --- Form Fields --- */
.field-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid #c3c8c1;
  background: transparent;
  padding: 8px 0;
  outline: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
  color: #1b1c19;
  transition: border-color 0.25s ease;
}

.field-input:focus {
  border-bottom-color: #8e4d31;
}

.field-input::placeholder {
  color: transparent;
}

/* --- Playbook Step Numbers --- */
.step-box {
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.step-box:hover {
  box-shadow: 6px 6px 0px 0px #8e4d31;
  transform: translate(-3px, -3px);
}

/* --- CTA Button Hover --- */
.btn-primary {
  position: relative;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.btn-primary:hover {
  box-shadow: none;
  transform: translate(4px, 4px);
}

/* --- Selection --- */
::selection {
  background-color: #feaa88;
  color: #370e00;
}

/* --- Scrollbar (subtle) --- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #fbf9f4; }
::-webkit-scrollbar-thumb { background: #c3c8c1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #8e4d31; }

/* --- Hero text shadow for legibility over image --- */
.hero-headline {
  text-shadow: 0 2px 40px rgba(251, 249, 244, 0.4);
}

/* --- Animated pulse circle override --- */
@keyframes soft-pulse {
  0%, 100% { transform: scale(1); opacity: 0.12; }
  50% { transform: scale(1.08); opacity: 0.22; }
}
.animate-soft-pulse {
  animation: soft-pulse 3.5s ease-in-out infinite;
}

/* --- Footer link underline --- */
.footer-link {
  position: relative;
  display: inline-block;
}
.footer-link::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: #8e4d31;
  transition: width 0.3s ease;
}
.footer-link:hover::after {
  width: 100%;
}