/* ================================
   Effects - Cursor, Transitions, Hover
   ================================ */

/* ===== Fancy Cursor ===== */
.fancy-cursor {
  position: fixed;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
  transition: transform 0.15s var(--ease-elastic), 
              width 0.2s var(--ease-out), 
              height 0.2s var(--ease-out);
}

.fancy-cursor.is-hovering {
  width: 16px;
  height: 16px;
  background: var(--color-accent);
  mix-blend-mode: normal;
  opacity: 0.8;
}

.fancy-cursor.is-clicking {
  transform: translate(-50%, -50%) scale(0.7);
}

/* Glow Orb */
.fancy-cursor-glow {
  position: fixed;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(99, 102, 241, 0.15) 0%,
    rgba(34, 211, 238, 0.08) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: calc(var(--z-cursor) - 2);
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--ease-out),
              width 0.4s var(--ease-out),
              height 0.4s var(--ease-out);
}

.fancy-cursor-glow.is-hovering {
  width: 350px;
  height: 350px;
}

.fancy-cursor-glow.is-clicking {
  transform: translate(-50%, -50%) scale(1.5);
  opacity: 0.5;
}

/* Trail Particles */
.fancy-cursor-trail {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  pointer-events: none;
  z-index: calc(var(--z-cursor) - 1);
  transform: translate(-50%, -50%);
  
  /* Gradient based on index */
  background: linear-gradient(
    135deg,
    var(--color-accent) 0%,
    var(--color-accent-secondary) 100%
  );
  
  /* Size & opacity based on --i */
  opacity: calc(0.6 - var(--i) * 0.045);
  scale: calc(1 - var(--i) * 0.06);
}

/* ===== Page Transitions (für später) ===== */
.page-transition {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-bg);
  z-index: var(--z-modal);
  pointer-events: none;
  
  /* Clip-path animation */
  clip-path: circle(0% at 50% 50%);
  transition: clip-path var(--duration-slow) var(--ease-in-out);
}

.page-transition--active {
  clip-path: circle(150% at 50% 50%);
}

/* ===== Reveal Animations ===== */
.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: 
    opacity var(--duration-slower) var(--ease-out),
    transform var(--duration-slower) var(--ease-out);
}

.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reveal variations */
.reveal--left {
  transform: translateX(-50px);
}

.reveal--right {
  transform: translateX(50px);
}

.reveal--scale {
  transform: scale(0.9);
}

.reveal--left.reveal--visible,
.reveal--right.reveal--visible,
.reveal--scale.reveal--visible {
  transform: translateX(0) scale(1);
}

/* ===== Hover Effects ===== */
.hover-lift {
  transition: transform var(--duration-normal) var(--ease-out);
}

.hover-lift:hover {
  transform: translateY(-5px);
}

.hover-glow {
  transition: box-shadow var(--duration-normal) var(--ease-out);
}

.hover-glow:hover {
  box-shadow: var(--shadow-glow);
}

.hover-scale {
  transition: transform var(--duration-normal) var(--ease-elastic);
}

.hover-scale:hover {
  transform: scale(1.05);
}

/* ===== Magnetic Button Effect (für später mit JS) ===== */
.magnetic {
  transition: transform var(--duration-fast) var(--ease-out);
}

/* ===== Glitch Effect ===== */
.glitch {
  position: relative;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.glitch:hover::before {
  animation: glitch-1 0.3s infinite linear alternate-reverse;
  color: var(--color-accent);
  opacity: 0.8;
}

.glitch:hover::after {
  animation: glitch-2 0.3s infinite linear alternate-reverse;
  color: var(--color-accent-secondary);
  opacity: 0.8;
}

@keyframes glitch-1 {
  0% { clip-path: inset(40% 0 61% 0); transform: translate(-2px, 2px); }
  20% { clip-path: inset(92% 0 1% 0); transform: translate(1px, -1px); }
  40% { clip-path: inset(43% 0 1% 0); transform: translate(-1px, 2px); }
  60% { clip-path: inset(25% 0 58% 0); transform: translate(2px, 1px); }
  80% { clip-path: inset(54% 0 7% 0); transform: translate(-2px, -1px); }
  100% { clip-path: inset(58% 0 43% 0); transform: translate(1px, 2px); }
}

@keyframes glitch-2 {
  0% { clip-path: inset(65% 0 19% 0); transform: translate(2px, -2px); }
  20% { clip-path: inset(10% 0 85% 0); transform: translate(-1px, 1px); }
  40% { clip-path: inset(73% 0 15% 0); transform: translate(1px, -2px); }
  60% { clip-path: inset(35% 0 48% 0); transform: translate(-2px, -1px); }
  80% { clip-path: inset(14% 0 67% 0); transform: translate(2px, 1px); }
  100% { clip-path: inset(78% 0 3% 0); transform: translate(-1px, -2px); }
}

/* ===== Text Shimmer Effect ===== */
.shimmer {
  background: linear-gradient(
    90deg,
    var(--color-text) 0%,
    var(--color-accent) 50%,
    var(--color-text) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 3s linear infinite;
}

@keyframes shimmer {
  to {
    background-position: 200% center;
  }
}

/* ===== Noise Overlay (für später) ===== */
.noise-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-overlay);
  opacity: 0.03;
  /* Noise würde per JS oder SVG Filter hinzugefügt */
}