/*
 * base.css
 * Global resets, page-level layout fixes and shared keyframes.
 * Loaded first — everything here is generic, not tied to one component.
 */

@layer base {
  html, body {
    margin: 0;
    padding: 0;
  }

  body {
    overscroll-behavior: none;
  }

  main > :first-child {
    margin-top: 0 !important;
  }

  main > :last-child {
    margin-bottom: 0 !important;
  }
}

::-webkit-scrollbar {
  display: none;
}

/* Hero text reveal, used by the animate-[fade-in-up_...] utility classes in index.html */
@keyframes fade-in-up {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Scroll-reveal — elements tagged .reveal in index.html start hidden and
   slide/fade into place the first time they enter the viewport. The tiny
   inline script in index.html's <head> adds .js-reveal to <html> and runs
   an IntersectionObserver that toggles .is-visible.

   The hidden state is deliberately gated on BOTH `html.js-reveal` and
   prefers-reduced-motion: if the script never runs (JS disabled/errored) or
   the user asked for less motion, nothing is ever hidden and the page just
   renders normally. */
@media (prefers-reduced-motion: no-preference) {
  html.js-reveal .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  }

  html.js-reveal .reveal.is-visible {
    opacity: 1;
    transform: none;
  }

  /* Stagger helpers for grids/lists revealed as a group */
  html.js-reveal .reveal-delay-1 { transition-delay: 0.08s; }
  html.js-reveal .reveal-delay-2 { transition-delay: 0.16s; }
  html.js-reveal .reveal-delay-3 { transition-delay: 0.24s; }
  html.js-reveal .reveal-delay-4 { transition-delay: 0.32s; }
  html.js-reveal .reveal-delay-5 { transition-delay: 0.40s; }
}

/* Horizontal-scroll sections (e.g. the process timeline) with a hidden scrollbar */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}