/* Crunch motion for the v28 page: things drop in and stop at rest with no bounce, and the crackers' pieces burst out.
   Linked right after options.css. Every rule sits inside the one media query below and behind html.motion-crunch, which
   the inline script in the head of index.html puts on <html> before first paint (never for a visitor who has asked for
   reduced motion, and never for ?motion=off).
   Only opacity and the individual transform properties (translate, rotate, scale) are animated, so each animation
   composes with the element's own resting transform (the cracker photo's tilt, the crumb trail's translateY(-50%)).
   Every keyframe list holds a "from" and, for a few pieces, one middle keyframe that sets opacity only, so the piece is
   fully visible before it stops moving. Each animation ends at the element's own resting style, runs once, and fills
   backwards so a delayed piece waits in its "from" state.
   Easings: expo and toss; nothing passes its resting position. */

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

/* ================================================================ Crunch: things drop in and stop at rest, no bounce; the crackers' pieces burst out */

html.motion-crunch {
  --e-expo: cubic-bezier(.16,1,.3,1);
  --e-toss: cubic-bezier(.2,.7,.2,1);
}

/* Nothing that flies in may widen the page: each section clips sideways, which moves nothing at rest. */
html.motion-crunch section { overflow-x: clip; }

/* Hero copy: starts with the page, no script. */
html.motion-crunch .hero .hero-eyebrow { animation: mo-c-eyebrow 650ms var(--e-toss) 100ms backwards; }
html.motion-crunch .hero .hero-rule { transform-origin: left center; animation: mo-c-rule 500ms var(--e-expo) 750ms backwards; }
html.motion-crunch .hero .cta-row .btn-pink { animation: mo-c-btn-main 650ms var(--e-toss) 850ms backwards; }
html.motion-crunch .hero .cta-row .btn-outline-navy { animation: mo-c-btn-side 500ms var(--e-expo) 950ms backwards; }
html.motion-crunch .hero .chip-row .chip { --sg: 1; animation: mo-c-chip 650ms var(--e-toss) 1000ms backwards; }
html.motion-crunch .hero .chip-row .chip:nth-child(even) { --sg: -1; }
html.motion-crunch .hero .chip-row .chip:nth-child(2) { animation-delay: 1120ms; }
html.motion-crunch .hero .chip-row .chip:nth-child(3) { animation-delay: 1240ms; }

/* Hero heading: hidden until motion.js has split it into words. */
html.motion-crunch .hero h1:not(.split) { opacity: 0; }
html.motion-crunch .hero h1.split .w { display: inline-block; --sg: 1; animation: mo-c-word 600ms var(--e-toss) calc(200ms + var(--w) * 80ms) backwards; }
html.motion-crunch .hero h1.split .w:nth-child(even) { --sg: -1; }

/* Hero panel group: hidden until motion.js adds .go, then the panel slides in and the pieces land and burst out. */
html.motion-crunch .hero .hero-panel:not(.go),
html.motion-crunch .hero .hero-panel:not(.go) .cracker-herb,
html.motion-crunch .hero .hero-panel:not(.go) .starburst,
html.motion-crunch .hero .hero-panel:not(.go) .hero-confetti polygon { opacity: 0; }
html.motion-crunch .hero .hero-panel:not(.go) .cracker-herb { animation: none; }
html.motion-crunch .hero .hero-confetti polygon { transform-box: view-box; transform-origin: 380px 390px; }
html.motion-crunch .hero .hero-panel.go { animation: mo-c-panel 650ms var(--e-expo) 0ms backwards; }
html.motion-crunch .hero .hero-panel.go .cracker-herb { animation: mo-c-photo 950ms var(--e-toss) 300ms backwards; }
html.motion-crunch .hero .hero-panel.go .starburst { animation: mo-c-starburst 700ms var(--e-toss) 950ms backwards; }
html.motion-crunch .hero .hero-panel.go .hero-confetti polygon { animation: mo-c-confetti 900ms var(--e-expo) 1000ms backwards; }
html.motion-crunch .hero .hero-panel.go .hero-confetti polygon:nth-child(3n+2) { animation-delay: 1070ms; }
html.motion-crunch .hero .hero-panel.go .hero-confetti polygon:nth-child(3n) { animation-delay: 1140ms; }

