/* ============================================================
   Sourceless B2B — Universal Premium Text Animations
   Used via data-anim-words / data-anim-fade / data-anim-cascade
   ============================================================ */

/* ===== Word-by-Word Reveal (data-anim-words) ===== */
.sl-anim-w {
  display: inline-block;
  margin-right: 0.22em;
  opacity: 0;
  transform: translateY(22px);
  filter: blur(8px);
  /* Override parent's transparent text-fill so non-accent words stay visible */
  -webkit-text-fill-color: currentColor;
  background: transparent;
  transition:
    opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  /* Compress stagger so the full headline completes within ~1s */
  transition-delay: calc(var(--d, 0s) * 0.55);
}
.sl-anim-in .sl-anim-w {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.sl-anim-w-accent {
  background: linear-gradient(90deg, #b7ff5f 0%, #aefc4d 30%, #d4ff8c 60%, #b7ff5f 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 18px rgba(140, 255, 0, 0.18);
}
.sl-anim-in .sl-anim-w-accent {
  animation: slAnimAccentShimmer 5s ease-in-out infinite;
  animation-delay: calc(var(--d, 0s) + 1.2s);
}
@keyframes slAnimAccentShimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
/* Variant — cyan/violet gradient für Domain headings */
.sl-anim-w-accent.sl-anim-w-accent-cv {
  background: linear-gradient(90deg, #aaf4ff 0%, #b7ff5f 35%, #d8c8ff 70%, #aaf4ff 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ===== Fade-Up Reveal for paragraphs (data-anim-fade) ===== */
[data-anim-fade] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--anim-delay, 0s);
}
[data-anim-fade].sl-anim-in {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Cascade Reveal for child elements (data-anim-cascade) ===== */
[data-anim-cascade] > * {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-anim-cascade].sl-anim-in > *:nth-child(1) { transition-delay: 0.10s; }
[data-anim-cascade].sl-anim-in > *:nth-child(2) { transition-delay: 0.22s; }
[data-anim-cascade].sl-anim-in > *:nth-child(3) { transition-delay: 0.34s; }
[data-anim-cascade].sl-anim-in > *:nth-child(4) { transition-delay: 0.46s; }
[data-anim-cascade].sl-anim-in > *:nth-child(5) { transition-delay: 0.58s; }
[data-anim-cascade].sl-anim-in > *:nth-child(6) { transition-delay: 0.70s; }
[data-anim-cascade].sl-anim-in > *:nth-child(7) { transition-delay: 0.82s; }
[data-anim-cascade].sl-anim-in > *:nth-child(8) { transition-delay: 0.94s; }
[data-anim-cascade].sl-anim-in > * {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Animated Separator (line · hex · line) ===== */
.sl-anim-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 18px auto 22px;
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}
.sl-anim-in .sl-anim-sep, [data-anim-words].sl-anim-in ~ .sl-anim-sep {
  opacity: 1;
}
.sl-anim-sep-line {
  display: block;
  height: 1px;
  width: 0;
  background: linear-gradient(90deg, transparent, rgba(124,255,106,0.55), rgba(99,243,255,0.55), transparent);
  box-shadow: 0 0 10px rgba(124, 255, 106, 0.25);
  transition: width 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.6s;
}
.sl-anim-in .sl-anim-sep-line {
  width: clamp(80px, 16vw, 180px);
}
.sl-anim-sep-hex {
  width: 12px;
  height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'><path d='M12 1 L23 7 L23 21 L12 27 L1 21 L1 7 Z' fill='%237cff7a'/></svg>") center/contain no-repeat;
  filter: drop-shadow(0 0 5px rgba(124, 255, 106, 0.7));
  animation: slAnimHexSpin 9s linear infinite;
  opacity: 0.85;
}
@keyframes slAnimHexSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ===== Pulsing dot after sub-words ===== */
.sl-anim-dot::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(124, 255, 106, 0.75);
  box-shadow: 0 0 8px rgba(124, 255, 106, 0.6);
  margin-left: 0.1em;
  transform: translateY(-0.25em);
  opacity: 0;
  transition: opacity 0.4s ease;
  transition-delay: calc(var(--d, 0s) + 0.6s);
}
[data-anim-words].sl-anim-in .sl-anim-dot::after {
  opacity: 0.8;
}

/* ============================================================
   ADVANCED PREMIUM ANIMATIONS — for tech-pages text blocks
   ============================================================ */

/* Shimmer-Highlight (gradient text mit anim) */
.sl-fx-shimmer {
  background-image: linear-gradient(90deg, #ffffff 0%, #b7ff5f 35%, #63f3ff 65%, #ffffff 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: slFxShimmer 6s ease-in-out infinite;
  filter: drop-shadow(0 0 14px rgba(100, 255, 200, 0.16));
}
@keyframes slFxShimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Eyebrow mit ausfahrenden Linien */
.sl-fx-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-family: 'JetBrains Mono', 'Space Grotesk', monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(180, 255, 220, 0.85);
  text-shadow: 0 0 16px rgba(77, 255, 195, 0.18);
}
.sl-fx-eyebrow-line {
  display: block;
  height: 1px;
  width: 0;
  background: linear-gradient(90deg, transparent, rgba(77, 255, 195, 0.55));
  transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}
.sl-fx-eyebrow-line.right { background: linear-gradient(90deg, rgba(77, 255, 195, 0.55), transparent); }
.sl-anim-in .sl-fx-eyebrow-line { width: 60px; }

/* Animated Hex-Spinner Separator (line · hex · line) */
.sl-fx-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 18px auto 22px;
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;
}
.sl-anim-in .sl-fx-sep { opacity: 1; }
.sl-fx-sep-line {
  display: block;
  height: 1px;
  width: 0;
  background: linear-gradient(90deg, transparent, rgba(124, 255, 106, 0.55), rgba(99, 243, 255, 0.55), transparent);
  box-shadow: 0 0 10px rgba(124, 255, 106, 0.25);
  transition: width 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.6s;
}
.sl-anim-in .sl-fx-sep-line { width: clamp(80px, 16vw, 180px); }
.sl-fx-sep-hex {
  width: 12px;
  height: 14px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 28'><path d='M12 1 L23 7 L23 21 L12 27 L1 21 L1 7 Z' fill='%237cff7a'/></svg>") center/contain no-repeat;
  filter: drop-shadow(0 0 5px rgba(124, 255, 106, 0.7));
  animation: slFxHexSpin 9s linear infinite;
  opacity: 0.85;
}
@keyframes slFxHexSpin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Sub-words mit Pulse-Dot */
.sl-fx-sub-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--d, 0s);
  margin-right: 0.25em;
}
.sl-anim-in .sl-fx-sub-word { opacity: 1; transform: translateY(0); }
.sl-fx-sub-word::after {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(124, 255, 106, 0.75);
  box-shadow: 0 0 8px rgba(124, 255, 106, 0.6);
  margin-left: 0.1em;
  transform: translateY(-0.25em);
  opacity: 0;
  transition: opacity 0.4s ease;
  transition-delay: calc(var(--d, 0s) + 0.5s);
}
.sl-anim-in .sl-fx-sub-word::after { opacity: 0.8; }

