/* ==========================================================================
   Stack Hack 2026 — custom styles
   Fonts, caution-stripe pattern, hero decorative blobs, and small helpers
   that are awkward to express purely with Tailwind utility classes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Web fonts
   The Figma references these families. Drop the matching files into
   assets/fonts/ (see assets/README.md). Until then the fallback stacks
   below keep the layout looking close.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Les Flos Sans";
  src: url("assets/fonts/LesFlosSans.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Les Flos Sage";
  src: url("assets/fonts/LesFlosSage.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Les Flos Chaos";
  src: url("assets/fonts/LesFlosChaos.otf") format("opentype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Metropolis";
  src: url("assets/fonts/Metropolis-Bold.ttf") format("truetype");
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: "Metropolis";
  src: url("assets/fonts/Metropolis-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

:root {
  --maroon: #6b0000;
  --maroon-dark: #3a0000;
  --gold: #f0a500;
  --cream: #fdf4e7;
  --section-alt: #fff8f0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--cream);
}

/* Display font stacks (fallbacks until brand fonts are supplied) */
.font-display-sans {
  font-family: "Les Flos Sans", "Oswald", "Barlow Condensed", "Inter", sans-serif;
}
.font-display-sage {
  font-family: "Les Flos Sage", "Oswald", "Barlow Condensed", "Inter", sans-serif;
}
.font-display-chaos {
  font-family: "Les Flos Chaos", "Oswald", "Barlow Condensed", "Inter", sans-serif;
}
.font-condensed {
  font-family: "Barlow Condensed", "Oswald", "Inter", sans-serif;
}
.font-metropolis {
  font-family: "Metropolis", "Inter", system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   Hero decorative rounded squares ("blob field")
   -------------------------------------------------------------------------- */
.blob {
  position: absolute;
  border-radius: 10px;
}

/* --------------------------------------------------------------------------
   FAQ accordion
   -------------------------------------------------------------------------- */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.faq-item.open .faq-answer {
  max-height: 240px;
}
.faq-item.open .faq-toggle {
  transform: rotate(45deg);
}
.faq-toggle {
  transition: transform 0.25s ease;
}

/* --------------------------------------------------------------------------
   Hero blocks — gentle floating drift
   Animates the standalone `translate` property so it composes with each
   blob's inline `transform: rotate(...)` (rotation is preserved).
   -------------------------------------------------------------------------- */
@keyframes blobFloat {
  0%   { translate: 0 0; }
  50%  { translate: 6px -18px; }
  100% { translate: 0 0; }
}
.blob {
  animation: blobFloat 9s ease-in-out infinite;
  /* `translate` = floating drift (keyframes), `rotate` = inline rotation,
     `transform` = mouse parallax (set by JS) — three composable channels. */
  transition: transform 0.4s ease-out;
  will-change: translate, transform;
}
.blob:nth-child(1) { animation-duration: 11s; animation-delay: -2s; }
.blob:nth-child(2) { animation-duration: 8s;  animation-delay: -4s; }
.blob:nth-child(3) { animation-duration: 12s; animation-delay: -1s; }
.blob:nth-child(4) { animation-duration: 10s; animation-delay: -6s; }
.blob:nth-child(5) { animation-duration: 9s;  animation-delay: -3s; }
.blob:nth-child(6) { animation-duration: 7s;  animation-delay: -5s; }

/* --------------------------------------------------------------------------
   Scroll-reveal (elements fade + rise into view)
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Respect reduced-motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .blob { animation: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}