/* Foghorn interaction language
   One quiet system across every viewer page: red edge, controlled depth and
   diagonal movement. Page-specific art direction remains untouched. */

.viewer-page {
  --foghorn-fx-red: #e50917;
  --foghorn-fx-red-bright: #ff4652;
  --foghorn-fx-ease: cubic-bezier(.16, 1, .3, 1);
  --foghorn-fx-shadow-light: 0 26px 62px rgba(28, 18, 19, .11);
  --foghorn-fx-shadow-dark: 0 28px 68px rgba(0, 0, 0, .27);
}

.viewer-route-strip button {
  transition: color 240ms ease, background-color 240ms ease, box-shadow 360ms var(--foghorn-fx-ease);
}

.viewer-route-strip button:is(:hover, .is-active, :focus-visible) {
  box-shadow: inset 0 -2px var(--foghorn-fx-red);
}

.viewer-page :is(
  .viewer-route-board button,
  .viewer-service-card-surface,
  .viewer-feature-split button,
  .viewer-end-panel button,
  .viewer-web-cta,
  .viewer-web-fit-cta
) .ui-icon {
  transition: color 260ms ease, filter 360ms ease, transform 520ms var(--foghorn-fx-ease);
}

.viewer-stat-board article,
.viewer-route-board button,
.viewer-process article > div,
.viewer-web-outcome-grid article {
  position: relative;
  transition:
    background-color 360ms ease,
    border-color 360ms ease,
    box-shadow 520ms var(--foghorn-fx-ease),
    transform 520ms var(--foghorn-fx-ease);
}

.viewer-stat-board article > span,
.viewer-process article > span,
.viewer-route-board button > span:first-child {
  transition: color 260ms ease, transform 520ms var(--foghorn-fx-ease);
}

.viewer-service-card-surface,
.viewer-about-principles article,
.viewer-about-team article,
.viewer-web-fit-list article,
.viewer-signal-product-grid > section,
.viewer-signal-existing-stack article,
.viewer-signal-safety-rules article {
  transition:
    background-color 360ms ease,
    border-color 360ms ease,
    box-shadow 560ms var(--foghorn-fx-ease),
    transform 560ms var(--foghorn-fx-ease);
}

.viewer-signal-contrast-grid article,
.viewer-signal-shared-value article,
.viewer-signal-benefit-list article {
  transition:
    background-color 340ms ease,
    box-shadow 480ms var(--foghorn-fx-ease),
    transform 520ms var(--foghorn-fx-ease);
}

.viewer-signal-benefit-list article > span,
.viewer-signal-existing-stack article > i {
  transition:
    color 260ms ease,
    border-color 260ms ease,
    background-color 260ms ease,
    box-shadow 380ms ease,
    transform 520ms var(--foghorn-fx-ease);
}

.viewer-contact-form :is(input, select, textarea) {
  outline: 0;
  transition: border-color 240ms ease, background-color 240ms ease, box-shadow 360ms ease, transform 360ms var(--foghorn-fx-ease);
}

