html {
    scroll-behavior: smooth;

    /* Reserves the scrollbar's own width permanently, so toggling
       `overflow: hidden` on body (e.g. while the menu overlay is open)
       never changes the viewport's rendered width — without this, fixed-
       position elements flush to the right edge (like the overlay's
       Close button) jump sideways by the scrollbar's width whenever it
       appears/disappears. */
    scrollbar-gutter: stable;
}

/*
 * scroll-behavior:smooth is meant for JS/keyboard-triggered anchor jumps —
 * on touch devices it instead fights with native momentum scrolling,
 * producing a brief stutter/reversal the instant you change scroll
 * direction (reported as "scrolls slightly the wrong way, then back").
 * Switching it off for coarse-pointer/no-hover (i.e. touch) devices fixes
 * that without affecting desktop's anchor-jump behavior at all — the
 * in-page smooth-scrolling this site actually relies on (.hero-scroll-down
 * in assets/js/main.js) already drives its own animation manually and
 * explicitly turns this off while it runs, so it's unaffected either way.
 */
@media (hover: none) and (pointer: coarse) {
    html {
        scroll-behavior: auto;
    }
}

body {
    background: #FFFFFF;
}

@keyframes fade-in-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
 * Repeatable fade-up entrance (assets/js/main.js's `.reveal-repeat`
 * IntersectionObserver toggles .is-visible on every intersection change,
 * not just once) — for content that can scroll back into view from either
 * direction (e.g. inside the pinned hero/testing-block/risks-section
 * scroll-mask animation) and should replay its entrance each time.
 */
.reveal-repeat {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    transition-delay: var(--delay, 0s);
}

.reveal-repeat.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .reveal-repeat {
        transition: none;
    }
}

/* Reusable single-color icon: recolors a white-stroke SVG via mask so it can
   take any `color` from context (mask-image works off the rendered pixels,
   including strokes, not just filled shapes). */
.icon-arrow {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-color: currentColor;
    -webkit-mask-image: url('../assets/images/arrow_long_right.svg');
    mask-image: url('../assets/images/arrow_long_right.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    transition: transform 0.3s ease;
}