/*
 * Homepage-only styles (front-page.php).
 * Converted from design-source/Marketing Mockups/Atarim Homepage v3.dc.html.
 * Inline styles in the template are the spec; this file carries the
 * keyframes, hover states and the shift-bridge streaming gate.
 */

/* ===== The shift bridge (yes-man vs trusted advisor) =====
 * Items hold hidden until #shiftBridge scrolls into view; home.js adds .play
 * and the cascade runs off inline animation-delay values. */
@keyframes shiftPop {
	from { opacity: 0; transform: translateY(12px) scale(.97); }
	to { opacity: 1; transform: none; }
}
@keyframes shiftWait {
	0%, 100% { opacity: 0.45; }
	50% { opacity: 0.9; }
}
@keyframes shiftPulse {
	0% { box-shadow: 0 0 0 0 rgba(62, 214, 150, 0.55); }
	70% { box-shadow: 0 0 0 7px rgba(62, 214, 150, 0); }
	100% { box-shadow: 0 0 0 0 rgba(62, 214, 150, 0); }
}
@keyframes shiftDot {
	0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
	40% { transform: translateY(-3px); opacity: 1; }
}
#shiftBridge .shift-pop { opacity: 0; }
#shiftBridge.play .shift-pop { animation: shiftPop .55s cubic-bezier(.22, .61, .21, 1) both; }
#shiftBridge .shift-typing { opacity: 0; }
#shiftBridge.play .shift-typing { animation: shiftPop .55s cubic-bezier(.22, .61, .21, 1) 1.75s both, shiftWait 2.4s ease-in-out 2.5s infinite; }
.shift-dot { width: 6px; height: 6px; border-radius: 999px; background: #C8BCE8; animation: shiftDot 1.2s ease-in-out infinite; }
.shift-live-dot { width: 8px; height: 8px; border-radius: 999px; background: #3ED696; animation: shiftPulse 2s ease-out infinite; }
@media (prefers-reduced-motion: reduce) {
	#shiftBridge .shift-pop, #shiftBridge .shift-typing { opacity: 1 !important; }
}

/* ===== Hover states (converted from style-hover) ===== */
.hero-field-btn { transition: background .16s ease; }
.hero-field-btn:hover { background: #8a7af5 !important; }
.undo-chip { transition: border-color .16s ease, color .16s ease; }
.undo-chip:hover { border-color: #6D5DF3 !important; color: #6D5DF3 !important; }
.trust-link { transition: color .16s ease; }
.trust-link:hover { color: #C8BCE8 !important; }
.btn-outline-violet { transition: background .16s ease, color .16s ease; }
.btn-outline-violet:hover { background: #6D5DF3; color: #fff; }
.btn-ghost-dark { transition: border-color .16s ease, color .16s ease; }
.btn-ghost-dark:hover { border-color: #9385FF !important; color: #9385FF !important; }

/* ===== Smooth in-page scroll for the conversion CTAs (href="#top") ===== */
html { scroll-behavior: smooth; }

/* The SOP-flowchart tooltip styles (.wf-step/.wf-tip + errFloat) live in
 * site.css now (shared by the homepage, the Trust page, and any future page).
 * The library-card hover (.wf-card) stays here: it is homepage-only. */
.wf-card { transition: transform .18s ease, box-shadow .18s ease; }
.wf-card:hover { transform: translateY(-3px); box-shadow: 0 26px 52px -26px rgba(22, 4, 46, 0.32); }

/* ===== In-page violet CTA pills (converted from style-hover) ===== */
.btn-violet-cta { transition: background .16s ease, transform .16s ease; }
.btn-violet-cta:hover { background: #8a7af5 !important; transform: translateY(-2px); }

/* ============================================================
 * RESPONSIVE LAYER (homepage). Desktop >=1280px is the inline spec and is
 * left untouched; everything below is max-width overrides using !important to
 * beat the inline styles, keyed to class hooks added in front-page.php.
 * Breakpoints: 1279 (laptop), 1023 (tablet), 767 (mobile), with small-phone
 * tweaks below. See docs/theme-guide.md and the design system Responsiveness
 * section.
 * ============================================================ */

/* Side padding shrinks as the viewport narrows. */
@media (max-width: 1023px) {
	.atarim-page main > header, .atarim-page main > section { padding-left: 24px !important; padding-right: 24px !important; }
}
@media (max-width: 767px) {
	.atarim-page main > header, .atarim-page main > section { padding-left: 16px !important; padding-right: 16px !important; }
	#top { padding-top: 108px !important; padding-bottom: 84px !important; }
}

/* Hero review field */
@media (max-width: 639px) { .hp-field { width: 100% !important; } }
@media (max-width: 430px) {
	.hp-field { flex-wrap: wrap; }
	.hp-field input, .hp-field button { width: 100%; }
}

/* Two-column "split" sections stack below the tablet breakpoint. */
@media (max-width: 1023px) {
	.hp-split { grid-template-columns: 1fr !important; gap: 40px !important; }
	/* the why-section visual cards carry decorative 56px side offsets */
	#why [style*="margin-left:56px"], #why [style*="margin-right:56px"] { margin-left: 0 !important; margin-right: 0 !important; }
}

/* Workflows: generic chatbot vs the SOP card. */
@media (max-width: 1023px) {
	.hp-compare { grid-template-columns: 1fr !important; }
	.hp-compare > div:first-child { margin-top: 0 !important; }
}

/* Masonries: the workflow library (columns:3) and the reviews wall (column-count:3). */
@media (max-width: 1023px) { .hp-masonry { columns: 2 !important; column-count: 2 !important; } }
@media (max-width: 639px) { .hp-masonry { columns: 1 !important; column-count: 1 !important; } }

/* Tile grids. */
@media (max-width: 1023px) { .hp-tiles-4 { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 539px) { .hp-tiles-4 { grid-template-columns: 1fr !important; } }
@media (max-width: 767px) { .hp-tiles-3 { grid-template-columns: 1fr !important; } }

/* Seam-straddle tiles (pillars, trust): drop the negative offset on mobile so
 * they don't collide with the dark section above; give the white sections that
 * relied on the straddle real top padding. */
@media (max-width: 767px) {
	.hp-straddle { top: 0 !important; margin-bottom: 24px !important; }
	#work, #trust { padding-top: 40px !important; }
}

/* The shift bridge stacks; the connector arrow turns to point down. */
@media (max-width: 767px) {
	.hp-shift { grid-template-columns: 1fr !important; gap: 22px !important; }
	.hp-shift-arrow span:first-child { transform: rotate(90deg); }
}

/* The self-serving CTA overlaps the mockup by -70px on desktop; relax once the
 * mockup is scaled below desktop. */
@media (max-width: 1279px) { .hp-cta-tight { margin-top: 18px !important; } }

/* Money mockup: zero the desktop overlap margins on its clip box once scaled. */
@media (max-width: 1279px) { #money .mk-fit > div { margin-top: 0 !important; margin-bottom: 0 !important; } }

/* ===== Hero capture form (Gravity Forms id 1, embedded in the hero) =====
 * The form records entries in Gravity Forms; here it is restyled back to the
 * original hero pill: a white rounded field with the URL input flush-left and
 * the purple submit button inline on the right. Scoped to .hp-gform so it never
 * leaks to any other Gravity Form on the site. */
.hp-gform .gform_wrapper { margin: 0; }
.hp-gform .gform_heading,
.hp-gform .gform_required_legend { display: none !important; }

.hp-gform form {
	display: flex; align-items: center; gap: 10px;
	background: #fff; border-radius: 24px; corner-shape: squircle; padding: 8px 8px 8px 20px;
	box-shadow: 0 16px 40px rgba(0,0,0,0.35); margin: 0;
}
.hp-gform .gform-body, .hp-gform .gform_body { flex: 1; min-width: 0; margin: 0; }
.hp-gform .gform_fields { display: block !important; grid-template-columns: none !important; grid-gap: 0 !important; }
.hp-gform .gfield { margin: 0 !important; padding: 0 !important; }
.hp-gform .gfield_label,
.hp-gform legend.gfield_label {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.hp-gform .ginput_container { margin: 0 !important; }
.hp-gform .ginput_container input {
	width: 100%; border: none !important; outline: none; background: transparent;
	font-family: inherit; font-size: 16px; color: #16042E; padding: 0;
	text-align: left; box-shadow: none !important; height: auto;
}
.hp-gform .ginput_container input::placeholder { color: #6b6785; }

.hp-gform .gform_footer { margin: 0 !important; padding: 0 !important; display: flex; width: auto; }
.hp-gform .gform_footer .gform_button,
.hp-gform input[type="submit"].gform_button {
	margin: 0 !important; width: auto !important;
	padding: 13px 22px !important; border-radius: 24px !important; corner-shape: squircle; border: none !important;
	background: #6D5DF3 !important; color: #fff !important;
	font-family: inherit !important; font-size: 15px !important; font-weight: 700 !important;
	cursor: pointer; white-space: nowrap; transition: background .16s ease;
}
.hp-gform .gform_footer .gform_button:hover,
.hp-gform input[type="submit"].gform_button:hover { background: #8a7af5 !important; }
.hp-gform .gform_ajax_spinner { margin-left: 8px; }

/* Validation + confirmation sit on the dark hero, so keep them legible. */
.hp-gform .gform_confirmation_message { color: #fff; font-size: 16px; line-height: 1.5; }
.hp-gform .validation_message,
.hp-gform .gform_validation_errors {
	color: #fff; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
	border-radius: 12px; padding: 8px 12px; margin-top: 10px; font-size: 13px; text-align: left;
}

/* Mobile: let the pill wrap and go full width. */
@media (max-width: 639px) {
	.hp-gform form { flex-wrap: wrap; width: 100%; }
	.hp-gform .gform_footer .gform_button { width: 100%; }
}


/* ===== Hero capture · tablet + mobile variant (Gravity Forms id 4: email + website) =====
 * Desktop shows the website-only pill (id 1, .hp-gform-desktop); at <=1023px it is
 * hidden and this stacked white card takes over (Vito's request, task #3). */
.hp-gform-desktop { display: block; }
.hp-gform-mobile { display: none; }
@media (max-width: 1023px) {
	.hp-gform-desktop { display: none !important; }
	.hp-gform-mobile { display: block !important; }
}

.hp-gform-m .gform_wrapper { margin: 0; }
.hp-gform-m .gform_heading,
.hp-gform-m .gform_required_legend { display: none !important; }
.hp-gform-m form {
	display: block; margin: 0;
	background: #fff; border-radius: 24px; corner-shape: squircle; padding: 14px;
	box-shadow: 0 16px 40px rgba(0,0,0,0.35);
}
.hp-gform-m .gform-body, .hp-gform-m .gform_body { margin: 0; }
.hp-gform-m .gform_fields {
	display: flex !important; flex-direction: column; gap: 10px;
	grid-template-columns: none !important; grid-gap: 0 !important;
}
.hp-gform-m .gfield { margin: 0 !important; padding: 0 !important; }
.hp-gform-m .gfield_label,
.hp-gform-m legend.gfield_label {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.hp-gform-m .ginput_container { margin: 0 !important; }
.hp-gform-m .ginput_container input {
	width: 100%; font-family: inherit; font-size: 16px; color: #16042E;
	background: #faf9fe; border: 1px solid rgba(26,8,48,0.16) !important;
	border-radius: 13px; corner-shape: squircle; padding: 13px 15px;
	outline: none; box-shadow: none !important;
	transition: border-color .15s ease, background .15s ease;
}
.hp-gform-m .ginput_container input::placeholder { color: #6b6785; }
.hp-gform-m .ginput_container input:focus { border-color: #6D5DF3 !important; background: #fff !important; }
.hp-gform-m .gform_footer { margin: 10px 0 0 !important; padding: 0 !important; }
.hp-gform-m .gform_footer .gform_button,
.hp-gform-m input[type="submit"].gform_button {
	width: 100% !important; margin: 0 !important;
	padding: 14px 22px !important; border-radius: 16px !important; corner-shape: squircle; border: none !important;
	background: #6D5DF3 !important; color: #fff !important;
	font-family: inherit !important; font-size: 15px !important; font-weight: 700 !important;
	cursor: pointer; transition: background .16s ease;
}
.hp-gform-m .gform_footer .gform_button:hover { background: #8a7af5 !important; }
.hp-gform-m .gform_confirmation_message { color: #fff; font-size: 16px; line-height: 1.5; }
.hp-gform-m .validation_message,
.hp-gform-m .gform_validation_errors {
	color: #fff; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
	border-radius: 12px; padding: 8px 12px; margin-top: 10px; font-size: 13px; text-align: left;
}