/* =============================================
   BLUE DEEP OPEN — Seamless Flow Transitions
   Overrides block-section gaps so the homepage
   reads as one continuous cinematic scroll.
   ============================================= */

/* ── Kill body background so sections control it ── */
body.flow-page {
  background: var(--navy);
  overflow-x: hidden;
}

/* ── No gaps anywhere between sections ── */
body.flow-page section,
body.flow-page .wave-bridge,
body.flow-page footer,
body.flow-page .footer-bottom {
  margin: 0;
  padding-bottom: 0;
}

/* ── WAVE BRIDGES ──
   These are the SVG dividers that smoothly
   morph one section colour into the next.
   Zero height except the SVG itself.          */
.wave-bridge {
  display: block;
  line-height: 0;
  font-size: 0;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.wave-bridge svg {
  display: block;
  width: 100%;
}

/* Background colours behind each bridge */
.wave-bridge--dark-to-sand  { background: var(--navy); }
.wave-bridge--sand-to-dark  { background: var(--sand); }
.wave-bridge--dark-to-white { background: var(--navy); }
.wave-bridge--white-to-dark { background: #fff; }

/* ── FLOW SECTIONS ── */
.flow-section {
  position: relative;
  z-index: 1;
}

.flow-section--sand  { background: var(--sand); }
.flow-section--dark  { background: var(--navy); }
.flow-section--white { background: #fff;        }

/* Generous internal padding that feels Apple-like */
.flow-section--sand  { padding: 80px 60px 60px; }
.flow-section--dark  { padding: 80px 60px 60px; }
.flow-section--white { padding: 60px 0 40px;    }

/* ── FLOW INNER — constrains content width ── */
.flow-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* ── SCROLL-TRIGGERED FADE-UP ──
   Each .flow-fade-up starts invisible and
   translates up on scroll via JS.            */
.flow-fade-up {
  opacity: 0;
  transform: translateY(52px);
  transition:
    opacity  0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.flow-fade-up.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children inside a .flow-fade-up group */
.flow-fade-up .news-card:nth-child(1) { transition-delay: 0s;    }
.flow-fade-up .news-card:nth-child(2) { transition-delay: 0.12s; }
.flow-fade-up .news-card:nth-child(3) { transition-delay: 0.24s; }

.flow-fade-up .about-stat-card:nth-child(1) { transition-delay: 0.05s; }
.flow-fade-up .about-stat-card:nth-child(2) { transition-delay: 0.15s; }
.flow-fade-up .about-stat-card:nth-child(3) { transition-delay: 0.25s; }
.flow-fade-up .about-stat-card:nth-child(4) { transition-delay: 0.35s; }

/* ── HERO: remove bottom padding so wave sits flush ── */
body.flow-page .hero {
  padding-bottom: 160px; /* stats bar height */
  margin-bottom: 0;
}

/* ── SECTION 2 (news cards): override page-body padding ── */
body.flow-page .flow-section--sand .news-grid {
  margin-top: 0;
}

/* ── ABOUT SECTION overrides ── */
body.flow-page .about-section {
  /* padding set by .flow-section--dark above */
  padding-top: 80px;
}

/* ── MERCH/CAROUSEL: no top padding — wave handles the gap ── */
body.flow-page .merch-section {
  padding-top: 60px;
}

body.flow-page .merch-header {
  padding: 0 60px;
  margin-bottom: 44px;
}

/* ── FOOTER flows directly from wave ── */
body.flow-page footer {
  padding-top: 56px;
}

/* ── SUBTLE PARALLAX on section backgrounds ──
   Makes each section feel like it slides up
   beneath the previous one as you scroll.    */
.flow-section--sand,
.flow-section--dark,
.flow-section--white {
  will-change: transform;
}

/* ── LINE SEPARATORS inside sections — remove any
   hard top-borders that break the visual flow ── */
body.flow-page .page-body {
  border-top: none;
}

/* ── SECTION EYEBROW colour adjustments for contrast ── */
.flow-section--dark .sec-eyebrow,
.flow-section--dark .about-eyebrow {
  color: var(--gold-light);
}

.flow-section--dark .sec-title {
  color: var(--white);
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .flow-section--sand  { padding: 60px 24px 48px; }
  .flow-section--dark  { padding: 60px 24px 48px; }
  .flow-section--white { padding: 48px 0 32px;    }
  body.flow-page .merch-header { padding: 0 24px; }
}