/* ============================================================
   FishChaseFlies brand layer — CLAUDE.md v3
   Deep Water #22333C · Slate #5E7375 · Bone #EFEAE0 · Mist #DEE4E1
   Copper #B4681F (primary CTA only) · Bronze #75592E
   ============================================================ */

:root {
  --fcf-deep: #22333C;
  --fcf-slate: #5E7375;
  --fcf-bone: #EFEAE0;
  --fcf-mist: #DEE4E1;
  --fcf-copper: #B4681F;
  --fcf-bronze: #75592E;
}

body {
  background: var(--fcf-bone);
  color: var(--fcf-deep);
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 18px;
  line-height: 1.65;
}
h1, h2, h3, h4 { font-family: 'Besley', Georgia, serif; color: var(--fcf-deep); line-height: 1.15; }
h1 { font-weight: 900; }
h2 { font-weight: 800; }
h3, h4 { font-weight: 700; }
a { color: var(--fcf-slate); transition: color 150ms ease; }
a:hover { color: var(--fcf-deep); }
img { max-width: 100%; height: auto; }

/* Focus states (a11y floor) */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--fcf-copper);
  outline-offset: 2px;
}

/* ---------- Sticky header (HFE header wrapper) ---------- */
header.ehf-header, .ehf-header header, #masthead {
  position: sticky;
  top: 0;
  z-index: 999;
  background: var(--fcf-bone);
  transition: box-shadow 150ms ease;
}
body.fcf-scrolled header.ehf-header,
body.fcf-scrolled #masthead { box-shadow: 0 2px 8px rgba(34,51,60,0.12); }
/* logo: never distort — width follows the capped height */
.fcf-header-logo img { width: auto !important; height: auto !important; max-height: 60px; max-width: none !important; transition: max-height 150ms ease; }
body.fcf-scrolled .fcf-header-logo img { max-height: 44px; }

/* ---------- Buttons ---------- */
.fcf-btn, .woocommerce a.button, .woocommerce button.button,
.woocommerce button.button.alt, .woocommerce input.button,
.wp-block-button__link, button[type="submit"] {
  background: var(--fcf-copper) !important;
  color: var(--fcf-bone) !important;
  font-family: 'Archivo Narrow', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 2px !important;
  padding: 18px 36px !important;
  box-shadow: none !important;
  transition: background 150ms ease !important;
}
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce button.button.alt:hover, .fcf-btn:hover,
button[type="submit"]:hover { background: var(--fcf-bronze) !important; color: var(--fcf-bone) !important; }

/* secondary/ghost variants for non-primary Woo buttons (cart quantity etc. stay quiet) */
.woocommerce a.button.fcf-secondary {
  background: transparent !important;
  color: var(--fcf-slate) !important;
  border: 1.5px solid var(--fcf-slate) !important;
  padding: 16px 32px !important;
}
.woocommerce a.button.fcf-secondary:hover { background: var(--fcf-slate) !important; color: var(--fcf-bone) !important; }

/* ---------- WooCommerce product page ---------- */
.woocommerce div.product { color: var(--fcf-deep); }
.woocommerce div.product div.images { width: 52%; }
.woocommerce div.product div.summary { width: 44%; }
.woocommerce div.product .product_title { font-family: 'Besley', serif; font-weight: 700; font-size: 32px; }
.woocommerce div.product p.price, .woocommerce div.product span.price {
  color: var(--fcf-bronze) !important;
  font-family: 'Besley', serif;
  font-weight: 700;
  font-size: 22px;
}
.woocommerce div.product .stock.in-stock { color: var(--fcf-bronze); font-family: 'Archivo Narrow', sans-serif; font-weight: 600; letter-spacing: 0.06em; }
.woocommerce div.product .stock.out-of-stock { color: var(--fcf-deep); font-family: 'Archivo Narrow', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; }
.woocommerce div.product form.cart .variations select {
  background: var(--fcf-bone);
  border: 1px solid var(--fcf-slate);
  border-radius: 2px;
  color: var(--fcf-deep);
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 16px;
  padding: 10px 12px;
}
.woocommerce div.product form.cart div.quantity .qty {
  border: 1px solid var(--fcf-slate);
  border-radius: 2px;
  background: var(--fcf-bone);
  font-size: 16px;
  padding: 10px 6px;
}
.fcf-ships-note { font-family: 'Archivo Narrow', sans-serif; font-size: 14px; color: var(--fcf-slate); letter-spacing: 0.04em; margin-top: 12px; }

