/**
 * HRBoxs motion layer. Theme: "People in Sync. Work in Motion."
 * Everything is progressive enhancement: gated by .js and disabled for reduced motion.
 * Uses only existing brand tokens (orange / navy / mauve gradient).
 */

/* ---------- Scroll progress ("sync line") ---------- */
.sync-progress {
	position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 300; pointer-events: none;
	background: var(--hr-gradient); transform: scaleX(0); transform-origin: 0 50%;
}

/* ---------- Header ---------- */
.site-header { transition: box-shadow .3s ease, background-color .3s ease; }
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(16, 42, 67, .1); }
.primary-nav a { transition: color .2s; }
@media (min-width: 900px) {
	.primary-nav .menu > li > a { background: linear-gradient(var(--hr-orange), var(--hr-orange)) no-repeat 0 100% / 0 3px; transition: background-size .3s ease, color .2s; }
	.primary-nav .menu > li > a:hover { background-size: 100% 3px; }
}

/* ---------- Scroll reveal ---------- */
.js .rv { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0ms); }
.js .rv.rv--left { transform: translateX(-30px); }
.js .rv.rv--right { transform: translateX(30px); }
.js .rv.rv--zoom { transform: scale(.94); }
.js .rv.is-in { opacity: 1; transform: none; }

/* Section headings: underline that draws in */
.js .section-head h2 { position: relative; padding-bottom: .35em; }
.js .section-head h2::after {
	content: ""; position: absolute; left: 50%; bottom: 0;
	transform: translateX(-50%) scaleX(0); transform-origin: center; transition: transform .8s .25s cubic-bezier(.2, .7, .2, 1);
}
.js .section-head.is-in h2::after { transform: translateX(-50%) scaleX(1); }

/* ---------- Hero ---------- */
@keyframes hr-gradient-drift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes hr-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes hr-drift-a { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-40px, 30px) scale(1.08); } }
@keyframes hr-drift-b { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(50px, -36px) scale(1.12); } }
@keyframes hr-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes hr-pop { from { opacity: 0; transform: translateY(14px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes hr-ring { 0% { transform: scale(.6); opacity: .55; } 100% { transform: scale(2.2); opacity: 0; } }

.js .page-hero--gradient, .js .cta-band { background-size: 200% 200%; animation: hr-gradient-drift 18s ease-in-out infinite; }
.js .hero__shape--a { animation: hr-drift-a 16s ease-in-out infinite; }
.js .hero__shape--b { animation: hr-drift-b 20s ease-in-out infinite; }

.js .hero__copy > * { opacity: 0; animation: hr-rise .8s cubic-bezier(.2, .7, .2, 1) forwards; }
.js .hero__copy > :nth-child(1) { animation-delay: .05s; }
.js .hero__copy > :nth-child(2) { animation-delay: .18s; }
.js .hero__copy > :nth-child(3) { animation-delay: .32s; }
.js .hero__copy > :nth-child(4) { animation-delay: .46s; }
.js .hero__copy > :nth-child(5) { animation-delay: .6s; }

.js .page-hero__inner > * { opacity: 0; animation: hr-rise .7s cubic-bezier(.2, .7, .2, 1) forwards; }
.js .page-hero__inner > :nth-child(2) { animation-delay: .1s; }
.js .page-hero__inner > :nth-child(3) { animation-delay: .2s; }
.js .page-hero__inner > :nth-child(4) { animation-delay: .3s; }
.js .page-hero__inner > :nth-child(n+5) { animation-delay: .4s; }

.js .hero__visual .mock__window { opacity: 0; animation: hr-rise .9s .3s cubic-bezier(.2, .7, .2, 1) forwards, hr-float 7s 1.4s ease-in-out infinite; }


/* ---------- Dashboard mock comes alive ---------- */
.js .mock .mock__chart i { transform: scaleY(0); transform-origin: 50% 100%; transition: transform .8s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(.5s + var(--i, 0) * 80ms); }
.js .mock.is-in .mock__chart i { transform: scaleY(1); }
.js .mock .mock__list li { opacity: 0; transform: translateX(-12px); transition: opacity .5s, transform .5s; transition-delay: calc(.9s + var(--i, 0) * 120ms); }
.js .mock.is-in .mock__list li { opacity: 1; transform: none; }
.js .mock .mock__kpi { opacity: 0; transform: translateY(10px); transition: opacity .5s, transform .5s; transition-delay: calc(.4s + var(--i, 0) * 90ms); }
.js .mock.is-in .mock__kpi { opacity: 1; transform: none; }
.mock__navitem.is-active { position: relative; }
.mock__navitem.is-active::after { content: ""; position: absolute; inset: 0; border-radius: 10px; border: 2px solid var(--hr-orange); animation: hr-ring 2.6s ease-out infinite; }
.pill--warn { animation: hr-pulse 2.4s ease-in-out infinite; }
@keyframes hr-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 130, 58, .0); } 50% { box-shadow: 0 0 0 4px rgba(245, 130, 58, .22); } }

