/* ──────────────────────────────────────────────────────────────────────
   Per-card themed background animations.
   Shared by .bento-card (funktionen) and .module-card (homepage).

   Designprinzipien:
   - Eine klare thematische Geste pro Karte, sofort lesbar.
   - Patterns mit hohen Alphas (0.20–0.65) damit Orange-auf-Hell sichtbar
     bleibt; auf Dark dominiert die Lime-Helligkeit ohnehin.
   - Slow & smooth (5–14s) für Wertigkeit; Hover beschleunigt 2–3×.
   - Niemals das Icon nachzeichnen — Hintergrund ist Energie, nicht Illustration.
   ────────────────────────────────────────────────────────────────────── */

.bento-card,
.module-card {
  isolation: isolate;
}

.bento-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
  z-index: 0;
  opacity: 1;
  transition: opacity 0.6s ease;
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    #000 8%,
    #000 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    #000 8%,
    #000 90%,
    transparent 100%
  );
}
.bento-bg > span {
  position: absolute;
  pointer-events: none;
  will-change: transform, opacity, background-position;
}

/* ── AI · glowing nucleus + two orbiting particles on rings ──────────── */
:where(.bento-card, .module-card)[data-visual="ai"] .bento-bg-a {
  /* Central pulsing nucleus */
  left: 50%; top: 50%; width: 12px; height: 12px;
  translate: -50% -50%;
  border-radius: 50%;
  background: rgba(var(--brand-rgb),1);
  box-shadow:
    0 0 18px 4px rgba(var(--brand-rgb),0.70),
    0 0 38px 12px rgba(var(--brand-rgb),0.25);
  animation: bento-bg-ai-nucleus 2.4s ease-in-out infinite;
}
:where(.bento-card, .module-card)[data-visual="ai"] .bento-bg-b {
  /* Outer orbit ring + bright particle traveling clockwise */
  left: 50%; top: 50%; width: 72%; aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(var(--brand-rgb),0.18) 0deg 320deg,
    rgba(var(--brand-rgb),0.55) 345deg,
    rgba(var(--brand-rgb),1) 360deg
  );
  -webkit-mask-image: radial-gradient(circle, transparent 47%, #000 48%, #000 50%, transparent 51%);
          mask-image: radial-gradient(circle, transparent 47%, #000 48%, #000 50%, transparent 51%);
  animation: bento-bg-ai-orbit-cw 5s linear infinite;
}
:where(.bento-card, .module-card)[data-visual="ai"] .bento-bg-c {
  /* Inner orbit + bright particle traveling counter-clockwise */
  left: 50%; top: 50%; width: 42%; aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: conic-gradient(
    from 180deg,
    rgba(var(--brand-rgb),0.20) 0deg 320deg,
    rgba(var(--brand-rgb),0.55) 345deg,
    rgba(var(--brand-rgb),1) 360deg
  );
  -webkit-mask-image: radial-gradient(circle, transparent 45%, #000 46%, #000 48%, transparent 49%);
          mask-image: radial-gradient(circle, transparent 45%, #000 46%, #000 48%, transparent 49%);
  animation: bento-bg-ai-orbit-ccw 3.4s linear infinite;
}
:where(.bento-card, .module-card)[data-visual="ai"]:hover .bento-bg-a { animation-duration: 1.2s; }
:where(.bento-card, .module-card)[data-visual="ai"]:hover .bento-bg-b { animation-duration: 2s; }
:where(.bento-card, .module-card)[data-visual="ai"]:hover .bento-bg-c { animation-duration: 1.4s; }

/* ── TIME · soft halo only (sonar pulses live on the foreground clock) ── */
:where(.bento-card, .module-card)[data-visual="time"] .bento-bg-a {
  /* Soft halo glow behind the foreground clock */
  left: 50%; top: 50%; width: 78%; aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--brand-rgb),0.18), transparent 65%);
  filter: blur(8px);
  animation: bento-bg-glow-pulse 3.4s ease-in-out infinite alternate;
}
:where(.bento-card, .module-card)[data-visual="time"]:hover .bento-bg-a { animation-duration: 1.8s; }

