/* ============================================================
   CLEAR ETHER — Motion overlay
   Adds per-section three-step motion control on top of style.css
   ============================================================
   data-motion="1"  Off     — no reveal, no continuous loops
   data-motion="2"  Render  — one-shot reveal animations on entry
   data-motion="3"  Active  — render reveal + continuous loops
   ============================================================ */


/* ============================================================
   OFF (level 1) — skip the reveal entirely
   ============================================================ */
[data-motion="1"] .reveal,
[data-motion="1"] .reveal.visible {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ============================================================
   HERO
   ============================================================ */

/* Render — the .reveal class already handles fade-up via style.css.
   Stagger the four hero elements. */
.hero[data-motion="2"] .hero__tag.reveal,
.hero[data-motion="3"] .hero__tag.reveal { transition-delay: 0ms; }
.hero[data-motion="2"] .hero__title.reveal,
.hero[data-motion="3"] .hero__title.reveal { transition-delay: 120ms; }
.hero[data-motion="2"] .hero__subtitle.reveal,
.hero[data-motion="3"] .hero__subtitle.reveal { transition-delay: 240ms; }
.hero[data-motion="2"] .hero__cta.reveal,
.hero[data-motion="3"] .hero__cta.reveal { transition-delay: 360ms; }

/* Active — accent line on hero__tag extends, then a continuous pulse
   travels along it. CTA gets a slow soft glow breath. */
.hero[data-motion="3"] .hero__tag.visible::before {
  width: 48px;
  transition: width 700ms cubic-bezier(.2,.8,.2,1);
  position: relative;
  overflow: hidden;
}
.hero[data-motion="3"] .hero__cta {
  animation: cta-breathe 3.6s ease-in-out infinite;
  animation-delay: 1200ms;
}
@keyframes cta-breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(91,155,213,0); }
  50%      { box-shadow: 0 0 0 6px rgba(91,155,213,0.12), 0 8px 28px rgba(91,155,213,0.20); }
}

/* ============================================================
   SERVICES — 3-col grid, icon cards
   ============================================================ */

/* Render — service-card icon pops in with the card on reveal */
.services[data-motion="2"] .service-card .service-card__icon,
.services[data-motion="3"] .service-card .service-card__icon {
  transform: scale(0.85);
  opacity: 0;
  transition: transform 600ms cubic-bezier(.2,.8,.2,1), opacity 400ms ease;
}
.services[data-motion="2"] .service-card.visible .service-card__icon,
.services[data-motion="3"] .service-card.visible .service-card__icon {
  transform: scale(1);
  opacity: 1;
  transition-delay: 220ms;
}

/* Active — per-card looping animations (one per service icon) */

/* Card 1 · Production Operating Models — Dashboard "Dash Blink" */
.services[data-motion="3"] .services-grid .service-card:nth-child(1).visible .service-card__icon svg rect,
.services[data-motion="3"] .services-grid .service-card:nth-child(1).visible .service-card__icon svg path {
  animation: dash-blink 2.4s ease-in-out infinite;
}
@keyframes dash-blink {
  0%, 100% { stroke-dasharray: 0 40; }
  50%      { stroke-dasharray: 40 0; }
}