/* Block-Row mit Bar + Number + Pulse + Underline */
.sl-fx-block {
  position: relative;
  display: grid;
  grid-template-columns: 38px 2px 1fr;
  gap: 0 22px;
  align-items: stretch;
  padding: 30px 4px;
  cursor: default;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
}
.sl-fx-block::after {
  content: "";
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
  transition: background 0.4s;
}
.sl-fx-block:last-of-type::after { display: none; }
.sl-fx-block:hover { transform: translateX(6px); }
.sl-fx-block-underline {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 1px;
  width: 0;
  background: linear-gradient(90deg, rgba(100, 220, 120, 0.7) 0%, rgba(77, 255, 195, 0.5) 50%, rgba(155, 143, 255, 0.25) 100%);
  transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 2;
}
.sl-fx-block:hover .sl-fx-block-underline { width: 100%; }
.sl-fx-block-spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
  background: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 50%), rgba(100, 220, 130, 0.06), transparent 70%);
  z-index: 0;
}
.sl-fx-block:hover .sl-fx-block-spotlight { opacity: 1; }
.sl-fx-block-number {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: rgba(80, 220, 140, 0.4);
  padding-top: 4px;
  text-align: right;
  transition: color 0.45s, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), text-shadow 0.45s;
  align-self: start;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  position: relative;
  z-index: 1;
}
.sl-fx-block:hover .sl-fx-block-number {
  color: rgba(120, 255, 170, 0.95);
  transform: scale(1.12);
  text-shadow: 0 0 14px rgba(100, 220, 140, 0.35);
}
.sl-fx-block-bar {
  width: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.05);
  align-self: stretch;
  position: relative;
  overflow: visible;
  transition: box-shadow 0.4s;
}
.sl-fx-bar-fill {
  position: absolute;
  top: 50%;
  left: 0; right: 0;
  height: 0;
  transform: translateY(-50%);
  background: linear-gradient(180deg, rgba(155, 143, 255, 0.55) 0%, rgba(77, 255, 195, 0.95) 48%, rgba(100, 220, 120, 0.85) 100%);
  transition: height 1s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}