/* ── GANTT · three offset task bars filling sequentially ─────────────── */
:where(.bento-card, .module-card)[data-visual="gantt"] .bento-bg-a {
  /* Top task bar (early/short) */
  top: 30%; left: 8%; width: 40%;
  height: 7px;
  border-radius: 3.5px;
  background-color: rgba(var(--brand-rgb),0.14);
  background-image: linear-gradient(90deg,
    rgba(var(--brand-rgb),0.65),
    rgba(var(--brand-rgb),0.9));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  animation: bento-bg-gantt-fill 5.5s ease-out infinite;
}
:where(.bento-card, .module-card)[data-visual="gantt"] .bento-bg-b {
  /* Middle task bar (mid, longest) */
  top: 50%; left: 26%; width: 54%;
  height: 7px;
  border-radius: 3.5px;
  background-color: rgba(var(--brand-rgb),0.14);
  background-image: linear-gradient(90deg,
    rgba(var(--brand-rgb),0.55),
    rgba(var(--brand-rgb),0.8));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  animation: bento-bg-gantt-fill 5.5s ease-out infinite;
  animation-delay: 0.7s;
}
:where(.bento-card, .module-card)[data-visual="gantt"] .bento-bg-c {
  /* Bottom task bar (late) */
  top: 70%; left: 16%; width: 46%;
  height: 7px;
  border-radius: 3.5px;
  background-color: rgba(var(--brand-rgb),0.14);
  background-image: linear-gradient(90deg,
    rgba(var(--brand-rgb),0.60),
    rgba(var(--brand-rgb),0.85));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  animation: bento-bg-gantt-fill 5.5s ease-out infinite;
  animation-delay: 1.4s;
}
:where(.bento-card, .module-card)[data-visual="gantt"]:hover .bento-bg-a,
:where(.bento-card, .module-card)[data-visual="gantt"]:hover .bento-bg-b,
:where(.bento-card, .module-card)[data-visual="gantt"]:hover .bento-bg-c {
  animation-duration: 2.6s;
}

/* ── TEAM · 5-person network: connecting lines + nodes + center pulse ── */
:where(.bento-card, .module-card)[data-visual="team"] .bento-bg-a {
  /* X-cross connecting lines from center to 4 corners */
  left: 50%; top: 50%; width: 56%; aspect-ratio: 1;
  translate: -50% -50%;
  background:
    linear-gradient(45deg,
      transparent calc(50% - 0.7px),
      rgba(var(--brand-rgb),0.36) calc(50% - 0.7px),
      rgba(var(--brand-rgb),0.36) calc(50% + 0.7px),
      transparent calc(50% + 0.7px)),
    linear-gradient(-45deg,
      transparent calc(50% - 0.7px),
      rgba(var(--brand-rgb),0.36) calc(50% - 0.7px),
      rgba(var(--brand-rgb),0.36) calc(50% + 0.7px),
      transparent calc(50% + 0.7px));
  animation: bento-bg-node-pulse 4s ease-in-out infinite alternate;
}
:where(.bento-card, .module-card)[data-visual="team"] .bento-bg-b {
  /* 4 corner "person" dots + 1 brighter center dot */
  left: 50%; top: 50%; width: 60%; aspect-ratio: 1;
  translate: -50% -50%;
  background:
    radial-gradient(circle at 8% 8%,   rgba(var(--brand-rgb),0.95) 3.5px, transparent 5px),
    radial-gradient(circle at 92% 8%,  rgba(var(--brand-rgb),0.95) 3.5px, transparent 5px),
    radial-gradient(circle at 8% 92%,  rgba(var(--brand-rgb),0.95) 3.5px, transparent 5px),
    radial-gradient(circle at 92% 92%, rgba(var(--brand-rgb),0.95) 3.5px, transparent 5px),
    radial-gradient(circle at 50% 50%, rgba(var(--brand-rgb),1)    5px,   transparent 6.5px);
}
:where(.bento-card, .module-card)[data-visual="team"] .bento-bg-c {
  /* Pulsing glow around center node */
  left: 50%; top: 50%; width: 28%; aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--brand-rgb),0.55), transparent 60%);
  filter: blur(10px);
  animation: bento-bg-glow-pulse 3s ease-in-out infinite alternate;
}
:where(.bento-card, .module-card)[data-visual="team"]:hover .bento-bg-a { animation-duration: 1.6s; }
:where(.bento-card, .module-card)[data-visual="team"]:hover .bento-bg-c { animation-duration: 1.8s; }

