/**
 * Blekline feature icon motion — Webflow
 *
 * 1. Project Settings → Custom Code → Head → link this file:
 *    <link rel="stylesheet" href="https://app.blekline.com/marketing/feature-icons-webflow.css?v=4" />
 *
 * Sizing (icon width, slide width, spacing) = Webflow only. This file is animations + hover motion.
 *
 * 2. Each swiper CARD (the slide wrapper): Custom attribute
 *    data-blekline-card = mcp-proxy | mcp-tools | ingress-proxy | fast-path | multi-region | policy-sse | extension | sdks
 *
 * 3. Each embedded SVG root tag must include matching id:
 *    id="blekline-icon-mcp-proxy" (etc.) and class="bl-icon"
 *
 * 4. Hover the card → icon animates. Idle autoplay runs on .bl-idle groups.
 */

:root {
  --bl-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --bl-fast: 180ms;
  --bl-base: 280ms;
  --bl-accent: #fb651e;
  --bl-glow: #ff9966;
}

.bl-icon .bl-iso,
.bl-icon .bl-accent-face,
.bl-icon .bl-node,
.bl-icon .bl-flow-dot {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--bl-base) var(--bl-ease), opacity var(--bl-fast) var(--bl-ease);
}

.bl-icon .bl-wire {
  transition: stroke var(--bl-fast) var(--bl-ease), opacity var(--bl-fast) var(--bl-ease), stroke-width var(--bl-fast) var(--bl-ease);
}

/* ── Shared idle motion ── */
@keyframes bl-dash-flow {
  to { stroke-dashoffset: -24; }
}

@keyframes bl-node-pulse {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.35); }
}

@keyframes bl-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2.5px); }
}

@keyframes bl-orbit-spin {
  to { transform: rotate(360deg); }
}

@keyframes bl-packet {
  0% { opacity: 0; offset-distance: 0%; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { opacity: 0; offset-distance: 100%; }
}

.bl-icon .bl-idle-dash {
  animation: bl-dash-flow 2.8s linear infinite;
}

.bl-icon .bl-idle-pulse {
  animation: bl-node-pulse 2.2s ease-in-out infinite;
}

.bl-icon .bl-idle-float {
  animation: bl-float 2.6s ease-in-out infinite;
}

/* Pause idle motion while swiper is dragging — set by marketing-motion, not swiper classes */
[data-swiper-section][data-swiper-interacting] .bl-icon .bl-idle-dash,
[data-swiper-section][data-swiper-interacting] .bl-icon .bl-idle-pulse,
[data-swiper-section][data-swiper-interacting] .bl-icon .bl-idle-float,
[data-swiper-section][data-swiper-interacting] .bl-icon .bl-flow-dot,
[data-swiper-section][data-swiper-interacting] .bl-icon .bl-fast-arc,
[data-swiper-section][data-swiper-interacting] .bl-icon .bl-orbit,
[data-swiper-section][data-swiper-interacting] .bl-icon .bl-beam {
  animation-play-state: paused;
}

/* ── Hover only (slide has data-blekline-card) — no swiper coupling ── */
[data-blekline-card]:hover .bl-icon .bl-iso--core {
  transform: translateY(-4px);
}

[data-blekline-card]:hover .bl-icon .bl-accent-face {
  transform: translateY(-5px);
}

[data-blekline-card]:hover .bl-icon .bl-wire {
  stroke: var(--bl-glow);
  opacity: 0.85;
}

[data-blekline-card]:hover .bl-icon .bl-node {
  transform: scale(1.45);
}

[data-blekline-card]:hover .bl-icon .bl-idle-float,
[data-blekline-card]:hover .bl-icon .bl-idle-pulse {
  animation-play-state: paused;
}

/* ── 01 mcp-proxy ── */
#blekline-icon-mcp-proxy .bl-flow-dot {
  offset-path: path("M80 58 L80 78");
  animation: bl-packet 2.4s ease-in-out infinite;
}

#blekline-icon-mcp-proxy .bl-flow-dot--l {
  offset-path: path("M80 58 L38 86");
  animation-delay: 0.8s;
}

#blekline-icon-mcp-proxy .bl-flow-dot--r {
  offset-path: path("M80 58 L122 86");
  animation-delay: 1.6s;
}

[data-blekline-card="mcp-proxy"]:hover #blekline-icon-mcp-proxy .bl-gate {
  transform: translateY(-6px) scale(1.03);
}

[data-blekline-card="mcp-proxy"]:hover #blekline-icon-mcp-proxy .bl-flow-line {
  stroke-dasharray: none;
  opacity: 1;
}

/* ── 02 mcp-tools ── */
#blekline-icon-mcp-tools .bl-cell:nth-child(1) .bl-idle-pulse { animation-delay: 0s; }
#blekline-icon-mcp-tools .bl-cell:nth-child(2) .bl-idle-pulse { animation-delay: 0.25s; }
#blekline-icon-mcp-tools .bl-cell:nth-child(3) .bl-idle-pulse { animation-delay: 0.5s; }
#blekline-icon-mcp-tools .bl-cell:nth-child(4) .bl-idle-pulse { animation-delay: 0.75s; }