.sl-anim-in .sl-fx-bar-fill { height: 100%; }
.sl-fx-bar-pulse {
  position: absolute;
  top: -40%;
  left: -2px;
  right: -2px;
  height: 26%;
  background: linear-gradient(180deg, transparent 0%, rgba(200, 255, 220, 0.95) 50%, transparent 100%);
  filter: blur(2px);
  opacity: 0;
  animation: slFxBarPulse 4.2s ease-in-out infinite 1.2s;
  pointer-events: none;
}
@keyframes slFxBarPulse {
  0%   { top: -40%; opacity: 0; }
  12%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { top: 105%; opacity: 0; }
}
.sl-fx-block:hover .sl-fx-bar-pulse { animation-duration: 1.9s; }
.sl-fx-block:hover .sl-fx-block-bar { box-shadow: 0 0 10px rgba(100, 220, 140, 0.22); }
.sl-fx-block-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.sl-fx-block-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(80, 220, 140, 0.55);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.25s, transform 0.65s cubic-bezier(0.16, 1, 0.3, 1) 0.25s, color 0.4s, letter-spacing 0.4s;
}
.sl-anim-in .sl-fx-block-tag { opacity: 1; transform: translateX(0); }
.sl-fx-block:hover .sl-fx-block-tag { color: rgba(130, 255, 170, 0.95); letter-spacing: 0.18em; }
.sl-fx-block-text {
  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.65;
  color: rgba(235, 248, 240, 0.92);
  margin: 0;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.4s, transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.4s, color 0.4s;
}
.sl-anim-in .sl-fx-block-text { opacity: 1; transform: translateY(0); }
.sl-fx-block:hover .sl-fx-block-text { color: rgba(250, 255, 252, 1); }

