/* HIGH: ingredients unfold, settle, and give the next section the lead. */
:root {
  --motion-micro: 200ms;
  --motion-standard: 780ms;
  --motion-hero: 1200ms;
  --motion-ease: cubic-bezier(.16,1,.3,1);
}
.hero-word { display: inline-block; }
.hero-img-box { perspective: 1000px; }
.main-nav-link:not(.nav-cta) { position: relative; }
.main-nav-link:not(.nav-cta)::after {
  content: ''; position: absolute; bottom: -.6rem; left: 0; right: 0;
  height: 2px; background: #ae4f0b; transform: scaleX(0); transform-origin: right;
  transition: transform 350ms var(--motion-ease);
}
.main-nav-link:hover::after, .main-nav-link:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.btn { position: relative; transition: background-color var(--motion-micro), box-shadow 350ms var(--motion-ease), translate var(--motion-micro); }
.btn:active { translate: 0 2px; }
.logo-mark { transition: rotate 500ms var(--motion-ease); }
a:hover .logo-mark, a:focus-visible .logo-mark { rotate: -9deg; }
.cta-form input, .cta-form select { transition: background-color 200ms, box-shadow 200ms; }
.cta-form input:focus, .cta-form select:focus { background: #fff; box-shadow: 0 4px 16px #45260a20; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { box-shadow: 0 8px 18px #45260a22; }
  .gallery-item img { transition: transform 900ms var(--motion-ease); }
  .gallery-item:hover img { transform: scale(1.08); }
}
@media (max-width: 59em) {
  .main-nav { transition: transform 600ms var(--motion-ease), opacity 400ms, visibility 600ms; }
  .main-nav-list li { translate: 24px 0; transition: translate 480ms var(--motion-ease); }
  .nav-open .main-nav-list li { translate: 0; }
  .nav-open .main-nav-list li:nth-child(2) { transition-delay: 40ms; }
  .nav-open .main-nav-list li:nth-child(3) { transition-delay: 80ms; }
  .nav-open .main-nav-list li:nth-child(4) { transition-delay: 120ms; }
  .nav-open .main-nav-list li:nth-child(5) { transition-delay: 160ms; }
}
/* Native timeline: zero JavaScript work on the scroll path. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-img { animation: hero-depth linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    @keyframes hero-depth { from { translate: 0 0; } to { translate: 0 60px; } }
    .step-img { animation: step-depth linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes step-depth { from { translate: 0 20px; } to { translate: 0 -20px; } }
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-word, .logo-mark, .main-nav-list li { transform: none; translate: none; rotate: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}