:root {
  --motion-ocre: #bb7e45;
  --motion-creme: #fff8f2;
  --motion-ink: #49372d;
  --motion-ease-soft: cubic-bezier(.22, 1, .36, 1);
  --motion-ease-responsive: cubic-bezier(.16, 1, .3, 1);
}

.motion-progress {
  width: 100%;
  height: 3px;
  position: fixed;
  inset: 0 0 auto;
  z-index: 80;
  pointer-events: none;
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left center;
  background: var(--motion-ocre);
  box-shadow: 0 1px 8px rgb(187 126 69 / 22%);
}

.site-header {
  transition: min-height .45s var(--motion-ease-soft),
    background-color .35s ease, box-shadow .35s ease;
}

.site-header.is-scrolled {
  background: rgb(255 253 251 / 97%);
  box-shadow: 0 12px 32px rgb(73 55 45 / 8%);
}

.hero-symbol > img,
.story-symbol > img,
.hero-pattern {
  translate: 0 var(--motion-parallax-y, 0);
}

.button,
.whatsapp-float,
.access-menu summary {
  isolation: isolate;
  overflow: hidden;
  will-change: transform;
}

.button::after,
.whatsapp-float::after,
.access-menu summary::after {
  content: "";
  width: 12px;
  height: 12px;
  position: absolute;
  left: var(--motion-click-x, 50%);
  top: var(--motion-click-y, 50%);
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
  background: rgb(255 255 255 / 42%);
}

.button.motion-clicked::after,
.whatsapp-float.motion-clicked::after,
.access-menu summary.motion-clicked::after {
  animation: motion-click-wave .58s var(--motion-ease-soft);
}

.button.is-pressing,
.whatsapp-float.is-pressing,
.access-menu summary.is-pressing {
  transform: translateY(1px) scale(.975) !important;
}

.access-menu-panel {
  transform-origin: top right;
}

.faq details[open] summary {
  color: var(--ochre-dark);
}

.faq summary::after {
  transition: transform .36s var(--motion-ease-responsive), color .25s ease;
}

.faq details[open] summary::after {
  transform: rotate(180deg);
}

[data-motion-active="true"] {
  backface-visibility: hidden;
  will-change: transform, opacity;
}

@keyframes motion-click-wave {
  0% { opacity: .62; transform: translate(-50%, -50%) scale(0); }
  65% { opacity: .16; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(28); }
}

@media (prefers-reduced-motion: reduce) {
  .motion-progress { display: none; }
  .site-header,
  .faq summary::after { transition: none !important; }
  .hero-symbol > img,
  .story-symbol > img,
  .hero-pattern { translate: none !important; }
  .button::after,
  .whatsapp-float::after,
  .access-menu summary::after { animation: none !important; }
}