/* =========================================================================
 * Brand North — Motion layer (v0.9.9 — 20x non-hero motion)
 *
 * Everything below the hero. Balanced mood: more alive than the old flat
 * 12px fade, but refined — no bounce, no spin, word-level (not letter-level)
 * reveals. Every pattern collapses to a plain opacity fade (or nothing) under
 * prefers-reduced-motion.
 *
 * Loaded as its own enqueued layer AFTER sections.css so these rules win.
 * ========================================================================= */

/* -------------------------------------------------------------------------
 * 1. Directional reveal variants
 *
 * Base [data-bn-reveal] resting/hidden states live in sections.css (kept for
 * the CSS-only auto-rescue). Here we override the HIDDEN transform per
 * direction. The revealed state ([data-bn-revealed="true"]) is always the
 * neutral one already defined in sections.css, so we only need the hidden
 * vectors + the richer transition (with blur).
 * ------------------------------------------------------------------------- */
[data-bn-reveal] {
  /* Upgrade the transition to include filter (blur) + a longer, eased curve.
   * Overrides the 600ms opacity/transform-only transition from sections.css. */
  transition:
    opacity   560ms var(--ease-out-expo),
    transform 560ms var(--ease-out-expo),
    filter    360ms var(--ease-out-expo);
  will-change: opacity, transform, filter;
}

/* Softened (v0.9.29): lighter blur + shorter travel so headings/body resolve
 * to crisp, readable text almost immediately — no fuzzy/empty first paint. */
[data-bn-reveal="up"],
[data-bn-reveal=""]            { transform: translateY(14px);  filter: blur(2px); }
[data-bn-reveal="left"]        { transform: translateX(-20px); filter: blur(2px); }
[data-bn-reveal="right"]       { transform: translateX(20px);  filter: blur(2px); }
[data-bn-reveal="scale"]       { transform: scale(0.97);       filter: blur(1px); }
[data-bn-reveal="blur"]        { transform: none;              filter: blur(4px); }

/* Revealed → neutralize every vector + blur. Wins via [data-bn-revealed]. */
[data-bn-reveal][data-bn-revealed="true"] {
  transform: none;
  filter: blur(0);
  opacity: 1;
}

/* Drop will-change once settled to free the compositor layer. */
[data-bn-reveal][data-bn-revealed="true"] {
  will-change: auto;
}

/* -------------------------------------------------------------------------
 * 2. Heading word-reveal (split-reveal.js wraps words in .bn-word)
 *
 * When a heading drives word-reveal it usually ALSO carries [data-bn-reveal]
 * (so it has the CSS-only fallback). The words own the entrance, so the
 * container reveal is neutralized to avoid stacking two animations.
 *
 * FOUC guard: words are only hidden once split-reveal.js has wrapped them
 * AND set [data-bn-words-done] — in the same synchronous pass. Before JS (or
 * if JS never runs) the heading renders as plain, fully-visible text.
 * ------------------------------------------------------------------------- */
[data-bn-reveal][data-bn-words] {
  opacity: 1;
  transform: none;
  filter: none;
  animation: none;
}

/* Hidden state = pre-animation. Driven by a one-shot @keyframes (not a
 * transition) so a mid-flight style recalc can't restart it — the animation
 * owns its own timeline and `forwards` holds the end state. */
[data-bn-words][data-bn-words-done] .bn-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  will-change: opacity, transform;
}

[data-bn-words][data-bn-words-in="true"] .bn-word {
  animation: bn-word-in 580ms var(--ease-out-expo) var(--bn-word-delay, 0ms) both;
  will-change: auto;
}

@keyframes bn-word-in {
  from { opacity: 0; transform: translateY(0.4em); }
  to   { opacity: 1; transform: translateY(0);     }
}

/* -------------------------------------------------------------------------
 * 3. Card hover micro-interactions
 *
 * Applies to the section card families: problem fog cards, evidence proof
 * tiles, pricing cards, booking paths. Lift + shadow bloom + accent hairline.
 * ------------------------------------------------------------------------- */