/* Highlight: dynamic shimmer */
.sl-fx-highlight {
  background-image: linear-gradient(90deg, #7bff6a 0%, #4dffc3 35%, #a095ff 65%, #7bff6a 100%);
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 500;
  animation: slFxHlShimmer 7s linear infinite;
  transition: filter 0.4s;
}
@keyframes slFxHlShimmer {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.sl-fx-block:hover .sl-fx-highlight { filter: drop-shadow(0 0 14px rgba(100, 255, 180, 0.28)); }

/* Headline-Lines mit Stagger (für Hero-Stacked) */
.sl-fx-hl-line {
  display: block;
  opacity: 0;
  transform: translateY(18px);
  filter: blur(4px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), filter 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--d, 0s);
  color: #ffffff;
  text-shadow: 0 0 14px rgba(255, 255, 255, 0.06), 0 0 32px rgba(120, 255, 160, 0.05);
}
.sl-anim-in .sl-fx-hl-line { opacity: 1; transform: translateY(0); filter: blur(0); }

/* Scan-Sweep over container (one-shot) */
.sl-fx-scan-host { position: relative; overflow: hidden; }
.sl-fx-scan-host::after {
  content: "";
  position: absolute;
  top: 0;
  left: -25%;
  width: 22%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(120, 255, 160, 0.05) 30%, rgba(180, 255, 210, 0.16) 50%, rgba(120, 255, 160, 0.05) 70%, transparent 100%);
  transform: skewX(-12deg);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
}
.sl-fx-scan-host.sl-anim-in::after {
  animation: slFxScanSweep 1.4s cubic-bezier(0.5, 0, 0.3, 1) 0.3s forwards;
}
@keyframes slFxScanSweep {
  0%   { left: -25%; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { left: 125%; opacity: 0; }
}

/* 3D Tilt host */
.sl-fx-tilt { transform-style: preserve-3d; will-change: transform; transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }

/* ============================================================
   Premium FX from reference HTML codes (Block 1 / 2 / 3)
   - Bar fill / pulse / signal
   - Eck-bracket numbers, matrix flip, typewriter tag
   - Radar pulse, orbit dot, scan sweep
   - Block spotlight (cursor follow)
   ============================================================ */

/* ----- Vertical accent bar (Block 1 style) ----- */
.sl-fx-bar {
  position: relative;
  width: 3px;
  height: 56px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
  flex: 0 0 auto;
}
.sl-fx-bar-fill {
  position: absolute;
  inset: auto 0 0 0;
  height: 0;
  background: linear-gradient(180deg, #b7ff5f 0%, #63f3ff 100%);
  box-shadow: 0 0 14px rgba(140, 255, 0, 0.55);
  border-radius: 2px;
  transition: height 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.sl-anim-in .sl-fx-bar-fill,
.sl-home-in .sl-fx-bar-fill,
.visible .sl-fx-bar-fill,
.is-visible .sl-fx-bar-fill { height: 100%; }

/* Pulse-Variante (Block 2) */
.sl-fx-bar-pulse {
  position: relative;
  width: 3px;
  height: 56px;
  background: linear-gradient(180deg, rgba(183,255,95,0) 0%, #b7ff5f 50%, rgba(183,255,95,0) 100%);
  border-radius: 2px;
  opacity: 0;
  transition: opacity 0.6s ease 0.2s;
}
.sl-anim-in .sl-fx-bar-pulse,
.sl-home-in .sl-fx-bar-pulse,
.visible .sl-fx-bar-pulse,
.is-visible .sl-fx-bar-pulse {
  opacity: 1;
  animation: slFxBarPulse 2.4s ease-in-out infinite;
}
@keyframes slFxBarPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(183,255,95,0.35); transform: scaleY(1); }
  50%      { box-shadow: 0 0 22px rgba(183,255,95,0.85); transform: scaleY(1.08); }
}

/* Signal-Travel bar (Block 3) */
.sl-fx-bar-signal {
  position: relative;
  width: 3px;
  height: 56px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
}
.sl-fx-bar-signal::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -30%;
  height: 30%;
  background: linear-gradient(180deg, transparent 0%, #63f3ff 40%, #b7ff5f 60%, transparent 100%);
  filter: blur(0.5px);
  opacity: 0;
}
.sl-anim-in .sl-fx-bar-signal::after,
.sl-home-in .sl-fx-bar-signal::after,
.visible .sl-fx-bar-signal::after,
.is-visible .sl-fx-bar-signal::after {
  opacity: 1;
  animation: slFxSignalTravel 2.6s linear infinite;
}
@keyframes slFxSignalTravel {
  0%   { top: -30%; }
  100% { top: 110%; }
}

/* ----- Eck-Bracket Numbers (Block 1+2) ----- */
.sl-fx-num {
  position: relative;
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
  font-size: clamp(14px, 1.4vw, 17px);
  letter-spacing: 0.04em;
  color: #b7ff5f;
  padding: 6px 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sl-fx-num::before, .sl-fx-num::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 6px;
  border-top: 1px solid rgba(183, 255, 95, 0.55);
  border-bottom: 1px solid rgba(183, 255, 95, 0.55);
  opacity: 0;
  transition: opacity 0.6s ease 0.4s, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}
.sl-fx-num::before {
  left: 0;
  border-left: 1px solid rgba(183, 255, 95, 0.55);
  transform: translateX(-6px);
}
.sl-fx-num::after {
  right: 0;
  border-right: 1px solid rgba(183, 255, 95, 0.55);
  transform: translateX(6px);
}
.sl-anim-in .sl-fx-num::before,
.sl-home-in .sl-fx-num::before,
.visible .sl-fx-num::before,
.is-visible .sl-fx-num::before { opacity: 1; transform: translateX(0); }
.sl-anim-in .sl-fx-num::after,
.sl-home-in .sl-fx-num::after,
.visible .sl-fx-num::after,
.is-visible .sl-fx-num::after { opacity: 1; transform: translateX(0); }

/* ----- Typewriter Tag (Block 2 style) ----- */
.sl-fx-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(183, 255, 95, 0.85);
  padding: 6px 12px;
  border: 1px solid rgba(183, 255, 95, 0.25);
  border-radius: 999px;
  background: rgba(183, 255, 95, 0.06);
}
.sl-fx-tag::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: #b7ff5f;
  box-shadow: 0 0 8px #b7ff5f;
  animation: slFxTagBlink 1.8s ease-in-out infinite;
}
@keyframes slFxTagBlink {
  0%, 100% { opacity: 1; box-shadow: 0 0 10px #b7ff5f; }
  50%      { opacity: 0.45; box-shadow: 0 0 4px #b7ff5f; }
}
.sl-fx-typing::after {
  content: "▌";
  margin-left: 2px;
  color: #b7ff5f;
  animation: slFxCaret 0.7s steps(1) infinite;
}
@keyframes slFxCaret {
  0%, 50% { opacity: 1; }
  51%,100% { opacity: 0; }
}

/* ----- Block Spotlight (cursor follows, Block 1) ----- */
.sl-fx-block {
  position: relative;
  --mx: 50%; --my: 50%;
}
.sl-fx-block::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle 220px at var(--mx) var(--my),
              rgba(183, 255, 95, 0.10),
              transparent 60%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: 0;
}
.sl-fx-block:hover::before { opacity: 1; }
.sl-fx-block > * { position: relative; z-index: 1; }

/* Block animated underline (Block 1) */
.sl-fx-underline {
  position: relative;
  display: inline-block;
  padding-bottom: 4px;
}
.sl-fx-underline::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, #b7ff5f, #63f3ff);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;
}
.sl-anim-in .sl-fx-underline::after,
.sl-home-in .sl-fx-underline::after,
.visible .sl-fx-underline::after,
.is-visible .sl-fx-underline::after { transform: scaleX(1); }