/* ── CRM · kanban pipeline columns + deal card flowing through ───────── */
:where(.bento-card, .module-card)[data-visual="crm"] .bento-bg-a {
  /* 4 column dividers (3 vertical lines at 25/50/75%) */
  inset: 22% 0;
  background:
    linear-gradient(90deg,
      transparent 0,
      transparent calc(25% - 0.6px), rgba(var(--brand-rgb),0.32) calc(25% - 0.6px),
      rgba(var(--brand-rgb),0.32) calc(25% + 0.6px), transparent calc(25% + 0.6px),
      transparent calc(50% - 0.6px), rgba(var(--brand-rgb),0.32) calc(50% - 0.6px),
      rgba(var(--brand-rgb),0.32) calc(50% + 0.6px), transparent calc(50% + 0.6px),
      transparent calc(75% - 0.6px), rgba(var(--brand-rgb),0.32) calc(75% - 0.6px),
      rgba(var(--brand-rgb),0.32) calc(75% + 0.6px), transparent calc(75% + 0.6px),
      transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 70%, transparent 100%);
}
:where(.bento-card, .module-card)[data-visual="crm"] .bento-bg-b {
  /* Deal card moving through the pipeline */
  width: 14%; aspect-ratio: 1.4;
  top: 50%; left: 6%;
  translate: 0 -50%;
  border-radius: 3px;
  background: linear-gradient(135deg, rgba(var(--brand-rgb),0.85), rgba(var(--brand-rgb),0.45));
  box-shadow: 0 0 12px rgba(var(--brand-rgb),0.55);
  animation: bento-bg-crm-deal 7s ease-in-out infinite;
}
:where(.bento-card, .module-card)[data-visual="crm"] .bento-bg-c {
  /* Glow on rightmost column (won deals) */
  width: 22%; aspect-ratio: 1;
  top: 50%; right: 4%;
  translate: 0 -50%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--brand-rgb),0.40), transparent 65%);
  filter: blur(12px);
  animation: bento-bg-glow-pulse 3s ease-in-out infinite alternate;
}
:where(.bento-card, .module-card)[data-visual="crm"]:hover .bento-bg-b { animation-duration: 3.5s; }
:where(.bento-card, .module-card)[data-visual="crm"]:hover .bento-bg-c { animation-duration: 1.6s; }

