/* Motion: home intro, hero entrance, image wipes, parallax, drawn doodles, counters, paper grain.
   Everything here only runs when html has .js-motion (never with "reduce motion"). */

/* ---------- Paper grain on colour bands ---------- */
:is(.strengths, .category-band, .coffee-band, .uses-strip) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ---------- Home intro: a cashew draws itself, then the curtain lifts (first visit per session) ---------- */
html.om-intro::before {
  content: ""; position: fixed; inset: 0; z-index: 10000; pointer-events: none;
  background: #fff6e5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23d84132' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cstyle%3Epath%7Bstroke-dasharray:1;stroke-dashoffset:1;animation:d .8s cubic-bezier(.6,0,.2,1) .1s forwards%7Dpath+path%7Banimation-delay:.45s%7D@keyframes d%7Bto%7Bstroke-dashoffset:0%7D%7D%3C/style%3E%3Cpath pathLength='1' d='M45 12c7 6 9 17 5 27-5 11-17 17-28 13-7-3-10-9-7-13 3-3 8-1 12-1 8-1 14-8 13-16 0-4-2-7 0-10 1-2 3-2 5 0z'/%3E%3Cpath pathLength='1' d='M41 21c1 7-3 14-10 17'/%3E%3C/svg%3E") center / 104px no-repeat;
  animation: om-curtain .75s cubic-bezier(.76, 0, .24, 1) 1.05s forwards;
}
@keyframes om-curtain { to { clip-path: inset(0 0 100% 0); } }
html { --intro: 0s; }
html.om-intro { --intro: 1.2s; }

/* ---------- Hero entrance ---------- */
.js-motion :is(.home-hero-copy > .eyebrow, .home-hero .display, .home-hero .h1-sub, .home-hero-copy > .actions) {
  animation: om-rise 1s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: calc(var(--intro) + var(--i, 0) * 120ms);
}
.js-motion .home-hero .display { --i: 1; }
.js-motion .home-hero .h1-sub { --i: 2; }
.js-motion .home-hero-copy > .actions { --i: 3; }
@keyframes om-rise { from { opacity: 0; transform: translateY(48px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

.js-motion .home-hero-media > img {
  animation: om-arch 1.3s cubic-bezier(.7, 0, .2, 1) both;
  animation-delay: calc(var(--intro) + 120ms);
}
@keyframes om-arch {
  from { clip-path: inset(100% 0 0 0 round 999px 999px 24px 24px); transform: scale(1.18); }
  to { clip-path: inset(0 0 0 0 round 0); transform: none; }
}
.js-motion .home-hero .seal { animation: om-pop .9s cubic-bezier(.3, 1.6, .5, 1) both, om-wobble 7s ease-in-out 2.4s infinite; animation-delay: calc(var(--intro) + .9s), calc(var(--intro) + 1.8s); }
@keyframes om-pop { from { opacity: 0; transform: scale(.2) rotate(-40deg); } to { opacity: 1; transform: rotate(-8deg); } }

/* ---------- Doodles draw themselves ---------- */
.js-motion .doodle path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.6, 0, .2, 1); }
.js-motion .doodle path + path { transition-delay: .35s; }
.js-motion .doodle path + path + path { transition-delay: .6s; }
.js-motion .doodle.is-drawn path { stroke-dashoffset: 0; }
.js-motion .home-hero-media .doodle path { animation: om-draw 1.2s cubic-bezier(.6, 0, .2, 1) both; animation-delay: calc(var(--intro) + 1s); transition: none; }
@keyframes om-draw { to { stroke-dashoffset: 0; } }

/* ---------- Big photos: wipe in, then drift with the scroll ---------- */
.js-motion .story-media { overflow: hidden; border-radius: var(--radius-lg); }
.js-motion .coffee-band .story-media { border-radius: var(--radius-lg) var(--radius-lg) 999px 999px; }
.js-motion .story-media img { transform: translate3d(0, var(--py, 0px), 0) scale(1.12); will-change: transform; }
.js-motion .story-media[data-wipe] { clip-path: inset(18% 10% 18% 10% round 32px); transition: clip-path 1.2s cubic-bezier(.7, 0, .2, 1); }
.js-motion .story-media[data-wipe].is-in { clip-path: inset(0 0 0 0 round 0); }

/* ---------- Header steps aside while reading, comes back when scrolling up ---------- */
.js-motion [data-header] { transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease, background-color .3s ease; }
.js-motion [data-header].is-away { transform: translateY(-110%); }