/* =============================================================================
   integration/motion.css
   Shared motion for onboarding and integration setup flows.
   ============================================================================= */

#createConnectionForm.setup-view-enter,
.ghlm-success-view.setup-view-enter,
.error-container.setup-view-enter {
    animation: softRiseIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.ghlm-header {
    animation: slideDown 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.progress-steps {
    animation: slideUp 0.38s cubic-bezier(0.22, 1, 0.36, 1) 0.04s both;
}

.ps-item {
    transition: transform 0.24s ease, opacity 0.24s ease;
}

.ps-item.active {
    transform: translateY(-2px);
}

.ps-item.done {
    transform: translateY(-1px);
}

.ps-item.active .ps-dot {
    animation: glowPulse 1.9s ease-in-out infinite;
}

.form-step {
    will-change: transform, opacity;
}

.form-step > * {
    animation: softRiseIn 0.34s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.form-step > *:nth-child(1) {
    animation-delay: 40ms;
}

.form-step > *:nth-child(2) {
    animation-delay: 90ms;
}

.form-step > *:nth-child(3) {
    animation-delay: 140ms;
}

.crm-selector-card,
.step-info-card,
.if-connect-summary,
.success-content,
.error-content,
.success-connection-details,
.demo-section.expanded {
    transform-origin: top center;
}

.step-info-card,
.crm-selector-card,
.if-connect-summary,
.success-connection-details {
    transition: border-color 0.24s ease, box-shadow 0.24s ease, transform 0.24s ease;
}

.step-info-card:hover,
.crm-selector-card:hover,
.if-connect-summary:hover,
.success-connection-details:hover {
    z-index: 1; /* explicit stacking context ordering while transform is active */
    border-color: color-mix(in srgb, var(--primary) 25%, var(--border-color));
    box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 10%, transparent);
    transform: translateY(-1px);
}

.setup-animate-item {
    opacity: 0;
    animation: softRiseIn 0.38s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--setup-stagger-index, 0) * 60ms);
}

.if-step-nav {
    animation: slideUp 0.34s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

.if-btn-next i,
.if-btn-back i,
.if-btn-reset i {
    transition: transform 0.2s ease;
}

.if-btn-next:hover i:last-child {
    transform: translateX(2px);
}

.if-btn-back:hover i:first-child {
    transform: translateX(-2px);
}

.if-btn-reset:hover i {
    transform: rotate(-18deg);
}

.success-icon,
.error-icon {
    animation: scaleIn 0.34s ease both, gentleFloat 3.4s ease-in-out 0.4s infinite;
}

.success-connection-details {
    animation: softRiseIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) 0.08s both;
}

.cs-group {
    opacity: 0;
    animation: softRiseIn 0.36s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.cs-group:nth-child(1) {
    animation-delay: 50ms;
}

.cs-group:nth-child(2) {
    animation-delay: 100ms;
}

.cs-group:nth-child(3) {
    animation-delay: 150ms;
}

.cs-group:nth-child(4) {
    animation-delay: 200ms;
}

.cs-footer-note {
    animation: slideUp 0.32s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
}

@media (prefers-reduced-motion: reduce) {
    #createConnectionForm.setup-view-enter,
    .ghlm-success-view.setup-view-enter,
    .error-container.setup-view-enter,
    .ghlm-header,
    .progress-steps,
    .form-step > *,
    .setup-animate-item,
    .if-step-nav,
    .success-icon,
    .error-icon,
    .success-connection-details,
    .cs-group,
    .cs-footer-note {
        animation: none !important;
    }

    .step-info-card,
    .crm-selector-card,
    .if-connect-summary,
    .success-connection-details,
    .ps-item,
    .if-btn-next i,
    .if-btn-back i,
    .if-btn-reset i {
        transition: none !important;
        transform: none !important;
    }
}