/* specs table */
.woocommerce table.woocommerce-product-attributes { border: none; }
.woocommerce table.woocommerce-product-attributes th {
  font-family: 'Archivo Narrow', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 13px;
  color: var(--fcf-bronze);
  background: var(--fcf-mist);
  border-bottom: 1px solid rgba(117,89,46,0.35);
}
.woocommerce table.woocommerce-product-attributes td { font-family: 'Source Serif 4', Georgia, serif; background: var(--fcf-mist); border-bottom: 1px solid rgba(34,51,60,0.08); }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active { border-bottom-color: var(--fcf-copper); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { font-family: 'Archivo Narrow', sans-serif; text-transform: uppercase; letter-spacing: 0.08em; font-size: 14px; color: var(--fcf-slate); }

/* product cards / archives */
.woocommerce ul.products li.product {
  background: var(--fcf-mist);
  border: 1px solid rgba(34,51,60,0.15);
  border-radius: 2px;
  padding-bottom: 16px;
}
.woocommerce ul.products li.product img { border-radius: 0; margin-bottom: 12px; }
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: 'Besley', serif; font-weight: 700; font-size: 20px; color: var(--fcf-deep); padding: 0 16px;
}
.woocommerce ul.products li.product .price { color: var(--fcf-bronze) !important; font-family: 'Besley', serif; font-weight: 700; font-size: 18px; padding: 0 16px; }
.woocommerce ul.products li.product .button { margin: 10px 16px 0; }
.woocommerce span.onsale { background: var(--fcf-deep); color: var(--fcf-bone); border-radius: 2px; transform: rotate(-1.5deg); }

/* sold-out badge on cards */
.woocommerce ul.products li.product.outofstock::before {
  content: 'SOLD OUT';
  display: inline-block;
  position: absolute;
  margin: 10px;
  background: var(--fcf-deep);
  color: var(--fcf-bone);
  font-family: 'Archivo Narrow', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  border-radius: 2px;
  transform: rotate(-1.5deg);
  z-index: 2;
}
.woocommerce ul.products li.product { position: relative; }