#blekline-icon-mcp-tools .bl-cell {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform var(--bl-base) var(--bl-ease);
}

[data-blekline-card="mcp-tools"]:hover #blekline-icon-mcp-tools .bl-cell {
  transform: translateY(-4px);
}

[data-blekline-card="mcp-tools"]:hover #blekline-icon-mcp-tools .bl-cell:nth-child(1) { transition-delay: 0ms; }
[data-blekline-card="mcp-tools"]:hover #blekline-icon-mcp-tools .bl-cell:nth-child(2) { transition-delay: 40ms; }
[data-blekline-card="mcp-tools"]:hover #blekline-icon-mcp-tools .bl-cell:nth-child(3) { transition-delay: 80ms; }
[data-blekline-card="mcp-tools"]:hover #blekline-icon-mcp-tools .bl-cell:nth-child(4) { transition-delay: 120ms; }

/* ── 03 ingress-proxy ── */
[data-blekline-card="ingress-proxy"]:hover #blekline-icon-ingress-proxy .bl-iso--core {
  transform: translateY(-5px) scale(1.04);
}

[data-blekline-card="ingress-proxy"]:hover #blekline-icon-ingress-proxy .bl-arrow {
  transform: translateX(2px);
}

[data-blekline-card="ingress-proxy"]:hover #blekline-icon-ingress-proxy .bl-arrow--rev {
  transform: translateX(-2px);
}

/* ── 04 fast-path ── */
#blekline-icon-fast-path .bl-fast-arc {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: bl-draw-arc 3s ease-in-out infinite;
}

@keyframes bl-draw-arc {
  0% { stroke-dashoffset: 120; opacity: 0.5; }
  45%, 55% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: -120; opacity: 0.5; }
}

[data-blekline-card="fast-path"]:hover #blekline-icon-fast-path .bl-fast-arc {
  animation-duration: 1.1s;
  stroke: var(--bl-glow);
  stroke-width: 1.35;
}

[data-blekline-card="fast-path"]:hover #blekline-icon-fast-path .bl-bolt {
  transform: translateY(-4px) scale(1.08);
}

/* ── 05 multi-region ── */
#blekline-icon-multi-region .bl-orbit {
  transform-box: fill-box;
  transform-origin: 80px 50px;
  animation: bl-orbit-spin 14s linear infinite;
}

[data-blekline-card="multi-region"]:hover #blekline-icon-multi-region .bl-orbit {
  animation-duration: 6s;
}

[data-blekline-card="multi-region"]:hover #blekline-icon-multi-region .bl-region {
  transform: translateY(-3px);
}

/* ── 06 policy-sse ── */
#blekline-icon-policy-sse .bl-beam {
  transform-origin: 80px 58px;
  animation: bl-beam-pulse 2.4s ease-in-out infinite;
}

@keyframes bl-beam-pulse {
  0%, 100% { opacity: 0.28; }
  50% { opacity: 0.85; }
}

#blekline-icon-policy-sse .bl-beam:nth-child(1) { animation-delay: 0s; }
#blekline-icon-policy-sse .bl-beam:nth-child(2) { animation-delay: 0.12s; }
#blekline-icon-policy-sse .bl-beam:nth-child(3) { animation-delay: 0.24s; }
#blekline-icon-policy-sse .bl-beam:nth-child(4) { animation-delay: 0.36s; }
#blekline-icon-policy-sse .bl-beam:nth-child(5) { animation-delay: 0.48s; }

[data-blekline-card="policy-sse"]:hover #blekline-icon-policy-sse .bl-tower {
  transform: translateY(-4px);
}

[data-blekline-card="policy-sse"]:hover #blekline-icon-policy-sse .bl-beam {
  opacity: 1;
  stroke: var(--bl-glow);
}

/* ── 07 extension ── */
[data-blekline-card="extension"]:hover #blekline-icon-extension .bl-shield {
  transform: translateY(-4px) scale(1.03);
}

[data-blekline-card="extension"]:hover #blekline-icon-extension .bl-badge {
  transform: scale(1.12);
}

/* ── 08 sdks ── */
#blekline-icon-sdks .bl-sheet {
  transition: transform var(--bl-base) var(--bl-ease), opacity var(--bl-fast) var(--bl-ease);
}

[data-blekline-card="sdks"]:hover #blekline-icon-sdks .bl-sheet--1 { transform: skewY(-12deg) translateY(-6px); }
[data-blekline-card="sdks"]:hover #blekline-icon-sdks .bl-sheet--2 { transform: skewY(-12deg) translateY(-3px); }
[data-blekline-card="sdks"]:hover #blekline-icon-sdks .bl-sheet--3 { transform: skewY(-12deg) translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .bl-icon .bl-idle-dash,
  .bl-icon .bl-idle-pulse,
  .bl-icon .bl-idle-float,
  #blekline-icon-fast-path .bl-fast-arc,
  #blekline-icon-multi-region .bl-orbit,
  #blekline-icon-policy-sse .bl-beam,
  #blekline-icon-mcp-proxy .bl-flow-dot {
    animation: none !important;
  }
  [data-blekline-card]:hover .bl-icon .bl-iso--core,
  [data-blekline-card]:hover .bl-icon .bl-accent-face {
    transform: none;
  }
}