/* ============================================================
   Self-hosted webfonts — Unbounded (headings/UI) + Lato (body).

   WHY THIS FILE EXISTS
   These @font-face rules used to live inside selfhost/css/main.css,
   a compiled Tailwind artifact, and pointed at selfhost/fonts/ —
   a folder that does not exist, so every request 404'd. They were
   removed from main.css and rewritten here, where they are readable
   and editable without touching a build output.

   Google Fonts is NOT a substitute: fonts.gstatic.com is blocked by
   default in Brave and by common privacy blockers, so the CSS parses
   but the font files never arrive and visitors get the fallback.
   Same-origin files cannot be blocked that way.

   TO ACTIVATE — drop these files into  wp-content/themes/voctos/selfhost/fonts/
     Unbounded-ExtraLight  Unbounded-Light      Unbounded-Regular
     Unbounded-Medium      Unbounded-SemiBold   Unbounded-Bold
     Unbounded-ExtraBold   Unbounded-Black
     Lato-Thin   Lato-Light   Lato-Regular   Lato-Bold   Lato-Black
     Lato-ThinItalic   Lato-LightItalic   Lato-BoldItalic   Lato-BlackItalic
   .woff2 is preferred (roughly a third the size of .ttf); .ttf is listed
   second so whichever format is present will work.

   TWO BUGS FROM THE ORIGINAL RULES ARE FIXED HERE
   1. No font-display. Without it the browser hides text while a font
      loads (FOIT). Every face below declares font-display: swap.
   2. The four Lato italics had no font-style: italic, so they competed
      with the upright faces at the same weight — and BlackItalic was
      declared at 700 while BoldItalic was at 900, which is backwards.
   ============================================================ */

/* ---------- Unbounded ---------- */
@font-face {
  font-family: Unbounded;
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url(../../selfhost/fonts/Unbounded-ExtraLight.woff2) format('woff2');
}
@font-face {
  font-family: Unbounded;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../../selfhost/fonts/Unbounded-Light.woff2) format('woff2');
}
@font-face {
  font-family: Unbounded;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../../selfhost/fonts/Unbounded-Regular.woff2) format('woff2');
}
@font-face {
  font-family: Unbounded;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../../selfhost/fonts/Unbounded-Medium.woff2) format('woff2');
}
@font-face {
  font-family: Unbounded;
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../../selfhost/fonts/Unbounded-SemiBold.woff2) format('woff2');
}
@font-face {
  font-family: Unbounded;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../../selfhost/fonts/Unbounded-Bold.woff2) format('woff2');
}
@font-face {
  font-family: Unbounded;
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../../selfhost/fonts/Unbounded-ExtraBold.woff2) format('woff2');
}
@font-face {
  font-family: Unbounded;
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../../selfhost/fonts/Unbounded-Black.woff2) format('woff2');
}

/* ---------- Lato ---------- */
@font-face {
  font-family: Lato;
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url(../../selfhost/fonts/Lato-Thin.woff2) format('woff2');
}
@font-face {
  font-family: Lato;
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../../selfhost/fonts/Lato-Light.woff2) format('woff2');
}
@font-face {
  font-family: Lato;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../../selfhost/fonts/Lato-Regular.woff2) format('woff2');
}
@font-face {
  font-family: Lato;
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../../selfhost/fonts/Lato-Bold.woff2) format('woff2');
}
@font-face {
  font-family: Lato;
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url(../../selfhost/fonts/Lato-Black.woff2) format('woff2');
}
@font-face {
  font-family: Lato;
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url(../../selfhost/fonts/Lato-ThinItalic.woff2) format('woff2');
}
@font-face {
  font-family: Lato;
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url(../../selfhost/fonts/Lato-LightItalic.woff2) format('woff2');
}
@font-face {
  font-family: Lato;
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url(../../selfhost/fonts/Lato-BoldItalic.woff2) format('woff2');
}
@font-face {
  font-family: Lato;
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url(../../selfhost/fonts/Lato-BlackItalic.woff2) format('woff2');
}


/* ---------- Image path fix ----------
   The compiled Tailwind CSS (selfhost/css/main.css) has a background-image
   rule pointing at /images/xs-bg-video.png (site root), but the actual file
   lives in the theme's firmwork/assets/img/ folder. This override, loaded
   after main.css, corrects the path using the same selector/specificity. */
.before\:bg-\[url\(\'\/images\/xs-bg-video\.png\'\)\]:before {
  background-image: url('/wp-content/themes/voctos/firmwork/assets/img/xs-bg-video.png');
}


/* ================= shared market-page scroll reveal =================
   Loaded site-wide with this stylesheet, scoped to .voctos-market-* so it
   only affects market and service blocks. CSS only, no JavaScript, because
   WP Rocket delays JS and anything revealed by JS stays invisible to
   crawlers. Content is visible by default; the animation is additive.
   Added 2 Sep 2026. Backup of the previous file: fonts.css.bak-2026-09-02
   ==================================================================== */
@keyframes vx-rise-in{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes vx-fade-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    [class*="voctos-market-"] > div > *{
      animation:vx-rise-in both;
      animation-timeline:view();
      animation-range:entry 0% cover 20%;
    }
    [class*="voctos-market-"] .mkc-table tbody tr,
    [class*="voctos-market-"] .mkr-list li,
    [class*="voctos-market-"] .mke-tier li,
    [class*="voctos-market-"] .mkp-list li{
      animation:vx-fade-in both;
      animation-timeline:view();
      animation-range:entry 0% cover 14%;
    }
  }
}
[class*="voctos-market-"] .mke-tier,
[class*="voctos-market-"] .mki-card,
[class*="voctos-market-"] .mkp-card{
  transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s;
}
@media (hover:hover){
  [class*="voctos-market-"] .mke-tier:hover{
    transform:translateY(-4px);
    box-shadow:0 24px 50px rgba(13,23,45,.10);
  }
}