/* ── CLOUD · puffy clouds (overlapping-circle silhouettes) + droplets ── */
:where(.bento-card, .module-card)[data-visual="cloud"] .bento-bg-a {
  /* Large cloud: 4 overlapping circle "puffs" */
  width: 40%; aspect-ratio: 1.7;
  top: 18%; left: -44%;
  background:
    radial-gradient(circle at 22% 65%, rgba(var(--brand-rgb),0.50) 30%, transparent 31%),
    radial-gradient(circle at 50% 35%, rgba(var(--brand-rgb),0.50) 38%, transparent 39%),
    radial-gradient(circle at 78% 65%, rgba(var(--brand-rgb),0.50) 30%, transparent 31%),
    radial-gradient(circle at 50% 78%, rgba(var(--brand-rgb),0.50) 32%, transparent 33%);
  filter: blur(1.5px);
  animation: bento-bg-cloud-pan-a 22s linear infinite;
}
:where(.bento-card, .module-card)[data-visual="cloud"] .bento-bg-b {
  /* Smaller cloud, lower band, faded */
  width: 28%; aspect-ratio: 1.7;
  top: 56%; left: -32%;
  background:
    radial-gradient(circle at 22% 65%, rgba(var(--brand-rgb),0.32) 30%, transparent 31%),
    radial-gradient(circle at 50% 35%, rgba(var(--brand-rgb),0.32) 38%, transparent 39%),
    radial-gradient(circle at 78% 65%, rgba(var(--brand-rgb),0.32) 30%, transparent 31%),
    radial-gradient(circle at 50% 78%, rgba(var(--brand-rgb),0.32) 32%, transparent 33%);
  filter: blur(1.5px);
  animation: bento-bg-cloud-pan-b 30s linear infinite;
  animation-delay: -10s;
}
:where(.bento-card, .module-card)[data-visual="cloud"] .bento-bg-c {
  /* Rising sync droplets */
  inset: 0;
  background-image:
    radial-gradient(circle at 26% 90%, rgba(var(--brand-rgb),0.85) 1.6px, transparent 2.4px),
    radial-gradient(circle at 50% 94%, rgba(var(--brand-rgb),0.65) 1.4px, transparent 2.2px),
    radial-gradient(circle at 74% 90%, rgba(var(--brand-rgb),0.85) 1.6px, transparent 2.4px);
  animation: bento-bg-cloud-uplift 5s ease-in-out infinite;
}
:where(.bento-card, .module-card)[data-visual="cloud"]:hover .bento-bg-a { animation-duration: 10s; }
:where(.bento-card, .module-card)[data-visual="cloud"]:hover .bento-bg-b { animation-duration: 14s; }
:where(.bento-card, .module-card)[data-visual="cloud"]:hover .bento-bg-c { animation-duration: 2.4s; }

/* ── ARCHIVE · stacked folder tabs (filing cabinet) ──────────────────── */
:where(.bento-card, .module-card)[data-visual="archive"] .bento-bg-a {
  /* Back folder (left, low) */
  width: 56%; aspect-ratio: 1.55;
  left: 8%; top: 50%;
  transform: translateY(-58%);
  background: linear-gradient(180deg, rgba(var(--brand-rgb),0.12), rgba(var(--brand-rgb),0.04));
  clip-path: polygon(
    0 18%, 14% 18%, 18% 0, 44% 0, 48% 18%,
    100% 18%, 100% 100%, 0 100%
  );
}
:where(.bento-card, .module-card)[data-visual="archive"] .bento-bg-b {
  /* Middle folder */
  width: 58%; aspect-ratio: 1.5;
  left: 18%; top: 50%;
  transform: translateY(-50%);
  background: linear-gradient(180deg, rgba(var(--brand-rgb),0.20), rgba(var(--brand-rgb),0.08));
  clip-path: polygon(
    0 18%, 32% 18%, 36% 0, 62% 0, 66% 18%,
    100% 18%, 100% 100%, 0 100%
  );
}
:where(.bento-card, .module-card)[data-visual="archive"] .bento-bg-c {
  /* Front folder w/ file-line content (breathes; pops on hover) */
  width: 60%; aspect-ratio: 1.45;
  left: 28%; top: 50%;
  transform: translateY(-42%);
  background:
    repeating-linear-gradient(0deg,
      rgba(var(--brand-rgb),0.32) 0px,
      rgba(var(--brand-rgb),0.32) 1px,
      transparent 1px,
      transparent 7px),
    linear-gradient(180deg, rgba(var(--brand-rgb),0.30), rgba(var(--brand-rgb),0.12));
  clip-path: polygon(
    0 18%, 50% 18%, 54% 0, 80% 0, 84% 18%,
    100% 18%, 100% 100%, 0 100%
  );
  animation: bento-bg-archive-breathe 5s ease-in-out infinite alternate;
}
:where(.bento-card, .module-card)[data-visual="archive"]:hover .bento-bg-c {
  animation: bento-bg-archive-pop 2.4s ease-in-out infinite alternate;
}