/* ---------- Buttons: light sweep ---------- */
.btn { position: relative; overflow: hidden; }
.btn--primary::after, .btn--white::after {
	content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; pointer-events: none;
	background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg);
}
.btn--primary:hover::after, .btn--white:hover::after { left: 130%; transition: left .6s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); }
.btn--primary:hover { box-shadow: 0 10px 22px rgba(245, 130, 58, .45); }

/* ---------- Cards ---------- */
.card--link .icon-badge, .card .icon-badge { transition: transform .3s cubic-bezier(.3, 1.5, .5, 1), background-color .2s; }
.card:hover .icon-badge { transform: translateY(-3px) rotate(-6deg) scale(1.08); background: rgba(245, 130, 58, .26); }
.card__more .icon { transition: transform .25s; }
.card--link:hover .card__more .icon { transform: translateX(5px); }
.card--accent { transition: box-shadow .25s, transform .25s; }
.card--accent:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.post-card { transition: box-shadow .25s, transform .25s; }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.module-cloud li { transition: transform .25s, box-shadow .25s; }
.module-cloud li:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.module-cloud li .icon { transition: transform .3s cubic-bezier(.3, 1.5, .5, 1); }
.module-cloud li:hover .icon { transform: scale(1.25) rotate(-8deg); }
.step { transition: transform .25s, box-shadow .25s; }
.step:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.social a { transition: background-color .2s, color .2s, transform .25s cubic-bezier(.3, 1.5, .5, 1); }
.social a:hover { transform: translateY(-3px) scale(1.08); }
.tag-list a { transition: background-color .2s, color .2s, transform .2s; }
.tag-list a:hover { transform: translateY(-2px); }

/* ---------- Flow ("sync" relay): modules light up one after another ---------- */
@keyframes hr-relay { 0%, 18%, 100% { background: var(--hr-white); box-shadow: var(--shadow-sm); transform: none; } 6%, 12% { background: #FFF1E6; box-shadow: 0 0 0 2px var(--hr-orange), var(--shadow); transform: translateX(6px); } }
.js .flow-demo.is-in li { animation: hr-relay 7.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * 1.2s); }

/* ---------- Pricing ---------- */
.plan { transition: transform .3s, box-shadow .3s; }
.plan:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.plan--featured, .js .plan--featured.rv { animation: none; opacity: 1; transform: none; transition: none; } /* ponytail: featured card is static, no reveal/glow/lift */
.plan--featured:hover { transform: none; }
@keyframes hr-glow { 0%, 100% { box-shadow: var(--shadow); } 50% { box-shadow: 0 0 0 6px rgba(245, 130, 58, .18), var(--shadow-lg); } }
.billing-toggle button { transition: background-color .25s, color .25s; }
.js [data-plans] .price strong { animation: hr-rise .4s ease both; }

/* ---------- FAQ ---------- */
.faq__item { transition: box-shadow .2s, border-color .2s; }
.faq__item:hover { box-shadow: var(--shadow-sm); }
.faq__item[open] { border-color: rgba(245, 130, 58, .55); }
.faq__item[open] .faq__answer { animation: hr-rise .35s ease both; }

/* ---------- Forms ---------- */
.field input, .field select, .field textarea { transition: border-color .2s, background .2s, box-shadow .2s; }
.field--invalid, .field input[aria-invalid="true"] { animation: hr-shake .4s; }
@keyframes hr-shake { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }
.btn.is-loading::before { content: ""; width: 1em; height: 1em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: hr-spin .7s linear infinite; }
@keyframes hr-spin { to { transform: rotate(360deg); } }

/* ---------- Misc ---------- */
.auth-card, .form-card { animation: hr-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.cookie:not([hidden]) { animation: hr-rise .6s .8s cubic-bezier(.2, .7, .2, 1) both; }
.to-top { display: inline-block; transition: transform .25s; }
.to-top:hover { transform: translateY(-3px); }

@media (prefers-reduced-motion: reduce) {
	.sync-progress { display: none; }
	.js .rv, .js .rv.is-in { opacity: 1; transform: none; transition: none; }
	.js .hero__copy > *, .js .page-hero__inner > *, .js .hero__visual .mock__window { opacity: 1; animation: none; }
	.js .hero, .js .page-hero--gradient, .js .cta-band, .js .hero__shape, .plan--featured, .pill--warn, .mock__navitem.is-active::after, .js .flow-demo.is-in li { animation: none; }
	.js .mock .mock__chart i, .js .mock .mock__list li, .js .mock .mock__kpi { transform: none; opacity: 1; transition: none; }
	.js .section-head h2::after { transform: translateX(-50%) scaleX(1); transition: none; }
	.btn:hover, .plan:hover, .card:hover .icon-badge, .step:hover, .post-card:hover { transform: none; }
}

/* =====================================================================
   Waves
   ===================================================================== */

/* ---------- Waves ---------- */
.wave { z-index: 1; position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(36px, 6vw, 84px); overflow: hidden; pointer-events: none; color: var(--hr-background); line-height: 0; }
.wave__layer { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; display: flex; }
.wave__layer svg { flex: 0 0 50%; width: 50%; height: 100%; max-width: none; display: block; fill: currentColor; }
.wave__layer--back { opacity: .5; animation: hr-wave 22s linear infinite; }
.wave__layer--front { animation: hr-wave 14s linear infinite reverse; }
@keyframes hr-wave { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.page-hero--gradient { position: relative; overflow: hidden; padding-bottom: clamp(56px, 8vw, 110px); }
.page-hero__inner { position: relative; }

/* Section heading underline becomes a flowing wave */
.js .section-head h2::after {
	height: 10px; width: 96px; border-radius: 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='10' viewBox='0 0 24 10'%3E%3Cpath d='M0 5 Q6 -1 12 5 T24 5' fill='none' stroke='%23F5823A' stroke-width='2.5' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x 0 50% / 24px 10px;
	animation: hr-wave-line 1.6s linear infinite;
}
@keyframes hr-wave-line { to { background-position-x: 24px; } }

/* Hero: wave divider sits at the bottom edge */
.hero__inner { z-index: 2; }
.cta-band > * { position: relative; z-index: 1; }
.cta-band { overflow: visible; isolation: isolate; padding-inline: clamp(20px, 5vw, 56px); }


/* ---------- Mascot ---------- */
.mascot { display: block; height: auto; max-width: 100%; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 16px 22px rgba(16, 42, 67, .22)); transition: filter .45s ease; }
/* Hover: the hero lights up - brighter, richer colour and a warm golden glow around the figure. */
.mascot:hover { filter: brightness(1.16) saturate(1.2) contrast(1.04) drop-shadow(0 0 7px rgba(255, 255, 255, .95)) drop-shadow(0 0 26px rgba(255, 196, 96, .95)) drop-shadow(0 16px 22px rgba(16, 42, 67, .22)); }
@keyframes hr-sway { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-12px) rotate(1deg); } }

