/* Shared motion for every Bixaven page. Controls stay usable during transitions. */
:root {
  --motion-duration: 280ms;
  --motion-feedback: 180ms;
  --motion-arrival: 360ms;
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
}

@media (prefers-reduced-motion: no-preference) {
  /* Keep interactive workspaces anchored; only their opacity changes. */
  :root main, :root .settings-page [role="tabpanel"]:not([hidden]),
  :root .demo-calendar-layout { animation: page-arrive var(--motion-duration) var(--motion-ease); }
  :root :is(.hero-copy, .request-specimen, .service-panel) { animation: none; }

  :root :is(
    details[open]:not(.workspace-account) > :not(summary):not([hidden]):not(.connection-details-body),
    .connection-details[open] > .connection-details-body > :not(.website-install-selected),
    .website-install-selected > *,
    .request-example:not([hidden]),
    .customer-page .panel-stage:not([hidden]),
    .chat-bubble, .confirmation, .lead,
    .conversation:not([hidden]),
    .invite-share-panel:not([hidden]),
    #results-content:not([hidden]),
    #photo-preview:not([hidden])
  ) { animation: content-arrive var(--motion-duration) var(--motion-ease); }

  :root :is(.button, button, input, textarea, select, summary, nav a, .text-link) {
    transition: background-color var(--motion-feedback) ease-out,
      border-color var(--motion-feedback) ease-out, color var(--motion-feedback) ease-out,
      box-shadow var(--motion-feedback) ease-out, transform var(--motion-feedback) var(--motion-ease),
      text-decoration-color var(--motion-feedback) ease-out;
  }

  /* The active tab's rule grows into place without moving its label. */
  :root .settings-tabs [role="tab"]::after {
    content: ""; position: absolute; height: 2px; background: var(--brand);
    inset: auto 0 -1px; transform: scaleX(0); transform-origin: left;
    transition: transform var(--motion-duration) var(--motion-ease);
  }
  :root .settings-tabs [aria-selected="true"]::after { transform: scaleX(1); }

  @media (hover: hover) and (pointer: fine) {
    :root :is(.button, .slot-button):hover:not(:disabled) { transform: translateY(-2px); }
    :root .button.primary:hover:not(:disabled) { box-shadow: var(--shadow-soft); }
    :root .text-link:hover { text-decoration-color: currentColor; }
  }
  :root :is(.button, .slot-button, .demo-calendar-day):active:not(:disabled) {
    transform: translateY(1px) scale(.985);
    transition-duration: 90ms;
  }

  /* Only below-the-fold marketing sections get a one-time scroll entrance. */
  :root .motion-enter { animation: section-arrive var(--motion-arrival) var(--motion-ease); }

  @keyframes page-arrive {
    from { opacity: .45; }
    to { opacity: 1; }
  }
  @keyframes content-arrive {
    from { opacity: .2; transform: translateY(7px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes section-arrive {
    from { opacity: .35; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
  }
}

@media (prefers-reduced-motion: reduce), print {
  :root *, :root *::before, :root *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}