/* BERRY9 v3 motion, editorial and calm. Loaded only when the visitor has not asked for reduced motion (media attribute on
   the link), so nothing here needs its own fallback. Rules: transform and opacity (and one clip) only; the first paint is
   never delayed past a second; scroll effects use CSS timelines and only move things (opacity is never touched, so text
   keeps its contrast and its place in the index); no glow, no loops, nothing decorative that keeps running. */

:root { --ease: cubic-bezier(.2, .7, .2, 1); }
html { scroll-behavior: smooth; }

@keyframes b9-rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes b9-fade { from { opacity: 0; } }
@keyframes b9-out { to { opacity: 0; } }
@keyframes b9-mask { from { clip-path: inset(0 0 100% 0); transform: translateY(34%); } to { clip-path: inset(0 0 0 0); transform: none; } }
@keyframes b9-draw { to { stroke-dashoffset: 0; } }
@keyframes b9-node { from { opacity: 0; transform: scale(.3); } }

/* Page to page: a short cross-fade; the header stays put. */
@view-transition { navigation: auto; }
.hdr { view-transition-name: b9-hdr; }
::view-transition-old(root) { animation: .16s ease-in both b9-out; }
::view-transition-new(root) { animation: .3s var(--ease) both b9-fade; }

/* The signature move: the headline rises from behind its own baseline, then everything else follows it. */
.hero h1 { animation: b9-mask .85s var(--ease) both; }
.hero .eyebrow, .hero .crumbs { animation: b9-rise .6s var(--ease) both; }
.hero .lead { animation: b9-rise .7s .28s var(--ease) both; }
.hero .actions { animation: b9-rise .7s .38s var(--ease) both; }
.hero__facts { animation: b9-rise .7s .48s var(--ease) both; }
.hero .reviewed { animation: b9-fade .8s .6s both; }
.hero .viz { animation: b9-rise .9s .3s var(--ease) backwards; }

/* The evidence in the hero: the attack path draws itself and its nodes arrive in the order of the attack. */
.hero .g-chain { stroke-dasharray: 600; stroke-dashoffset: 600; animation: b9-draw 2s .8s ease-out forwards; }
.hero .g-node, .hero .g-id, .hero .g-label { transform-box: fill-box; transform-origin: center; animation: b9-node .5s var(--ease) both; }
.hero .g-node:nth-of-type(-n+4), .hero .g-label--dim { animation-delay: .6s; }
.hero circle.g-node:nth-of-type(5) { animation-delay: .7s; }
.hero circle.g-node:nth-of-type(6) { animation-delay: 1.2s; }
.hero circle.g-node:nth-of-type(7) { animation-delay: 1.6s; }
.hero circle.g-node:nth-of-type(8) { animation-delay: 2s; }
.hero circle.g-node:nth-of-type(9) { animation-delay: 2.4s; }
.hero .g-cell { animation: b9-fade .5s both; animation-delay: .6s; }
.hero .g-tick { stroke-dasharray: 20; stroke-dashoffset: 20; animation: b9-draw .5s 1.2s ease-out forwards; }

/* Scroll: a thin progress line, and reveals that only move things. */
@supports (animation-timeline: scroll()) {
  @keyframes b9-progress { to { transform: scaleX(1); } }
  body::before {
    content: ""; position: fixed; z-index: 70; top: 0; left: 0; right: 0; height: 3px; background: var(--btn); pointer-events: none;
    transform: scaleX(0); transform-origin: 0 50%; animation: b9-progress linear both; animation-timeline: scroll(root);
  }
}
@supports (animation-timeline: view()) {
  @keyframes b9-reveal { from { transform: translateY(32px); } }
  @keyframes b9-growy { from { transform: scaleY(0); } }
  @keyframes b9-growx { from { transform: scaleX(0); } }
  /* fill-mode backwards: before it enters, an item sits low; afterwards the animation lets go, so hover and layout are as styled. */
  :is(.sec__head, .cards > .card, .rail li, .stats > div, .versus__col, .price, .checks li, .split > *, .callout, .tbl-wrap, .faqs > .faq, .cities li, .ctabox, .trustbar li, .post__body > *, .report, .step__body) {
    animation: b9-reveal linear backwards; animation-timeline: view(); animation-range: entry 4% entry 40%;
  }
  .cards > .card:nth-child(3n+2), .stats > div:nth-child(2), .rail li:nth-child(even) { animation-range: entry 9% entry 46%; }
  .cards > .card:nth-child(3n), .stats > div:nth-child(3), .stats > div:nth-child(4) { animation-range: entry 14% entry 52%; }
  .step::after { transform-origin: 50% 0; animation: b9-growy linear backwards; animation-timeline: view(); animation-range: entry 35% cover 60%; }
  @media (min-width: 1000px) { .step::after { transform-origin: 0 50%; animation-name: b9-growx; } }
}

/* Controls answer the hand; the fold opens with a rise. */
.btn, .rail a, .card--link, .cities a, .jump a, .faq summary, .fold > summary { transition: background-color .22s, color .22s, border-color .22s, transform .22s var(--ease); }
.btn:hover { transform: translateY(-2px); }
.rail a:hover { transform: translateX(6px); }
.fold[open] > :not(summary) { animation: b9-rise .4s var(--ease) both; }

@media print { *, *::before, *::after { animation: none !important; transition: none !important; } }