/* =============================================================
   Manta X - Service page visual elements
   One inline SVG per service page, animated via CSS + GSAP.
   ============================================================= */

/* Common section + stage wrapper */
.service-visual {
  padding-block: var(--space-7) var(--space-8);
  background: var(--mx-black);
  border-bottom: 1px solid var(--mx-surface-1);
  position: relative;
  overflow: hidden;
}

.visual-stage {
  max-width: 760px;
  margin-inline: auto;
  width: 100%;
  position: relative;
}

.visual-svg {
  width: 100%;
  height: auto;
  max-height: 400px;
  display: block;
}

@media (max-width: 768px) {
  .visual-svg { max-height: 280px; }
}

/* Section connectors between stacked content-sections
   Alternating: odd = thin horizontal line, even = red dot */
.content-section + .content-section::before {
  content: '';
  display: block;
  margin-inline: auto;
  position: relative;
  top: calc(var(--space-6) * -1);
  margin-bottom: calc(var(--space-6) * -1);
}
.content-section + .content-section:nth-of-type(odd)::before {
  width: 30%;
  max-width: 280px;
  height: 1px;
  background: var(--mx-hairline);
  opacity: 0.9;
}
.content-section + .content-section:nth-of-type(even)::before {
  width: 6px;
  height: 6px;
  background: var(--mx-red);
  border-radius: 50%;
  opacity: 0.75;
}

/* Integrated content + visual split */
.content-with-visual {
  padding-block: var(--space-9);
}
.content-visual-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  grid-template-areas: "text visual";
  gap: var(--space-8);
  align-items: center;
}
.content-visual-split[data-layout="text-right"] {
  grid-template-columns: 1fr 1.05fr;
  grid-template-areas: "visual text";
}
.content-visual-split .content-text { grid-area: text; }
.content-visual-split .content-visual { grid-area: visual; }

.content-visual {
  padding-inline: var(--space-4);
}
.content-visual .visual-stage {
  max-width: 100%;
  margin: 0;
}
.content-visual .visual-svg {
  max-height: 380px;
}

@media (max-width: 900px) {
  .content-visual-split,
  .content-visual-split[data-layout="text-right"] {
    grid-template-columns: 1fr;
    grid-template-areas: "visual" "text";
    gap: var(--space-6);
  }
  .content-visual {
    padding-inline: 0;
  }
  .content-visual .visual-svg {
    max-height: 260px;
  }
}

/* =============================================================
   1. WEB DESIGN - Browser wireframe to polished layout
   ============================================================= */
[data-visual="web-design"] .line {
  transform-origin: left center;
  transform: scaleX(0);
  animation: wd-line-appear 4.5s var(--ease) infinite;
}
[data-visual="web-design"] .line-1 { animation-delay: 0s; }
[data-visual="web-design"] .line-2 { animation-delay: 0.15s; }
[data-visual="web-design"] .line-3 { animation-delay: 0.3s; }
@keyframes wd-line-appear {
  0% { transform: scaleX(0); }
  15%, 55% { transform: scaleX(1); }
  65%, 100% { transform: scaleX(0); }
}
[data-visual="web-design"] .box {
  opacity: 0;
  transform-origin: center;
  transform: scale(0.92);
  animation: wd-box-appear 4.5s var(--ease) infinite;
}
[data-visual="web-design"] .box-1 { animation-delay: 0.9s; }
[data-visual="web-design"] .box-2 { animation-delay: 1.05s; }
[data-visual="web-design"] .box-3 { animation-delay: 1.2s; }
@keyframes wd-box-appear {
  0%, 25% { opacity: 0; transform: scale(0.92); }
  35%, 85% { opacity: 1; transform: scale(1); }
  95%, 100% { opacity: 0; transform: scale(0.92); }
}
[data-visual="web-design"] .cta {
  opacity: 0;
  animation: wd-cta-appear 4.5s var(--ease) infinite;
  animation-delay: 1.6s;
}
@keyframes wd-cta-appear {
  0%, 30% { opacity: 0; }
  40%, 85% { opacity: 1; }
  95%, 100% { opacity: 0; }
}

/* =============================================================
   2. SOCIAL - Orbiting platform icons
   ============================================================= */
