/* ============================================================
   Bettermode — Motion (the expressive tier)
   The brand gesture is the SWITCH FLIP: decisive, physical,
   quick to settle. spacing.css carries the calm tier (hover,
   press, micro-interactions: 120/200/320ms, standard eases).
   This file adds entrances and reveals — the flair layer — plus
   the one sanctioned overshoot: the switch flip itself.
   Usage law, recipes, and review gates: guidelines/motion.md.

   Reduced-motion safety: every class below keeps the visible
   end state as the base style; animation only adds the way in.
   Print, PDF export, and prefers-reduced-motion all see the
   finished layout, never an opacity:0 husk.
   ============================================================ */

:root {
  /* ---- Expressive eases ---- */
  --ease-emphatic: cubic-bezier(0.19, 1, 0.22, 1);    /* expo-out: fast arrival, long confident settle — entrances and reveals */
  --ease-switch:   cubic-bezier(0.34, 1.35, 0.64, 1); /* settles ~3% past, once. The switch flip. Toggle marks, badges, chips ONLY — never text blocks, never cards */

  /* ---- Expressive durations (calm tier stays 120/200/320ms) ---- */
  --dur-enter: 480ms;   /* standard element entrance */
  --dur-hero:  720ms;   /* the one hero reveal per view */
  --dur-flip:  420ms;   /* switch-flip pops */
  --dur-count: 1100ms;  /* metric count-ups */

  /* ---- Cascade rhythm ---- */
  --stagger: 70ms;      /* delay step between staggered siblings */
}

@media (prefers-reduced-motion: no-preference) {

  /* ---- Rise — the default entrance. Fade + 24px lift. ---- */
  .bm-rise      { animation: bm-rise var(--dur-enter) var(--ease-emphatic) backwards; }
  .bm-rise-hero { animation: bm-rise var(--dur-hero)  var(--ease-emphatic) backwards; }
  @keyframes bm-rise {
    from { opacity: 0; transform: translateY(24px); }
  }

  /* ---- Cascade — stagger direct children. Put .bm-cascade on the
     parent and .bm-rise (or .bm-line / .bm-flip-in) on the children. ---- */
  .bm-cascade > *:nth-child(1)  { animation-delay: 0ms; }
  .bm-cascade > *:nth-child(2)  { animation-delay: calc(var(--stagger) * 1); }
  .bm-cascade > *:nth-child(3)  { animation-delay: calc(var(--stagger) * 2); }
  .bm-cascade > *:nth-child(4)  { animation-delay: calc(var(--stagger) * 3); }
  .bm-cascade > *:nth-child(5)  { animation-delay: calc(var(--stagger) * 4); }
  .bm-cascade > *:nth-child(6)  { animation-delay: calc(var(--stagger) * 5); }
  .bm-cascade > *:nth-child(7)  { animation-delay: calc(var(--stagger) * 6); }
  .bm-cascade > *:nth-child(8)  { animation-delay: calc(var(--stagger) * 7); }
  .bm-cascade > *:nth-child(9)  { animation-delay: calc(var(--stagger) * 8); }
  .bm-cascade > *:nth-child(10) { animation-delay: calc(var(--stagger) * 9); }

  /* ---- Masked line reveal — display headlines only. Wrap each line:
     <span class="bm-line"><span>Your community</span></span> ---- */
  .bm-line { display: block; overflow: hidden; }
  .bm-line > span { display: block; animation: bm-line-up var(--dur-hero) var(--ease-emphatic) backwards; }
  @keyframes bm-line-up {
    from { transform: translateY(110%); }
  }

  /* ---- Swash draw-in — the highlight bar sweeps in AFTER the text
     lands. Add to the .bm-highlight element. The swash law holds:
     one per view; the delay keeps the text readable first. ---- */
  .bm-swash-in::before {
    animation: bm-swash 560ms var(--ease-emphatic) 450ms backwards;
    transform-origin: left center;
  }
  @keyframes bm-swash {
    from { transform: scaleX(0); }
  }

  /* ---- Switch flip — THE sanctioned overshoot. Toggle marks, badges,
     icon chips, pills ≤ 48px tall. Never headlines, never cards. ---- */
  .bm-flip-in { animation: bm-flip var(--dur-flip) var(--ease-switch) backwards; }
  @keyframes bm-flip {
    from { opacity: 0; transform: scale(0.6); }
  }

  /* ---- Hover lift — the calm tier restated as a utility. ---- */
  .bm-liftable {
    transition: transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out);
  }
  .bm-liftable:hover  { transform: translateY(-2px); box-shadow: var(--shadow-md); }
  .bm-liftable:active { transform: translateY(0); }

  /* ---- Marquee — logo strips. Put the track as the single child and
     duplicate its contents once so the -50% loop is seamless. ---- */
  .bm-marquee { overflow: hidden; }
  .bm-marquee > * {
    display: flex;
    width: max-content;
    animation: bm-marquee var(--marquee-dur, 40s) linear infinite;
  }
  .bm-marquee:hover > * { animation-play-state: paused; }
  @keyframes bm-marquee {
    to { transform: translateX(-50%); }
  }

  /* ---- Scroll reveal — long scrolling pages only (never decks/print:
     .bm-below hides until JS runs). Pair with the 6-line
     IntersectionObserver snippet in guidelines/motion.md. ---- */
  .bm-below {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--dur-enter) var(--ease-emphatic),
                transform var(--dur-enter) var(--ease-emphatic);
  }
  .bm-below.bm-inview { opacity: 1; transform: none; }
}