/* SuccessHCM motion layer. Hidden states apply only once motion.js adds html.shcm-motion. */

:root {
	--shcm-ease: cubic-bezier(.22, .8, .24, 1);
}

/* ---------------------------------------------------------- sticky header */
.shcm-site-header.is-stuck {
	position: fixed;
	background: rgba(255, 255, 255, .86);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	backdrop-filter: saturate(1.4) blur(14px);
	box-shadow: 0 1px 0 var(--shcm-rule), 0 12px 30px -20px rgba(11, 42, 47, .35);
	animation: shcm-drop .38s var(--shcm-ease);
}
.shcm-site-header.is-stuck .shcm-header { padding-top: 10px !important; padding-bottom: 10px !important; }
@keyframes shcm-drop { from { transform: translateY(-100%); } to { transform: none; } }

/* ---------------------------------------------------------- hover micro-interactions */
.shcm-modlist .elementor-icon-list-item { transition: transform .2s var(--shcm-ease), border-color .2s ease, box-shadow .2s ease; }
.shcm-modlist .elementor-icon-list-item:hover {
	transform: translateX(4px);
	border-color: var(--shcm-mint);
	box-shadow: 0 8px 18px -12px rgba(11, 42, 47, .35);
}
.shcm-tile { transition: transform .35s var(--shcm-ease), box-shadow .35s ease; }
.shcm-cat:hover .shcm-tile { transform: translateY(-4px) rotate(-3deg); box-shadow: 0 20px 30px -12px rgba(11, 42, 47, .55); }
.shcm-screen .shcm-card { transition: transform .45s var(--shcm-ease), box-shadow .45s ease; }
.shcm-screen:hover .shcm-card:not(.shcm-card--float) { transform: translateY(-4px); }
.shcm-screen:hover .shcm-card--float { transform: translate(6px, -8px); box-shadow: 0 30px 50px -18px rgba(11, 42, 47, .35); }
.shcm-faq .e-n-accordion-item:not([open]) { transition: transform .25s var(--shcm-ease), border-color .25s ease; }
.shcm-faq .e-n-accordion-item:not([open]):hover { transform: translateY(-2px); border-color: var(--shcm-mint); }
.shcm-faq .e-n-accordion-item-title-icon > span { transition: transform .3s var(--shcm-ease); }
.shcm-faq .e-n-accordion-item:not([open]):hover .e-n-accordion-item-title-icon > span { transform: rotate(90deg); }
.shcm-demo { transition: transform .5s var(--shcm-ease); }
.shcm-ctacard:hover .shcm-demo { transform: rotate(0deg) translateY(-4px); }

/* ---------------------------------------------------------- reveal on scroll */
.shcm-motion .shcm-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .7s var(--shcm-ease), transform .8s var(--shcm-ease);
	transition-delay: var(--shcm-delay, 0ms);
}
.shcm-motion .shcm-reveal.shcm-in { opacity: 1; transform: none; }

/* ---------------------------------------------------------- hero entrance */
.shcm-motion .shcm-win,
.shcm-motion .shcm-phone,
.shcm-motion .shcm-tip { opacity: 0; }
.shcm-motion .shcm-hv.shcm-in .shcm-win { animation: shcm-win-in .9s var(--shcm-ease) .15s forwards; }
.shcm-motion .shcm-hv.shcm-in .shcm-phone { animation: shcm-phone-in 1s var(--shcm-ease) .35s forwards, shcm-float 7s ease-in-out 1.6s infinite; }
.shcm-motion .shcm-hv.shcm-in .shcm-tip { animation: shcm-pop .55s var(--shcm-ease) 1.2s forwards; }
.shcm-motion .shcm-hv.shcm-in .shcm-inbox__row.is-active { animation: shcm-row-flash 1.4s ease 1.3s 1; }

.shcm-win, .shcm-phone, .shcm-tip { translate: var(--px, 0) var(--py, 0); transition: translate .6s var(--shcm-ease); }

