/**
 * Animated Icons for Main Content Cards
 * Hover-triggered animations for interactive visual feedback
 */

/* ============================================
   BASE ICON STYLING
   ============================================ */

.animated-icon {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  align-self: center; /* Center the icon vertically */
}

.animated-icon path,
.animated-icon rect,
.animated-icon circle,
.animated-icon line,
.animated-icon polyline {
  transition: all 0.4s ease;
}

/* ============================================
   BAR CHART ICON (Interactive Dashboards)
   ============================================ */

.bar-chart-icon .axis {
  stroke: #666;
  stroke-width: 2;
  fill: none;
}

.bar-chart-icon .bar {
  fill: #666;
  transform-origin: bottom;
}

.projects-container:hover .bar-chart-icon .bar {
  fill: #3b82f6;
}

.projects-container:hover .bar-chart-icon .bar-1 {
  animation: pulse-bar 1.5s ease-in-out infinite;
}

.projects-container:hover .bar-chart-icon .bar-2 {
  animation: pulse-bar 1.5s ease-in-out infinite 0.2s;
}

.projects-container:hover .bar-chart-icon .bar-3 {
  animation: pulse-bar 1.5s ease-in-out infinite 0.4s;
}

@keyframes pulse-bar {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.4); }
}

/* ============================================
   PLINKO ICON (Data Science & ML)
   ============================================ */

.plinko-icon .baseline {
  stroke: #333;
  stroke-width: 1;
}

.plinko-icon .plinko-peg {
  fill: #444;
}

.plinko-icon .plinko-ball {
  fill: #666;
  opacity: 0;
}

.plinko-icon .distribution-bar {
  fill: #666;
  transform-origin: center bottom;
  transform: scaleY(0);
}

.projects-container:hover .plinko-icon .plinko-ball {
  fill: #3b82f6;
}

.projects-container:hover .plinko-icon .ball-1 {
  animation: drop-center 3s ease-in-out infinite;
}

.projects-container:hover .plinko-icon .ball-2 {
  animation: drop-left 3s ease-in-out infinite 0.2s;
}

.projects-container:hover .plinko-icon .ball-3 {
  animation: drop-right 3s ease-in-out infinite 0.4s;
}

.projects-container:hover .plinko-icon .ball-4 {
  animation: drop-far-left 3s ease-in-out infinite 0.6s;
}

.projects-container:hover .plinko-icon .ball-5 {
  animation: drop-far-right 3s ease-in-out infinite 0.8s;
}

.projects-container:hover .plinko-icon .distribution-bar {
  fill: #3b82f6;
}

.projects-container:hover .plinko-icon .dist-1 {
  transform-origin: 22.5px 65px;
  animation: grow-dist-small 3s ease-in-out infinite 1.2s;
}

.projects-container:hover .plinko-icon .dist-2 {
  transform-origin: 30.5px 65px;
  animation: grow-dist-medium 3s ease-in-out infinite 1.0s;
}

.projects-container:hover .plinko-icon .dist-3 {
  transform-origin: 38.5px 65px;
  animation: grow-dist-large 3s ease-in-out infinite 0.8s;
}

.projects-container:hover .plinko-icon .dist-4 {
  transform-origin: 46.5px 65px;
  animation: grow-dist-medium 3s ease-in-out infinite 1.0s;
}

.projects-container:hover .plinko-icon .dist-5 {
  transform-origin: 54.5px 65px;
  animation: grow-dist-small 3s ease-in-out infinite 1.2s;
}

/* Plinko ball animations */
@keyframes drop-center {
  0% { opacity: 0; transform: translate(0, 0); }
  5% { opacity: 1; transform: translate(0, 0); }
  15% { transform: translate(-2px, 8px); }
  25% { transform: translate(1px, 16px); }
  35% { transform: translate(-1px, 24px); }
  45% { transform: translate(0, 35px); }
  55% { opacity: 1; transform: translate(0, 45px) scale(1); }
  60% { opacity: 0; transform: translate(0, 45px) scale(0.5); }
  100% { opacity: 0; }
}

@keyframes drop-left {
  0% { opacity: 0; transform: translate(0, 0); }
  5% { opacity: 1; transform: translate(0, 0); }
  15% { transform: translate(-3px, 8px); }
  25% { transform: translate(-2px, 16px); }
  35% { transform: translate(-5px, 24px); }
  45% { transform: translate(-8px, 35px); }
  55% { opacity: 1; transform: translate(-8px, 45px) scale(1); }
  60% { opacity: 0; transform: translate(-8px, 45px) scale(0.5); }
  100% { opacity: 0; }
}

@keyframes drop-right {
  0% { opacity: 0; transform: translate(0, 0); }
  5% { opacity: 1; transform: translate(0, 0); }
  15% { transform: translate(3px, 8px); }
  25% { transform: translate(2px, 16px); }
  35% { transform: translate(5px, 24px); }
  45% { transform: translate(8px, 35px); }
  55% { opacity: 1; transform: translate(8px, 45px) scale(1); }
  60% { opacity: 0; transform: translate(8px, 45px) scale(0.5); }
  100% { opacity: 0; }
}

