/* ============================================================
   SMY AGENCY — DEMO / SHOWCASE STYLES
   Nur für die Design-Vorschau (design-demo.html):
   3D-Laptop, Custom-Cursor, Aurora-Glow, Marquee.
   Baut auf den Tokens aus design-system.css auf.
   ============================================================ */

/* ─────────────────────────────────────────────
   CUSTOM CURSOR GLOW (folgt der Maus)
   ───────────────────────────────────────────── */
.cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 460px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--smy-red-glow) 0%, transparent 60%);
  filter: blur(30px);
  opacity: 0;
  pointer-events: none;
  z-index: var(--z-bg);
  transform: translate(-50%, -50%);
  transition: opacity 400ms ease;
  mix-blend-mode: screen;
}
body.cursor-active .cursor-glow { opacity: 0.5; }
@media (hover: none) { .cursor-glow { display: none; } }

/* magnetische Buttons brauchen kein extra CSS – JS setzt translate */
.btn { will-change: transform; }

/* ─────────────────────────────────────────────
   HERO – Aurora / animierter Glow
   ───────────────────────────────────────────── */
.aurora {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 80vh;
  z-index: 0;
  pointer-events: none;
  filter: blur(60px);
  opacity: 0.55;
}
.aurora::before,
.aurora::after {
  content: "";
  position: absolute;
  width: 50vw;
  height: 50vw;
  max-width: 640px;
  max-height: 640px;
  border-radius: 50%;
}
.aurora::before {
  left: 8%;
  background: radial-gradient(circle, var(--smy-red-glow), transparent 60%);
  animation: floatA 14s ease-in-out infinite;
}
.aurora::after {
  right: 6%;
  background: radial-gradient(circle, rgba(255,45,45,0.30), transparent 60%);
  animation: floatB 18s ease-in-out infinite;
}
@keyframes floatA {
  0%,100% { transform: translate(0,0) scale(1); }
  50%     { transform: translate(6vw, 4vh) scale(1.15); }
}
@keyframes floatB {
  0%,100% { transform: translate(0,0) scale(1.1); }
  50%     { transform: translate(-5vw, -3vh) scale(0.95); }
}

/* ─────────────────────────────────────────────
   HERO-PARTIKELNETZ (Canvas, KI-Vibe)
   ───────────────────────────────────────────── */
.hero-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 95% 85% at 50% 45%, #000 55%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 95% 85% at 50% 45%, #000 55%, transparent 100%);
}

/* ─────────────────────────────────────────────
   LOGO-MARQUEE (endlos laufend)
   ───────────────────────────────────────────── */
.marquee {
  overflow: hidden;
  border-block: 1px solid var(--border-subtle);
  padding-block: var(--space-md);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track {
  display: flex;
  gap: var(--space-xl);
  width: max-content;
  animation: scrollX 26s linear infinite;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.4rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.marquee__track span { display: inline-flex; align-items: center; gap: 0.5rem; }
.marquee__track span::before { content: "✦"; color: var(--smy-red); }
@keyframes scrollX {
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .aurora::before, .aurora::after, .marquee__track { animation: none; }
  .hero-particles { display: none; }
}