/* ==========================================================================
   Jheel — global stylesheet
   Loaded on every page via <link href="css/style.css"> (relative to the including page).
   Tailwind itself is loaded + configured inline in includes/head.html
   (Tailwind v4's browser build only reads utility classes from the DOM
   and from <style type="text/tailwindcss"> blocks, not from linked .css
   files — so this file stays plain CSS: fonts, keyframes, and the small
   handful of things utilities don't cover).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts
   Myriad Pro (body text) is self-hosted. Drop the licensed files in /fonts
   using these exact names, or edit the src paths to match your delivery.
   Required weights: 400 (+ 400 italic), 700.
   Iosevka Charon (display font) is loaded from Google Fonts directly in
   each page's <head>, not self-hosted here, since it's an open-license
   Google Fonts family rather than a licensed delivery like Myriad Pro.
   Until Myriad Pro's files are present, the fallback stack in the
   Tailwind @theme block keeps the site fully legible.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Myriad Pro";
  src: url("../fonts/MyriadPro-Regular.woff2") format("woff2"),
       url("../fonts/MyriadPro-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Myriad Pro";
  src: url("../fonts/MyriadPro-It.woff2") format("woff2"),
       url("../fonts/MyriadPro-It.woff") format("woff");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
/*@font-face {
  font-family: "Myriad Pro";
  src: url("../fonts/MyriadPro-Semibold.woff2") format("woff2"),
       url("../fonts/MyriadPro-Semibold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}*/
@font-face {
  font-family: "Myriad Pro";
  src: url("../fonts/MyriadPro-Bold.woff2") format("woff2"),
       url("../fonts/MyriadPro-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Base tuning Tailwind doesn't give you a utility for
   -------------------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  color-scheme: light;
}
html.dark {
  color-scheme: dark;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Tabular numerals for anything that looks like a ledger figure —
   NAV, currency, percentages — without switching the family to monospace. */
.tnum {
  font-variant-numeric: tabular-nums;
}

::selection {
  background-color: #5B2EE0;
  color: #ffffff;
}

/* Slim, quiet scrollbar (webkit) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(100, 116, 139, 0.35);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(100, 116, 139, 0.55);
}

/* --------------------------------------------------------------------------
   The one orchestrated load-in moment, used only on hero sections.
   Elements opt in with data-reveal + a data-reveal-delay (ms).
   -------------------------------------------------------------------------- */
@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
[data-reveal] {
  animation: reveal-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: var(--reveal-delay, 0ms);
}
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    animation: none;
  }
}

/* Ledger-style dashed row divider, evokes a perforated statement line */
.ledger-rule {
  border-bottom: 1px dashed;
}