/* Home hero: centred under the dashboard on small screens, overlapping its lower right on desktop */
.hero__mascot { position: relative; z-index: 2; width: clamp(190px, 52vw, 260px); margin: 14px auto 0; transform-origin: 50% 95%; }
.mascot--hero { position: relative; z-index: 1; width: 100%; }
@media (min-width: 900px) {
	.hero__mascot { position: absolute; right: -14%; bottom: -16%; width: clamp(160px, 15vw, 240px); margin: 0; }
	.hero__visual { position: relative; padding-bottom: 8px; }
}

/* CTA band: front-facing pose standing on the band's right edge, poking above it */
.mascot--cta { display: none; }
@media (min-width: 900px) {
	.cta-band { text-align: left; padding-right: 30%; }
	.cta-band h2, .cta-band p { margin-inline: 0; max-width: 34em; }
	.cta-band .hero-actions { justify-content: flex-start; }
	.mascot--cta { display: block; position: absolute; right: 2%; bottom: 0; height: calc(100% + 34px); width: auto; max-width: 24%; object-fit: contain; object-position: right bottom; transform-origin: 50% 95%; animation: hr-sway 7s ease-in-out infinite; }
}

/* Gradient page heroes: fills the hero's height on the right, above the wave */
.hero__mascot--page { display: none; }
.mascot--page { display: block; position: relative; z-index: 1; height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: right bottom; }
@media (min-width: 1000px) {
	.hero__mascot--page { display: block; position: absolute; right: 2%; bottom: 0; z-index: 2; height: calc(100% - 18px); width: auto; max-width: 30%; margin: 0; }
	.page-hero--gradient .page-hero__inner > * { max-width: min(40em, 66%); }
}
.js .hero__mascot { animation: hr-sway 6.5s ease-in-out infinite; } /* mascot, glow and rings float together */

/* 404 */
.mascot--404 { width: 170px; margin: -8px auto 8px; transform-origin: 50% 95%; animation: hr-sway 6s ease-in-out infinite; }