@keyframes drop-far-left {
  0% { opacity: 0; transform: translate(0, 0); }
  5% { opacity: 1; transform: translate(0, 0); }
  15% { transform: translate(-4px, 8px); }
  25% { transform: translate(-6px, 16px); }
  35% { transform: translate(-10px, 24px); }
  45% { transform: translate(-15px, 35px); }
  55% { opacity: 1; transform: translate(-15px, 45px) scale(1); }
  60% { opacity: 0; transform: translate(-15px, 45px) scale(0.5); }
  100% { opacity: 0; }
}

@keyframes drop-far-right {
  0% { opacity: 0; transform: translate(0, 0); }
  5% { opacity: 1; transform: translate(0, 0); }
  15% { transform: translate(4px, 8px); }
  25% { transform: translate(6px, 16px); }
  35% { transform: translate(10px, 24px); }
  45% { transform: translate(15px, 35px); }
  55% { opacity: 1; transform: translate(15px, 45px) scale(1); }
  60% { opacity: 0; transform: translate(15px, 45px) scale(0.5); }
  100% { opacity: 0; }
}

@keyframes grow-dist-small {
  0%, 40% { transform: scaleY(0); }
  60%, 100% { transform: scaleY(1); }
}

@keyframes grow-dist-medium {
  0%, 40% { transform: scaleY(0); }
  60%, 100% { transform: scaleY(1); }
}

@keyframes grow-dist-large {
  0%, 40% { transform: scaleY(0); }
  60%, 100% { transform: scaleY(1); }
}

/* ============================================
   ROBOT ICON (Engineering & Automation)
   ============================================ */

.robot-icon .robot-body,
.robot-icon .robot-head,
.robot-icon .robot-antenna {
  fill: #666;
  transition: all 0.4s ease;
}

.robot-icon .robot-eye {
  fill: #444;
}

.robot-icon .eye-pupil {
  fill: #1a1a1a;
}

.projects-container:hover .robot-icon .robot-body,
.projects-container:hover .robot-icon .robot-head,
.projects-container:hover .robot-icon .robot-antenna {
  fill: #3b82f6;
}

.projects-container:hover .robot-icon .robot-eye {
  fill: #60a5fa;
}

.projects-container:hover .robot-icon .eye-pupil {
  animation: scan-eyes 2s ease-in-out infinite;
}

@keyframes scan-eyes {
  0%, 100% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
}

/* ============================================
   WRITING ICON (Research & Writing)
   ============================================ */

.writing-icon .paper-line {
  stroke: #333;
  stroke-width: 0.5;
}

.writing-icon .writing-stroke {
  stroke: #666;
  stroke-width: 1.5;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
}

.writing-icon .pen-body {
  fill: #666;
}

.writing-icon .pen-tip {
  fill: #444;
}

.projects-container:hover .writing-icon .writing-stroke {
  stroke: #3b82f6;
  animation: write-script 4s ease-in-out infinite;
}

.projects-container:hover .writing-icon .pen-body {
  fill: #3b82f6;
}

.projects-container:hover .writing-icon .pen-tip {
  fill: #60a5fa;
}

.projects-container:hover .writing-icon .pen-group {
  animation: pen-movement 4s ease-in-out infinite;
}

@keyframes write-script {
  0% { stroke-dashoffset: 200; opacity: 0; }
  10% { opacity: 1; }
  60% { stroke-dashoffset: 0; opacity: 1; }
  90% { stroke-dashoffset: 0; opacity: 0.3; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

@keyframes pen-movement {
  0% { transform: translate(0, 0) rotate(-25deg); }
  10% { transform: translate(0, 0) rotate(-25deg); }
  30% { transform: translate(10px, 2px) rotate(-20deg); }
  40% { transform: translate(15px, 8px) rotate(-15deg); }
  50% { transform: translate(25px, 10px) rotate(-20deg); }
  60% { transform: translate(30px, 15px) rotate(-25deg); }
  90% { transform: translate(30px, 15px) rotate(-25deg); }
  100% { transform: translate(30px, 15px) rotate(-25deg); opacity: 0; }
}

/* ============================================
   MOBILE OPTIMIZATION
   ============================================ */

@media (max-width: 768px) {
  .animated-icon {
    width: 64px;
    height: 64px;
  }

  /* Simplify animations on mobile */
  .projects-container:hover .bar-chart-icon .bar {
    animation: none;
    fill: #3b82f6;
  }

  .projects-container:hover .plinko-icon .plinko-ball {
    animation: none;
  }

  .projects-container:hover .robot-icon .eye-pupil {
    animation: none;
  }

  .projects-container:hover .writing-icon .writing-stroke,
  .projects-container:hover .writing-icon .pen-group {
    animation: none;
  }
}