/* ============================================
   SCROLL EXPERIENCE — Premium Site-Wide Motion
   AOS + GSAP · Glass visuals · Section flow
   ============================================ */

/* --- Section scroll states --- */
.section--scroll {
  position: relative;
  overflow: hidden;
}

.section--scroll::before {
  content: '';
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.06) 0%, transparent 70%);
  top: -120px;
  right: -120px;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 1s ease, transform 1.2s ease;
}

.section--scroll.is-inview::before {
  opacity: 1;
  transform: scale(1);
}

.section--scroll .section__header {
  will-change: transform, opacity;
}

/* --- Premium visual shell (shared with HIW quality) --- */
.premium-visual {
  position: relative;
  border-radius: 24px !important;
  overflow: hidden;
}

.premium-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 24px;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  z-index: 5;
}

.premium-visual__particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.premium-visual__particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(37, 99, 235, 0.35);
}

.premium-visual__glow {
  position: absolute;
  width: 60%;
  height: 60%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(37, 99, 235, 0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  animation: sxGlowPulse 6s ease-in-out infinite;
}

/* --- Explain visuals upgrade --- */
.explain-visual.premium-visual {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 24px 64px rgba(37, 99, 235, 0.1), 0 0 0 1px rgba(37, 99, 235, 0.05) !important;
  padding: 0 !important;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.6s ease;
}

.explain-visual.premium-visual.is-visual-active {
  box-shadow: 0 32px 80px rgba(37, 99, 235, 0.16), 0 0 0 1px rgba(37, 99, 235, 0.1) !important;
  transform: translateY(-4px);
}

.explain-visual.premium-visual .explain-visual__chrome {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(37, 99, 235, 0.08);
  background: rgba(255, 255, 255, 0.5);
  position: relative;
  z-index: 3;
}

.explain-visual__chrome-dots {
  display: flex;
  gap: 6px;
}

.explain-visual__chrome-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.explain-visual__chrome-dots span:nth-child(1) { background: #EF4444; }
.explain-visual__chrome-dots span:nth-child(2) { background: #F59E0B; }
.explain-visual__chrome-dots span:nth-child(3) { background: #22C55E; }

.explain-visual__chrome-title {
  flex: 1;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}

.explain-visual__chrome-status {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.explain-visual__chrome-status i {
  font-size: 0.4rem;
  animation: sxBlink 1.5s ease-in-out infinite;
}

.explain-visual.premium-visual .explain-visual__body {
  padding: 24px;
  position: relative;
  z-index: 2;
}

.explain-visual--dark.premium-visual {
  background: rgba(15, 23, 42, 0.92) !important;
  border-color: rgba(59, 130, 246, 0.2) !important;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35), 0 0 40px rgba(37, 99, 235, 0.08) !important;
}

.explain-visual--dark.premium-visual .explain-visual__chrome {
  background: rgba(255, 255, 255, 0.04);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.explain-visual--dark.premium-visual .explain-visual__chrome-title {
  color: rgba(255, 255, 255, 0.5);
}

.explain-visual.premium-visual .explain-visual__stage {
  background: linear-gradient(160deg, rgba(238, 244, 255, 0.5) 0%, rgba(243, 240, 255, 0.3) 100%);
  border: 1px solid rgba(37, 99, 235, 0.08);
  border-radius: 16px;
  min-height: 220px;
}

.explain-visual--dark.premium-visual .explain-visual__stage {
  background: linear-gradient(160deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.6) 100%);
}

/* Scene micro-animations */
.explain-scene--active .scene-lead-in {
  animation: sxPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.explain-scene--active .scene-lead-profile {
  animation: sxSlideIn 0.5s ease forwards 0.2s;
  opacity: 0;
}

.explain-scene--active .scene-tag {
  animation: sxFadeUp 0.4s ease forwards 0.4s;
  opacity: 0;
}

.explain-scene--active .scene-score-result strong {
  animation: sxCountPulse 0.6s ease forwards 0.5s;
}

.explain-scene--active .scene-auto-row {
  animation: sxRowIn 0.45s ease forwards;
  opacity: 0;
  transform: translateX(-16px);
}

.explain-scene--active .scene-auto-row:nth-child(2) { animation-delay: 0.15s; }
.explain-scene--active .scene-auto-row:nth-child(3) { animation-delay: 0.3s; }
.explain-scene--active .scene-auto-row:nth-child(4) { animation-delay: 0.45s; }

.explain-scene--active .scene-deal-card--moving {
  animation: sxDealMove 2s ease-in-out infinite;
}

.explain-scene--active .scene-chart-line,
.explain-scene--active .dyn-ai-panel__graph path:first-child {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: sxDrawLine 2s ease forwards 0.3s;
}

.explain-scene--active .scene-funnel-step:not(.scene-funnel-step--dim) {
  animation: sxFunnelGlow 1.5s ease-in-out infinite;
}

.explain-scene--active .scene-roi-ring {
  animation: sxRoiSpin 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.explain-scene--active .eco-flow__node.is-active {
  animation: sxNodePulse 1.2s ease-in-out infinite;
}

.explain-scene--active .eco-flow__pulse {
  animation: sxFlowPulse 1s ease-in-out infinite;
}

/* --- Dyn visuals upgrade --- */
.dyn-visual.premium-visual {
  max-width: 640px;
}

.dyn-visual.premium-visual .dyn-visual__frame {
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 24px 64px rgba(37, 99, 235, 0.12) !important;
  padding: 24px !important;
  transition: transform 0.6s ease, box-shadow 0.6s ease;
  position: relative;
  z-index: 2;
}

.dyn-visual.premium-visual.is-visual-active .dyn-visual__frame {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 32px 80px rgba(37, 99, 235, 0.18) !important;
}

.dyn-visual.premium-visual .dyn-visual__frame--dark {
  background: rgba(15, 23, 42, 0.9) !important;
  border-color: rgba(59, 130, 246, 0.25) !important;
}

.dyn-visual.premium-visual .dyn-hub__node {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.dyn-visual.is-visual-active .dyn-hub__node {
  animation: sxHubGlow 2.5s ease-in-out infinite;
}

.dyn-visual.is-visual-active .dyn-hub__node--1 { animation-delay: 0s; }
.dyn-visual.is-visual-active .dyn-hub__node--2 { animation-delay: 0.4s; }
.dyn-visual.is-visual-active .dyn-hub__node--3 { animation-delay: 0.8s; }
.dyn-visual.is-visual-active .dyn-hub__node--4 { animation-delay: 1.2s; }
.dyn-visual.is-visual-active .dyn-hub__node--5 { animation-delay: 1.6s; }

.dyn-visual.is-visual-active .dyn-hub__lines path {
  stroke: url(#sxHubGrad);
  stroke-width: 2;
  animation: sxFlowDash 1.5s linear infinite;
}

.dyn-results-viz__bar::before {
  height: 0 !important;
  transition: height 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.dyn-visual.is-visual-active .dyn-results-viz__bar::before {
  height: var(--h, 50%) !important;
}

.dyn-visual.is-visual-active .dyn-results-viz__bar:nth-child(1)::before { transition-delay: 0.1s; }
.dyn-visual.is-visual-active .dyn-results-viz__bar:nth-child(2)::before { transition-delay: 0.25s; }
.dyn-visual.is-visual-active .dyn-results-viz__bar:nth-child(3)::before { transition-delay: 0.4s; }
.dyn-visual.is-visual-active .dyn-results-viz__bar:nth-child(4)::before { transition-delay: 0.55s; }

.dyn-visual.is-visual-active .dyn-results-viz__badge {
  animation: sxBadgeBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards 0.8s;
  opacity: 0;
}

.dyn-visual.is-visual-active .dyn-ai-panel__metric strong {
  animation: sxMetricCount 1.5s ease forwards;
}

.dyn-visual.is-visual-active .dyn-ai-panel__pulse {
  animation: sxAiPulse 2s ease-in-out infinite;
}

/* --- Trusted marquee --- */
.trusted {
  position: relative;
}

.trusted__slider {
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.trusted__logo {
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.trusted.is-inview .trusted__logo {
  opacity: 0.7;
}

.trusted__logo:hover {
  opacity: 1 !important;
  transform: scale(1.05);
}

/* --- Cards scroll hover lift --- */
.glass-card,
.bento-card,
.ai-card,
.industry-card,
.result-card,
.pricing-card,
.testimonial-card {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
}

.section--scroll.is-inview .glass-card:hover,
.section--scroll.is-inview .bento-card:hover,
.section--scroll.is-inview .ai-card:hover,
.section--scroll.is-inview .industry-card:hover {
  transform: translateY(-6px);
}

/* --- Feature tabs preview animate --- */
.feature-tabs__panel.active .preview-card__row,
.feature-tabs__panel.active .kanban-card,
.feature-tabs__panel.active .flow-node {
  animation: sxFadeUp 0.5s ease forwards;
  opacity: 0;
}

.feature-tabs__panel.active .preview-card__row:nth-child(2) { animation-delay: 0.1s; }
.feature-tabs__panel.active .preview-card__row:nth-child(3) { animation-delay: 0.2s; }

/* --- Bento SEO bars animate on scroll --- */
.section--scroll.is-inview .seo-progress {
  animation: sxBarGrow 1.5s ease forwards;
}

/* --- Ecosystem card illustrations --- */
.ecosystem__illustration svg {
  transition: transform 0.5s ease;
}

.ecosystem__card:hover .ecosystem__illustration svg {
  transform: scale(1.08) rotate(2deg);
}

.section--scroll.is-inview .ecosystem__illustration svg circle,
.section--scroll.is-inview .ecosystem__illustration svg path {
  animation: sxIllustrateIn 1.2s ease forwards;
}

.ecosystem__card:nth-child(2) .ecosystem__illustration svg path { animation-delay: 0.1s; }
.ecosystem__card:nth-child(3) .ecosystem__illustration svg path { animation-delay: 0.2s; }
.ecosystem__card:nth-child(4) .ecosystem__illustration svg path { animation-delay: 0.3s; }
.ecosystem__card:nth-child(5) .ecosystem__illustration svg path { animation-delay: 0.4s; }

@keyframes sxIllustrateIn {
  from { opacity: 0.3; stroke-dashoffset: 40; }
  to { opacity: 1; stroke-dashoffset: 0; }
}

/* --- Testimonials --- */
.testimonials__slider {
  padding-bottom: 48px;
}

.testimonial-card {
  position: relative;
  overflow: hidden;
}

.testimonial-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s ease;
}

.testimonials.is-inview .testimonial-card::before {
  transform: scaleX(1);
}

/* --- FAQ stagger --- */
.faq__item {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.faq__item:hover {
  border-color: rgba(37, 99, 235, 0.2);
  box-shadow: 0 4px 20px rgba(37, 99, 235, 0.06);
}

/* --- CTA section scroll --- */
.cta-section {
  position: relative;
  overflow: hidden;
}

.cta-section.is-inview .cta-section__glow {
  animation: sxCtaGlow 4s ease-in-out infinite;
}

/* --- Footer reveal --- */
.footer__grid > * {
  transition: transform 0.5s ease, opacity 0.5s ease;
}

/* --- Hero scroll parallax --- */
.hero.is-leaving .hero__visual {
  transform: translateY(40px);
  opacity: 0.6;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* --- Keyframes --- */
@keyframes sxGlowPulse {
  0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}

@keyframes sxBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes sxPopIn {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes sxSlideIn {
  from { transform: translateX(-20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes sxFadeUp {
  from { transform: translateY(12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes sxRowIn {
  to { transform: translateX(0); opacity: 1; }
}

@keyframes sxCountPulse {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes sxDealMove {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(8px); }
}

@keyframes sxDrawLine {
  to { stroke-dashoffset: 0; }
}

@keyframes sxFunnelGlow {
  0%, 100% { box-shadow: 0 0 0 rgba(37, 99, 235, 0); }
  50% { box-shadow: 0 0 24px rgba(37, 99, 235, 0.25); }
}

@keyframes sxRoiSpin {
  from { transform: scale(0.6) rotate(-20deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes sxNodePulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 rgba(37, 99, 235, 0); }
  50% { transform: scale(1.08); box-shadow: 0 0 20px rgba(37, 99, 235, 0.3); }
}

@keyframes sxFlowPulse {
  0% { transform: translateX(0); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

@keyframes sxHubGlow {
  0%, 100% { box-shadow: var(--shadow-sm); }
  50% { box-shadow: 0 6px 24px rgba(37, 99, 235, 0.25); }
}

@keyframes sxFlowDash {
  to { stroke-dashoffset: -20; }
}

@keyframes sxBadgeBounce {
  to { opacity: 1; transform: scale(1); }
}

@keyframes sxMetricCount {
  from { opacity: 0.5; }
  to { opacity: 1; }
}

@keyframes sxAiPulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.5); opacity: 0; }
}

@keyframes sxBarGrow {
  from { width: 0 !important; }
}

@keyframes sxCtaGlow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 0.9; transform: scale(1.05); }
}

@media (prefers-reduced-motion: reduce) {
  .explain-scene--active *,
  .dyn-visual.is-visual-active *,
  .section--scroll::before {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .dyn-results-viz__bar::before {
    height: var(--h, 50%) !important;
  }
}