/* ============================================================================
   MOTION PREMIUM — Wow-Layer für die Konzept-/Suite-/SMT-Komponenten.
   Baut auf reveal-up (viz.css) + sm-concept/smt auf. GPU-freundlich
   (nur transform/opacity), reduced-motion-sicher. Motto: „Schneller als die Zeit".
   ============================================================================ */

/* ── Staggered Reveal (JS setzt --si Index + .is-in) ─────────────────────────── */
.smc-stagger-item {
  opacity: 0;
  transform: translateY(30px) scale(0.985);
  transition: opacity 0.66s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.72s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--si, 0) * 65ms);
  will-change: transform, opacity;
}
.smc-stagger-item.is-in { opacity: 1; transform: none; }

/* ── Cursor-Spotlight auf grossen Karten (JS setzt --mx/--my) ────────────────── */
.smc-card, .smt-tier, .smt-case, .smc-node, .smc-layer, .smc-auth__item, .smc-hop, .ksu-card,
.smt-card, .smt-layer, .smt-inttile, .smt-hop, .smt-power__panel {
  --mx: 50%; --my: 0%;
}
.smc-card::before,
.smt-card::before, .smt-layer::before, .smt-inttile::before, .smt-hop::before, .smt-power__panel::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(340px 260px at var(--mx) var(--my), rgba(255, 255, 255, 0.10), transparent 62%) !important;
  opacity: 0; transition: opacity 0.45s ease;
}
.smc-card:hover::before,
.smt-card:hover::before, .smt-layer:hover::before, .smt-inttile:hover::before, .smt-hop:hover::before, .smt-power__panel:hover::before {
  opacity: 1;
}
/* Conic-Glow-Rand beim Hover (folgt Cursor) */
.smc-card::after,
.smt-card::after, .smt-layer::after, .smt-inttile::after, .smt-hop::after, .smt-power__panel::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: conic-gradient(from 210deg at var(--mx) var(--my),
    transparent 0deg, rgba(220, 0, 24, 0.55) 70deg, rgba(255, 140, 155, 0.35) 130deg, transparent 210deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude; opacity: 0; transition: opacity 0.45s ease; pointer-events: none;
}
.smc-card:hover::after,
.smt-card:hover::after, .smt-layer:hover::after, .smt-inttile:hover::after, .smt-hop:hover::after, .smt-power__panel:hover::after {
  opacity: 1;
}

