/* ==========================================================================
   Animations & Transitions - Danila Chernoklinov Portfolio
   ========================================================================== */

/* Cursor Blink */
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.cursor {
  display: inline-block;
  width: 8px;
  height: 15px;
  background: var(--accent);
  margin-left: 3px;
  vertical-align: -1px;
  animation: blink 1.1s steps(1) infinite;
}

/* Status Dot Pulse */
@keyframes status-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(143, 209, 158, 0.7);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(143, 209, 158, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(143, 209, 158, 0);
  }
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--accent);
  display: inline-block;
  animation: status-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Gallery Horizontal Scroll (Marquee) */
@keyframes scroll-train {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.train-track {
  display: flex;
  gap: 16px;
  width: max-content;
  animation: scroll-train 36s linear infinite;
  will-change: transform;
}

.train-track:hover,
.train-track.paused {
  animation-play-state: paused;
}

/* Hardware Oscilloscope Animations */
@keyframes scope-dash {
  to { stroke-dashoffset: -20; }
}

@keyframes scope-sweep {
  0% { transform: translateX(-6%); opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { transform: translateX(106%); opacity: 0; }
}

.scope-trace {
  fill: none;
  stroke: var(--copper);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 6 4;
  animation: scope-dash 1.4s linear infinite;
}

.scope-trace.glow {
  stroke-width: 3.5;
  opacity: .35;
  filter: blur(2px);
  stroke-dasharray: none;
  animation: none;
}

.scope-sweep {
  animation: scope-sweep 2.8s linear infinite;
}

/* Toast / Tooltip Fade */
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translate(-50%, 6px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@keyframes toast-out {
  from {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -6px);
  }
}

.toast {
  animation: toast-in 0.2s ease-out forwards;
}

.toast.fade-out {
  animation: toast-out 0.2s ease-in forwards;
}

/* Lightbox Modal Animations */
@keyframes modal-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modal-content-in {
  from {
    opacity: 0;
    transform: scale(0.96) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.lightbox-backdrop {
  animation: modal-backdrop-in 0.25s ease-out forwards;
}

.lightbox-content {
  animation: modal-content-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Reduced Motion for Accessibility */
@media (prefers-reduced-motion: reduce) {
  .train-track,
  .scope-trace,
  .scope-sweep,
  .status-dot,
  .cursor {
    animation: none !important;
  }
}