/* ── DOCFILL · form lines auto-filling sequentially ──────────────────── */
:where(.bento-card, .module-card)[data-visual="docfill"] .bento-bg-a {
  top: 30%; left: 14%; right: 14%;
  height: 6px;
  border-radius: 3px;
  background-color: rgba(var(--brand-rgb),0.10);
  background-image: linear-gradient(90deg,
    rgba(var(--brand-rgb),0.55),
    rgba(var(--brand-rgb),0.85));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  animation: bento-bg-docfill-fill 4.5s ease-out infinite;
}
:where(.bento-card, .module-card)[data-visual="docfill"] .bento-bg-b {
  top: 50%; left: 14%; right: 14%;
  height: 6px;
  border-radius: 3px;
  background-color: rgba(var(--brand-rgb),0.10);
  background-image: linear-gradient(90deg,
    rgba(var(--brand-rgb),0.55),
    rgba(var(--brand-rgb),0.85));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  animation: bento-bg-docfill-fill 4.5s ease-out infinite;
  animation-delay: 0.6s;
}
:where(.bento-card, .module-card)[data-visual="docfill"] .bento-bg-c {
  top: 70%; left: 14%; right: 32%;
  height: 6px;
  border-radius: 3px;
  background-color: rgba(var(--brand-rgb),0.10);
  background-image: linear-gradient(90deg,
    rgba(var(--brand-rgb),0.55),
    rgba(var(--brand-rgb),0.85));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  animation: bento-bg-docfill-fill 4.5s ease-out infinite;
  animation-delay: 1.2s;
}
:where(.bento-card, .module-card)[data-visual="docfill"]:hover .bento-bg-a,
:where(.bento-card, .module-card)[data-visual="docfill"]:hover .bento-bg-b,
:where(.bento-card, .module-card)[data-visual="docfill"]:hover .bento-bg-c {
  animation-duration: 2.2s;
}

/* ── MAIL · send waves from corner + paper-plane comet trail ─────────── */
:where(.bento-card, .module-card)[data-visual="mail"] .bento-bg-a {
  /* Concentric "send" rings emanating from bottom-left */
  width: 220%; aspect-ratio: 1;
  bottom: -130%; left: -110%;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      transparent 0,
      transparent 26px,
      rgba(var(--brand-rgb),0.28) 26px,
      rgba(var(--brand-rgb),0.28) 27.4px);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 35%, transparent 70%);
          mask-image: radial-gradient(circle at 50% 50%, #000 35%, transparent 70%);
  animation: bento-bg-mail-pulse 6s linear infinite;
}
:where(.bento-card, .module-card)[data-visual="mail"] .bento-bg-b {
  /* Diagonal sheen sweep */
  inset: -10%;
  background: linear-gradient(-45deg,
    transparent 42%,
    rgba(var(--brand-rgb),0.32) 50%,
    transparent 58%);
  background-size: 220% 220%;
  animation: bento-bg-mail-sheen 7s ease-in-out infinite;
}
:where(.bento-card, .module-card)[data-visual="mail"] .bento-bg-c {
  /* Paper-plane dot flying diagonally with comet trail */
  width: 6px; height: 6px;
  bottom: 16%; left: 12%;
  border-radius: 50%;
  background: rgba(var(--brand-rgb),1);
  box-shadow:
    0 0 14px 2px rgba(var(--brand-rgb),0.65),
    -8px 8px 0 -1px rgba(var(--brand-rgb),0.55),
    -16px 16px 0 -2px rgba(var(--brand-rgb),0.32),
    -24px 24px 0 -2.5px rgba(var(--brand-rgb),0.16);
  animation: bento-bg-mail-fly 5s ease-in-out infinite;
}
:where(.bento-card, .module-card)[data-visual="mail"]:hover .bento-bg-a { animation-duration: 3.2s; }
:where(.bento-card, .module-card)[data-visual="mail"]:hover .bento-bg-b { animation-duration: 3.6s; }
:where(.bento-card, .module-card)[data-visual="mail"]:hover .bento-bg-c { animation-duration: 2.4s; }