.viewer-contact-form label { transition: color 240ms ease; }
.viewer-contact-form label:focus-within { color: #d5010d; }

.viewer-contact-form :is(input, select, textarea):focus-visible {
  border-color: rgba(213, 1, 13, .72);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(213, 1, 13, .09), 0 16px 34px rgba(35, 17, 18, .08);
  transform: translate3d(0, -1px, 0);
}

.viewer-page :is(
  .viewer-route-board button,
  .viewer-service-card-surface,
  .viewer-feature-split button,
  .viewer-end-panel button,
  .viewer-signal-prompts button,
  .viewer-signal-visual-tabs button,
  .viewer-signal-context-steps button
):focus-visible {
  outline: 2px solid var(--foghorn-fx-red-bright);
  outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .viewer-stat-board article:hover,
  .viewer-route-board button:hover,
  .viewer-process article:hover > div {
    z-index: 1;
    box-shadow: inset 0 3px var(--foghorn-fx-red), var(--foghorn-fx-shadow-light);
    transform: translate3d(0, -4px, 0);
  }

  .viewer-stat-board article:hover,
  .viewer-route-board button:hover { background: #fff; }

  .viewer-process article:hover > div { background: #f7f7f4; }
  .viewer-process article:nth-child(even):hover > div { background: #f0f0ed; }

  .viewer-stat-board article:hover > span,
  .viewer-process article:hover > span,
  .viewer-route-board button:hover > span:first-child {
    color: var(--foghorn-fx-red-bright);
    transform: translate3d(4px, 0, 0);
  }

  .viewer-route-board button:hover .ui-icon,
  .viewer-service-card-surface:hover .viewer-service-card-action .ui-icon,
  .viewer-feature-split button:hover .ui-icon,
  .viewer-end-panel button:hover .ui-icon {
    color: var(--foghorn-fx-red-bright);
    filter: drop-shadow(0 7px 12px rgba(229, 9, 23, .28));
    transform: translate3d(4px, -4px, 0) rotate(2deg);
  }

  .viewer-service-card-surface:hover,
  .viewer-about-principles article:hover,
  .viewer-web-fit-list article:hover,
  .viewer-signal-product-grid > section:hover,
  .viewer-signal-safety-rules article:hover {
    border-color: rgba(255, 70, 82, .38);
    box-shadow: inset 0 3px var(--foghorn-fx-red), var(--foghorn-fx-shadow-dark);
    transform: translate3d(0, -5px, 0);
  }

  .viewer-page .viewer-service-card-surface:hover {
    box-shadow:
      inset 0 3px var(--foghorn-fx-red),
      0 34px 90px rgba(15, 15, 17, .24),
      inset 0 1px rgba(255, 255, 255, .055);
  }

  .viewer-about-team article:hover {
    border-color: rgba(255, 70, 82, .38);
    box-shadow: inset 0 3px var(--foghorn-fx-red), var(--foghorn-fx-shadow-dark);
  }

  .viewer-signal-existing-stack article:hover {
    border-color: rgba(255, 70, 82, .3);
    box-shadow: inset 2px 0 var(--foghorn-fx-red), 0 16px 34px rgba(0, 0, 0, .18);
    transform: translate3d(4px, 0, 0);
  }

  .viewer-signal-contrast-grid article:hover,
  .viewer-signal-shared-value article:hover {
    box-shadow: inset 3px 0 var(--foghorn-fx-red);
    transform: translate3d(4px, 0, 0);
  }

  .viewer-signal-benefit-list article:hover {
    box-shadow: none;
    transform: translate3d(4px, 0, 0);
  }

  .viewer-signal-benefit-list article:hover > span,
  .viewer-signal-existing-stack article:hover > i {
    color: #fff;
    border-color: var(--foghorn-fx-red);
    background: var(--foghorn-fx-red);
    box-shadow: 0 0 0 7px rgba(229, 9, 23, .08), 0 0 24px rgba(229, 9, 23, .24);
    transform: scale(1.05);
  }

  .viewer-signal-faq summary {
    transition: color 260ms ease, padding-left 480ms var(--foghorn-fx-ease);
  }

  .viewer-signal-faq summary:hover {
    color: #d5010d;
    padding-left: 8px;
  }

  .viewer-signal-faq summary:hover i {
    border-color: rgba(213, 1, 13, .55);
    box-shadow: 0 0 0 7px rgba(213, 1, 13, .055);
    transform: rotate(45deg);
  }

  .viewer-signal-faq details[open] summary:hover i { transform: rotate(180deg) scale(1.04); }

  .viewer-contact-form :is(input, select, textarea):hover {
    border-color: rgba(213, 1, 13, .42);
    background: #fff;
  }
}

@media (prefers-reduced-motion: reduce) {
  .viewer-page *,
  .viewer-page *::before,
  .viewer-page *::after { scroll-behavior: auto !important; }

  .viewer-stat-board article,
  .viewer-route-board button,
  .viewer-process article > div,
  .viewer-web-outcome-grid article,
  .viewer-service-card-surface,
  .viewer-about-principles article,
  .viewer-about-team article,
  .viewer-web-fit-list article,
  .viewer-signal-product-grid > section,
  .viewer-signal-existing-stack article,
  .viewer-signal-safety-rules article,
  .viewer-signal-contrast-grid article,
  .viewer-signal-shared-value article,
  .viewer-signal-benefit-list article,
  .viewer-signal-faq summary,
  .viewer-contact-form :is(input, select, textarea) {
    transition-duration: .01ms !important;
  }

  .viewer-page :is(article, button, summary, input, select, textarea):hover,
  .viewer-process article:hover > div { transform: none !important; }
}