/* ============================================================
   css/base.css
   Mercenary Beauty — Reset & Global Defaults

   WHY THIS FILE EXISTS:
   Every browser has its own built-in styles (margins, padding,
   font sizes, etc.). This file resets those to a consistent
   baseline so the site looks the same in Chrome, Safari,
   Firefox, and Edge.

   It also sets global defaults that apply to the whole page —
   things that aren't specific to any one component or section.

   LOAD ORDER: This file must load AFTER tokens.css so it can
   reference the CSS variables defined there.
   ============================================================ */


/* ------------------------------------------------------------
   UNIVERSAL RESET
   box-sizing: border-box means padding and borders are
   included INSIDE an element's declared width/height.
   Without this, a 300px wide div with 20px padding would
   actually be 340px wide — very confusing.
   ------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* ------------------------------------------------------------
   GLOBAL HTML & BODY
   ------------------------------------------------------------ */

html {
  scroll-behavior: smooth; /* Animates anchor link (#section) jumps */
  overflow-x: clip;        /* clip trims horizontal overflow WITHOUT creating a scroll
                              container — overflow:hidden would break position:sticky */
}

body {
  background: var(--color-cream);
  color: var(--color-dark);
  font-family: var(--font-body);
  overflow-x: clip;        /* Same reason — clip instead of hidden */
  -webkit-font-smoothing: antialiased; /* Crisper text on Mac/iOS */
}


/* ------------------------------------------------------------
   KEYFRAME ANIMATIONS
   @keyframes define reusable motion sequences. Components
   trigger them by setting animation: fadeUp 0.7s ease;

   WHY THEY LIVE HERE: animations are global utilities, not
   tied to any specific component.
   ------------------------------------------------------------ */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
  /* NOTE: -50% works because the marquee track contains the
     items duplicated twice. When it scrolls exactly halfway,
     it resets seamlessly — creating an infinite loop effect. */
}

@keyframes carousel-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
  /* Same duplicate technique as marquee above */
}