/* clx-intelligence-belt — DM page Option 1 animation.
 * Source: Claude Design handoff "DM Cross-Channel Growth — Animation
 * Concepts" Option 1, "The Intelligence Belt".
 *
 * All selectors live under .clx-intelligence-belt so the .s1-* class
 * names from the source design can't collide with anything else on
 * the site. Component is enqueued only on /digital-marketing/, so
 * blast radius is one page regardless. */

.clx-intelligence-belt {
  /* Local variables — duplicates of the design tokens so the rest of
     the site's --ember etc. is never shadowed. The DM brand orange
     resolves to the same value as the global #FA4900. */
  --ib-ink: #142533;
  --ib-body: #3D5266;
  --ib-muted: #7A8B9A;
  --ib-line: #E1E6EB;
  --ib-paper: #F4F6F8;
  /* Site-standard peach mist — matches .clx-belonging-* on
     /culture-and-diversity/ for visual consistency across animated
     diagrams. */
  --ib-mist: #FFF6F1;
  --ib-ember: #FA4900;
  /* Slowed from the source design's 14s to 22s — too many concurrent
     loops (4 feed pellets, 3 engine pulses, 4 tile reveals, 4 brand
     badges, belt-active stroke, human chip travel) made the 14s loop
     feel like a busy GIF playing. 22s gives each element more
     breathing room between cycles. */
  --ib-loop: 22s;

  /* Peach mist → white gradient from the original Claude Design source,
     plus a soft 1px border + 12px radius to lift the diagram off the
     white section bg. The rest of the section stays white per the
     page-level rule on .page-digital-marketing [data-id="582bee8"]. */
  background: linear-gradient(180deg, var(--ib-mist) 0%, #fff 100%);
  border: none;
  border-radius: 20px;
  padding: 16px 8px;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  /* Taller than cost-curves' 432px so the SVG (preserveAspectRatio:meet,
     1.65:1 inner viewBox) can scale up further before width-clipping
     kicks in — gives the diagram more presence without changing element
     coords. The grid-row alignment from .svc-cards-heading
     {align-items:center} centers this against the longer text column on
     the left. */
  min-height: 520px;
  overflow: visible;
  position: relative;
}

.clx-intelligence-belt .clx-ib-stage {
  width: 100%;
  flex: 1 1 0%;
  display: block;
  background: transparent;
}

/* Input cards. Soft gray fill (--ib-paper) so the white peach-mist
   stage shows the boxes as recessed surfaces rather than floating
   panels. Same treatment applied to engines, tiles, chip, decisions. */
.clx-intelligence-belt .s1-card {
  fill: var(--ib-paper);
  stroke: var(--ib-line);
  stroke-width: 1.2;
}
.clx-intelligence-belt .s1-card-label {
  font-family: 'Cabin', sans-serif;
  font-weight: 700;
  font-size: 12px;
  /* Tightened from 1.1px to 0.5px so "Performance" (the longest card
     title) no longer pushes past the 100-wide card right edge at the
     bumped 12px font size. Section labels still read clearly. */
  letter-spacing: 0.5px;
  fill: var(--ib-ink);
  text-transform: uppercase;
}
.clx-intelligence-belt .s1-card-meta {
  font-family: 'DM Sans', sans-serif;
  /* Held at 9px (instead of bumped to 11) so meta text doesn't
     overrun horizontally into the sparkline at x=84+. */
  font-size: 9px;
  fill: var(--ib-muted);
}
.clx-intelligence-belt .s1-card-spark {
  stroke: var(--ib-muted);
  stroke-width: 1;
  fill: none;
  opacity: .55;
}

/* Scroll-trigger gate: pause every loop until JS adds .is-active when
   the component enters the viewport (clx-intelligence-belt.js +
   IntersectionObserver). Pre-active the animations are paused at
   their initial 0% frame so they read as a calm composed diagram
   even before they kick in. */
.clx-intelligence-belt:not(.is-active) [class*="s1-"] {
  animation-play-state: paused !important;
}

/* Input feed: pellet emits from each card to belt */
.clx-intelligence-belt .s1-feed {
  fill: var(--ib-ember);
  opacity: 0;
  animation: ibFeed var(--ib-loop) cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes ibFeed {
  0%   { opacity: 0; transform: translateX(0); }
  4%   { opacity: 1; }
  20%  { opacity: 1; transform: translateX(80px); }
  24%  { opacity: 0; transform: translateX(80px); }
  100% { opacity: 0; transform: translateX(80px); }
}
.clx-intelligence-belt .s1-feed-2 { animation-delay: calc(var(--ib-loop) * -.04); }
.clx-intelligence-belt .s1-feed-3 { animation-delay: calc(var(--ib-loop) * -.08); }
.clx-intelligence-belt .s1-feed-4 { animation-delay: calc(var(--ib-loop) * -.12); }

/* Belt engines pulse in sequence */
.clx-intelligence-belt .s1-engine {
  fill: var(--ib-paper);
  stroke: var(--ib-ink);
  stroke-width: 1.4;
}
.clx-intelligence-belt .s1-engine-fill {
  fill: var(--ib-ember);
  fill-opacity: 0;
  animation: ibEngine var(--ib-loop) ease-in-out infinite;
}
@keyframes ibEngine {
  0%, 18%   { fill-opacity: 0; }
  24%, 32%  { fill-opacity: .25; }
  40%, 100% { fill-opacity: 0; }
}
.clx-intelligence-belt .s1-engine-2 .s1-engine-fill { animation-delay: calc(var(--ib-loop) * -.06); }
.clx-intelligence-belt .s1-engine-3 .s1-engine-fill { animation-delay: calc(var(--ib-loop) * -.12); }

.clx-intelligence-belt .s1-engine-label {
  font-family: 'Cabin', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.1px;
  fill: var(--ib-ink);
  text-transform: uppercase;
  text-anchor: middle;
}
.clx-intelligence-belt .s1-engine-sub {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  fill: var(--ib-muted);
  text-anchor: middle;
}

/* Belt baseline + active stroke riding the line */
.clx-intelligence-belt .s1-belt {
  stroke: var(--ib-line);
  stroke-width: 1.4;
}
.clx-intelligence-belt .s1-belt-active {
  stroke: var(--ib-ember);
  stroke-width: 1.4;
  stroke-dasharray: 340;
  stroke-dashoffset: 340;
  animation: ibBelt var(--ib-loop) cubic-bezier(.4, 0, .4, 1) infinite;
}
@keyframes ibBelt {
  0%, 18%   { stroke-dashoffset: 340; opacity: 0; }
  22%       { opacity: .85; }
  56%       { stroke-dashoffset: 0; opacity: .85; }
  68%       { stroke-dashoffset: 0; opacity: .85; }
  74%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Output tile: 2×2 grid renders sequentially */
.clx-intelligence-belt .s1-tile {
  fill: var(--ib-paper);
  stroke: var(--ib-line);
  stroke-width: 1.2;
}
.clx-intelligence-belt .s1-tile-fill {
  fill: var(--ib-ember);
  fill-opacity: 0;
  animation: ibTile var(--ib-loop) ease-out infinite;
}
@keyframes ibTile {
  0%, 52%   { fill-opacity: 0; }
  58%       { fill-opacity: .18; }
  78%       { fill-opacity: .18; }
  88%, 100% { fill-opacity: 0; }
}
.clx-intelligence-belt .s1-tile-2 .s1-tile-fill { animation-delay: calc(var(--ib-loop) * -.025); }
.clx-intelligence-belt .s1-tile-3 .s1-tile-fill { animation-delay: calc(var(--ib-loop) * -.05); }
.clx-intelligence-belt .s1-tile-4 .s1-tile-fill { animation-delay: calc(var(--ib-loop) * -.075); }

.clx-intelligence-belt .s1-tile-glyph {
  stroke: var(--ib-ink);
  stroke-width: 1.3;
  fill: none;
  stroke-linecap: round;
}
.clx-intelligence-belt .s1-tile-glyph-fill {
  fill: var(--ib-ink);
}
.clx-intelligence-belt .s1-tile-label {
  font-family: 'Cabin', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1px;
  fill: var(--ib-ink);
  text-transform: uppercase;
}

/* Brand voice tag — small badge appears on each tile */
.clx-intelligence-belt .s1-brand {
  fill: var(--ib-ember);
  opacity: 0;
  animation: ibBrand var(--ib-loop) ease-out infinite;
}
@keyframes ibBrand {
  0%, 58%   { opacity: 0; transform: scale(.4); }
  64%       { opacity: 1; transform: scale(1.2); }
  72%, 86%  { opacity: 1; transform: scale(1); }
  92%, 100% { opacity: 0; }
}
.clx-intelligence-belt .s1-tile-2 .s1-brand { animation-delay: calc(var(--ib-loop) * -.025); }
.clx-intelligence-belt .s1-tile-3 .s1-brand { animation-delay: calc(var(--ib-loop) * -.05); }
.clx-intelligence-belt .s1-tile-4 .s1-brand { animation-delay: calc(var(--ib-loop) * -.075); }

/* Human strategy lane below */
.clx-intelligence-belt .s1-human-lane {
  stroke: var(--ib-line);
  stroke-width: 1;
  stroke-dasharray: 3 4;
}
.clx-intelligence-belt .s1-human-label {
  font-family: 'Cabin', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.2px;
  fill: var(--ib-muted);
  text-transform: uppercase;
}
.clx-intelligence-belt .s1-decision {
  fill: var(--ib-paper);
  stroke: var(--ib-ember);
  stroke-width: 1.4;
}
.clx-intelligence-belt .s1-human-chip {
  animation: ibHumanChip var(--ib-loop) cubic-bezier(.4, 0, .4, 1) infinite;
}
@keyframes ibHumanChip {
  0%   { transform: translateX(0); }
  18%  { transform: translateX(0); }
  /* moves to first decision after research engine */
  24%  { transform: translateX(110px); }
  44%  { transform: translateX(110px); }
  /* second decision after cluster */
  52%  { transform: translateX(220px); }
  72%  { transform: translateX(220px); }
  /* final decision after analyze */
  80%  { transform: translateX(330px); }
  100% { transform: translateX(330px); }
}
.clx-intelligence-belt .s1-chip-rect {
  fill: var(--ib-paper);
  stroke: var(--ib-ink);
  stroke-width: 1.3;
}
.clx-intelligence-belt .s1-chip-tick {
  stroke: var(--ib-ember);
  stroke-width: 1.4;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.clx-intelligence-belt .s1-chip-label {
  font-family: 'Cabin', sans-serif;
  font-weight: 700;
  font-size: 11px;
  /* Tightened from 0.8 to 0.3 so "Strategy" stays well inside the
     96-wide chip with the bumped 11px font size. */
  letter-spacing: .3px;
  fill: var(--ib-ink);
  text-transform: uppercase;
}

/* Section-level layout rules (formerly carried by clx-cost-curves.css when
   that component was enqueued on DM). The §4 "How AI Powers Cross
   Channel Growth" section uses .svc-cards-heading as a 2-column grid
   (text left, animation right) and #services-cards as the outer rhythm
   (padding-top:56px, padding-bottom:80px). With cost-curves no longer
   enqueued on DM, these rules need to ride along with the new visual. */
body.page-digital-marketing .svc-cards-heading {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  margin-bottom: 24px;
}
body.page-digital-marketing .svc-cards-heading-text {
  grid-column: span 1;
}
body.page-digital-marketing #services-cards {
  padding-top: 56px;
  padding-bottom: 80px;
}

/* Mobile: SVG text sizes are user-space units, so the shrink as the
   stage scales-to-fit (preserveAspectRatio:meet) compounds with viewBox
   density (600 user-units wide, ~360 CSS px on a phone = 0.6× scale).
   Bumping source font sizes ~2× brings rendered text back up to legible
   ~13–14px on a typical 360px viewport. Container grows so the chart
   doesn't compress to a sliver below the heading. */
/* Mobile-specific SVG variant: the markup ships two SVGs in the
   container — .clx-ib-stage (desktop, horizontal pipeline) and
   .clx-ib-stage.clx-ib-mobile (vertical stack, viewBox 360×720). CSS
   swaps which one displays based on viewport. Mobile SVG re-uses the
   same .s1-* class names so animations and the .is-active scroll-
   trigger gate Just Work, but a few keyframes (feed pellets, belt
   stroke direction, chip travel distance) need vertical/mobile-scaled
   variants applied via parent-class scope. */
/* Default state: hide the mobile-variant SVG. Selector specificity has
   to outrank the .clx-intelligence-belt .clx-ib-stage {display:block}
   rule above (0,2,0) — so this is 0,3,0. */
.clx-intelligence-belt > .clx-ib-stage.clx-ib-mobile { display: none; }

@media (max-width: 720px) {
  .clx-intelligence-belt {
    min-height: auto;
    height: auto;
    aspect-ratio: 360 / 720;
    max-width: 420px;
    margin: 0 auto;
    padding: 12px 8px;
  }
  body.page-digital-marketing .svc-cards-heading {
    grid-template-columns: 1fr;
  }
  /* Hide the desktop SVG; show the mobile one. */
  .clx-intelligence-belt > .clx-ib-stage:not(.clx-ib-mobile) { display: none; }
  .clx-intelligence-belt > .clx-ib-stage.clx-ib-mobile      { display: block; }

  /* Tile labels (Text/Audio/Video/Image) overflow their 48-wide tile
     at the desktop default 11px source + 1px letter-spacing on a
     mobile 1× SVG render. Tighten for mobile only. */
  .clx-intelligence-belt .clx-ib-mobile .s1-tile-label {
    font-size: 9px;
    letter-spacing: 0.3px;
  }
  /* Chip label sized to fit the mobile chip's 64-wide box.
     "Strategy" at 9px Cabin Bold + 0.2 letter-spacing ≈ 42 units wide;
     chip text area = 64 - 18 (text x-anchor) = 46 units. ~4 unit
     right margin. */
  .clx-intelligence-belt .clx-ib-mobile .s1-chip-label {
    font-size: 9px;
    letter-spacing: 0.2px;
  }

  /* Pellet feeds: each card emits a pellet that converges on the
     belt junction at (180, 200). Four distinct diagonal-travel
     keyframes since each card sits at a different x,y in the 2×2
     grid; sharing one keyframe would leave pellets stranded at their
     start column. Origins → destination delta:
       card 1 top-left  (92,84)  → (180,200): translate( +88, +116)
       card 2 top-right (267,84) → (180,200): translate( -87, +116)
       card 3 bot-left  (92,144) → (180,200): translate( +88, +56)
       card 4 bot-right (267,144)→ (180,200): translate( -87, +56) */
  .clx-intelligence-belt .clx-ib-mobile .s1-feed   { animation-name: ibFeedDown1; }
  .clx-intelligence-belt .clx-ib-mobile .s1-feed-2 { animation-name: ibFeedDown2; }
  .clx-intelligence-belt .clx-ib-mobile .s1-feed-3 { animation-name: ibFeedDown3; }
  .clx-intelligence-belt .clx-ib-mobile .s1-feed-4 { animation-name: ibFeedDown4; }
  /* Belt-active: stroke is vertical (240 units long). Use a longer
     dasharray so the dash always covers the full line. */
  .clx-intelligence-belt .clx-ib-mobile .s1-belt-active {
    stroke-dasharray: 280;
    stroke-dashoffset: 280;
    animation-name: ibBeltDown;
  }
  /* Human chip travels left-to-right along the bottom strip on mobile.
     Stops align with D1 (x=60), D2 (x=140), D3 (x=220). Chip starts at
     translate(20, 692) so increments of 40, 120, 200 land at D1/D2/D3
     left edges. */
  .clx-intelligence-belt .clx-ib-mobile .s1-human-chip {
    animation-name: ibHumanChipMobile;
  }
}

@keyframes ibFeedDown1 {
  0%   { opacity: 0; transform: translate(0, 0); }
  4%   { opacity: 1; }
  20%  { opacity: 1; transform: translate(88px, 116px); }
  24%  { opacity: 0; transform: translate(88px, 116px); }
  100% { opacity: 0; transform: translate(88px, 116px); }
}
@keyframes ibFeedDown2 {
  0%   { opacity: 0; transform: translate(0, 0); }
  4%   { opacity: 1; }
  20%  { opacity: 1; transform: translate(-87px, 116px); }
  24%  { opacity: 0; transform: translate(-87px, 116px); }
  100% { opacity: 0; transform: translate(-87px, 116px); }
}
@keyframes ibFeedDown3 {
  0%   { opacity: 0; transform: translate(0, 0); }
  4%   { opacity: 1; }
  20%  { opacity: 1; transform: translate(88px, 56px); }
  24%  { opacity: 0; transform: translate(88px, 56px); }
  100% { opacity: 0; transform: translate(88px, 56px); }
}
@keyframes ibFeedDown4 {
  0%   { opacity: 0; transform: translate(0, 0); }
  4%   { opacity: 1; }
  20%  { opacity: 1; transform: translate(-87px, 56px); }
  24%  { opacity: 0; transform: translate(-87px, 56px); }
  100% { opacity: 0; transform: translate(-87px, 56px); }
}

@keyframes ibBeltDown {
  0%, 18%   { stroke-dashoffset: 280; opacity: 0; }
  22%       { opacity: .85; }
  56%       { stroke-dashoffset: 0; opacity: .85; }
  68%       { stroke-dashoffset: 0; opacity: .85; }
  74%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Chip starts at translate(8, 691) (96-wide chip). Decision points at
   x=60, 140, 220, 300. Chip's LEFT edge should land on each D's x to
   match desktop's "chip at right of decision" convention. Required
   translateX = D.cx - 8. */
@keyframes ibHumanChipMobile {
  0%   { transform: translateX(0); }
  18%  { transform: translateX(0); }
  /* D1 brief — left edge at x=60 */
  24%  { transform: translateX(52px); }
  44%  { transform: translateX(52px); }
  /* D2 creative — left edge at x=140 */
  52%  { transform: translateX(132px); }
  72%  { transform: translateX(132px); }
  /* D3 spend — left edge at x=220 */
  80%  { transform: translateX(212px); }
  100% { transform: translateX(212px); }
}

/* Reduced-motion: freeze all animations into a calm composed state.
   Keep the engine/tile fills lightly tinted so the diagram still
   reads as "AI processing in progress" without movement. */
@media (prefers-reduced-motion: reduce) {
  .clx-intelligence-belt [class*="s1-"] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
  .clx-intelligence-belt .s1-engine-fill,
  .clx-intelligence-belt .s1-tile-fill {
    fill-opacity: .18;
  }
}