/* Brand flair: hand-drawn doodles, scroll motion, hover touches, home "uses & recipes" strip. */

/* ---------- Doodles ---------- */
.doodle { display: block; width: 64px; height: 64px; color: var(--tone-accent); flex: none; }
.home-hero-media .doodle-float { position: absolute; z-index: 2; width: clamp(44px, 5vw, 72px); height: auto; }
.home-hero-media .d1 { top: 4%; inset-inline-end: -14px; color: var(--red); --rot: 18deg; }
.home-hero-media .d2 { top: 34%; inset-inline-start: -46px; color: var(--green); --rot: -12deg; }
.home-hero-media .d3 { bottom: -18px; inset-inline-end: 22%; color: var(--ink); --rot: 30deg; }
.doodle-float { transform: rotate(var(--rot, 0deg)); animation: om-float 6s ease-in-out infinite; }
.home-hero-media .d2 { animation-delay: -2s; }
.home-hero-media .d3 { animation-delay: -4s; }
@keyframes om-float {
  0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
  50% { transform: translateY(-10px) rotate(calc(var(--rot, 0deg) + 6deg)); }
}
.split-head > div { position: relative; }
.doodle-head { position: absolute; top: -18px; inset-inline-end: -66px; width: 52px; height: 52px; color: var(--red); transform: rotate(14deg); }
.tone-sun .doodle-head, .tone-wheat .doodle-head { color: var(--red); }
.doodle-inline { width: 54px; height: 54px; margin-bottom: 12px; color: var(--yellow); transform: rotate(-12deg); }

/* ---------- Seal: slow wobble ---------- */
.seal { animation: om-wobble 7s ease-in-out infinite; }
@keyframes om-wobble { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(-2deg) scale(1.03); } }

/* ---------- Hover touches ---------- */
.button { will-change: transform; }
.button:hover { transform: translateY(-2px); }
.index-media img { transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.index-list a:hover .index-media img, .index-list a:focus-visible .index-media img { transform: rotate(-6deg) scale(1.08); }
.index-list a .icon { transition: transform .3s ease; }
.index-list a:hover .icon { transform: translateX(-6px); }
[dir="ltr"] .index-list a:hover .icon { transform: translateX(6px); }
.product-media { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease; }
.product-open:hover .product-media { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(80, 56, 42, .14); }

/* ---------- Scroll reveal (only when JS turned it on) ---------- */
.js-motion [data-reveal] {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s ease, transform .85s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.js-motion [data-reveal].is-in { opacity: 1; transform: none; }
.js-motion .home-hero-media[data-reveal] { transform: translateY(28px) scale(.97); }
.js-motion .home-hero-media[data-reveal].is-in { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .doodle-float, .seal { animation: none; }
  .button:hover, .product-open:hover .product-media, .index-list a:hover .index-media img { transform: none; }
}

/* ---------- Uses & recipes strip (home) ---------- */
.uses-list {
  --gap: clamp(16px, 2vw, 28px);
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * var(--gap)) / 5);
  gap: var(--gap); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding-top: 10px; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none;
}
.uses-list::-webkit-scrollbar { display: none; }
.uses-head-actions { display: flex; align-items: center; gap: 18px; }
.uses-nav { display: flex; gap: 10px; }
.uses-nav button {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
  border: 1.5px solid currentColor; background: transparent; color: var(--ink); cursor: pointer;
  transition: background .25s ease, color .25s ease, opacity .25s ease;
}
.uses-nav button:hover:not(:disabled) { background: var(--ink); color: var(--cream); }
.uses-nav button:disabled { opacity: .3; cursor: default; }
.uses-nav .icon { width: 18px; height: 18px; }
.uses-nav .uses-prev .icon { transform: scaleX(-1); }
[dir="rtl"] .uses-nav .uses-prev .icon { transform: none; }
.uses-list li { scroll-snap-align: start; }
.uses-list a { display: flex; flex-direction: column; gap: 6px; color: inherit; text-decoration: none; }
.uses-media {
  display: block; overflow: hidden; aspect-ratio: 4 / 5; margin-bottom: 12px;
  border-radius: 999px 999px var(--radius) var(--radius); background: var(--tone-soft);
  transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}
.uses-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.uses-list a:hover .uses-media { transform: translateY(-6px); }
.uses-list a:hover .uses-media img { transform: scale(1.06); }
.uses-title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.2rem, 1.6vw, 1.45rem); line-height: 1.4; }
.uses-more { display: inline-flex; align-items: center; gap: 8px; font-size: .92rem; font-weight: 600; color: var(--tone-accent); }
.uses-more .icon { width: 16px; height: 16px; }

@media (max-width: 1000px) {
  .uses-list { grid-auto-columns: calc((100% - 2 * var(--gap)) / 2.6); }
  .doodle-head { display: none; }
}
@media (max-width: 560px) {
  .uses-list { grid-auto-columns: 62%; }
  .uses-nav { display: none; }
  .home-hero-media .d2 { inset-inline-start: -10px; }
  .home-hero-media .d1 { inset-inline-end: 0; }
}