/* ── SHIELD · shield silhouette with inner glow + checkmark ──────────── */
:where(.bento-card, .module-card)[data-visual="shield"] .bento-bg-a {
  /* Shield silhouette */
  left: 50%; top: 50%; width: 44%; aspect-ratio: 0.85;
  translate: -50% -50%;
  background: linear-gradient(180deg, rgba(var(--brand-rgb),0.32), rgba(var(--brand-rgb),0.10));
  clip-path: polygon(50% 0%, 100% 16%, 100% 58%, 50% 100%, 0% 58%, 0% 16%);
  animation: bento-bg-glow-pulse 3.4s ease-in-out infinite alternate;
}
:where(.bento-card, .module-card)[data-visual="shield"] .bento-bg-b {
  /* Inner glow inside shield */
  left: 50%; top: 50%; width: 30%; aspect-ratio: 0.85;
  translate: -50% -50%;
  background: radial-gradient(circle at 50% 35%, rgba(var(--brand-rgb),0.55), transparent 65%);
  filter: blur(6px);
  animation: bento-bg-glow-pulse 2.4s ease-in-out infinite alternate;
}
:where(.bento-card, .module-card)[data-visual="shield"] .bento-bg-c {
  /* Checkmark inside the shield */
  left: 50%; top: 48%; width: 20%; aspect-ratio: 1.3;
  translate: -50% -50%;
  background: rgba(var(--brand-rgb),1);
  clip-path: polygon(
    6% 50%, 18% 38%, 40% 62%, 78% 16%, 92% 28%, 40% 84%
  );
  filter: drop-shadow(0 0 6px rgba(var(--brand-rgb),0.6));
  animation: bento-bg-shield-check 3.6s ease-in-out infinite;
}
:where(.bento-card, .module-card)[data-visual="shield"]:hover .bento-bg-a { animation-duration: 1.8s; }
:where(.bento-card, .module-card)[data-visual="shield"]:hover .bento-bg-b { animation-duration: 1.4s; }
:where(.bento-card, .module-card)[data-visual="shield"]:hover .bento-bg-c { animation-duration: 1.8s; }

/* ── IMAGEAI · picture frame + shifting color content + AI sparkles ──── */
:where(.bento-card, .module-card)[data-visual="imageai"] .bento-bg-a {
  /* Picture frame outline */
  left: 50%; top: 50%; width: 60%; aspect-ratio: 1.25;
  translate: -50% -50%;
  border: 1.5px solid rgba(var(--brand-rgb),0.55);
  border-radius: 4px;
}
:where(.bento-card, .module-card)[data-visual="imageai"] .bento-bg-b {
  /* Generated image content inside frame (shifting color blobs) */
  left: 50%; top: 50%; width: 54%; aspect-ratio: 1.4;
  translate: -50% -50%;
  background:
    radial-gradient(ellipse at 30% 70%, rgba(var(--brand-rgb),0.65), transparent 60%),
    radial-gradient(ellipse at 70% 35%, rgba(var(--brand-rgb),0.42), transparent 60%),
    radial-gradient(ellipse at 50% 50%, rgba(var(--brand-rgb),0.22), transparent 70%);
  border-radius: 2px;
  filter: blur(5px);
  animation: bento-bg-imageai-shift 8s ease-in-out infinite alternate;
}
:where(.bento-card, .module-card)[data-visual="imageai"] .bento-bg-c {
  /* AI sparkles around the frame */
  inset: 0;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(var(--brand-rgb),0.85) 1.8px, transparent 2.6px),
    radial-gradient(circle at 88% 16%, rgba(var(--brand-rgb),0.65) 1.4px, transparent 2.2px),
    radial-gradient(circle at 10% 82%, rgba(var(--brand-rgb),0.75) 1.6px, transparent 2.4px),
    radial-gradient(circle at 90% 84%, rgba(var(--brand-rgb),0.85) 1.8px, transparent 2.6px);
  animation: bento-bg-node-pulse 2.4s ease-in-out infinite alternate;
}
:where(.bento-card, .module-card)[data-visual="imageai"]:hover .bento-bg-b { animation-duration: 4s; }
:where(.bento-card, .module-card)[data-visual="imageai"]:hover .bento-bg-c { animation-duration: 1.4s; }

