/* =============================================================
   DATABASIN — SHARED COMPONENT LIBRARY
   Layer 2: loaded after marketing-shell.css, before page sidecar.

   Load order: marketing-shell.css → components.css → page-*.css

   Add to this file when a pattern appears in 3+ page sidecars.
   Sidecars override via class selectors — never ID or !important.
   ============================================================= */

/* ANIMATIONS */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* SCROLL REVEAL UTILITY
   JS sets .visible on elements when they enter the viewport.
   Use .d1–.d4 for staggered delays. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.65s ease,
    transform 0.65s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }
.reveal.d4 { transition-delay: 0.32s; }

/* BUTTONS — standard Databasin CTA buttons.
   Pages with extended variants (aamc, tldr: inline-flex icons; homepage/vs: inline-block)
   keep their own definitions and will override these. */
.btn-primary {
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  background: var(--teal);
  text-decoration: none;
  padding: 14px 32px;
  border-radius: 100px;
  transition: background 0.18s, transform 0.12s;
}
.btn-primary:hover {
  background: var(--teal-mid);
  transform: translateY(-2px);
}
.btn-primary:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}
.btn-secondary {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  padding: 14px 32px;
  border-radius: 100px;
  border: 1.5px solid var(--light);
  transition: border-color 0.18s, transform 0.12s;
}
.btn-secondary:hover {
  border-color: #aaa;
  transform: translateY(-2px);
}
.btn-secondary:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

/* DARK PORTAL — full-page dark theme used by technology/, tech/epic, tech/opex, tech/workday.
   Opt in via bodyClass: dark-portal in page frontmatter.
   Defines dark CSS tokens, then overrides shell nav/footer colors.
   Page sidecars only need to override their own unique components. */

.dark-portal {
  --dark-bg: #0d0d0d;
  --dark-border: rgba(255, 255, 255, 0.07);
  --dark-surface: #141414;
  background: var(--dark-bg);
  color: rgba(255, 255, 255, 0.87);
}

/* Dark nav */
.dark-portal nav {
  background: rgba(13, 13, 13, 0.96);
  border-bottom-color: var(--dark-border);
}
.dark-portal .nav-logo-light,
.dark-portal .footer-logo-light { display: none; }
.dark-portal .nav-logo-dark,
.dark-portal .footer-logo-dark { display: block; }
.dark-portal .nav-links a { color: rgba(255, 255, 255, 0.45); }
.dark-portal .nav-links a:hover { color: rgba(255, 255, 255, 0.75); }
.dark-portal .nav-links a.active { color: rgba(255, 255, 255, 0.85); font-weight: 600; }
.dark-portal .btn-nav-signin { color: rgba(255, 255, 255, 0.45); }
.dark-portal .btn-nav-signin:hover { color: rgba(255, 255, 255, 0.75); }
.dark-portal .btn-nav-outline { color: var(--teal); border-color: var(--teal); }
.dark-portal .btn-coming-soon {
  color: rgba(255, 255, 255, 0.4);
  border-color: rgba(255, 255, 255, 0.12);
  opacity: 1;
}

/* Dark hamburger / mobile drawer */
.dark-portal .nav-hamburger span { background: rgba(255, 255, 255, 0.6); }
.dark-portal .nav-drawer { background: #0d0d0d; border-bottom-color: var(--dark-border); }
.dark-portal .drawer-link { color: rgba(255, 255, 255, 0.45); }
.dark-portal .drawer-link:hover { color: rgba(255, 255, 255, 0.8); background: rgba(255, 255, 255, 0.04); }
.dark-portal .drawer-divider { background: var(--dark-border); }
.dark-portal .drawer-coming-soon { color: rgba(255, 255, 255, 0.35); border-color: rgba(255, 255, 255, 0.1); }

/* Dark footer */
.dark-portal footer { background: var(--dark-bg); border-top-color: var(--dark-border); }
.dark-portal .footer-links a { color: rgba(255, 255, 255, 0.3); }
.dark-portal .footer-links a:hover { color: rgba(255, 255, 255, 0.7); }
.dark-portal .footer-copy { color: rgba(255, 255, 255, 0.15); }

/* Dark breadcrumb */
.dark-portal .breadcrumb { color: rgba(255, 255, 255, 0.3); }
.dark-portal .breadcrumb a { color: var(--teal); }
.dark-portal .breadcrumb-sep { color: rgba(255, 255, 255, 0.15); }

/* BREADCRUMB — shared typography across 14+ pages. Layout (width, margin,
   padding) stays in page sidecars; pages with full-bleed or bespoke layouts
   would otherwise be broken by global wrapper constraints. */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--mid);
}
.breadcrumb a {
  color: var(--teal);
  text-decoration: none;
  transition: color 0.18s;
}
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb a:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 2px;
}
.breadcrumb-sep { color: var(--light); }
.breadcrumb span:last-child { color: var(--ink); }

/* HERO — shared typography/animation across 25+ pages. Layout properties
   (padding, max-width, margin, background) stay in page sidecars: pages
   range from constrained two-column heroes to full-bleed dark heroes,
   and a global wrapper rule breaks the full-bleed variants. */
.hero-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  background: var(--teal-light);
  padding: 6px 14px;
  border-radius: 100px;
  margin-bottom: 32px;
  opacity: 0;
  animation: fadeUp 0.7s ease 0.1s forwards;
}
.hero-label::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--teal);
  border-radius: 50%;
}
.hero-h1 {
  font-size: clamp(40px, 5vw, 68px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--black);
  margin-bottom: 32px;
  opacity: 0;
  animation: fadeUp 0.8s ease 0.2s forwards;
}
.hero-h1 em { font-style: normal; color: var(--teal); }
.hero-sub {
  font-size: 17px;
  line-height: 1.75;
  color: var(--mid);
  margin-bottom: 56px;
  opacity: 0;
  animation: fadeUp 0.8s ease 0.35s forwards;
}
.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 0.8s ease 0.5s forwards;
}

/* CTA BAND — shared typography across 16+ pages. Layout properties (padding,
   max-width, margin, text-align) stay in page sidecars for the same reason
   as .hero: width/centering is page-level layout, not a global default. */
.cta-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 24px;
}
.cta-h2 {
  font-size: clamp(36px, 4.5vw, 56px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 24px;
}
.cta-h2 em { font-style: normal; color: var(--teal); }
.cta-sub {
  font-size: 17px;
  line-height: 1.7;
  color: var(--mid);
  margin: 0 auto 40px;
}
.cta-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* REDUCED MOTION — universal baseline; pages may add page-specific selectors */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}