@keyframes shcm-win-in { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes shcm-phone-in { from { opacity: 0; transform: translateY(60px); } to { opacity: 1; transform: none; } }
@keyframes shcm-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes shcm-pop { from { opacity: 0; transform: translateY(8px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes shcm-row-flash { 0%, 100% { background: #FEF8EC; } 40% { background: #FCEBC4; } }

@media (max-width: 767px) {
	.shcm-motion .shcm-hv.shcm-in .shcm-phone { animation: shcm-phone-in-m 1s var(--shcm-ease) .2s forwards; }
	.shcm-motion .shcm-hv.shcm-in .shcm-tip { animation: shcm-pop-m .55s var(--shcm-ease) 1s forwards; }
	@keyframes shcm-phone-in-m { from { opacity: 0; transform: translate(-50%, 50px); } to { opacity: 1; transform: translate(-50%, 0); } }
	@keyframes shcm-pop-m { from { opacity: 0; transform: translate(-50%, 8px) scale(.94); } to { opacity: 1; transform: translate(-50%, 0); } }
}

/* ---------------------------------------------------------- product screens come alive */
.shcm-motion .shcm-live .shcm-card { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--shcm-ease) .1s, transform .8s var(--shcm-ease) .1s; }
.shcm-motion .shcm-live .shcm-card--float { transform: translate(24px, 24px); transition-delay: .55s; }
.shcm-motion .shcm-live .shcm-screen__pill { opacity: 0; transform: scale(.85); transform-origin: left center; transition: opacity .5s ease, transform .6s var(--shcm-ease); }
.shcm-motion .shcm-live.shcm-in .shcm-card,
.shcm-motion .shcm-live.shcm-in .shcm-screen__pill { opacity: 1; transform: none; }

.shcm-motion .shcm-live .shcm-bar i { transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--shcm-ease); transition-delay: var(--shcm-delay, 0ms); }
.shcm-motion .shcm-live.shcm-in .shcm-bar i { transform: scaleX(1); }
.shcm-motion .shcm-live .shcm-score { transition-delay: var(--shcm-delay, 0ms); }
.shcm-motion .shcm-live .shcm-score .shcm-bar i { transition-delay: calc(var(--shcm-delay, 0ms) + .2s); }

.shcm-motion .shcm-live .shcm-roster i { opacity: 0; transform: scale(.6); transition: opacity .35s ease, transform .45s var(--shcm-ease); transition-delay: var(--shcm-delay, 0ms); }
.shcm-motion .shcm-live.shcm-in .shcm-roster i { opacity: 1; transform: none; }

.shcm-motion .shcm-live .shcm-rows > div,
.shcm-motion .shcm-live .shcm-table tbody tr,
.shcm-motion .shcm-live.shcm-demo dl > div { opacity: 0; transform: translateX(-10px); transition: opacity .5s ease, transform .6s var(--shcm-ease); transition-delay: var(--shcm-delay, 0ms); }
.shcm-motion .shcm-live.shcm-in .shcm-rows > div,
.shcm-motion .shcm-live.shcm-in .shcm-table tbody tr,
.shcm-motion .shcm-live.shcm-demo.shcm-in dl > div { opacity: 1; transform: none; }

.shcm-motion .shcm-live .shcm-diff .is-after { clip-path: inset(0 100% 0 0); transition: clip-path .8s var(--shcm-ease) 1.1s; }
.shcm-motion .shcm-live.shcm-in .shcm-diff .is-after { clip-path: inset(0 0 0 0); }

/* The demo card keeps its tilt through the reveal */
.shcm-motion .shcm-live.shcm-demo { opacity: 0; transform: rotate(6deg) translateY(30px); transition: opacity .8s var(--shcm-ease) .25s, transform 1s var(--shcm-ease) .25s; }
.shcm-motion .shcm-live.shcm-demo.shcm-in { opacity: 1; transform: rotate(2deg); }
.shcm-motion .shcm-ctacard:hover .shcm-live.shcm-demo.shcm-in { transform: rotate(0deg) translateY(-4px); }

/* Awaiting pill breathes gently */
.shcm-demo .shcm-pill--wait { animation: shcm-breathe 2.8s ease-in-out infinite; }
@keyframes shcm-breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(122, 82, 0, 0); } 50% { box-shadow: 0 0 0 5px rgba(253, 244, 227, .9); } }

/* Footer wordmark stripes drift slowly */
.shcm-wordmark { background-size: 100% 10px; animation: shcm-stripes 9s linear infinite; }
@keyframes shcm-stripes { to { background-position: 0 -100px; } }

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