[data-visual="social"] .orbit-outer {
  animation: soc-spin 48s linear infinite;
  transform-origin: 200px 200px;
}
[data-visual="social"] .orbit-outer > g {
  animation: soc-counterspin 48s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes soc-spin { to { transform: rotate(360deg); } }
@keyframes soc-counterspin { to { transform: rotate(-360deg); } }
[data-visual="social"] .center-pulse {
  transform-origin: center;
  transform-box: fill-box;
  animation: soc-pulse 2.4s ease-in-out infinite;
}
@keyframes soc-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: 0.8; }
}

/* =============================================================
   3. SEO / GEO - Search bar + results
   Note: SVG <g> has its own transform attribute so we use CSS
   `translate` (individual property) which composes additively.
   ============================================================= */
[data-visual="seo"] .cursor {
  animation: seo-blink 1s step-end infinite;
}
@keyframes seo-blink { 50% { opacity: 0; } }
[data-visual="seo"] .result {
  opacity: 0;
  translate: 0 10px;
  animation: seo-result-appear 0.7s var(--ease) forwards;
}
[data-visual="seo"] .result-1 { animation-delay: 0.5s; }
[data-visual="seo"] .result-2 { animation-delay: 0.85s; }
[data-visual="seo"] .result-3 { animation-delay: 1.2s; }
@keyframes seo-result-appear {
  to { opacity: 1; translate: 0 0; }
}

/* =============================================================
   4. PAID MEDIA - Rising bar chart (GSAP-driven)
   GSAP.set handles initial scale + transform-origin to
   work reliably on SVG <rect> elements.
   ============================================================= */
[data-visual="paid-media"] .bar {
  /* Initial state applied via GSAP for reliable SVG transform handling */
}

/* =============================================================
   5. BRAND - Colour swatches fan out (GSAP-driven)
   ============================================================= */
[data-visual="brand"] .swatch {
  opacity: 0;
}
[data-visual="brand"] .type-sample,
[data-visual="brand"] .logo-mark-group {
  opacity: 0.35;
  animation: brand-glow 4s ease-in-out infinite;
}
@keyframes brand-glow {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* =============================================================
   6. CONTENT - Cascading content cards (GSAP-driven)
   ============================================================= */
[data-visual="content"] .content-card {
  opacity: 0;
  transform: translateY(14px);
}

/* =============================================================
   7. DATA - Dashboard with counters + line chart
   ============================================================= */
[data-visual="data"] .chart-line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
[data-visual="data"] .chart-dot {
  opacity: 0;
}
[data-visual="data"] .donut-arc {
  stroke-dasharray: 0 250;
}

/* =============================================================
   8. AI AUTOMATION - Circuit / neural network
   ============================================================= */
[data-visual="ai-automation"] .node {
  transform-origin: center;
  transform-box: fill-box;
}
[data-visual="ai-automation"] .node-1 { animation: ai-node-pulse 3s ease-in-out infinite 0.0s; }
[data-visual="ai-automation"] .node-2 { animation: ai-node-pulse 3s ease-in-out infinite 0.3s; }
[data-visual="ai-automation"] .node-3 { animation: ai-node-pulse 3s ease-in-out infinite 0.6s; }
[data-visual="ai-automation"] .node-4 { animation: ai-node-pulse 3s ease-in-out infinite 0.9s; }
[data-visual="ai-automation"] .node-5 { animation: ai-node-pulse 3s ease-in-out infinite 1.2s; }
[data-visual="ai-automation"] .node-6 { animation: ai-node-pulse 3s ease-in-out infinite 1.5s; }
[data-visual="ai-automation"] .node-hub {
  animation: ai-hub-pulse 2.2s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes ai-node-pulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}
@keyframes ai-hub-pulse {
  0%, 100% { transform: scale(1); filter: none; }
  50% { transform: scale(1.18); }
}
[data-visual="ai-automation"] .signal {
  stroke-dasharray: 6 6;
  animation: ai-signal 2s linear infinite;
}
@keyframes ai-signal {
  to { stroke-dashoffset: -12; }
}

/* Reduced motion respects user preference */
@media (prefers-reduced-motion: reduce) {
  [data-visual] * {
    animation: none !important;
    transition: none !important;
  }
}