/* ============================================================
   MMC — Mubarak Masoud Zabid Contracting Co.
   style.css — Core tokens, base typography, shared animations, reveal-on-scroll
   Loaded on every page. Page-specific styles live in home.css / quote.css.
   ============================================================ */

:root{
  --navy-900:#0a1428; --navy-800:#0f1d3a; --navy-700:#142a52; --navy-600:#1e3a6f;
  --blue:#2440a8; --blue-bright:#3a5fd9;
  --steel-100:#f4f6fa; --steel-200:#e6eaf2; --steel-300:#c8cfdd; --steel-500:#7f8aa3; --steel-700:#3a4663;
  --accent:#ff5b1f; --accent-glow:rgba(255,91,31,0.3);
  --line:rgba(255,255,255,0.08); --line-soft:rgba(255,255,255,0.05); --line-dark:rgba(10,20,40,0.08);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter Tight',sans-serif;background:var(--steel-100);color:var(--navy-900);
  line-height:1.5;overflow-x:hidden;-webkit-font-smoothing:antialiased}
.display{font-family:'Archivo Black',sans-serif;letter-spacing:-0.02em;line-height:0.92}
.mono{font-family:'JetBrains Mono',monospace;letter-spacing:0.02em}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--accent);color:#fff}

/* Shared keyframes */
@keyframes fadeUp{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.6;transform:scale(0.95)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.3}}
@keyframes shine{0%,100%{transform:translateX(-100%)}50%{transform:translateX(100%)}}
@keyframes spinSlow{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes waPulse{0%{transform:scale(1);opacity:0.6}100%{transform:scale(1.6);opacity:0}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes scroll{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes scrollDown{0%{transform:translateY(-12px);opacity:0}50%{opacity:1}100%{transform:translateY(40px);opacity:0}}
@keyframes slowZoom{from{transform:scale(1)}to{transform:scale(1.08)}}

/* Reveal-on-scroll: elements start hidden; .in is added by main.js when in viewport */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .8s cubic-bezier(.4,0,.2,1),transform .8s cubic-bezier(.4,0,.2,1)}
.reveal.in{opacity:1;transform:translateY(0)}