/* Scroll reveals: hidden until motion.js marks the element .in (the list repeats motion.js's reveal groups, so the
   first screen never shows a piece that is about to animate). --i is the piece's place in its group's batch, --sign
   alternates 1 and -1 with it. The delay is --i times the group's stagger, held so delay plus duration stays under
   1.6 s. */
html.motion-crunch [data-rv]:not(.in),
html.motion-crunch :is(
  .identity-bar .motif,
  #technology .eyebrow, #technology h2, #technology > .wrap > .sub,
  #mission .eyebrow, #mission h2,
  #Partnerbrands .eyebrow, #Partnerbrands h2, #Partnerbrands > .wrap > .sub,
  #how-we-work .eyebrow, #how-we-work h2,
  #faq .eyebrow, #faq h2,
  #request-samples .eyebrow, #request-samples h2,
  #technology .ped, #mission .stat, #Partnerbrands .proof-card, #how-we-work .lane,
  #samplekitform, #homecontactform, #request-samples .book-card,
  #products .prod-head img, #products .flavor-collage img,
  #products .prod-head, #products .flavor-band, #how-we-work .menu,
  #mission .attr, #Partnerbrands .review-grid blockquote, #how-we-work .menu-course, #faq .faq-item,
  #mission .stat-note, #products > .wrap > .cta-row, #products .signup,
  #Partnerbrands .proof-label, #Partnerbrands .customer-reviews > h3, #Partnerbrands .review-note
):not(.in) { opacity: 0 !important; }
html.motion-crunch [data-rv="trail"].in { animation: mo-c-trail 900ms var(--e-expo) 0ms backwards; }
html.motion-crunch [data-rv="heading"].in { animation: mo-c-heading 700ms var(--e-expo) calc(min(var(--i, 0), 6) * 90ms) backwards; }
html.motion-crunch [data-rv="card"].in { animation: mo-c-card 800ms var(--e-toss) calc(min(var(--i, 0), 6) * 110ms) backwards; }
html.motion-crunch [data-rv="photo"].in { animation: mo-c-photo-rv 900ms var(--e-toss) calc(min(var(--i, 0), 5) * 120ms) backwards; }
html.motion-crunch [data-rv="panel"].in { animation: mo-c-panel-rv 600ms ease-out 0ms backwards; }
html.motion-crunch [data-rv="item"].in { animation: mo-c-item 550ms var(--e-toss) calc(min(var(--i, 0), 6) * 70ms) backwards; }
html.motion-crunch [data-rv="note"].in { animation: mo-c-note 600ms var(--e-expo) 0ms backwards; }

@keyframes mo-c-eyebrow { from { translate: -48px 0; rotate: -6deg; opacity: 0; } }
@keyframes mo-c-word { from { translate: 0 -.7em; rotate: calc(var(--sg) * 8deg); opacity: 0; } }
@keyframes mo-c-rule { from { scale: 0 1; } }
@keyframes mo-c-btn-main { from { translate: 0 28px; scale: .85; opacity: 0; } }
@keyframes mo-c-btn-side { from { translate: 0 16px; opacity: 0; } }
@keyframes mo-c-chip { from { translate: 0 -40px; rotate: calc(var(--sg) * 10deg); opacity: 0; } }
@keyframes mo-c-panel { from { translate: 35% 0; opacity: 0; } 30% { opacity: 1; } }
@keyframes mo-c-photo {
  from { translate: 40% -60%; rotate: 35deg; scale: .6; opacity: 0; }
  60% { opacity: 1; }
}
@keyframes mo-c-starburst { from { scale: .3; rotate: -90deg; opacity: 0; } }
@keyframes mo-c-confetti { from { scale: .05; rotate: -35deg; opacity: 0; } }
@keyframes mo-c-trail { from { translate: -180px 0; rotate: -15deg; opacity: 0; } }
@keyframes mo-c-heading { from { translate: 0 36px; opacity: 0; } }
@keyframes mo-c-card {
  from { translate: 0 -56px; rotate: calc(var(--sign) * 7deg); opacity: 0; }
  50% { opacity: 1; }
}
@keyframes mo-c-photo-rv {
  from { translate: 60px -60px; rotate: calc(var(--sign) * 22deg); scale: .75; opacity: 0; }
  50% { opacity: 1; }
}
@keyframes mo-c-panel-rv { from { opacity: 0; } }
@keyframes mo-c-item { from { translate: 0 22px; scale: .85; opacity: 0; } }
@keyframes mo-c-note { from { translate: 0 14px; opacity: 0; } }

}