/* Card 2 · Localization Strategy — Globe "Translate" (characters cycle inside) */
.services[data-motion="3"] .services-grid .service-card:nth-child(2).visible .service-card__icon svg .lang text { opacity: 0; }
.services[data-motion="3"] .services-grid .service-card:nth-child(2).visible .service-card__icon svg .lang .l1 { animation: lang-show-1 4s steps(1,end) infinite; }
.services[data-motion="3"] .services-grid .service-card:nth-child(2).visible .service-card__icon svg .lang .l2 { animation: lang-show-2 4s steps(1,end) infinite; }
.services[data-motion="3"] .services-grid .service-card:nth-child(2).visible .service-card__icon svg .lang .l3 { animation: lang-show-3 4s steps(1,end) infinite; }
.services[data-motion="3"] .services-grid .service-card:nth-child(2).visible .service-card__icon svg .lang .l4 { animation: lang-show-4 4s steps(1,end) infinite; }
@keyframes lang-show-1 { 0%, 24% { opacity: 1; } 25%, 100% { opacity: 0; } }
@keyframes lang-show-2 { 0%, 24% { opacity: 0; } 25%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes lang-show-3 { 0%, 49% { opacity: 0; } 50%, 74% { opacity: 1; } 75%, 100% { opacity: 0; } }
@keyframes lang-show-4 { 0%, 74% { opacity: 0; } 75%, 99% { opacity: 1; } 100% { opacity: 0; } }

/* Card 3 · Content Operations — Layers "Fan" */
.services[data-motion="3"] .services-grid .service-card:nth-child(3).visible .service-card__icon svg {
  overflow: visible;
}
.services[data-motion="3"] .services-grid .service-card:nth-child(3).visible .service-card__icon svg .layer-top {
  transform-box: fill-box;
  transform-origin: center;
  animation: layer-up 2.8s ease-in-out infinite;
}
.services[data-motion="3"] .services-grid .service-card:nth-child(3).visible .service-card__icon svg .layer-bottom {
  transform-box: fill-box;
  transform-origin: center;
  animation: layer-down 2.8s ease-in-out infinite;
}
@keyframes layer-up   { 0%,100% { transform: translateY(0); }  50% { transform: translateY(-3px); } }
@keyframes layer-down { 0%,100% { transform: translateY(0); }  50% { transform: translateY( 3px); } }

/* Card 4 · AI Readiness — Bolt "Strike" */
.services[data-motion="3"] .services-grid .service-card:nth-child(4).visible .service-card__icon svg {
  animation: bolt-strike 2s ease-out infinite;
  transform-origin: center;
}
@keyframes bolt-strike {
  0%, 55%, 100% { opacity: 0.55; filter: none; transform: scale(1); }
  8%   { opacity: 1;   filter: drop-shadow(0 0 8px var(--color-primary));  transform: scale(1.08); }
  14%  { opacity: 0.5; }
  22%  { opacity: 1;   filter: drop-shadow(0 0 12px var(--color-primary)); transform: scale(1.10); }
  32%  { opacity: 0.6; }
}

/* Card 5 · Competitive Intelligence — Radar "Sweep" */
.services[data-motion="3"] .services-grid .service-card:nth-child(5).visible .service-card__icon svg .sweep {
  transform-box: fill-box;
  transform-origin: center;
  animation: radar-sweep 2.8s linear infinite;
}
@keyframes radar-sweep { to { transform: rotate(360deg); } }

/* Card 6 · Vendor & Technology — Magnifying Glass "Search Over Grid" */
.service-card__icon--glass { position: relative; }
.service-card__icon--glass .bg-letters {
  position: absolute;
  inset: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  color: var(--color-primary);
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms ease;
}
.services[data-motion="3"] .service-card__icon--glass .bg-letters { opacity: 1; }
.service-card__icon--glass .glass {
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 0 4px var(--color-bg));
}
.services[data-motion="3"] .services-grid .service-card:nth-child(6).visible .service-card__icon--glass .glass {
  animation: glass-search 4.8s ease-in-out infinite;
}
@keyframes glass-search {
  0%   { transform: translate(-4px, -3px); }
  25%  { transform: translate( 4px, -3px); }
  50%  { transform: translate( 4px,  3px); }
  75%  { transform: translate(-4px,  3px); }
  100% { transform: translate(-4px, -3px); }
}

/* ============================================================
   APPROACH — split layout, vertical step cards
   ============================================================ */

/* Render — step number badge pops in alongside the card */
.approach[data-motion="2"] .approach-step .approach-step__num,
.approach[data-motion="3"] .approach-step .approach-step__num {
  transform: scale(0.6);
  opacity: 0;
  transition: transform 500ms cubic-bezier(.2,.8,.2,1), opacity 400ms ease;
}
.approach[data-motion="2"] .approach-step.visible .approach-step__num,
.approach[data-motion="3"] .approach-step.visible .approach-step__num {
  transform: scale(1);
  opacity: 1;
  transition-delay: 200ms;
}

/* Active — each step badge ring-pulses continuously, staggered */
.approach[data-motion="3"] .approach-step.visible .approach-step__num {
  animation: step-ring 2.8s cubic-bezier(.4,0,.6,1) infinite;
}
.approach[data-motion="3"] .approach-steps .approach-step:nth-child(1) .approach-step__num { animation-delay: 0s;   }
.approach[data-motion="3"] .approach-steps .approach-step:nth-child(2) .approach-step__num { animation-delay: 0.7s; }
.approach[data-motion="3"] .approach-steps .approach-step:nth-child(3) .approach-step__num { animation-delay: 1.4s; }
.approach[data-motion="3"] .approach-steps .approach-step:nth-child(4) .approach-step__num { animation-delay: 2.1s; }
@keyframes step-ring {
  0%, 60%, 100% { box-shadow: 0 0 0 0 rgba(91,155,213,0); }
  20%           { box-shadow: 0 0 0 6px rgba(91,155,213,0.18); }
  40%           { box-shadow: 0 0 0 11px rgba(91,155,213,0); }
}

/* ============================================================
   ABOUT — split layout, stats list left + body right
   ============================================================ */

