/* ================================
   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); }
}

/* ===== Cute Holo Eyes Easter Egg ===== */
.spooky-eyes {
  position: fixed !important;
  display: flex;
  gap: 12px;
  z-index: 2147483647; /* Max z-index */
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
  /* Use margin for centering instead of transform to avoid breaking fixed */
  margin-left: -30px;
  margin-top: -20px;
}

.spooky-eyes.is-visible {
  opacity: 1;
}

.spooky-eyes.is-visible .spooky-eye {
  animation: eye-pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, eye-float 2s ease-in-out 0.4s infinite;
}

@keyframes eye-pop-in {
  0% { transform: scale(0.3); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.spooky-eye {
  width: 24px;
  height: 28px;
  background: linear-gradient(
    135deg,
    rgba(99, 102, 241, 0.15) 0%,
    rgba(34, 211, 238, 0.1) 50%,
    rgba(168, 85, 247, 0.15) 100%
  );
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 50%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  box-shadow: 
    0 0 20px rgba(99, 102, 241, 0.3),
    0 0 40px rgba(34, 211, 238, 0.2),
    inset 0 0 15px rgba(255, 255, 255, 0.1);
  animation: eye-float 2s ease-in-out infinite;
}

.spooky-eye--left {
  animation-delay: 0s;
}

.spooky-eye--right {
  animation-delay: 0.3s;
}

@keyframes eye-float {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1) translateY(-3px); }
}

.spooky-eye__pupil {
  width: 10px;
  height: 12px;
  background: radial-gradient(
    ellipse,
    #22d3ee 0%,
    #6366f1 40%,
    #a855f7 100%
  );
  border-radius: 50%;
  box-shadow: 
    0 0 8px #22d3ee,
    0 0 15px rgba(99, 102, 241, 0.8),
    0 0 25px rgba(168, 85, 247, 0.5);
  animation: pupil-look 4s ease-in-out infinite, pupil-glow 2s ease-in-out infinite alternate;
}

@keyframes pupil-look {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(2px, -1px); }
  50% { transform: translate(-2px, 1px); }
  80% { transform: translate(1px, 0); }
}

@keyframes pupil-glow {
  0% { 
    box-shadow: 
      0 0 8px #22d3ee,
      0 0 15px rgba(99, 102, 241, 0.8),
      0 0 25px rgba(168, 85, 247, 0.5);
  }
  100% { 
    box-shadow: 
      0 0 12px #22d3ee,
      0 0 20px rgba(99, 102, 241, 1),
      0 0 35px rgba(168, 85, 247, 0.7);
  }
}

/* Cute blink animation */
.spooky-eyes.is-blinking .spooky-eye {
  transform: scaleY(0.15);
  border-radius: 50% 50% 50% 50% / 20% 20% 80% 80%;
}

.spooky-eye {
  transition: transform 0.1s ease-out, border-radius 0.1s ease-out;
}

/* Holo shimmer overlay */
.spooky-eye::after {
  content: '';
  position: absolute;
  top: 0;
  left: -50%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  animation: holo-shimmer 3s ease-in-out infinite;
  border-radius: 50%;
}

@keyframes holo-shimmer {
  0%, 100% { left: -50%; opacity: 0; }
  50% { left: 100%; opacity: 1; }
}

/* ===== 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 */
}