/* ── Sheen-Sweep über Karten/Tiles beim Hover ───────────────────────────────── */
.smt-tier, .smt-case, .smc-node, .smc-auth__item, .smc-layer { position: relative; overflow: hidden; }
.smt-tier::after, .smt-case::after, .smc-auth__item::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.10), transparent);
  transform: skewX(-18deg); pointer-events: none; opacity: 0;
}
.smt-tier:hover::after, .smt-case:hover::after, .smc-auth__item:hover::after {
  opacity: 1; animation: mp-sheen 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes mp-sheen { to { left: 120%; } }

/* ── Icon-Mikrointeraktion (Karten-Hover) ───────────────────────────────────── */
.smc-card__icon, .smt-case__ico, .smc-node__icon, .smc-auth__ico, .smt-arch__ico, .smc-layer__ico,
.smt-card__icon, .smt-layer__icon, .smt-inttile__icon {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}
.smc-card:hover .smc-card__icon,
.smt-case:hover .smt-case__ico,
.smc-node:hover .smc-node__icon,
.smc-auth__item:hover .smc-auth__ico,
.smc-layer:hover .smc-layer__ico,
.smt-card:hover .smt-card__icon,
.smt-layer:hover .smt-layer__icon,
.smt-inttile:hover .smt-inttile__icon {
  transform: scale(1.1) rotate(-5deg);
  box-shadow: 0 10px 26px rgba(220, 0, 24, 0.4);
}

/* ── Platform-Flow: Knoten-Motion + pulsierende Fluss-Pfeile ───────────────── */
.smc-flow__track { position: relative; }
/* Fluss-Pfeile (aus sm-concept.css) sanft pulsieren lassen */
.smc-flow__track .smc-node:not(:last-child)::after { animation: mp-arrow 1.8s ease-in-out infinite; }
@keyframes mp-arrow { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
.smc-node { transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.45s ease, box-shadow 0.45s ease; }
a.smc-node:hover { transform: translateY(-6px) scale(1.015); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5); }
.smc-node__metric::before { animation: mp-pulse 1.8s ease-in-out infinite; }

/* ── Gradient-Text-Shimmer (dezent) ─────────────────────────────────────────── */
.smc-h .grad, .smc-hero__title .grad, .smt-hero .grad {
  background-size: 200% auto;
  animation: mp-shimmer 6s linear infinite;
}
@keyframes mp-shimmer { to { background-position: 200% center; } }

/* ── Buttons: Shine-Sweep + Press-Haptik ────────────────────────────────────── */
.smc-btn, .ksu-btn, .ftr2__btn { position: relative; overflow: hidden; }
.smc-btn--primary::after, .ksu-btn--primary::after, .ftr2__btn--primary::after {
  content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-20deg); pointer-events: none;
}
.smc-btn--primary:hover::after, .ksu-btn--primary:hover::after, .ftr2__btn--primary:hover::after {
  animation: mp-shine 0.85s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes mp-shine { to { left: 130%; } }
.smc-btn:active, .ksu-btn:active, .ftr2__btn:active { transform: translateY(1px) scale(0.98); }

/* ── Badges: sanftes Aufploppen bei Hover ───────────────────────────────────── */
.smt-badge { transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, background 0.3s ease; }
.smt-badge:hover { transform: translateY(-2px); border-color: rgba(220, 0, 24, 0.4); background: rgba(220, 0, 24, 0.08); }

/* ── „Schneller als die Zeit" — kinetisches Motto ───────────────────────────── */
.mp-motto {
  display: inline-flex; align-items: center; gap: 12px;
  position: relative; z-index: 2;
}
.mp-motto__lines { display: inline-flex; gap: 3px; align-items: center; }
.mp-motto__lines i {
  display: block; width: 16px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--smc-red-soft, #ff8f9b));
  animation: mp-speed 1.1s ease-in-out infinite;
}
.mp-motto__lines i:nth-child(2) { width: 22px; animation-delay: 0.12s; }
.mp-motto__lines i:nth-child(3) { width: 12px; animation-delay: 0.24s; }
.mp-motto__text {
  font-family: var(--smc-mono, monospace); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(255, 255, 255, 0.62);
}
.mp-motto__text b { color: #fff; font-weight: 700; }
@keyframes mp-speed { 0%, 100% { transform: translateX(0); opacity: 0.5; } 50% { transform: translateX(4px); opacity: 1; } }
/* Light-Variant für helle Sektionen (Hero) */
.mp-motto--light .mp-motto__lines i { background: linear-gradient(90deg, transparent, #dc0018); }
.mp-motto--light .mp-motto__text { color: var(--viz-text-2, #475569); }
.mp-motto--light .mp-motto__text b { color: var(--viz-text, #0f172a); }

/* ── Micro: FAQ-Öffnen weicher, Compare-Row-Hover ───────────────────────────── */
.smt-faq__item { transition: border-color 0.3s ease, background 0.3s ease; }
.smt-faq__item:hover { border-color: rgba(220, 0, 24, 0.3); }
.smt-faq__item[open] { border-color: rgba(220, 0, 24, 0.38); background: linear-gradient(160deg, rgba(220, 0, 24, 0.08), rgba(255, 255, 255, 0.015)); }
.smt-faq__a { animation: mp-fadein 0.4s ease; }
@keyframes mp-fadein { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.smt-compare tbody tr { transition: background 0.25s ease; }
.smt-compare tbody tr:hover td { background: rgba(255, 255, 255, 0.03); }
.smt-compare tbody tr:hover td:last-child { background: rgba(220, 0, 24, 0.09); }

/* ── Premium 2026 App-Icon-Look — konsistente Squircle-Icons mit Gloss + Glow ── */
.smc-card__icon, .smc-node__icon, .smc-techcard__ico,
.smt6-card__ico, .smt6-arch__ico, .smt6-case__ico, .ksu-card__icon,
.smt-card__icon, .smt-layer__icon, .smt-inttile__icon {
  border-radius: 15px !important;
  box-shadow: 0 12px 28px rgba(220, 0, 24, 0.36),
              inset 0 1px 0 rgba(255, 255, 255, 0.30),
              inset 0 -3px 9px rgba(0, 0, 0, 0.22) !important;
  position: relative;
}
.smc-card__icon::before, .smc-node__icon::before, .smc-techcard__ico::before,
.smt6-card__ico::before, .smt6-arch__ico::before, .smt6-case__ico::before,
.ksu-card__icon::before,
.smt-card__icon::before, .smt-layer__icon::before, .smt-inttile__icon::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(157deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 46%);
}
.smc-card__icon svg, .smc-node__icon svg, .smc-techcard__ico svg,
.smt6-card__ico svg, .smt6-arch__ico svg, .smt6-case__ico svg,
.ksu-card__icon svg,
.smt-card__icon svg, .smt-layer__icon svg, .smt-inttile__icon svg {
  position: relative; z-index: 1;
}

/* ── Pulse-Keyframe (geteilt) ───────────────────────────────────────────────── */
@keyframes mp-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } }

/* ── Reduced Motion: alles Bewegte ruhigstellen ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .smc-stagger-item { opacity: 1 !important; transform: none !important; transition: none !important; }
  .smc-flow__track .smc-node:not(:last-child)::after, .smc-node__metric::before, .smc-h .grad, .smc-hero__title .grad,
  .mp-motto__lines i, .smt-tier::after, .smt-case::after, .smc-auth__item::after,
  .smc-btn--primary::after, .ksu-btn--primary::after, .ftr2__btn--primary::after { animation: none !important; }
  .smc-card::after, .smc-card::before { opacity: 0 !important; }
}