.bn-fog-card,
.bn-proof__tile,
.bn-pricing__tier,
.bn-booking__path {
  transition:
    transform   var(--dur-base) var(--ease-out-quart),
    box-shadow  var(--dur-base) var(--ease-out-quart),
    border-color var(--dur-base) var(--ease-out-quart);
  will-change: transform;
}

.bn-fog-card:hover,
.bn-proof__tile:hover,
.bn-pricing__tier:hover,
.bn-booking__path:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-elevated);
  border-color: var(--bn-sky-hover);
}

/* The booking paths sit on a dark ground — give them a sky-tint glow instead
 * of the cream-ground elevated shadow. */
.bn-booking__path:hover {
  box-shadow: 0 16px 48px rgba(168, 216, 240, 0.16);
}

/* Featured pricing tier sits lifted above the other two. These transforms
 * live here (not sections.css) so resting + hover share the same cascade
 * layer as the generic `.bn-pricing__tier:hover` rule.
 *
 * They also include [data-bn-revealed="true"] so they out-specify the reveal
 * engine's `[data-bn-reveal][data-bn-revealed="true"] { transform:none }`
 * (0,2,0) — otherwise the settled card would flatten to 0 instead of lifting.
 * Before reveal, the entrance transform still wins (lower specificity here),
 * so the card animates up into its lifted resting position. */
.bn-pricing__tier--featured[data-bn-revealed="true"] { transform: translateY(-14px); }
.bn-pricing__tier--featured[data-bn-revealed="true"]:hover {
  transform: translateY(-18px);
  border-color: rgba(168, 216, 240, 0.35);
}

/* Inner-content nudge — the key value/number leans up a hair on hover so the
 * card feels responsive, not just shadowed. */
.bn-proof__tile:hover .bn-proof__tile-stat-value,
.bn-booking__path:hover .bn-booking__path-value {
  transform: translateY(-2px);
  transition: transform var(--dur-base) var(--ease-out-quart);
}

/* -------------------------------------------------------------------------
 * 4. CTA hover — scale + soft glow + arrow slide
 * ------------------------------------------------------------------------- */
.bn-btn {
  transition:
    transform  var(--dur-fast) var(--ease-out-quart),
    box-shadow var(--dur-base) var(--ease-out-quart),
    background-color var(--dur-base) var(--ease-out-quart),
    color var(--dur-base) var(--ease-out-quart);
}

.bn-btn--primary:hover,
.bn-btn--secondary:hover {
  transform: translateY(-2px) scale(1.015);
  box-shadow: var(--shadow-ember-glow);
}

.bn-btn:active { transform: translateY(0) scale(0.99); }

/* Arrow inside CTAs slides right on hover. */
.bn-btn__arrow {
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-out-quart);
}
.bn-btn:hover .bn-btn__arrow { transform: translateX(5px); }

/* -------------------------------------------------------------------------
 * 5. Parallax drift targets — let JS own the transform; just hint the layer.
 * ------------------------------------------------------------------------- */
[data-bn-parallax] { will-change: transform; }

/* -------------------------------------------------------------------------
 * 6. Reduced motion — flatten EVERYTHING to opacity-only (or static).
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-bn-reveal],
  [data-bn-reveal][data-bn-revealed="true"] {
    transform: none !important;
    filter: none !important;
    transition: opacity 300ms linear !important;
  }
  [data-bn-words] .bn-word {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
  }
  .bn-fog-card,
  .bn-proof__tile,
  .bn-pricing__tier,
  .bn-booking__path,
  .bn-btn,
  .bn-btn__arrow,
  .bn-btn--primary:hover,
  .bn-btn--secondary:hover,
  .bn-fog-card:hover,
  .bn-proof__tile:hover,
  .bn-pricing__tier:hover,
  .bn-booking__path:hover {
    transform: none !important;
    transition: none !important;
  }
  [data-bn-parallax] { transform: none !important; }
}