/* Render — divider line under each stat draws in left → right */
.about[data-motion="2"] .about-meta__stat,
.about[data-motion="3"] .about-meta__stat {
  position: relative;
  border-bottom-color: transparent !important;
}
.about[data-motion="2"] .about-meta__stat::before,
.about[data-motion="3"] .about-meta__stat::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  height: 1px; width: 0;
  background: var(--color-divider);
  transition: width 900ms cubic-bezier(.2,.8,.2,1);
}
.about[data-motion="2"] .about-meta__stat.visible::before,
.about[data-motion="3"] .about-meta__stat.visible::before {
  width: 100%;
  transition-delay: 300ms;
}

/* Active — a brighter cyan highlight band travels along each
   stat's divider line continuously, staggered. */
.about[data-motion="3"] .about-meta__stat.visible::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  height: 1px; width: 60px;
  background: linear-gradient(90deg, transparent, var(--color-primary), transparent);
  animation: stat-scan 4s linear infinite;
  opacity: 0;
}
.about[data-motion="3"] .about-meta .about-meta__stat:nth-child(1).visible::after { animation-delay: 1.2s; }
.about[data-motion="3"] .about-meta .about-meta__stat:nth-child(2).visible::after { animation-delay: 2.4s; }
.about[data-motion="3"] .about-meta .about-meta__stat:nth-child(3).visible::after { animation-delay: 3.6s; }
@keyframes stat-scan {
  0%   { left: 0; opacity: 0; }
  10%  { opacity: 0.9; }
  90%  { opacity: 0.9; }
  100% { left: calc(100% - 60px); opacity: 0; }
}

/* ============================================================
   CONTACT
   ============================================================ */

/* Active — CTA glows continuously */
.cta-section[data-motion="3"] .btn-primary {
  animation: cta-breathe 3.6s ease-in-out infinite;
  animation-delay: 700ms;
}

/* ============================================================
   REDUCED MOTION  —  honor user preference
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  [data-motion] .reveal,
  [data-motion] .reveal.visible,
  [data-motion] .service-card__icon,
  [data-motion] .approach-step__num,
  [data-motion] .about-meta__stat::before,
  [data-motion] .about-meta__stat::after,
  [data-motion] .hero__cta,
  [data-motion] .btn-primary,
  [data-motion] .hero__tag::before {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .about-meta__stat::before,
  .about-meta__stat::after { width: 100% !important; opacity: 1 !important; }
}

/* ============================================================
   MOBILE — collapse section-head onto two rows so the toggle
   doesn't crowd the label
   ============================================================ */
@media (max-width: 640px) {
  .section-head {
    gap: var(--space-3);
  }
  .motion-toggle {
    width: 100%;
    justify-content: flex-start;
  }
  .section-head--center .motion-toggle {
    justify-content: center;
  }
  .motion-toggle button { padding: 4px 8px; font-size: 10px; }
  /* In mobile dropdown nav, the Mobile preview pill becomes a regular item */
  .nav-mobile { border: 0; padding: 0; color: var(--color-primary); }
}


/* ============================================================
   HERO — concentric rings backdrop + pulse + live ping
   ============================================================ */
.hero { position: relative; overflow: hidden; }
.hero__content { position: relative; z-index: 2; }

.hero__rings, .hero__pulse {
  position: absolute;
  top: 50%;
  /* Up to ~1440 viewport, use the original -10% offset.
     On wider viewports, anchor the rings so they don't drift toward
     the right edge — keep the rings-center-to-page-center offset that
     the 1440 layout already has (≈454px). The 864px constant is half
     of that anchor box. */
  right: max(-10%, calc(50% - 864px));
  transform: translateY(-50%);
  width: min(820px, 84vw);
  height: min(820px, 84vw);
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 720px) {
  .hero__rings, .hero__pulse {
    top: 60%;
    right: 50%;
    transform: translate(50%, -50%);
    width: 130vw;
    height: 130vw;
  }
}

.hero__rings circle {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 0.6;
}
.hero__rings {
  opacity: 0;
  transition: opacity 1.2s ease 200ms;
}
.hero.in-view .hero__rings { opacity: 0.20; }
.hero[data-motion="1"] .hero__rings { opacity: 0.18; transition: none; }
@media (max-width: 720px) {
  .hero.in-view .hero__rings { opacity: 0.14; }
  .hero[data-motion="1"] .hero__rings { opacity: 0.12; }
}

.hero__pulse circle {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 0.9;
  transform-origin: 50% 50%;
  transform: scale(0.18);
  opacity: 0;
}

