/* ============================================================================
 * THE FORGOTTEN FLOUR — custom styles & animations
 * Most styling is Tailwind utility classes in index.html.
 * This file holds smooth-scroll, scroll-reveal, and tasteful motion.
 * ALL motion is disabled for users who prefer reduced motion (see bottom).
 * ========================================================================== */

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5rem; /* keep section titles clear of the sticky header */
}

/* ---- Scroll reveal (JS adds .is-visible when in view) ---------------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger children of a .stagger container so groups cascade in nicely. */
.stagger > *:nth-child(2) { transition-delay: 0.08s; }
.stagger > *:nth-child(3) { transition-delay: 0.16s; }
.stagger > *:nth-child(4) { transition-delay: 0.24s; }
.stagger > *:nth-child(5) { transition-delay: 0.32s; }

/* ---- Hero: very slow, subtle Ken-Burns zoom for life ----------------- */
@keyframes slowZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}
.slow-zoom { animation: slowZoom 20s ease-in-out infinite alternate; }

/* ---- Logo badge: gentle float --------------------------------------- */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
.badge-float { animation: float 4.5s ease-in-out infinite; }

/* ---- Card hover lift (cards, steps, testimonials) ------------------- */
.lift { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(107, 66, 38, 0.16);
}

/* ---- Image zoom on hover inside an overflow-hidden parent ----------- */
.zoom-parent img { transition: transform 0.5s ease; }
.zoom-parent:hover img { transform: scale(1.07); }

/* ---- Buttons: lift + press feel ------------------------------------ */
.btn-anim { transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease; }
.btn-anim:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(199, 86, 67, 0.28); }
.btn-anim:active { transform: translateY(0); }

/* ---- Soft attention pulse for the primary hero CTA ----------------- */
@keyframes softPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(199, 86, 67, 0.45); }
  50%      { box-shadow: 0 0 0 10px rgba(199, 86, 67, 0); }
}
.pulse-cta { animation: softPulse 2.8s ease-out infinite; }

/* ---- FAQ chevron rotate on open (pure CSS, no markup needed) -------- */
details > summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
details > summary::after {
  content: "\25BE";           /* ▾ */
  font-size: 1.1rem;
  color: #c75643;
  transition: transform 0.25s ease;
}
details[open] > summary::after { transform: rotate(180deg); }

/* ---- Accessible focus ring ----------------------------------------- */
a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid #6b4226;
  outline-offset: 2px;
  border-radius: 6px;
}

/* ============================================================================
 * Respect users who get motion sick — turn ALL of the above off.
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .slow-zoom, .badge-float, .pulse-cta { animation: none !important; }
  .lift, .zoom-parent img, .btn-anim { transition: none !important; }
  .lift:hover, .btn-anim:hover { transform: none !important; box-shadow: none !important; }
  .zoom-parent:hover img { transform: none !important; }
}