/**
 * Geometry Canvas Animations
 * Delightful visual feedback for all graph elements
 * 
 * Animation Types:
 * 1. Fade-In - Labels, text
 * 2. Scale-Up - Points, markers
 * 3. Draw Animation - Lines, circles (via JS)
 * 4. Path Animation - Functions (via JS)
 * 5. Glow Pulse - Special points
 */

/* ============================================
   1. POINT ANIMATIONS
   ============================================ */

@keyframes point-appear {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.geometry-point {
  /* Animation disabled to prevent interference with functionality */
  /* animation: point-appear 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards; */
  transform-origin: center;
}

/* Hover effect for points */
.geometry-point:hover {
  transform: scale(1.3);
  transition: transform 200ms ease-out;
  cursor: pointer;
}

/* ============================================
   2. LABEL ANIMATIONS
   ============================================ */

@keyframes label-appear {
  0% {
    opacity: 0;
    transform: translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.geometry-label {
  /* Animation disabled to prevent interference with functionality */
  /* animation: label-appear 400ms ease-out forwards; */
}

/* ============================================
   3. SIMPLE GLOW EFFECT (5 seconds for new elements)
   ============================================ */

@keyframes simple-glow {
  0%, 100% {
    filter: drop-shadow(0 0 2px rgba(100, 200, 255, 0.4));
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(100, 200, 255, 1))
           drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
  }
}

.simple-glow {
  animation: simple-glow 1500ms ease-in-out infinite;
}

/* ============================================
   4. SPECIAL POINT ANIMATIONS (with Glow)
   ============================================ */

@keyframes glow-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 0 rgba(255, 215, 0, 0));
  }
  50% {
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.6));
  }
}

.special-point {
  animation: 
    point-appear 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards,
    glow-pulse 2000ms ease-in-out 500ms infinite;
}

/* Centroid */
.point-centroid {
  animation: 
    point-appear 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards,
    glow-pulse 2000ms ease-in-out 500ms infinite;
}

/* Circumcenter */
.point-circumcenter {
  animation: 
    point-appear 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards,
    glow-pulse 2000ms ease-in-out 500ms infinite;
}

/* Incenter */
.point-incenter {
  animation: 
    point-appear 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards,
    glow-pulse 2000ms ease-in-out 500ms infinite;
}

/* Orthocenter */
.point-orthocenter {
  animation: 
    point-appear 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards,
    glow-pulse 2000ms ease-in-out 500ms infinite;
}

/* ============================================
   4. TRIANGLE/POLYGON FILL ANIMATIONS
   ============================================ */

@keyframes triangle-fill {
  0% {
    fill-opacity: 0;
  }
  100% {
    fill-opacity: 0.2;
  }
}

.triangle-fill {
  animation: triangle-fill 300ms ease-out forwards;
}

.polygon-fill {
  animation: triangle-fill 300ms ease-out forwards;
}

.quadrilateral-fill {
  animation: triangle-fill 300ms ease-out forwards;
}

/* ============================================
   5. MEASUREMENT LABEL ANIMATIONS
   ============================================ */

.measurement-label {
  animation: label-appear 400ms ease-out forwards;
  animation-delay: 0.3s; /* Appear after shape */
}

/* ============================================
   6. ANNOTATION ANIMATIONS
   ============================================ */

.annotation-text {
  animation: label-appear 400ms ease-out forwards;
}

/* ============================================
   7. LINE/PATH HOVER EFFECTS
   ============================================ */

.geometry-line:hover {
  stroke-width: 0.06 !important; /* Slightly thicker on hover */
  cursor: pointer;
  transition: stroke-width 150ms ease-out;
}

.geometry-circle:hover {
  stroke-width: 0.06 !important;
  cursor: pointer;
  transition: stroke-width 150ms ease-out;
}

.function-curve:hover {
  stroke-width: 0.06 !important;
  cursor: pointer;
  transition: stroke-width 150ms ease-out;
}

/* ============================================
   8. ACCESSIBILITY - Reduced Motion
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .geometry-point,
  .geometry-line,
  .geometry-circle,
  .function-curve,
  .triangle-fill,
  .polygon-fill,
  .quadrilateral-fill,
  .geometry-label,
  .measurement-label,
  .annotation-text,
  .special-point,
  .point-centroid,
  .point-circumcenter,
  .point-incenter,
  .point-orthocenter {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  
  /* Instant transitions */
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ============================================
   9. VERTEX ANIMATIONS (staged)
   ============================================ */

.vertex-0 {
  animation: point-appear 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
  animation-delay: 0ms;
}

.vertex-1 {
  animation: point-appear 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
  animation-delay: 100ms;
}

.vertex-2 {
  animation: point-appear 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
  animation-delay: 200ms;
}

.vertex-3 {
  animation: point-appear 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
  animation-delay: 300ms;
}

.vertex-4 {
  animation: point-appear 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
  animation-delay: 400ms;
}

.vertex-5 {
  animation: point-appear 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
  animation-delay: 500ms;
}

/* ============================================
   10. FADE-IN ANIMATION (Generic)
   ============================================ */

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.animate-fade-in {
  animation: fade-in 400ms ease-out forwards;
}

/* ============================================
   11. SCALE-UP ANIMATION (Generic)
   ============================================ */

.animate-scale-up {
  animation: point-appear 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards;
  transform-origin: center;
}

/* ============================================
   12. HIGHLIGHT EFFECT (for selections)
   ============================================ */

@keyframes highlight-pulse {
  0%, 100% {
    stroke: #ffeb3b;
    stroke-width: 0.04;
  }
  50% {
    stroke: #ffc107;
    stroke-width: 0.08;
  }
}

.highlighted-element {
  animation: highlight-pulse 1000ms ease-in-out infinite;
}

/* ============================================
   13. CONSTRUCTION ANIMATION (dashed lines)
   ============================================ */

.construction-line {
  stroke-dasharray: 0.2 0.1;
  animation: label-appear 400ms ease-out forwards;
}

/* ============================================
   14. TOOLTIP TRIGGER (visual cue)
   ============================================ */

.has-tooltip {
  cursor: help;
}

/* Subtle indicator that element has info */
.has-tooltip:hover::after {
  content: '';
  position: absolute;
  top: -8px;
  right: -8px;
  width: 6px;
  height: 6px;
  background: #61afef;
  border-radius: 50%;
  animation: glow-pulse 1000ms ease-in-out infinite;
}