/* ---------- Hero motion: wind-blown specks + shield sync pulse + button sheen ---------- */
.hero__specks { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hero__specks i { position: absolute; left: -2%; top: var(--y); width: var(--s); height: var(--s); border-radius: 50%; background: rgba(255, 255, 255, .9); box-shadow: 0 0 7px rgba(255, 255, 255, .65); opacity: 0; animation: hr-wind var(--d) linear var(--dl) infinite; will-change: transform, opacity; }
.hero__specks i.is-warm { background: rgba(255, 220, 160, .95); box-shadow: 0 0 8px rgba(255, 200, 120, .7); }
@keyframes hr-wind {
	0% { opacity: 0; transform: translate3d(0, 0, 0); }
	12% { opacity: .85; }
	50% { transform: translate3d(55vw, calc(var(--dy) * .4), 0); }
	88% { opacity: .85; }
	100% { opacity: 0; transform: translate3d(112vw, var(--dy), 0); }
}
@media (max-width: 767px) { .hero__specks i:nth-child(n+11) { display: none; } }

/* Soft golden glow and two expanding rings pulse from the mascot's shield, out of step so the beat never stops */
.hero__glow, .hero__ring { position: absolute; left: var(--px, 23%); top: var(--py, 47%); border-radius: 50%; pointer-events: none; z-index: 0; }
.hero__glow { width: calc(var(--pw, 72%) * 1.45); aspect-ratio: 1; margin: calc(var(--pw, 72%) * -.725) 0 0 calc(var(--pw, 72%) * -.725); background: radial-gradient(closest-side, rgba(255, 214, 122, .9), rgba(255, 214, 122, 0) 72%); opacity: .25; animation: hr-glow 3.6s ease-in-out infinite; }
.hero__ring { width: var(--pw, 72%); aspect-ratio: 1; margin: calc(var(--pw, 72%) * -.5) 0 0 calc(var(--pw, 72%) * -.5); border: 3px solid rgba(255, 232, 175, .95); box-shadow: 0 0 16px rgba(255, 160, 60, .85), inset 0 0 14px rgba(255, 200, 110, .4); opacity: 0; animation: hr-ring-out 4s ease-out infinite; }
.hero__ring--2 { animation-delay: 2s; }
@keyframes hr-glow { 0%, 100% { opacity: .25; } 50% { opacity: .75; } }
@keyframes hr-ring-out { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.7); } }

/* Pause the loops while the hero is scrolled out of view (set from animations.js) */
.is-offscreen .hero__specks i, .is-offscreen .hero__glow, .is-offscreen .hero__ring { animation-play-state: paused; }

/* Main call-to-action buttons: a soft light streak sweeps across every few seconds, with a gentle glow pulse */
.hero .btn--white, .cta-band .btn--white, .page-hero--gradient .btn--white { animation: hr-btn-glow 3.6s ease-in-out infinite; }
.hero .btn--white::after, .cta-band .btn--white::after, .page-hero--gradient .btn--white::after { background: linear-gradient(105deg, transparent, rgba(245, 130, 58, .32), transparent); animation: hr-sheen 4s ease-in-out infinite; }
.hero .btn--white:hover::after, .cta-band .btn--white:hover::after, .page-hero--gradient .btn--white:hover::after { left: -75%; transition: none; }
@keyframes hr-sheen { 0%, 55% { transform: skewX(-20deg) translateX(0); } 100% { transform: skewX(-20deg) translateX(430%); } }
@keyframes hr-btn-glow { 0%, 100% { box-shadow: var(--shadow-sm); } 50% { box-shadow: 0 4px 22px -2px rgba(255, 255, 255, .85); } }

@media (prefers-reduced-motion: reduce) {
	.wave__layer, .js .section-head h2::after, .mascot, .js .hero__mascot, .hero .btn--white, .hero .btn--white::after, .cta-band .btn--white, .cta-band .btn--white::after, .page-hero--gradient .btn--white, .page-hero--gradient .btn--white::after { animation: none !important; }
	.hero__specks, .hero__ring, .hero__glow { display: none; }
}

/* Header buttons menu: any number of buttons; an odd one out spans the row on mobile */
.site-header__actions .btn:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 1024px) { .site-header__actions .btn:last-child:nth-child(odd) { grid-column: auto; } }

/* Feature pages with a real product screenshot */
.feature-shot .mock__window { box-shadow: var(--shadow-lg); }
@media (min-width: 900px) { .split--shot { grid-template-columns: .8fr 1.3fr; gap: 48px; } }

/* Narrow product screenshot (a menu crop): show it at its natural size, centred in the window */
.feature-shot--menu { max-width: 420px; margin-inline: auto; }
.feature-shot--menu .hero-shot__frame { display: grid; place-items: center; padding: 20px; background: #FBFBFC; }
.feature-shot--menu .hero-shot__frame img { width: 100%; max-width: 317px; height: auto; }