/* Render — one staggered burst of four pulse rings */
.hero[data-motion="2"].in-view .hero__pulse circle {
  animation: hero-pulse 2.6s cubic-bezier(.2,.6,.2,1) forwards;
}
.hero[data-motion="2"].in-view .hero__pulse circle:nth-child(1) { animation-delay: 250ms;  }
.hero[data-motion="2"].in-view .hero__pulse circle:nth-child(2) { animation-delay: 750ms;  }
.hero[data-motion="2"].in-view .hero__pulse circle:nth-child(3) { animation-delay: 1250ms; }
.hero[data-motion="2"].in-view .hero__pulse circle:nth-child(4) { animation-delay: 1750ms; }

/* Active — continuous staggered pulse */
.hero[data-motion="3"].in-view .hero__pulse circle {
  animation: hero-pulse 8s cubic-bezier(.2,.6,.2,1) infinite;
}
.hero[data-motion="3"].in-view .hero__pulse circle:nth-child(1) { animation-delay: 0s; }
.hero[data-motion="3"].in-view .hero__pulse circle:nth-child(2) { animation-delay: 2s; }
.hero[data-motion="3"].in-view .hero__pulse circle:nth-child(3) { animation-delay: 4s; }
.hero[data-motion="3"].in-view .hero__pulse circle:nth-child(4) { animation-delay: 6s; }

@keyframes hero-pulse {
  0%   { transform: scale(0.18); opacity: 0; }
  10%  { opacity: 0.55; }
  85%  { opacity: 0; }
  100% { transform: scale(1.45); opacity: 0; }
}

/* Hero actions row + signal pill with live ping */
.hero__actions {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-wrap: wrap;
}
.hero__signal {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
}
.hero__signal-dot {
  position: relative;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
}
.hero__signal-dot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--color-primary);
  transform: scale(1);
  opacity: 0;
}
.hero[data-motion="2"].in-view .hero__signal-dot::after {
  animation: live-ping 1.6s cubic-bezier(0,0,.2,1) 700ms forwards;
}
.hero[data-motion="3"].in-view .hero__signal-dot::after {
  animation: live-ping 1.6s cubic-bezier(0,0,.2,1) 700ms infinite;
}
@keyframes live-ping {
  0%   { transform: scale(1);   opacity: 0.7; }
  100% { transform: scale(3.2); opacity: 0; }
}

/* ============================================================
   CONTACT — rings backdrop + ring ripple (centered on cta)
   ============================================================ */
.lower-block {
  position: relative;
  overflow: hidden;
}
.cta-section {
  position: relative;
  overflow: visible;
}
.cta-anchor {
  position: relative;
  display: inline-block;
  width: 100%;
}
.origin { position: relative; }
.cta-section .container,
.origin   .container { position: relative; z-index: 2; }
.cta-anchor .cta-title { position: relative; z-index: 2; }

.contact__rings, .contact__expand {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(1100px, 130vw);
  height: min(1100px, 130vw);
  pointer-events: none;
  z-index: 1;
}
.contact__rings circle {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 0.6;
}
.contact__rings {
  opacity: 0;
  transition: opacity 1.2s ease 200ms;
}
.cta-section.in-view .contact__rings { opacity: 0.14; }
.cta-section[data-motion="1"] .contact__rings { opacity: 0.10; transition: none; }

.contact__expand circle {
  fill: none;
  stroke: var(--color-primary);
  stroke-width: 0.8;
  transform-origin: 50% 50%;
  transform: scale(0.4);
  opacity: 0;
}

/* Render — single ring expand on entry */
.cta-section[data-motion="2"].in-view .contact__expand circle {
  animation: contact-expand 3s cubic-bezier(.2,.6,.2,1) forwards;
}
.cta-section[data-motion="2"].in-view .contact__expand circle:nth-child(2) {
  animation-delay: 800ms;
}

/* Active — continuous expanding rings */
.cta-section[data-motion="3"].in-view .contact__expand circle {
  animation: contact-expand 5s cubic-bezier(.2,.6,.2,1) infinite;
}
.cta-section[data-motion="3"].in-view .contact__expand circle:nth-child(2) {
  animation-delay: 2.5s;
}

@keyframes contact-expand {
  0%   { transform: scale(0.4); opacity: 0; }
  14%  { opacity: 0.40; }
  85%  { opacity: 0; }
  100% { transform: scale(1.2); opacity: 0; }
}

/* Reduced motion — disable hero + contact backdrop animations */
@media (prefers-reduced-motion: reduce) {
  .hero__pulse circle,
  .hero__signal-dot::after,
  .contact__expand circle {
    animation: none !important;
  }
  .hero__rings, .hero.in-view .hero__rings { opacity: 0.18; transition: none; }
  .contact__rings,
  .cta-section.in-view .contact__rings { opacity: 0.10; transition: none; }
}