/* ==========================================================================
   everbits.css — shared across every page of www.everbits.com
   v1 · 2026-08

   Loaded LAST in <head>, after each page's own <style> block, so the rules
   here win ties against page-level CSS. That is deliberate: it lets this file
   act as the site-wide polish layer without needing !important.

   Contents
     1. Self-hosted webfonts (no request to Google — see privacy policy §13)
     2. Typography: balanced headings, no widows
     3. Cross-page view transitions
     4. Scroll reveal for sections
     5. Header elevation on scroll
     6. Touch feedback and focus rings
     7. Reduced-motion and performance

   Everything below §1 is progressive enhancement: a browser that does not
   support a feature renders the site exactly as it did before.
   ========================================================================== */


/* -- 1. Webfonts ---------------------------------------------------------- */
/* Subset to Latin + the few symbols the UI uses. SIL OFL 1.1.               */

@font-face { font-family:'Source Sans 3';  font-style:normal; font-weight:300; font-display:swap; src:url('/fonts/SourceSans3-Light.woff2')     format('woff2'); }
@font-face { font-family:'Source Sans 3';  font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/SourceSans3-Regular.woff2')   format('woff2'); }
@font-face { font-family:'Source Sans 3';  font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/SourceSans3-Semibold.woff2')  format('woff2'); }
@font-face { font-family:'Source Sans 3';  font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/SourceSans3-Bold.woff2')      format('woff2'); }
@font-face { font-family:'Source Code Pro'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/SourceCodePro-Regular.woff2')  format('woff2'); }
@font-face { font-family:'Source Code Pro'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/SourceCodePro-Medium.woff2')   format('woff2'); }
@font-face { font-family:'Source Code Pro'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/SourceCodePro-Semibold.woff2') format('woff2'); }
@font-face { font-family:'Source Code Pro'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/SourceCodePro-Bold.woff2')     format('woff2'); }


/* ==========================================================================
   §1b. Shared components — extracted from the pages 2026-08 ("components v1")
   One source of truth for the chrome every page shares: reset, base
   typography, header/nav/mobile menu, buttons, footer links, hero keyframes.
   Page-local styles may still ADD properties (e.g. article p margins);
   identical properties resolve identically, so extraction is visually
   neutral except where noted in the changelog.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; }
body { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; color: var(--mw-dark); background: var(--mw-white); }

h2 { font-size: clamp(22px,3vw,32px); font-weight: 700; color: var(--mw-navy); line-height: 1.2; margin-bottom: 16px; letter-spacing: -0.3px; }
h3 { font-size: 18px; font-weight: 700; color: var(--mw-navy); margin-bottom: 8px; }
p  { color: #374151; line-height: 1.7; }
.container { max-width: var(--max-w); margin: 0 auto; padding: var(--section-pad); }
.section-tag { display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: var(--mw-blue); background: var(--mw-blue-lt); padding: 3px 12px; border-radius: 2px; margin-bottom: 16px; }

/* Header & navigation (markup: eb-header v1) */
header { background: #1a1a1a; padding: 0 32px; display: flex; align-items: center; justify-content: space-between; height: 60px; position: fixed; top: 0; left: 0; right: 0; z-index: 100; border-bottom: 1px solid rgba(255,255,255,0.08); }
.eb-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.eb-logo img { height: 32px; width: auto; }
.eb-nav { display: flex; align-items: center; gap: 4px; }
.eb-nav a { color: rgba(255,255,255,0.75); font-size: 14px; font-weight: 400; padding: 8px 14px; text-decoration: none; border-radius: 3px; transition: color 0.15s, background 0.15s; white-space: nowrap; }
.eb-nav a:hover { color: #fff; background: rgba(255,255,255,0.08); }
.eb-nav a.active { color: #fff; }
.eb-nav a.eb-cta { background: var(--mw-red); color: #fff; font-weight: 600; margin-left: 8px; padding: 8px 18px; }
.eb-nav a.eb-cta:hover { background: #c41e16; }
.eb-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; background: none; border: none; }
.eb-hamburger span { display: block; width: 22px; height: 2px; background: rgba(255,255,255,0.8); border-radius: 2px; transition: all 0.2s; }
.eb-mobile-menu { display: none; position: absolute; top: 60px; left: 0; right: 0; background: #1a1a1a; border-top: 1px solid rgba(255,255,255,0.1); padding: 12px 0; z-index: 200; }
.eb-mobile-menu a { display: block; padding: 12px 24px; color: rgba(255,255,255,0.75); font-size: 15px; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.06); }
.eb-mobile-menu a:last-child { border-bottom: none; }
.eb-mobile-menu a:hover { background: rgba(255,255,255,0.06); color: #fff; }
.eb-mobile-menu.open { display: block; }

/* Buttons */
.btn-primary { display: inline-block; background: var(--mw-red); color: #fff; font-size: 15px; font-weight: 700; padding: 14px 32px; border-radius: 3px; text-decoration: none; transition: background 0.15s, transform 0.1s; }
.btn-primary:hover { background: #c41e16; transform: translateY(-1px); }
.btn-secondary { display: inline-block; background: transparent; color: #fff; font-size: 15px; font-weight: 700; padding: 14px 30px; border-radius: 3px; text-decoration: none; border: 1px solid rgba(255,255,255,0.4); transition: background 0.15s, border-color 0.15s; margin-left: 12px; }
.btn-secondary:hover { background: rgba(255,255,255,0.1); border-color: #fff; }

/* Footer links */
.footer-link { color: rgba(255,255,255,0.55); font-size: 13px; text-decoration: none; padding: 4px 10px; border-radius: 3px; display: inline-flex; align-items: center; gap: 5px; transition: color 0.15s; }
.footer-link:hover { color: #fff; }

/* Hero gradient animation */
@keyframes heroShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Responsive header chrome */
@media (max-width: 768px) {
  :root { --section-pad: 52px 20px; }
  .eb-nav { display: none; }
  .eb-hamburger { display: flex; }
}
@media (max-width: 480px) {
  :root { --section-pad: 40px 16px; }
  header { padding: 0 16px; height: 52px; }
  .eb-logo img { height: 26px; }
  .eb-mobile-menu { top: 52px; }
  .section-tag { font-size: 10px; letter-spacing: 1px; }
}


/* -- 2. Typography -------------------------------------------------------- */
/* Headings stop breaking with one orphaned word; paragraphs stop leaving a
   single word on the last line. Most visible on narrow screens.            */

h1, h2, h3, .hero-sub { text-wrap: balance; }
p, li            { text-wrap: pretty; }


/* -- 3. Cross-page view transitions --------------------------------------- */
/* Navigating between pages cross-fades instead of hard-cutting. The header
   is identical everywhere, so it is named and stays visually anchored.      */

@view-transition { navigation: auto; }

header { view-transition-name: eb-header; }
::view-transition-old(root) { animation-duration: 160ms; }
::view-transition-new(root) { animation-duration: 220ms; }


/* -- 4. Scroll reveal ----------------------------------------------------- */
/* Sections rise and fade in as they enter the viewport. CSS-only, via
   scroll-driven animations — no JavaScript, so nothing can leave content
   stranded at opacity 0 if a script fails. The default state is visible;
   the animation only exists inside the @supports block.                     */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    section:not(#hero) > .container,
    section:not(#hero) > div {
      animation: eb-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 32%;
    }
  }
}

@keyframes eb-reveal {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}


/* -- 5. Header elevation -------------------------------------------------- */
/* The fixed header gains a shadow once the page scrolls, so it reads as a
   deliberate layer rather than something merely stuck to the top.           */

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    header {
      animation: eb-header-elevate linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100px;
    }
  }
}

@keyframes eb-header-elevate {
  from { box-shadow: 0 0 0 rgba(0,0,0,0); }
  to   { box-shadow: 0 6px 24px rgba(0,0,0,0.38); }
}


/* -- 6. Touch feedback and focus rings ------------------------------------ */
/* Mobile had no press state at all, which reads as unresponsive.            */

a, button { -webkit-tap-highlight-color: transparent; }

.btn-primary, .btn-secondary, .btn-card, .cc-btn, .eb-nav a.eb-cta {
  transition: background 0.15s, border-color 0.15s, transform 0.08s ease-out;
}
.btn-primary:active, .btn-secondary:active, .btn-card:active,
.cc-btn:active, .eb-nav a.eb-cta:active { transform: scale(0.97); }

.product-card, .story-card, .download-card, .imp-card,
.video-card, .chapter-card, .price-card, .team-card {
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
}
.product-card:active, .story-card:active, .download-card:active, .imp-card:active,
.video-card:active, .chapter-card:active, .price-card:active, .team-card:active {
  transform: scale(0.99);
}

/* Keyboard users get a visible ring; mouse users do not. */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--mw-blue, #0076a8);
  outline-offset: 3px;
  border-radius: 2px;
}
header a:focus-visible,
.eb-mobile-menu a:focus-visible,
.eb-hamburger:focus-visible { outline-color: #7ec8e3; }


/* -- 7. Reduced motion and performance ------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  #hero { animation: none; }
  .btn-primary:active, .btn-secondary:active, .btn-card:active, .cc-btn:active,
  .eb-nav a.eb-cta:active, .product-card:active, .story-card:active,
  .download-card:active, .imp-card:active, .video-card:active,
  .chapter-card:active, .price-card:active, .team-card:active { transform: none; }
  * { transition-duration: 0.01ms !important; }
}

