/* Fluid interaction layer for the homepage, after Apple's "Designing Fluid
   Interfaces". Feedback lands on press, chrome is a material rather than a
   bar, and fluid.js drives the springs that these states hand off to. */

/* ---- Response: acknowledge the press, not the release ---- */
.ops-home { -webkit-tap-highlight-color: transparent; }
.ops-home :is(a, button, select) { touch-action: manipulation; }

/* `scale` rather than `transform`, so it composes with the arrows' own
   translateY(-50%). Release eases back more slowly than the press lands. */
.ops-home :is(.btn, .industry-navigation button, .dialog-close, .sx-preview-switch button) {
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease, scale 260ms cubic-bezier(0.2, 0.9, 0.25, 1);
}
.ops-home :is(.btn, .dialog-close, .sx-preview-switch button):active { scale: 0.97; transition-duration: 160ms, 160ms, 160ms, 90ms; }
.ops-home .industry-navigation button:not(:disabled):active { scale: 0.93; transition-duration: 160ms, 160ms, 160ms, 90ms; }
.ops-home :is(.nav-links a, .nav-cta, .role-line a, .solution-caption a, .foot li a) { transition: opacity 160ms ease, color 160ms ease; }
.ops-home :is(.nav-links a, .nav-cta, .role-line a, .solution-caption a, .foot li a):active { opacity: 0.5; transition-duration: 60ms; }

.ops-home .sector-card { transition: scale 300ms cubic-bezier(0.2, 0.9, 0.25, 1); }
.ops-home .sector-card:active { scale: 0.985; transition-duration: 110ms; }
/* A card that is being dragged is carried, not pressed. */
.ops-home .sector-track.is-dragging .sector-card { scale: none; }

.ops-home .solution-tabs button:not([aria-selected=true]):active { background: #e6ece4; transition-duration: 0s; }

/* ---- Direct manipulation: the industries carousel ---- */
/* fluid.js measures snap points against the track, so it is their offsetParent. */
.ops-home .sector-track { position: relative; }
.ops-home .sector-card img { -webkit-user-drag: none; user-drag: none; }
@media (pointer: fine) {
  .ops-home .sector-card { -webkit-user-select: none; user-select: none; }
  .ops-home .sector-track.is-dragging,
  .ops-home .sector-track.is-dragging * { cursor: grabbing; }
}

/* ---- Spatial consistency: the selected solution slides, it does not blink ---- */
.ops-home .solution-tabs { position: relative; }
.ops-home .solution-tabs .tab-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  background: #e4eee6;
  pointer-events: none;
  will-change: transform;
}
.ops-home .solution-tabs button { position: relative; z-index: 1; }
.ops-home .solution-tabs.has-indicator button[aria-selected=true],
.ops-home .solution-tabs.has-indicator button[aria-selected=true]:hover { background: transparent; }

/* ---- Materials: the sticky nav is glass over the content, keeping its hairline ---- */
.ops-home .nav.is-stuck {
  background: rgba(253, 253, 251, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}
/* Over a translucent surface, text needs a touch more presence than flat grey. */
.ops-home .nav.is-stuck .nav-links a { opacity: 0.86; }
.ops-home .nav.is-stuck .nav-links a:hover { opacity: 1; }

/* The industry dialog grows from, and returns to, the card that opened it.
   fluid.js sets the origin and drives scale, blur, and the scrim together. */
.ops-home #sector-dialog { will-change: transform, opacity; }
.ops-home #sector-dialog::backdrop { opacity: var(--scrim, 1); }

/* ---- Accessibility: gentler, not absent ---- */
@media (prefers-reduced-motion: reduce) {
  .ops-home :is(.btn, .dialog-close, .sx-preview-switch button, .industry-navigation button, .sector-card):active { scale: none; opacity: 0.72; }
}
@media (prefers-reduced-transparency: reduce) {
  .ops-home .nav.is-stuck { background: var(--white); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .ops-home #sector-dialog::backdrop { background: rgba(7, 27, 19, 0.9); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .ops-home .nav.is-stuck { background: var(--white); border-bottom-color: var(--ink); }
  .ops-home .btn--outline { border-color: currentColor; }
}