/*
  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);
  }
}

/* =====================================================================
   Demo welcome deck — motion
   Every keyframe and duration here is taken from the Demo Walkthrough
   design. The bar fills are separate keyframes rather than one
   parameterised animation because CSS cannot interpolate to a variable
   width; the design names one per percentage and so does this.
   All names are prefixed so nothing here can reach the rest of the app.
   ===================================================================== */
@keyframes demo-deck-fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes demo-deck-pop {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes demo-deck-count-up {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes demo-deck-w12 {
  from {
    width: 0;
  }

  to {
    width: 12%;
  }
}

@keyframes demo-deck-w20 {
  from {
    width: 0;
  }

  to {
    width: 20%;
  }
}

@keyframes demo-deck-w41 {
  from {
    width: 0;
  }

  to {
    width: 41%;
  }
}

@keyframes demo-deck-w58 {
  from {
    width: 0;
  }

  to {
    width: 58%;
  }
}

@keyframes demo-deck-w62 {
  from {
    width: 0;
  }

  to {
    width: 62%;
  }
}

@keyframes demo-deck-w74 {
  from {
    width: 0;
  }

  to {
    width: 74%;
  }
}

@keyframes demo-deck-w80 {
  from {
    width: 0;
  }

  to {
    width: 80%;
  }
}

@keyframes demo-deck-w88 {
  from {
    width: 0;
  }

  to {
    width: 88%;
  }
}

@keyframes demo-deck-w92 {
  from {
    width: 0;
  }

  to {
    width: 92%;
  }
}

.demo-deck-fade {
  animation: demo-deck-fade-up 320ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.demo-deck-fade-400 {
  animation: demo-deck-fade-up 400ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.demo-deck-fade-280 {
  animation: demo-deck-fade-up 280ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.demo-deck-fade-300 {
  animation: demo-deck-fade-up 300ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.demo-deck-pop {
  animation: demo-deck-pop 360ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.demo-deck-count {
  animation: demo-deck-count-up 400ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Bar fills. The design runs the wide bars over 1000ms and the shorter
   in-card meters over 800-900ms; both are kept. */
.demo-deck-bar-w12 {
  animation: demo-deck-w12 900ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.demo-deck-bar-w88 {
  animation: demo-deck-w88 900ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.demo-deck-goal-w88 {
  animation: demo-deck-w88 800ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.demo-deck-goal-w62 {
  animation: demo-deck-w62 800ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.demo-deck-goal-w74 {
  animation: demo-deck-w74 800ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.demo-deck-goal-w41 {
  animation: demo-deck-w41 800ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.demo-deck-meter-w41 {
  animation: demo-deck-w41 1000ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.demo-deck-meter-w58 {
  animation: demo-deck-w58 1000ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.demo-deck-meter-w74 {
  animation: demo-deck-w74 1000ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.demo-deck-meter-w80 {
  animation: demo-deck-w80 1000ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

.demo-deck-meter-w92 {
  animation: demo-deck-w92 1000ms cubic-bezier(0.4, 0, 0.2, 1) both;
}

/* Stagger. Every value here appears in the design's per-element delays. */
.demo-deck-delay-120 {
  animation-delay: 120ms;
}

.demo-deck-delay-160 {
  animation-delay: 160ms;
}

.demo-deck-delay-200 {
  animation-delay: 200ms;
}

.demo-deck-delay-280 {
  animation-delay: 280ms;
}

.demo-deck-delay-300 {
  animation-delay: 300ms;
}

.demo-deck-delay-320 {
  animation-delay: 320ms;
}

.demo-deck-delay-360 {
  animation-delay: 360ms;
}

.demo-deck-delay-400 {
  animation-delay: 400ms;
}

.demo-deck-delay-420 {
  animation-delay: 420ms;
}

.demo-deck-delay-440 {
  animation-delay: 440ms;
}

.demo-deck-delay-520 {
  animation-delay: 520ms;
}

.demo-deck-delay-540 {
  animation-delay: 540ms;
}

.demo-deck-delay-560 {
  animation-delay: 560ms;
}

.demo-deck-delay-600 {
  animation-delay: 600ms;
}

.demo-deck-delay-640 {
  animation-delay: 640ms;
}

.demo-deck-delay-660 {
  animation-delay: 660ms;
}

.demo-deck-delay-700 {
  animation-delay: 700ms;
}

.demo-deck-delay-760 {
  animation-delay: 760ms;
}

.demo-deck-delay-820 {
  animation-delay: 820ms;
}

.demo-deck-delay-900 {
  animation-delay: 900ms;
}

.demo-deck-delay-1040 {
  animation-delay: 1040ms;
}

/* Motion is decoration here; respect a system preference against it. */
@media (prefers-reduced-motion: reduce) {
  [class*="demo-deck-"] {
    animation: none !important;
  }
}

/* =====================================================================
   Demo onboarding — spotlight
   The scrim is not an element. `.demo-spotlight-cutout` is sized to the
   target's rect and carries a box-shadow whose spread swallows the
   viewport, so the shadow paints everything OUTSIDE the box and the
   target keeps its own pixels at full contrast. A box-shadow is not a
   hit area and the element itself is pointer-events:none, so the page
   underneath stays live — this layer narrates, it does not block.
   The orange ring is listed first because earlier shadows paint on top
   of later ones, so it draws over the scrim rather than under it.
   Geometry (top/left/width/height/border-radius) is set inline by
   `spotlight.gts` from the target's measured rect.
   ===================================================================== */
.demo-spotlight-cutout {
  position: fixed;
  z-index: 58;
  pointer-events: none;
  box-shadow:
    0 0 0 2px #ff7b00,
    0 0 0 9999px rgb(17 25 40 / 68%);
  transition:
    top 240ms cubic-bezier(0.4, 0, 0.2, 1),
    left 240ms cubic-bezier(0.4, 0, 0.2, 1),
    width 240ms cubic-bezier(0.4, 0, 0.2, 1),
    height 240ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* The popover glides with the cutout so a step change reads as one move
   rather than two blinks. */
.demo-spotlight-popover {
  position: fixed;
  z-index: 59;
  transition:
    top 240ms cubic-bezier(0.4, 0, 0.2, 1),
    left 240ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Rotated square whose outward corner becomes the tip. Which two borders
   are drawn, and where it sits, come from `spotlight.gts`. */
.demo-spotlight-caret {
  position: absolute;
  width: 12px;
  height: 12px;
  border-style: solid;
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .demo-spotlight-cutout,
  .demo-spotlight-popover {
    transition: none;
  }
}

/*
 * 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;
  }
}