/* ── CODE · angle brackets `<  >` + blinking cursor between ──────────── */
:where(.bento-card, .module-card)[data-visual="code"] .bento-bg-a {
  /* Left bracket `<` */
  left: 16%; top: 50%; width: 22%; aspect-ratio: 1;
  translate: 0 -50%;
  background: rgba(var(--brand-rgb),0.70);
  clip-path: polygon(
    100% 0%, 100% 22%, 38% 50%, 100% 78%, 100% 100%, 0% 50%
  );
}
:where(.bento-card, .module-card)[data-visual="code"] .bento-bg-b {
  /* Right bracket `>` */
  right: 16%; top: 50%; width: 22%; aspect-ratio: 1;
  translate: 0 -50%;
  background: rgba(var(--brand-rgb),0.70);
  clip-path: polygon(
    0% 0%, 62% 50%, 0% 100%, 0% 78%, 38% 50%, 0% 22%
  );
}
:where(.bento-card, .module-card)[data-visual="code"] .bento-bg-c {
  /* Blinking cursor between brackets */
  left: 50%; top: 50%;
  width: 2.4px; height: 26%;
  translate: -50% -50%;
  background: rgba(var(--brand-rgb),0.95);
  border-radius: 1px;
  box-shadow: 0 0 6px rgba(var(--brand-rgb),0.55);
  animation: bento-bg-code-cursor 1.1s steps(2) infinite;
}
:where(.bento-card, .module-card)[data-visual="code"]:hover .bento-bg-c { animation-duration: 0.55s; }

/* ── VOICEAI · horizontal sound waves (legacy fallback) ──────────────── */
:where(.bento-card, .module-card)[data-visual="voiceai"] .bento-bg-a {
  inset: 0;
  background-image: repeating-linear-gradient(
    0deg,
    rgba(var(--brand-rgb),0.28) 0,
    rgba(var(--brand-rgb),0.28) 2px,
    transparent 2px,
    transparent 7px
  );
  animation: bento-bg-voice 6s linear infinite;
}
:where(.bento-card, .module-card)[data-visual="voiceai"] .bento-bg-b {
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--brand-rgb),0.26) 50%,
    transparent 100%);
  animation: bento-bg-sweep-x 5s ease-in-out infinite;
}
:where(.bento-card, .module-card)[data-visual="voiceai"]:hover .bento-bg-a { animation-duration: 2.8s; }
@keyframes bento-bg-voice {
  from { background-position: 0 0;    }
  to   { background-position: 0 14px; }
}