/* ---------- Forms ---------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], textarea, select {
  background: var(--fcf-bone);
  border: 1px solid var(--fcf-slate);
  border-radius: 2px;
  color: var(--fcf-deep);
  font-family: 'Source Serif 4', Georgia, serif;
  font-size: 16px;
  padding: 12px 14px;
}
input:focus, textarea:focus, select:focus { border-color: var(--fcf-copper); outline: 2px solid var(--fcf-copper); outline-offset: 0; }
label { font-family: 'Archivo Narrow', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fcf-deep); }

/* ---------- MailerLite live embed (data-form) — brand pass, beats ML's injected styles ---------- */
/* ML injects ID-based rules (#mlb2-XXXX) with !important — these ID-matched rules out-rank them */
[id^="mlb2-"].ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.primary,
#mlb2-43887042.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.primary,
#mlb2-43887042.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow button.primary {
  background: #B4681F !important;
  color: #EFEAE0 !important;
  font-family: 'Archivo Narrow', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 2px !important;
  padding: 14px 28px !important;
  height: auto !important;
  transition: background 150ms ease !important;
}
#mlb2-43887042.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.primary:hover,
#mlb2-43887042.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow button.primary:hover {
  background: #75592E !important;
}
#mlb2-43887042.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input.form-control,
#mlb2-43887042.ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input.form-control {
  background: #EFEAE0 !important;
  border: 1px solid #5E7375 !important;
  border-radius: 2px !important;
  color: #22333C !important;
  font-family: 'Source Serif 4', Georgia, serif !important;
  font-size: 16px !important;
  padding: 14px 16px !important;
  height: auto !important;
}
.ml-embedded .ml-form-embedContainer .ml-form-embedWrapper { background: transparent !important; padding: 0 !important; }
.ml-embedded .ml-form-embedContainer .ml-form-embedBody { padding: 0 !important; }
/* hide the form's own "Newsletter" heading — the page provides the messaging */
.ml-embedded .ml-form-embedContainer .ml-form-embedContent { display: none !important; }
.ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-fieldRow input,
.ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow input,
.ml-embedded .ml-form-embedContainer input.form-control,
.ml-embedded .ml-form-embedContainer input[type="email"] {
  background: #EFEAE0 !important;
  border: 1px solid #5E7375 !important;
  border-radius: 2px !important;
  color: #22333C !important;
  font-family: 'Source Serif 4', Georgia, serif !important;
  font-size: 16px !important;
  padding: 14px 16px !important;
  height: auto !important;
}
.ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.primary,
.ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-horizontalRow button.primary,
.ml-embedded .ml-form-embedContainer button.primary,
.ml-embedded .ml-form-embedContainer .ml-form-embedSubmit button {
  background: #B4681F !important;
  color: #EFEAE0 !important;
  font-family: 'Archivo Narrow', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 2px !important;
  padding: 14px 28px !important;
  height: auto !important;
  transition: background 150ms ease !important;
}
.ml-embedded .ml-form-embedContainer .ml-form-embedWrapper .ml-form-embedBody .ml-form-embedSubmit button.primary:hover,
.ml-embedded .ml-form-embedContainer button.primary:hover,
.ml-embedded .ml-form-embedContainer .ml-form-embedSubmit button:hover { background: #75592E !important; }
.ml-embedded .ml-form-embedContainer .ml-form-successBody,
.ml-embedded .ml-form-embedContainer .ml-form-successContent {
  font-family: 'Source Serif 4', Georgia, serif !important;
  color: inherit !important;
}

/* ---------- MailerLite embedded forms (brand override) ---------- */
.ml-form-embedContainer .ml-form-embedWrapper { background: transparent !important; }
.ml-form-embedContainer input[type="email"] {
  background: var(--fcf-bone) !important;
  border: 1px solid var(--fcf-slate) !important;
  border-radius: 2px !important;
  font-size: 16px !important;
  color: var(--fcf-deep) !important;
}
.ml-form-embedContainer button {
  background: var(--fcf-copper) !important;
  color: var(--fcf-bone) !important;
  font-family: 'Archivo Narrow', sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-weight: 600 !important;
  border-radius: 2px !important;
  transition: background 150ms ease !important;
}
.ml-form-embedContainer button:hover { background: var(--fcf-bronze) !important; }

/* ---------- Journal (blog) ---------- */
.fcf-journal-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fcf-journal-card {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--fcf-mist);
  border: 1px solid rgba(34,51,60,0.15);
  border-radius: 2px;
  padding: 0 0 18px;
  text-decoration: none;
}
.fcf-journal-card img { width: 100%; height: 200px; object-fit: cover; border-radius: 0; }
.fcf-journal-date { font-family: 'Archivo Narrow', sans-serif; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fcf-slate); padding: 12px 18px 0; }
.fcf-journal-title { font-family: 'Besley', serif; font-weight: 700; font-size: 20px; color: var(--fcf-deep); padding: 0 18px; }
.fcf-journal-empty { color: var(--fcf-slate); font-style: italic; }

/* blog archive/single: quiet, readable */
body.blog article, body.archive article, body.single-post article { max-width: 760px; margin: 0 auto 48px; }
body.single-post .entry-content { font-size: 18px; line-height: 1.65; max-width: 68ch; }

/* ---------- Mobile sticky bottom bar ---------- */
.fcf-sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 998;
  display: none;
  background: var(--fcf-deep);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  text-align: center;
}
.fcf-sticky-bar a {
  display: block;
  background: var(--fcf-copper);
  color: var(--fcf-bone);
  font-family: 'Archivo Narrow', sans-serif;
  font-weight: 600; font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 14px 20px; border-radius: 2px; text-decoration: none;
}
@media (max-width: 767px) {
  body.fcf-scrolled-half .fcf-sticky-bar { display: block; }
  .woocommerce div.product div.images, .woocommerce div.product div.summary { width: 100%; float: none; }
}

