/**
 * AskSpot homepage — v3 motion layer.
 *
 * Additive polish over the existing design-system homepage: scroll reveal,
 * animated counters (JS), aurora glow on dark sections and a CTA shimmer.
 * Behaviours are attached in assets/js/home-v3.js
 * by hooking the existing ask-* classes, so the editable page content is left
 * untouched. Everything is gated behind prefers-reduced-motion.
 */

/* scroll reveal ----------------------------------------------------------- */
.ask-rv {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
	will-change: opacity, transform;
}
.ask-rv.is-in { opacity: 1; transform: none; }

/* aurora glow injected into dark (.ask-navy) sections --------------------- */
@keyframes askAura {
	0%   { transform: translate(0, 0) scale(1); }
	33%  { transform: translate(40px, -28px) scale(1.18); }
	66%  { transform: translate(-32px, 24px) scale(0.92); }
	100% { transform: translate(0, 0) scale(1); }
}
.ask-aura {
	position: absolute;
	width: 560px; height: 560px;
	border-radius: 50%;
	filter: blur(60px);
	background: radial-gradient(circle, rgba(39, 102, 240, 0.34), rgba(39, 102, 240, 0) 70%);
	pointer-events: none;
	z-index: 0;
	will-change: transform;
	animation: askAura 20s ease-in-out infinite;
}
.ask-navy { position: relative; overflow: hidden; }
.ask-navy > :not(.ask-aura) { position: relative; z-index: 1; }

/* CTA shimmer sweep ------------------------------------------------------- */
.ask-ctablue { position: relative; overflow: hidden; }
@keyframes askShim {
	0%        { transform: translateX(-160%) skewX(-18deg); }
	55%, 100% { transform: translateX(260%) skewX(-18deg); }
}
.ask-shim {
	position: absolute; top: 0; bottom: 0; width: 36%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
	animation: askShim 4.6s ease-in-out infinite;
	pointer-events: none; z-index: 0;
}
.ask-ctablue > * { position: relative; z-index: 1; }

/* data-flow pulse: connector dots between step cards fire in sequence,
   and marked SVG accents (.ask-sec-pulse) breathe softly ------------------ */
@keyframes askFlowDot {
	0%, 100% { opacity: 0.25; transform: scale(1); }
	50%      { opacity: 1; transform: scale(1.3); }
}
.ask-stepsrow .ask-steps__link span { animation: askFlowDot 1.8s ease-in-out infinite; }
.ask-stepsrow .ask-steps__link span:nth-child(2) { animation-delay: 0.3s; }
.ask-stepsrow .ask-steps__link span:nth-child(3) { animation-delay: 0.6s; }
@keyframes askSecPulse {
	0%, 100% { opacity: 0.3; }
	50%      { opacity: 1; }
}
.ask-sec-pulse { animation: askSecPulse 3.6s ease-in-out infinite; }

/* reduced motion: freeze every looping decoration ------------------------- */
@media (prefers-reduced-motion: reduce) {
	.ask-rv { opacity: 1 !important; transform: none !important; transition: none !important; }
	.ask-aura, .ask-shim, .ask-stepsrow .ask-steps__link span, .ask-sec-pulse { animation: none !important; }
}

/* =========================================================================
   Editable core-block bridge
   The homepage sections are authored as editable core blocks (group /
   heading / paragraph / list / buttons / image) so every text is editable
   in WordPress. These rules make those blocks render pixel-identically to
   the v3 design and keep the JS hooks (tabs/sliders) working by class.
   ========================================================================= */

/* Tabs: panels are .ask-panel core groups, toggled by askspot.js (by index) */
.ask-tabwrap .ask-panel { display: none !important; }
.ask-tabwrap .ask-panel.is-active { display: grid !important; }
.ask-tabwrap .ask-tabs.wp-block-group { margin-top: 2.5rem; }
.ask-tabwrap .ask-tab { margin: 0; }