/* ── ABSENCE · calendar grid + soft sweep ────────────────────────────── */
:where(.bento-card, .module-card)[data-visual="absence"] .bento-bg-a {
  inset: 0;
  background-image:
    linear-gradient(to right, rgba(var(--brand-rgb),0.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(var(--brand-rgb),0.10) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  opacity: 0.55;
}
:where(.bento-card, .module-card)[data-visual="absence"] .bento-bg-b {
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(var(--brand-rgb),0.22) 50%,
    transparent 100%);
  animation: bento-bg-sweep-x 7s ease-in-out infinite;
}
:where(.bento-card, .module-card)[data-visual="absence"]:hover .bento-bg-b { animation-duration: 3.5s; }

/* ── Keyframes ───────────────────────────────────────────────────────── */
@keyframes bento-bg-node-pulse {
  0%   { opacity: 0.55; scale: 1;    }
  100% { opacity: 1;    scale: 1.04; }
}
@keyframes bento-bg-glow-pulse {
  0%   { opacity: 0.45; scale: 0.9;  }
  100% { opacity: 1;    scale: 1.15; }
}
@keyframes bento-bg-sweep-x {
  0%, 100% { transform: translateX(-100%); opacity: 0; }
  50%      { transform: translateX(100%);  opacity: 1; }
}
@keyframes bento-bg-ai-nucleus {
  0%, 100% { scale: 0.85; opacity: 0.75; }
  50%      { scale: 1.20; opacity: 1;    }
}
@keyframes bento-bg-ai-orbit-cw {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}
@keyframes bento-bg-ai-orbit-ccw {
  from { transform: rotate(0deg);    }
  to   { transform: rotate(-360deg); }
}
@keyframes bento-bg-gantt-fill {
  0%   { background-size: 0% 100%;   }
  55%  { background-size: 100% 100%; }
  92%  { background-size: 100% 100%; opacity: 1; }
  100% { background-size: 100% 100%; opacity: 0; }
}
@keyframes bento-bg-crm-deal {
  0%   { left: 6%;  opacity: 0; }
  10%  { opacity: 1; }
  30%  { left: 30%; }
  55%  { left: 54%; }
  80%  { left: 78%; opacity: 1; }
  100% { left: 86%; opacity: 0; }
}
@keyframes bento-bg-cloud-pan-a {
  from { transform: translateX(0);    }
  to   { transform: translateX(450%); }
}
@keyframes bento-bg-cloud-pan-b {
  from { transform: translateX(0);    }
  to   { transform: translateX(560%); }
}
@keyframes bento-bg-cloud-uplift {
  0%   { transform: translateY(20%);  opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(-55%); opacity: 0; }
}
@keyframes bento-bg-archive-breathe {
  0%   { transform: translateY(-42%); }
  100% { transform: translateY(-48%); }
}
@keyframes bento-bg-archive-pop {
  0%   { transform: translateY(-42%); }
  100% { transform: translateY(-58%); }
}
@keyframes bento-bg-docfill-fill {
  0%   { background-size: 0% 100%;   }
  55%  { background-size: 100% 100%; }
  92%  { background-size: 100% 100%; opacity: 1; }
  100% { background-size: 100% 100%; opacity: 0; }
}
@keyframes bento-bg-mail-pulse {
  from { transform: scale(0.55) rotate(0deg); opacity: 0.85; }
  to   { transform: scale(1.18) rotate(6deg); opacity: 0.25; }
}
@keyframes bento-bg-mail-sheen {
  0%, 100% { background-position: 100% 100%; opacity: 0; }
  50%      { background-position: 0% 0%;     opacity: 1; }
}
@keyframes bento-bg-mail-fly {
  0%   { bottom: 16%; left: 12%; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { bottom: 96%; left: 96%; opacity: 0; }
}
@keyframes bento-bg-shield-check {
  0%, 100% { opacity: 0.55; scale: 0.9;  }
  50%      { opacity: 1;    scale: 1.08; }
}
@keyframes bento-bg-imageai-shift {
  0%   { scale: 1;    opacity: 0.55; }
  100% { scale: 1.08; opacity: 1;   }
}
@keyframes bento-bg-code-cursor {
  0%, 50%   { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* ── Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .bento-bg > span {
    animation: none !important;
    transform: none !important;
  }
  .bento-bg {
    opacity: 0.5 !important;
  }
}