/* ---------- 404 ---------- */
.fcf-404 { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--fcf-deep); color: var(--fcf-bone); padding: 96px 24px; }
.fcf-404 h1 { color: var(--fcf-bone); font-size: clamp(36px, 5vw, 56px); margin: 0 0 12px; }
.fcf-404 p { color: var(--fcf-mist); max-width: 48ch; }
.fcf-404 .fcf-404-links { margin-top: 28px; display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.fcf-404 .fcf-btn-ghost {
  color: var(--fcf-bone); border: 1.5px solid rgba(239,234,224,0.6); border-radius: 2px;
  font-family: 'Archivo Narrow', sans-serif; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: 15px;
  padding: 16px 32px; text-decoration: none; transition: all 150ms ease;
}
.fcf-404 .fcf-btn-ghost:hover { background: var(--fcf-bone); color: var(--fcf-deep); }

/* ---------- Footer link lists: no wrapping, breathing room ---------- */
.fcf-footer-links p { line-height: 2.1 !important; }
.fcf-footer-links a {
  white-space: nowrap;
  display: inline-block;
  border-bottom: 1px solid transparent;
  transition: border-color 150ms ease;
}
.fcf-footer-links a:hover { border-bottom-color: rgba(222,228,225,0.6); }

/* ---------- Hero text legibility panel (frosted blur behind copy on photo heroes) ---------- */
.fcf-hero-blurb {
  background: rgba(34,51,60,0.38);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  border-radius: 2px;
  padding: 20px 26px !important;
  text-shadow: 0 1px 3px rgba(34,51,60,0.45);
}
@supports not (backdrop-filter: blur(7px)) {
  .fcf-hero-blurb { background: rgba(34,51,60,0.62); } /* stronger tint where blur unsupported */
}

/* ---------- "Made of water" CTA: wiggle + jumping fish (#drop-cta, per Chase) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .fcf-water-btn { animation: fcfBtnWiggle 6.5s ease-in-out infinite; transform-origin: 50% 80%; }
  /* 6 rocks in 0.5s (7.7% of the 6.5s cycle), starting at 71% — same instant the fish launch */
  @keyframes fcfBtnWiggle {
    0%, 71%, 78.7%, 100% { transform: none; }
    72.3% { transform: rotate(-1.4deg) translateY(-1px); }
    73.6% { transform: rotate(1.3deg) translateY(-2px); }
    74.9% { transform: rotate(-1.1deg) translateY(-1px); }
    76.2% { transform: rotate(0.9deg) translateY(-1px); }
    77.5% { transform: rotate(-0.5deg); }
    78.2% { transform: rotate(0.3deg); }
  }
  .fcf-fishbox {
    position: absolute;
    left: 4%;
    right: 4%;
    bottom: 100%;
    height: 76px;                /* headroom for the higher arc */
    overflow: hidden;
    pointer-events: none;
  }
  .fcf-fishbox .fcf-fish {
    position: absolute;
    bottom: -26px;               /* resting "inside the water" */
    width: 26px;
    height: 14px;
    transform: translate(0, 90px) rotate(-70deg);
  }
  .fcf-fish svg { display: block; width: 100%; height: 100%; }
  /* centered over the button: one just left of middle jumping right (head-first,
     so its left-facing art is flipped), one just right of middle jumping left */
  .fcf-fish-1 { left: 36%; animation: fcfFishJump1 6.5s linear infinite; }
  .fcf-fish-1 svg { transform: scaleX(-1); }
  .fcf-fish-2 { left: 54%; animation: fcfFishJump2 6.5s linear infinite; }
  /* full arc: burst out nose-first, flip over the top, dive back nose-down */
  /* fish 1 launches at 71% — the exact moment the shake begins; fish 2 follows a beat later */
  @keyframes fcfFishJump1 {
    0%, 71%, 92%, 100% { transform: translate(0, 90px) rotate(-70deg); }
    75%   { transform: translate(4px, 26px) rotate(-58deg); }
    79%   { transform: translate(9px, -36px) rotate(-22deg); }
    82.5% { transform: translate(14px, -54px) rotate(18deg); }
    86%   { transform: translate(19px, -22px) rotate(66deg); }
    89%   { transform: translate(23px, 34px) rotate(98deg); }
    91%   { transform: translate(26px, 90px) rotate(112deg); }
  }
  @keyframes fcfFishJump2 {
    0%, 74%, 95%, 100% { transform: translate(0, 90px) rotate(70deg); }
    78%   { transform: translate(-4px, 26px) rotate(58deg); }
    82%   { transform: translate(-9px, -34px) rotate(22deg); }
    85.5% { transform: translate(-14px, -52px) rotate(-18deg); }
    89%   { transform: translate(-19px, -20px) rotate(-66deg); }
    92%   { transform: translate(-23px, 36px) rotate(-98deg); }
    94%   { transform: translate(-26px, 90px) rotate(-112deg); }
  }
}

