/* Portfolio-wide readability layer.
   Keeps supporting text near the hero paragraph size without inflating headings. */
:root {
  --readable-body: 1rem;
  --readable-small: .95rem;
  --readable-meta: .875rem;
}

html {
  font-family: var(--font-body, "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

body {
  font-size: var(--readable-body);
  font-family: var(--font-body, "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body * {
  font-family: var(--font-body, "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif) !important;
}

button,
input,
select,
textarea {
  font-family: var(--font-body, "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
}

:where(
  p, li, td, th, label, input, select, textarea, button,
  small, figcaption, summary,
  .section-sub, .card__body, .use-case-card__body, .research-list,
  .project-desc, .project-metric-label, .timeline-desc,
  .event-highlight, .writing-summary, .skill-domain-desc,
  .message, .msg, .chat-msg, .response, .doc-result,
  .note, .muted, .sub-nav__link, .breadcrumb__item,
  .btn, .chip, .badge, .pill, .tag, .label, .status,
  .tab, .kpi span, .metric small, .drawer-section p,
  .drawer-section li, .issue-desc, .brief p, .brief-item,
  .toolbar button, .toolbar select, .controls button, .controls select
) {
  font-size: max(var(--readable-small), 1em) !important;
  line-height: 1.62;
}

:where(
  .eyebrow, .kicker, .meta, .caption, .help-text,
  .project-btn span, .kpi .label, .metric span,
  .chip-label, .source-chip, .result-chip,
  .table th, table th, .df-table th, .hr-table th,
  .df-note, .df-step, .df-chip, .df-legend-item,
  .df-bar-label, .df-bar-value, .df-priority,
  .hr-muted, .hr-small, .hr-label, .hr-status,
  .filter-note, .active-filter-chip, .hr-kpi__label,
  .hr-kpi__hint, .viz-title, .bar-label, .bar-value,
  .risk-pill, .pii-box, .quality-item,
  .throughput-row, .throughput-legend,
  .metric-card__label, .result-chip,
  .nav-links a, .top a, .topnav a, .topnav button,
  .key, .score, .count, .avatar, .road-date,
  .sandbox-link, .sandbox-open, .rail-meta, .category-btn,
  .project-icon, .project-line, .stage-pill,
  .fraud-title, .fraud-help, .fraud-kpi span,
  .fraud-input, .fraud-select, .fraud-filter-list label,
  .fraud-pill, .fraud-table, .assistant-box,
  .docai-kpi span, .docai-card p, .docai-card li,
  .badge-pill, .review-item, .quick-grid button,
  .throughput-row, .throughput-legend
) {
  font-size: max(var(--readable-meta), 1em) !important;
  line-height: 1.5;
}

:where(.project-title, .issue-title, .panel h2, .panel h3, .evidence-card h3, .road-item h3, .drawer-section h3) {
  font-size: max(1rem, 1em) !important;
}

@media (max-width: 760px) {
  :root {
    --readable-body: 1.0625rem;
    --readable-small: 1rem;
    --readable-meta: .9375rem;
  }
}

/* Portfolio-wide motion layer.
   Lightweight transforms keep the interface feeling modern without heavy effects. */
:root {
  --motion-fast: 160ms cubic-bezier(.2, .8, .2, 1);
  --motion-med: 360ms cubic-bezier(.16, 1, .3, 1);
  --motion-slow: 640ms cubic-bezier(.16, 1, .3, 1);
}

html {
  scroll-behavior: smooth;
}

:where(a, button, input, select, textarea, summary, .btn, .chip, .tab, .project-btn, .sub-nav__link) {
  transition:
    transform var(--motion-fast),
    box-shadow var(--motion-fast),
    border-color var(--motion-fast),
    background-color var(--motion-fast),
    color var(--motion-fast),
    opacity var(--motion-fast);
}

:where(button, .btn, .chip, .tab, .project-btn, .sub-nav__link):hover {
  transform: translateY(-1px);
}

:where(button, .btn, .chip, .tab, .project-btn, .sub-nav__link):active {
  transform: translateY(0) scale(.985);
}

:where(
  .project-card, .event-card, .writing-card, .skill-domain, .lab-card,
  .dash-card, .contact-form, .resume-card, .cert-item, .metric-card,
  .panel, .card, .hr-card, .hr-chart, .df-card, .kpi, .metric,
  .evidence-card, .issue, .road-item, .drawer-section
) {
  transition:
    transform var(--motion-med),
    box-shadow var(--motion-med),
    border-color var(--motion-med),
    background-color var(--motion-med),
    opacity var(--motion-med);
  will-change: transform;
}

:where(
  .project-card, .event-card, .writing-card, .skill-domain, .lab-card,
  .dash-card, .contact-form, .resume-card, .cert-item, .metric-card,
  .panel, .card, .hr-card, .hr-chart, .df-card, .kpi, .metric,
  .evidence-card, .issue, .road-item
):hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 45px rgba(15, 23, 42, .10);
}

:where(.project-card img, .event-card img, .writing-card img, .card img, .metric-card img) {
  transition: transform var(--motion-slow), filter var(--motion-med);
}

:where(.project-card, .event-card, .writing-card, .card):hover img {
  transform: scale(1.035);
}

:where(.reveal) {
  transition:
    opacity var(--motion-slow),
    transform var(--motion-slow),
    filter var(--motion-slow) !important;
  filter: blur(8px);
}

:where(.reveal.visible) {
  filter: blur(0);
}

:where(.nav, header, .top, .topnav, .war-room-topbar) {
  transition:
    background-color var(--motion-med),
    border-color var(--motion-med),
    box-shadow var(--motion-med),
    backdrop-filter var(--motion-med);
}

:where(.live-dot, .ai-badge-dot, .hv-new-dot, .hv-eyebrow-dot) {
  animation-duration: 1.8s !important;
  animation-timing-function: ease-in-out !important;
}

@media (min-width: 761px) {
  :where(.section, main, .wrap, .container) {
    content-visibility: auto;
    contain-intrinsic-size: 900px;
  }
}

@media (max-width: 760px) {
  :root {
    --motion-fast: 120ms cubic-bezier(.2, .8, .2, 1);
    --motion-med: 240ms cubic-bezier(.16, 1, .3, 1);
    --motion-slow: 420ms cubic-bezier(.16, 1, .3, 1);
  }
  :where(
    .project-card, .event-card, .writing-card, .skill-domain, .lab-card,
    .dash-card, .contact-form, .resume-card, .cert-item, .metric-card,
    .panel, .card, .hr-card, .hr-chart, .df-card, .kpi, .metric,
    .evidence-card, .issue, .road-item
  ):hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
  :where(.reveal) {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* Universal sandbox navigation.
   Uses a unique class so project pages that hide .nav/.breadcrumb still keep an escape path. */
.sandbox-return-bar {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  pointer-events: none;
}
.sandbox-return-bar__inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid rgba(148, 163, 184, .32);
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 18px 48px rgba(15, 23, 42, .18);
  backdrop-filter: blur(18px);
}
.sandbox-return-bar a,
.sandbox-return-bar button {
  min-height: 38px;
  border: 1px solid rgba(148, 163, 184, .32);
  border-radius: 999px;
  background: #fff;
  color: #0f172a;
  padding: 8px 13px;
  font: 400 var(--readable-meta)/1.1 var(--font-body, Inter, system-ui, sans-serif);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.sandbox-return-bar button {
  background: #0f172a;
  border-color: #0f172a;
  color: #fff;
}
.sandbox-return-bar a,
.sandbox-return-bar button {
  font-weight: 400 !important;
}
.sandbox-return-bar a:hover,
.sandbox-return-bar button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .12);
}
@media (max-width: 640px) {
  .sandbox-return-bar {
    left: 10px;
    right: 10px;
    bottom: 10px;
  }
  .sandbox-return-bar__inner {
    width: 100%;
    justify-content: space-between;
    border-radius: 16px;
  }
  .sandbox-return-bar a,
  .sandbox-return-bar button {
    flex: 1;
    padding: 9px 10px;
    text-align: center;
  }
}