/* ----- Radar Pulse (Block 3) ----- */
.sl-fx-radar {
  position: absolute;
  width: 80px; height: 80px;
  border-radius: 50%;
  border: 1px solid rgba(99, 243, 255, 0.35);
  opacity: 0;
  pointer-events: none;
}
.sl-anim-in .sl-fx-radar,
.sl-home-in .sl-fx-radar,
.visible .sl-fx-radar,
.is-visible .sl-fx-radar {
  opacity: 1;
  animation: slFxRadar 3.2s ease-out infinite;
}
@keyframes slFxRadar {
  0%   { transform: scale(0.4); opacity: 0.9; border-color: rgba(99, 243, 255, 0.75); }
  100% { transform: scale(2.6); opacity: 0;   border-color: rgba(99, 243, 255, 0); }
}

/* ----- Orbit Dot (Block 3) ----- */
.sl-fx-orbit {
  position: relative;
  width: 56px; height: 56px;
}
.sl-fx-orbit::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed rgba(183, 255, 95, 0.35);
}
.sl-fx-orbit::after {
  content: "";
  position: absolute;
  top: -3px; left: 50%;
  width: 8px; height: 8px;
  margin-left: -4px;
  background: #b7ff5f;
  border-radius: 50%;
  box-shadow: 0 0 12px #b7ff5f;
  transform-origin: 4px 31px;
  animation: slFxOrbit 4.5s linear infinite;
}
@keyframes slFxOrbit {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ----- Scan Sweep (Block 3) ----- */
.sl-fx-scan {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
.sl-fx-scan::before {
  content: "";
  position: absolute;
  top: -30%;
  left: 0; right: 0;
  height: 18%;
  background: linear-gradient(180deg, transparent, rgba(99, 243, 255, 0.18) 50%, transparent);
  filter: blur(2px);
  opacity: 0;
}
.sl-anim-in .sl-fx-scan::before,
.sl-home-in .sl-fx-scan::before,
.visible .sl-fx-scan::before,
.is-visible .sl-fx-scan::before {
  opacity: 1;
  animation: slFxScan 5.2s ease-in-out infinite;
}
@keyframes slFxScan {
  0%   { top: -30%; opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { top: 110%; opacity: 0; }
}

/* ----- Matrix-Flip Number container ----- */
.sl-fx-mflip {
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 44px);
  color: #b7ff5f;
  letter-spacing: 0.04em;
  text-shadow: 0 0 18px rgba(183, 255, 95, 0.4);
  min-width: 2.2ch;
  display: inline-block;
}

/* ----- Sweep-in line separator ----- */
.sl-fx-sep-line {
  position: relative;
  height: 1px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.sl-fx-sep-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, #b7ff5f, #63f3ff, transparent);
  transform: translateX(-110%);
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}
.sl-anim-in .sl-fx-sep-line::after,
.sl-home-in .sl-fx-sep-line::after,
.visible .sl-fx-sep-line::after,
.is-visible .sl-fx-sep-line::after { transform: translateX(110%); }

/* ============================================================
   Bidirectional helpers — make sure reveal classes can be
   reapplied & re-fire (transitions reset cleanly).
   ============================================================ */
/* On leave: actively reset state */
[data-anim-words]:not(.sl-anim-in) .sl-anim-w {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(8px);
}

/* Smooth out: shorter exit transition feels more natural */
.sl-anim-w {
  transition-property: opacity, transform, filter;
}

/* ============================================================
   Premium: Stagger reveal for grid children
   ============================================================ */
.sl-stagger-init {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition:
    opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.55s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--sg-d, 0s);
}
.sl-stagger-on > .sl-stagger-init {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  .sl-anim-w,
  [data-anim-fade],
  [data-anim-cascade] > *,
  .sl-anim-sep,
  .sl-anim-sep-line,
  .sl-anim-dot::after {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    width: clamp(80px, 16vw, 180px) !important;
  }
  .sl-anim-w-accent,
  .sl-anim-sep-hex,
  .sl-fx-bar-pulse,
  .sl-fx-radar,
  .sl-fx-orbit::after,
  .sl-fx-scan::before,
  .sl-fx-bar-signal::after { animation: none !important; }
}

/* ============================================================
   Safety-Net: Slider cards should never be hidden (horizontal scroll bug)
   ============================================================ */
.sl-slider-card {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}
.sl-slider-card.sl-home-init,
.sl-slider-card.sl-stagger-init {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* Tech-grid cards on /technologien/ overview — always visible */
.sl-tech-grid > *,
[data-reveal-stagger] > * {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Hide helix backgrounds completely — user feedback */
.sl-helix-bg::before,
.sl-helix-bg::after {
  display: none !important;
}

/* ============================================================
   Box-Wrapper für Text-Bereiche (Wix-Style schöne Boxen)
   ============================================================ */
.sl-box-wrap, .sl-card-wrap {
  position: relative;
  padding: 32px 40px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 10%, rgba(99,243,255,0.05), transparent 35%),
    radial-gradient(circle at 88% 88%, rgba(124,255,106,0.04), transparent 35%),
    linear-gradient(155deg, rgba(7,12,10,0.78), rgba(9,13,11,0.45));
  border: 1px solid rgba(124,255,106,0.14);
  box-shadow:
    0 22px 56px rgba(0,0,0,0.30),
    0 0 36px rgba(124,255,106,0.04),
    inset 0 1px 0 rgba(255,255,255,0.04);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.45s cubic-bezier(0.16,1,0.3,1), border-color 0.35s ease, box-shadow 0.35s ease;
}
.sl-box-wrap:hover, .sl-card-wrap:hover {
  transform: translateY(-2px);
  border-color: rgba(124,255,106,0.30);
  box-shadow:
    0 28px 70px rgba(0,0,0,0.36),
    0 0 48px rgba(124,255,106,0.10),
    inset 0 1px 0 rgba(255,255,255,0.05);
}
.sl-box-wrap::before, .sl-card-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image:
    linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  opacity: 0.7;
  z-index: 0;
}
.sl-box-wrap > *, .sl-card-wrap > * {
  position: relative;
  z-index: 1;
}

/* Lightweight variant — for inline section blocks */
.sl-box-soft {
  padding: 24px 28px;
  border-radius: 20px;
  background: linear-gradient(155deg, rgba(7,12,10,0.55), rgba(9,13,11,0.32));
  border: 1px solid rgba(124,255,106,0.10);
  box-shadow: 0 14px 36px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.03);
}