/* ---------- Motion system v2 (scroll-driven life on every page, per Chase) ---------- */
@media (prefers-reduced-motion: no-preference) {

  /* 1) Hero intro cascade on page load (eyebrow → headline → copy → buttons) */
  @keyframes fcfRise {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: none; }
  }
  :is(#page, main, #content) > .elementor > .elementor-section:first-child .elementor-widget { animation: fcfRise 700ms cubic-bezier(.22,.7,.3,1) both; }
  :is(#page, main, #content) > .elementor > .elementor-section:first-child .elementor-widget:nth-child(2) { animation-delay: 130ms; }
  :is(#page, main, #content) > .elementor > .elementor-section:first-child .elementor-widget:nth-child(3) { animation-delay: 260ms; }
  :is(#page, main, #content) > .elementor > .elementor-section:first-child .elementor-widget:nth-child(4),
  :is(#page, main, #content) > .elementor > .elementor-section:first-child .elementor-section.elementor-inner-section { animation-delay: 390ms; }

  /* 2) Fallback reveal (browsers without scroll-driven animations) — driven by JS observer.
     Motion lives on the inner container, NOT the section: moving/fading the section itself
     opens a gap at boundaries where the body background shows through as a hard line. */
  .fcf-reveal > .elementor-container {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 700ms ease, transform 700ms ease;
    will-change: opacity, transform;
  }
  .fcf-reveal.fcf-inview > .elementor-container { opacity: 1; transform: none; }
  .fcf-reveal .elementor-column { transition: opacity 700ms ease, transform 700ms ease; }
  .fcf-reveal:not(.fcf-inview) .elementor-column { opacity: 0; transform: translateY(20px); }
  .fcf-reveal.fcf-inview .elementor-column:nth-child(2) { transition-delay: 120ms; }
  .fcf-reveal.fcf-inview .elementor-column:nth-child(3) { transition-delay: 240ms; }

  /* 3) Scroll-driven animations where supported: sections breathe in AND out with the scroll */
  @supports (animation-timeline: view()) {
    @keyframes fcfSectionFlow {
      0%   { opacity: 0;    transform: translateY(48px); }
      14%  { opacity: 1;    transform: none; }
      86%  { opacity: 1;    transform: none; }
      100% { opacity: 0.45; transform: translateY(-18px); }
    }
    /* animate the CONTAINER, not the section — the section (and its background) stays
       welded to its neighbors, so no body-background line ever shows at boundaries */
    :is(#page, main, #content) > .elementor > .elementor-section:not(:first-child) > .elementor-container {
      animation: fcfSectionFlow linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }

    /* images settle in with a soft zoom */
    @keyframes fcfImgSettle {
      from { transform: scale(1.08); }
      to   { transform: none; }
    }
    :is(#page, main, #content) > .elementor > .elementor-section:not(:first-child) .elementor-widget-image img,
    :is(#page, main, #content) .elementor-widget-image-gallery .gallery-item img,
    .fcf-journal-card img {
      animation: fcfImgSettle linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }

    /* two-column splits drift toward center */
    @keyframes fcfFromLeft  { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } }
    @keyframes fcfFromRight { from { opacity: 0; transform: translateX(36px); }  to { opacity: 1; transform: none; } }
    :is(#page, main, #content) > .elementor > .elementor-section:not(:first-child) > .elementor-container > .elementor-column:first-child:nth-last-child(2) {
      animation: fcfFromLeft linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 85%;
    }
    :is(#page, main, #content) > .elementor > .elementor-section:not(:first-child) > .elementor-container > .elementor-column:last-child:nth-child(2) {
      animation: fcfFromRight linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 85%;
    }

    /* three-up rows (pillars, drop-list cards) rise with a stagger */
    @keyframes fcfColRise { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
    :is(#page, main, #content) .elementor .elementor-section .elementor-column:nth-child(1):nth-last-child(3),
    :is(#page, main, #content) .elementor .elementor-section .elementor-column:nth-child(2):nth-last-child(2),
    :is(#page, main, #content) .elementor .elementor-section .elementor-column:nth-child(3):last-child {
      animation: fcfColRise linear both;
      animation-timeline: view();
    }
    :is(#page, main, #content) .elementor .elementor-section .elementor-column:nth-child(1):nth-last-child(3) { animation-range: entry 0% entry 65%; }
    :is(#page, main, #content) .elementor .elementor-section .elementor-column:nth-child(2):nth-last-child(2) { animation-range: entry 10% entry 78%; }
    :is(#page, main, #content) .elementor .elementor-section .elementor-column:nth-child(3):last-child       { animation-range: entry 20% entry 90%; }

    /* the fallback classes must not double-hide when scroll-driven is active */
    .fcf-reveal, .fcf-reveal > .elementor-container, .fcf-reveal .elementor-column { opacity: 1 !important; transform: none !important; transition: none; }

    /* photo backgrounds pan gently, scrubbed directly by scroll (JS tags .fcf-bgpx once) */
    @keyframes fcfBgPan {
      from { background-position: center 32%; }
      to   { background-position: center 68%; }
    }
    .fcf-bgpx {
      animation: fcfBgPan linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }

    /* homepage hero: real parallax depth. The image is oversized so there's ~270px of
       overflow to travel, and the whole pan is mapped onto the scroll-away range. */
    @media (min-width: 1025px) {
      @keyframes fcfHeroPan {
        from { background-position: center 31%; }
        to   { background-position: center 69%; }
      }
      #fly-hero.fcf-bgpx {
        background-size: 130% auto !important;
        animation: fcfHeroPan linear both;
        animation-timeline: view();
        animation-range: cover 45% cover 100%;
      }
    }
  }
}

/* ---------- Catches carousel ---------- */
/* original orientation preserved: uniform row height, no cropping, image centered in the slide */
.fcf-catches .swiper-slide img, .fcf-catches .elementor-carousel-image {
  height: 460px !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain;
  border-radius: 0;
}
.fcf-catches .swiper-slide,
.fcf-catches .swiper-slide figure {
  display: flex !important;
  align-items: flex-end;
  justify-content: center;
  margin: 0;
}
@media (max-width: 767px) {
  .fcf-catches .swiper-slide img, .fcf-catches .elementor-carousel-image { height: 320px !important; }
}
.fcf-catches .elementor-swiper-button {
  color: #EFEAE0;
  background: rgba(34,51,60,0.55);
  width: 44px; height: 44px;
  border-radius: 2px;
}
.fcf-catches .elementor-swiper-button:hover { background: #B4681F; }

/* ---------- Instagram feed (Smash Balloon) brand pass ---------- */
#sb_instagram { padding-bottom: 0 !important; }
#sb_instagram .sbi_photo { border-radius: 0; }
#sb_instagram .sbi_follow_btn a {
  background: #B4681F !important;
  color: #EFEAE0 !important;
  font-family: 'Archivo Narrow', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border-radius: 2px !important;
}
#sb_instagram .sbi_follow_btn a:hover { background: #75592E !important; }

/* ---------- FAQ section: stretch glass-haze texture so its baked Bone fades sit exactly at the section edges ---------- */
#fcf-faq { background-size: 100% 100% !important; }

/* ---------- Footer tagline: space between the two lines, each phrase on one line ---------- */
.fcf-footer-tagline p { margin: 0 0 14px; white-space: nowrap; }
.fcf-footer-tagline p:last-child { margin-bottom: 0; }
@media (max-width: 767px) { .fcf-footer-tagline p { white-space: normal; } }

/* ---------- Soft section transitions (JS injects .fcf-secfade at each boundary) ---------- */
.fcf-has-secfade { position: relative; }
.fcf-secfade {
  position: absolute;
  top: -1px; /* cover subpixel seams */
  left: 0;
  right: 0;
  height: 220px;
  pointer-events: none;
  z-index: 1;
}
.fcf-has-secfade > .elementor-container { position: relative; z-index: 2; }
@media (max-width: 767px) { .fcf-secfade { height: 120px; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}