/*
 * Licensed to the Apache Software Foundation (ASF) under one or more
 * contributor license agreements.  See the NOTICE file distributed with
 * this work for additional information regarding copyright ownership.
 * The ASF licenses this file to You under the Apache License, Version 2.0
 * (the "License"); you may not use this file except in compliance with
 * the License.  You may obtain a copy of the License at
 *
 *    http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */


@keyframes canvas-node-entrance {
  0% {
    opacity: 0;
    transform: scale(0.8) translateY(10px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}


@keyframes canvas-node-exit {
  0% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  100% {
    opacity: 0;
    transform: scale(0.8) translateY(-10px);
  }
}


@keyframes canvas-node-pulse {
  0%, 100% {
    box-shadow: var(--canvas-shadow-node), 0 0 0 0 rgba(59, 130, 246, 0.4);
  }
  50% {
    box-shadow: var(--canvas-shadow-node), 0 0 0 8px rgba(59, 130, 246, 0);
  }
}


@keyframes canvas-node-pulse-success {
  0%, 100% {
    box-shadow: var(--canvas-shadow-node), 0 0 0 0 rgba(16, 185, 129, 0.4);
  }
  50% {
    box-shadow: var(--canvas-shadow-node), 0 0 0 8px rgba(16, 185, 129, 0);
  }
}


@keyframes canvas-node-pulse-error {
  0%, 100% {
    box-shadow: var(--canvas-shadow-node), 0 0 0 0 rgba(239, 68, 68, 0.4);
  }
  50% {
    box-shadow: var(--canvas-shadow-node), 0 0 0 8px rgba(239, 68, 68, 0);
  }
}


@keyframes canvas-node-pulse-warning {
  0%, 100% {
    box-shadow: var(--canvas-shadow-node), 0 0 0 0 rgba(245, 158, 11, 0.4);
  }
  50% {
    box-shadow: var(--canvas-shadow-node), 0 0 0 8px rgba(245, 158, 11, 0);
  }
}


@keyframes canvas-node-glow {
  0% {
    filter: drop-shadow(0 0 0 transparent);
  }
  100% {
    filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.3));
  }
}


@keyframes canvas-data-flow {
  0% {
    stroke-dashoffset: 20;
  }
  100% {
    stroke-dashoffset: 0;
  }
}


@keyframes canvas-connection-pulse {
  0%, 100% {
    stroke-width: var(--canvas-connection-stroke-width);
    opacity: 1;
  }
  50% {
    stroke-width: calc(var(--canvas-connection-stroke-width) * 1.5);
    opacity: 0.8;
  }
}


@keyframes canvas-connection-active {
  0% {
    stroke-dasharray: 0, 10;
  }
  50% {
    stroke-dasharray: 5, 5;
  }
  100% {
    stroke-dasharray: 10, 0;
  }
}


@keyframes canvas-minimap-fade-in {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


@keyframes canvas-tooltip-fade-in {
  0% {
    opacity: 0;
    transform: translateY(5px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}


@keyframes canvas-zoom-in {
  0% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}


@keyframes canvas-selection-breathe {
  0%, 100% {
    box-shadow: var(--canvas-shadow-node-selected);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
  }
}


@keyframes canvas-drag-shadow {
  0% {
    box-shadow: var(--canvas-shadow-node);
  }
  100% {
    box-shadow: var(--canvas-shadow-node-active);
  }
}


@keyframes canvas-loading-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


@keyframes canvas-theme-transition {
  0% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}


@keyframes canvas-grid-scale {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}


@keyframes canvas-port-highlight {
  0%, 100% {
    background-color: transparent;
    transform: scale(1);
  }
  50% {
    background-color: var(--canvas-connection-selected);
    transform: scale(1.2);
  }
}


.canvas-animate-entrance {
  animation: canvas-node-entrance var(--canvas-animation-slow) var(--canvas-easing-bounce) forwards;
}

.canvas-animate-exit {
  animation: canvas-node-exit var(--canvas-animation-normal) var(--canvas-easing-default) forwards;
}

.canvas-animate-pulse {
  animation: canvas-node-pulse 2s var(--canvas-easing-default) infinite;
}

.canvas-animate-pulse-success {
  animation: canvas-node-pulse-success 2s var(--canvas-easing-default) infinite;
}

.canvas-animate-pulse-error {
  animation: canvas-node-pulse-error 2s var(--canvas-easing-default) infinite;
}

.canvas-animate-pulse-warning {
  animation: canvas-node-pulse-warning 2s var(--canvas-easing-default) infinite;
}

.canvas-animate-glow {
  animation: canvas-node-glow var(--canvas-animation-normal) var(--canvas-easing-default) forwards;
}

.canvas-animate-data-flow {
  stroke-dasharray: 5, 5;
  animation: canvas-data-flow 2s linear infinite;
}

.canvas-animate-connection-pulse {
  animation: canvas-connection-pulse 1.5s var(--canvas-easing-default) infinite;
}

.canvas-animate-selection-breathe {
  animation: canvas-selection-breathe 2s var(--canvas-easing-default) infinite;
}

.canvas-animate-drag-shadow {
  animation: canvas-drag-shadow var(--canvas-animation-fast) var(--canvas-easing-default) forwards;
}

.canvas-animate-loading {
  animation: canvas-loading-spin 1s linear infinite;
}


.canvas-transition-all {
  transition: all var(--canvas-animation-normal) var(--canvas-easing-default);
}

.canvas-transition-transform {
  transition: transform var(--canvas-animation-normal) var(--canvas-easing-default);
}

.canvas-transition-colors {
  transition: background-color var(--canvas-animation-normal) var(--canvas-easing-default),
              border-color var(--canvas-animation-normal) var(--canvas-easing-default),
              color var(--canvas-animation-normal) var(--canvas-easing-default);
}

.canvas-transition-shadow {
  transition: box-shadow var(--canvas-animation-normal) var(--canvas-easing-default);
}

.canvas-transition-opacity {
  transition: opacity var(--canvas-animation-fast) var(--canvas-easing-default);
}


.canvas-theme-transition {
  transition: background-color var(--canvas-animation-normal) var(--canvas-easing-default),
              border-color var(--canvas-animation-normal) var(--canvas-easing-default),
              color var(--canvas-animation-normal) var(--canvas-easing-default),
              box-shadow var(--canvas-animation-normal) var(--canvas-easing-default);
}