/**
 * Artpoint Animate – Stylesheet
 * Eigenentwicklung der Artpoint Media – MIT-Lizenz
 *
 * Inhalt:
 *   1. Text-Effekte
 *   2. Hintergründe
 *   3. Interaktive Effekte
 */

/* ============================================================
   1. TEXT-EFFEKTE
   ============================================================ */

/* --- Gradient-Text (animiert) --- */
.apa-gradient-text {
  display: inline-block;
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: apa-gradient-shift var(--apa-speed, 8s) ease-in-out infinite;
}
@keyframes apa-gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* --- Blur-In-Text (wortweise) --- */
.apa-blur-text { display: inline-block; }
.apa-blur-text .apa-word {
  display: inline-block;
  opacity: 0;
  filter: blur(12px);
  transform: translateY(12px);
  transition: opacity 0.6s ease, filter 0.6s ease, transform 0.6s ease;
  white-space: pre;
}
.apa-blur-text.apa-in .apa-word {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

/* --- Count-Up (Zahl hochzählen) --- */
.apa-count-up { display: inline-block; font-variant-numeric: tabular-nums; }

/* --- Typewriter --- */
.apa-typewriter {
  display: inline-block;
}
.apa-typewriter .apa-tw-cursor {
  display: inline-block;
  width: 0.6ch;
  background: currentColor;
  animation: apa-blink 1s step-end infinite;
  margin-left: 2px;
}
@keyframes apa-blink { 50% { opacity: 0; } }

/* --- Shiny-Text (Glanz wandert durch) --- */
.apa-shiny-text {
  display: inline-block;
  background: linear-gradient(120deg, currentColor 40%, rgba(255,255,255,0.85) 50%, currentColor 60%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: apa-shine var(--apa-speed, 4s) linear infinite;
}
@keyframes apa-shine {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============================================================
   2. HINTERGRÜNDE
   ============================================================ */

/* gemeinsamer Wrapper */
.apa-bg {
  position: relative;
  overflow: hidden;
}
.apa-bg > .apa-bg-content {
  position: relative;
  z-index: 2;
}
.apa-bg-canvas,
.apa-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* --- Partikel-Hintergrund (Canvas) --- */
/* (gezeichnet via JS, hier nur Positionierung) */

/* --- Aurora-Hintergrund --- */
.apa-aurora .apa-bg-layer {
  background:
    radial-gradient(at 20% 30%, var(--apa-c1, #0071E3) 0px, transparent 50%),
    radial-gradient(at 80% 20%, var(--apa-c2, #5E60CE) 0px, transparent 50%),
    radial-gradient(at 50% 80%, var(--apa-c3, #00C2FF) 0px, transparent 50%);
  filter: blur(60px);
  opacity: 0.5;
  animation: apa-aurora-move var(--apa-speed, 14s) ease-in-out infinite;
}
@keyframes apa-aurora-move {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-5%, 5%) scale(1.1); }
  66% { transform: translate(5%, -5%) scale(0.95); }
}

/* --- Animiertes Mesh-Gradient --- */
.apa-mesh .apa-bg-layer {
  background:
    radial-gradient(at 27% 37%, var(--apa-c1, #0071E3) 0, transparent 40%),
    radial-gradient(at 97% 21%, var(--apa-c2, #5E60CE) 0, transparent 45%),
    radial-gradient(at 52% 99%, var(--apa-c3, #00C2FF) 0, transparent 40%),
    radial-gradient(at 10% 90%, var(--apa-c4, #FF6B6B) 0, transparent 40%);
  background-size: 200% 200%;
  opacity: 0.35;
  animation: apa-mesh-move var(--apa-speed, 18s) ease infinite;
}
@keyframes apa-mesh-move {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ============================================================
   3. INTERAKTIVE EFFEKTE
   ============================================================ */

/* --- Magnet-Hover --- */
.apa-magnet {
  display: inline-block;
  transition: transform 0.2s cubic-bezier(0.2, 0, 0.2, 1);
  will-change: transform;
}

/* --- Glanz-Karte (Spotlight folgt der Maus) --- */
.apa-spotlight-card {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  background: var(--apa-card-bg, #1a1a1c);
  isolation: isolate;
}
.apa-spotlight-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(
    600px circle at var(--apa-x, 50%) var(--apa-y, 50%),
    var(--apa-glow, rgba(0,113,227,0.25)),
    transparent 40%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
}
.apa-spotlight-card:hover::before { opacity: 1; }
.apa-spotlight-card > * { position: relative; z-index: 1; }

/* --- Tilt-3D-Karte --- */
.apa-tilt {
  transform-style: preserve-3d;
  transition: transform 0.2s ease;
  will-change: transform;
}
.apa-tilt-inner { transform: translateZ(40px); }

/* --- Reveal-on-Scroll --- */
.apa-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.apa-reveal.apa-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Respektiere reduzierte Bewegung (Barrierefreiheit) */
@media (prefers-reduced-motion: reduce) {
  .apa-gradient-text,
  .apa-shiny-text,
  .apa-aurora .apa-bg-layer,
  .apa-mesh .apa-bg-layer {
    animation: none !important;
  }
  .apa-blur-text .apa-word,
  .apa-reveal {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ============================================================
   4. CUBES – interaktives 3D-Würfelraster
   (Eigenentwicklung – kein fremder Code übernommen)
   ============================================================ */
.apa-cubes {
  position: relative;
  width: 100%;
  display: grid;
  gap: var(--apa-cube-gap, 8px);
  perspective: 1200px;
  perspective-origin: center center;
}
.apa-cube {
  position: relative;
  aspect-ratio: 1;
  transform-style: preserve-3d;
  transition: transform var(--apa-cube-enter, 0.08s) cubic-bezier(0.2, 0, 0.2, 1);
  will-change: transform;
}
.apa-cube.apa-cube-leaving {
  transition: transform var(--apa-cube-leave, 0.5s) cubic-bezier(0.2, 0, 0.2, 1);
}
/* Jede der 6 Flächen eines echten Würfels.
   --apa-cube-h ist die halbe Kantenlänge (Verschiebung der Flächen). */
.apa-cube-face {
  position: absolute;
  inset: 0;
  border: 1px solid var(--apa-cube-border, rgba(0,113,227,0.45));
  background: var(--apa-cube-bg, rgba(0,113,227,0.10));
  backface-visibility: hidden;
}
.apa-cube-front  { transform: translateZ(var(--apa-cube-h, 50%)); }
.apa-cube-back   { transform: rotateY(180deg) translateZ(var(--apa-cube-h, 50%)); }
.apa-cube-right  { transform: rotateY(90deg)  translateZ(var(--apa-cube-h, 50%)); background: var(--apa-cube-bg-side, rgba(0,113,227,0.16)); }
.apa-cube-left   { transform: rotateY(-90deg) translateZ(var(--apa-cube-h, 50%)); background: var(--apa-cube-bg-side, rgba(0,113,227,0.16)); }
.apa-cube-top    { transform: rotateX(90deg)  translateZ(var(--apa-cube-h, 50%)); background: var(--apa-cube-bg-top, rgba(0,113,227,0.22)); }
.apa-cube-bottom { transform: rotateX(-90deg) translateZ(var(--apa-cube-h, 50%)); background: var(--apa-cube-bg-bottom, rgba(0,113,227,0.06)); }
@media (prefers-reduced-motion: reduce) {
  .apa-cube { transition: none !important; transform: none !important; }
}