/* Network/Circuit overlay — adds subtle animated lines behind content */
.sl-bg-circuit::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.4;
  background-image:
    linear-gradient(90deg, transparent 0%, rgba(124,255,106,0.06) 50%, transparent 100%),
    linear-gradient(0deg, transparent 0%, rgba(99,243,255,0.04) 50%, transparent 100%);
  background-size: 200% 100%, 100% 200%;
  animation: slBgCircuit 18s linear infinite;
}
@keyframes slBgCircuit {
  0%   { background-position: 0% 0%, 0% 0%; }
  100% { background-position: 100% 0%, 0% 100%; }
}

/* When user explicitly wants reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sl-bg-circuit::after { animation: none; }
}

/* ============================================================
   FINAL FIXES — v11
   ============================================================ */

/* Force-visible Tech-Cards on /technologien/ (data-reveal-stagger bug) */
.sl-tech-grid,
.sl-tech-grid > a,
.sl-tech-grid > .sl-tech-card-image,
[data-reveal-stagger],
[data-reveal-stagger] > * {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
}

/* Nav-Dropdown — bridge gap between trigger & submenu so hovering across works */
.sl-nav-item-has-children { position: relative; }
.sl-nav-item-has-children > .sl-nav-link {
  padding-bottom: 14px;  /* bigger hover target */
}
.sl-nav-dropdown {
  /* extend hover area with negative top margin */
  margin-top: -8px !important;
  padding-top: 14px !important;
  /* keep open longer via larger hover zone */
}
.sl-nav-item-has-children::after {
  /* invisible bridge between nav link and dropdown */
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 24px;
  pointer-events: auto;
}
/* Keep dropdown open while hover is anywhere inside or on the bridge */
.sl-nav-item-has-children:hover > .sl-nav-dropdown,
.sl-nav-item-has-children:hover::after + .sl-nav-dropdown,
.sl-nav-dropdown:hover {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}
/* Add hover-delay close so users get more time */
.sl-nav-dropdown {
  transition-delay: 0s;
}
.sl-nav-item-has-children:hover .sl-nav-dropdown {
  transition-delay: 0s !important;
}

/* Footer social icons — remove the black background */
.sl-footer-wix-socials a {
  background: transparent !important;
  border: 1px solid rgba(124,255,106,0.20) !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(225,236,245,0.75) !important;
  font-size: 16px !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}
.sl-footer-wix-socials a:hover {
  background: rgba(124,255,106,0.10) !important;
  border-color: rgba(124,255,106,0.50) !important;
  color: #b7ff5f !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 14px rgba(0,0,0,0.30), 0 0 12px rgba(124,255,106,0.20) !important;
}

/* Make sure /technologien/ overview page also has the particles background visible */
.sl-tech-hero { position: relative; z-index: 1; }