/* Hero background atmosphere (v3.1 reference: .hp-bg-grid + .hp-bg-light) */
@keyframes hpGrid { from { background-position: 0 0; } to { background-position: 30px 30px; } }
@keyframes hpBgFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-2.5%, 3.5%) scale(1.08); } }
.ask-hero { position: relative; overflow: hidden; }
.ask-hero::before {
	content: "";
	position: absolute;
	inset: -40px;
	z-index: 0;
	background-image: radial-gradient(#DCE3ED 1.2px, transparent 1.2px);
	background-size: 30px 30px;
	-webkit-mask-image: radial-gradient(125% 115% at 80% 16%, #000 0%, #000 40%, transparent 82%);
	mask-image: radial-gradient(125% 115% at 80% 16%, #000 0%, #000 40%, transparent 82%);
	animation: hpGrid 16s linear infinite;
	pointer-events: none;
}
.ask-hero::after {
	content: "";
	position: absolute;
	z-index: 0;
	top: -220px;
	right: -150px;
	width: 680px;
	height: 680px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(96, 116, 150, 0.13), rgba(96, 116, 150, 0) 72%);
	animation: hpBgFloat 20s ease-in-out infinite;
	pointer-events: none;
}
.ask-hero > * { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) { .ask-hero::before, .ask-hero::after { animation: none; } }

/* Hero: button row + KPI trio (compact inline row with hairline dividers) */
.ask-hero__btns { gap: 14px; }
.ask-hero__btns.wp-block-buttons { margin-top: 34px; }
.ask-hero .ask-btn-arrow .wp-block-button__link::after { content: " →"; }
.ask-hero .wp-block-button.is-style-soft .wp-block-button__link { background: #EEF1F5; color: var(--wp--preset--color--ink, #313A46); }
.ask-hero .wp-block-button.is-style-soft .wp-block-button__link:hover { background: #E3E8F0; color: var(--wp--preset--color--blue, #2766F0); }
.ask-hero__kpis.wp-block-group { display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 0; margin-top: 44px; }
.ask-hero__kpis > .wp-block-group { padding: 0 22px; margin-block-start: 0; }
.ask-hero__kpis > .wp-block-group:first-child { padding-left: 0; }
.ask-hero__kpis > .wp-block-group:last-child { padding-right: 0; }
.ask-hero__kpis > .wp-block-group + .wp-block-group { border-left: 1px solid #E4E8EF; }
.ask-hero__kpis .ask-kpi__num { font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: clamp(26px, 2.6vw, 36px); letter-spacing: -0.035em; line-height: 1; margin: 0; color: var(--wp--preset--color--ink, #313A46); }
.ask-hero__kpis > .wp-block-group:first-child .ask-kpi__num { color: var(--wp--preset--color--blue, #2766F0); }
.ask-hero__kpis .ask-kpi__label { font-size: 12.5px; font-weight: 500; color: #5E6A7A; margin: 9px 0 0; white-space: nowrap; }
.ask-hero__kpis .ask-kpi__label .ask-stars { color: var(--wp--preset--color--warning, #F5A623); font-size: 11px; letter-spacing: 1.5px; margin-right: 6px; }
@media (max-width: 540px) { .ask-hero__kpis.wp-block-group { flex-wrap: wrap; gap: 18px 0; } }
@media (max-width: 781px) { .ask-hero .ask-widget { margin-inline: auto; } }

/* Final CTA buttons as core buttons (white + outline on the blue band) */
.ask-ctablue .ask-ctablue__actions { margin-top: 1.9rem; }
.ask-ctablue .ask-btn-white .wp-block-button__link { background: #fff; color: var(--wp--preset--color--blue, #2766F0); border-radius: 12px; padding: 13px 26px; font-weight: 600; }
.ask-ctablue .ask-btn-white .wp-block-button__link:hover { background: #EAF0FE; }
.ask-ctablue .ask-btn-outline .wp-block-button__link { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.55); border-radius: 12px; padding: 12px 24px; font-weight: 600; }
.ask-ctablue .ask-btn-outline .wp-block-button__link:hover { background: rgba(255,255,255,0.2); }

/* Channels (v3): funnel — channel cards converge through connectors to the hub */
.ask-chan-funnel { position: relative; max-width: 880px; margin: 44px auto 0; }
.ask-chan-grid.wp-block-group { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; justify-items: center; }
@media (max-width: 640px) { .ask-chan-grid.wp-block-group { grid-template-columns: repeat(2, 1fr); } }
.ask-chancard.wp-block-group { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 132px; background: #fff; border: 1px solid #E8ECF2; border-radius: 16px; padding: 18px 10px; box-shadow: 0 12px 26px -18px rgba(16,24,40,0.28); }
.ask-chancard > * { margin: 0; }
.ask-chancard .ask-chan-ic { width: 40px; height: 40px; border-radius: 11px; background: var(--wp--preset--color--blue-tint, #EAF0FE); display: flex; align-items: center; justify-content: center; }
.ask-chancard .ask-chan-ic svg { width: 21px; height: 21px; stroke: var(--wp--preset--color--blue, #2766F0); }
.ask-chancard p { font-size: 13px; font-weight: 600; color: #313A46; }
.ask-chan-flow { display: block; width: 100%; height: 82px; margin-top: 4px; }
.ask-chan-hub { position: relative; display: flex; flex-direction: column; align-items: center; gap: 11px; }
.ask-chan-hub__circle { position: relative; width: 82px; height: 82px; border-radius: 50%; background: var(--wp--preset--color--blue, #2766F0); display: flex; align-items: center; justify-content: center; }
.ask-chan-hub__circle img { height: 38px; }
.ask-chan-hub__label { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 15px; color: #1E2530; letter-spacing: -0.01em; }
@keyframes askChanGlow { 0%, 100% { opacity: .45; transform: translateX(-50%) scale(1); } 50% { opacity: .9; transform: translateX(-50%) scale(1.12); } }
.ask-chan-hub .hp-glow { animation: askChanGlow 5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ask-chan-hub .hp-glow { animation: none !important; } }

/* Security pillars = white cards (v3): icon in a tinted rounded square */
.ask-pillars.wp-block-group { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ask-pillars--3.wp-block-group { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .ask-pillars--3.wp-block-group { grid-template-columns: 1fr; } }
@media (max-width: 700px) { .ask-pillars.wp-block-group { grid-template-columns: 1fr; } }
.ask-pillar.wp-block-group { border-left: 0; padding: 28px; background: #fff; border: 1px solid #E8ECF2; border-radius: 16px; box-shadow: 0 8px 22px -16px rgba(16,24,40,0.25); }
.ask-pillar.wp-block-group > * { margin-top: 0; }
.ask-pillar__ic { display: inline-flex; width: 48px; height: 48px; border-radius: 13px; background: var(--wp--preset--color--blue-tint, #EAF0FE); align-items: center; justify-content: center; margin-bottom: 18px; }
.ask-pillar__ic svg { width: 24px; height: 24px; stroke: var(--wp--preset--color--blue, #2766F0); }
.ask-pillar .ask-pillar__label { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--blue, #2766F0); margin: 0 0 10px; }
.ask-pillar p { font-size: 14.5px; line-height: 1.6; color: #5E6A7A; margin: 0; }
.ask-pillar p strong { color: var(--wp--preset--color--ink, #313A46); }

/* Security section (home): EU-ring emblem + trust-chip band. Reuses
   .ask-secvis/.ask-sec-pulse and .ask-trust from the security page; scoped
   to .ask-sechome so that page keeps its own sizing. */
.ask-sechome .ask-secvis svg { width: min(300px, 74vw); height: auto; }
.ask-sechome .ask-seclink a { font-weight: 600; text-decoration: none; }
.ask-sechome .ask-seclink a:hover, .ask-sechome .ask-seclink a:focus-visible { text-decoration: underline; }
.ask-idea .ask-eyebrow { margin: 0; }
.ask-idea p:not(.ask-eyebrow) { margin: 0.8rem 0 0; }

/* Case-study slider as core blocks (geometry lives in style.css) */
.ask-cs-track.wp-block-group { display: flex; gap: 22px; }
.ask-cs-card.wp-block-group > * { margin-top: 0; }
.ask-cs-card .ask-cs-card__more { margin-top: 1.125rem; }
.ask-cs-card .ask-cs-card__more a { color: var(--as-on-dark-link, #6E9BF0); font-weight: 600; text-decoration: none; }

/* Features (v3): radial hub-and-spoke on desktop, card grid on mobile */
.ask-feat { border-top: 1px solid #E6EAF0; border-bottom: 1px solid #E6EAF0; }
.ask-radial { position: relative; max-width: 1060px; aspect-ratio: 1060 / 452; margin: 8px auto 0; }
.ask-feat-fallback { display: none !important; }
@media (max-width: 980px) {
	.ask-radial { display: none; }
	.ask-feat-fallback { display: grid !important; }
}
@keyframes askDashTravel { to { stroke-dashoffset: -260; } }
.ask-radial .hp-spark { stroke-dasharray: 22 238; stroke-linecap: round; animation: askDashTravel 2.6s linear infinite; }
@keyframes askPulseO { 0%, 100% { opacity: .45; } 50% { opacity: .85; } }
.ask-radial .hp-pulse { animation: askPulseO 4s ease-in-out infinite; }
.ask-radial .hp-node { transition: transform .2s ease, box-shadow .2s ease; }
.ask-radial .hp-node:hover { transform: translate(-50%, calc(-50% - 3px)) !important; box-shadow: 0 22px 38px -18px rgba(16,24,40,0.35) !important; }
@media (prefers-reduced-motion: reduce) { .ask-radial .hp-spark { display: none; } .ask-radial .hp-pulse { animation: none !important; } }

/* Testimonials slider as core blocks (v3: blue monogram avatar, no photos) */
.ask-tsection__track.wp-block-group { display: flex; }
.ask-tquote.wp-block-group { flex: 0 0 100%; }
.ask-tquote__author { gap: 0; }
.ask-tquote__avatar { width: 108px; height: 108px; border-radius: 50%; background: var(--wp--preset--color--blue, #2766F0); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 40px; letter-spacing: -0.02em; box-shadow: 0 16px 34px -16px rgba(39,102,240,0.5); margin: 0 0 20px; }
.ask-tquote__stars { color: var(--wp--preset--color--warning, #F5A623); letter-spacing: 3px; font-size: 14px; margin: 0 0 12px; }
.ask-tquote__name { margin: 0; }
.ask-tquote__role { margin: 4px 0 0; }

/* Homepage heading scale to match the v3 design (32–48px h2) */
.ask-main h2.wp-block-heading { font-size: clamp(30px, 3.8vw, 46px); line-height: 1.08; letter-spacing: -0.03em; }

/* Section 4 (v3): "Sprzedaje na czacie" — tabbed product slider */
.ask-prodsec .ask-prod__head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 24px; margin-bottom: 40px; }
.ask-prod__headtext { max-width: 640px; }
.ask-prod__headtext .ask-eyebrow { margin: 0 0 16px; }
.ask-prod__headtext h2 { margin: 0; }
.ask-prod__pill { display: flex; gap: 6px; background: #EEF2F7; border: 1px solid #E6EAF0; border-radius: 999px; padding: 5px; flex: none; }
.ask-prod__tab { border: none; cursor: pointer; font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 14px; padding: 10px 20px; border-radius: 999px; background: transparent; color: #5E6A7A; }
.ask-prod__tab.is-active { background: #fff; color: #1E2530; box-shadow: 0 1px 2px rgba(16,24,40,0.08); }
.ask-prod__slide { display: none; background: #fff; border: 1px solid #E6EAF0; border-left: 4px solid var(--wp--preset--color--blue, #2766F0); border-radius: 18px; overflow: hidden; }
.ask-prod__slide.is-active { display: grid; grid-template-columns: 1fr 460px; }
.ask-prod__copy { padding: 52px 56px; display: flex; flex-direction: column; justify-content: center; }
.ask-prod__copy > * { margin-top: 0; }
.ask-prod__badge { display: inline-flex; align-items: center; gap: 8px; background: var(--wp--preset--color--blue-tint, #EAF0FE); color: var(--wp--preset--color--blue-deep, #1A4FCC); font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; align-self: flex-start; margin: 0 0 20px; }
.ask-prod__copy h3 { font-family: var(--wp--preset--font-family--heading); font-size: clamp(24px, 2.4vw, 30px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; margin: 0; color: #1E2530; }
.ask-prod__copy p { font-size: 16.5px; line-height: 1.6; color: #5E6A7A; margin: 16px 0 26px; }
.ask-prod__copy .is-style-check { margin: 0; gap: 13px; }
.ask-prod__copy .is-style-check li { color: #313A46; font-size: 15.5px; }
@media (max-width: 860px) {
	.ask-prod__slide.is-active { grid-template-columns: 1fr; }
	.ask-prod__copy { padding: 32px; }
}