/*
  This folder is not used, but the Embroider build currently fails without this
  file. Issue: https://github.com/embroider-build/embroider/issues/1486

  Instead, import any necessary CSS into the component .gts file that needs it.
  This allows code-splitting to work for styles as well.
*/

/* HubSpot chat visibility rules moved from index.html to avoid JSDOM inline CSS parse issues */

/* Hide print-only sections in the browser */
.look-ahead-print-only {
  display: none;
}

/* Hide chat container by default */
#hubspot-messages-iframe-container,
.hs-shadow-container,
iframe#hubspot-conversations-iframe {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Show HubSpot chat when it should be visible */
#hubspot-messages-iframe-container.chat-visible,
.hs-shadow-container.chat-visible,
iframe#hubspot-conversations-iframe.chat-visible {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Hide iframe when shadow container is visible but not active */
.hs-shadow-container.chat-visible:not(.active)
  + iframe#hubspot-conversations-iframe {
  display: none !important;
}

/* Ensure our custom chat button is visible */
button[data-custom-chat-button="true"] {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Trial launch-window countdown, expiring state. A slow, shallow ring pulse:
   `animate-pulse` fades the entire chip in and out, which reads as a rendering
   glitch in the header rather than urgency. */
@keyframes trial-urgent-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgb(255 123 0 / 0%);
  }

  50% {
    box-shadow: 0 0 0 4px rgb(255 123 0 / 25%);
  }
}

.trial-urgent-pulse {
  animation: trial-urgent-pulse 3s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .trial-urgent-pulse {
    animation: none;
  }
}

/* Training Hub */
@keyframes training-pop {
  0% {
    transform: scale(0) rotate(-20deg);
    opacity: 0;
  }

  60% {
    transform: scale(1.15) rotate(4deg);
    opacity: 1;
  }

  100% {
    transform: scale(1) rotate(0);
  }
}

.training-pop {
  animation: training-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.training-ring-fg {
  transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * Cascading entrance for filter dropdown option rows (matches the same
 * keyframe added to @protiv/dashboard-react's global.css). A CSS *animation*
 * rather than a *transition*: these popovers use the native Popover API,
 * which the browser removes from the accessibility/rendering tree while
 * closed, so a transition can't play across that boundary — an animation
 * plays unconditionally from the moment the element paints, which is what
 * lets each row's `animation-delay` stagger the reveal.
 */
@keyframes filter-option-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*
 * Sign-in proof column. Decorative washes and the KPI bar fills live here
 * rather than inline; both stop under prefers-reduced-motion.
 */
@keyframes sign-in-drift {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(-18px, 14px, 0);
  }
}

@keyframes sign-in-bar-fill {
  0% {
    transform: scaleX(0.55);
  }

  55%,
  100% {
    transform: scaleX(1);
  }
}

.sign-in-wash-warm,
.sign-in-wash-cool {
  animation: sign-in-drift 14s ease-in-out infinite;
}

.sign-in-wash-warm {
  background: radial-gradient(
    circle,
    rgb(255 123 0 / 22%) 0%,
    rgb(255 123 0 / 0%) 68%
  );
}

.sign-in-wash-cool {
  animation-duration: 18s;
  animation-direction: reverse;
  background: radial-gradient(
    circle,
    rgb(2 182 89 / 16%) 0%,
    rgb(2 182 89 / 0%) 70%
  );
}

.sign-in-bar {
  transform-origin: left;
  animation: sign-in-bar-fill 2600ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.sign-in-bar-delay-1 {
  animation-delay: 200ms;
}

.sign-in-bar-delay-2 {
  animation-delay: 400ms;
}

@media (prefers-reduced-motion: reduce) {
  .sign-in-wash-warm,
  .sign-in-wash-cool,
  .sign-in-bar {
    animation: none;
  }
}

/*
 * SearchableSelect is sized for table filters. The signup form uses 48px
 * fields, so the trigger is scaled up here rather than adding a size variant
 * to a component 17 other screens depend on.
 */
.signup-industry-select > button {
  height: 52px;
  border-radius: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Descendant, not child: the label sits in a nested span whose own text-xs
   would otherwise win. */
.signup-industry-select button span {
  font-size: 1rem;
  line-height: 1.5rem;
}

/* Match the sibling inputs: chosen value in --dark, placeholder left muted. */
.signup-industry-select button .text-body-color {
  color: #111928;
}

.signup-industry-select button svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* The demo provisioning wait. Indeterminate on purpose: the demo host reports
   no progress, so a percentage would be invented. Matches the design's bar. */
@keyframes demo-build-sweep {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(320%);
  }
}

.demo-build-bar {
  animation: demo-build-sweep 1400ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .demo-build-bar {
    animation: none;
  }
}