html {
  scroll-behavior: smooth;
}

body {
  animation: halal-page-enter 320ms cubic-bezier(.2,.8,.2,1) both;
}

a,
button,
[role="button"] {
  cursor: pointer !important;
}

a,
button,
[role="button"] {
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease, opacity 160ms ease !important;
}

a:hover,
button:hover,
[role="button"]:hover {
  filter: brightness(1.06);
}

a:active,
button:active,
[role="button"]:active {
  transform: translateY(1px) scale(.985);
}

.halal-reveal-target {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 480ms cubic-bezier(.2,.8,.2,1), transform 480ms cubic-bezier(.2,.8,.2,1) !important;
}

.halal-reveal-target.halal-reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

section[id] {
  scroll-margin-top: 84px;
}

/* The archived JPEG artwork has black baked into the illustrated panels.
   Screen blending preserves the original pixels while letting the card
   background show through like the transparent originals. */
img[src*="image_url__2fstep2"],
img[src*="image_url__2fstep3"],
img[src*="image_url__2fstep4"] {
  mix-blend-mode: screen;
}

div:has(> img[src*="image_url__2fstep2"]),
div:has(> img[src*="image_url__2fstep4"]) {
  background-color: #141414;
}

/* The captured desktop layout uses fixed-height storytelling sections.
   Below its four-column breakpoint those cards wrap, so let the sections
   grow with their content instead of painting over the following section. */
@media (max-width: 1279px) {
  #how-it-works,
  #features,
  #faq {
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  #how-it-works > div,
  #features > div,
  #faq > div {
    height: auto !important;
    min-height: 0 !important;
  }

  #how-it-works > div,
  #features > div {
    padding-bottom: 4rem !important;
  }
}

@keyframes halal-page-enter {
  from { opacity: .76; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body { animation: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .halal-reveal-target { opacity: 1; transform: none; }
}