/* Centralized tokens are now in styleApp.css */

@property --glow-x {
  syntax: "<percentage>";
  inherits: false;
  initial-value: -90%;
}

@property --glow-y {
  syntax: "<percentage>";
  inherits: false;
  initial-value: -90%;
}

.card-blue-glow {
  background-image: radial-gradient(
    circle at var(--glow-x) var(--glow-y),
    var(--color-accent) 0.2%,
    transparent 70%
  );
  transition:
    --glow-x var(--transition-slow),
    --glow-y var(--transition-slow),
    transform var(--transition-slow),
    box-shadow var(--transition-slow);
  border: 1px solid color-mix(in srgb, var(--color-accent), transparent 85%);
  background-clip: padding-box;
}

.card-green-glow {
  background-image: radial-gradient(
    circle at var(--glow-x) var(--glow-y),
    var(--color-green) 0.3%,
    transparent 70%
  );
  transition:
    --glow-x var(--transition-slow),
    --glow-y var(--transition-slow),
    transform var(--transition-slow),
    box-shadow var(--transition-slow);
  border: 1px solid color-mix(in srgb, var(--color-green), transparent 85%);
  background-clip: padding-box;
}

.card-orange-glow {
  background-image: radial-gradient(
    circle at var(--glow-x) var(--glow-y),
    var(--color-orange) 0.3%,
    transparent 70%
  );
  transition:
    --glow-x var(--transition-slow),
    --glow-y var(--transition-slow),
    transform var(--transition-slow),
    box-shadow var(--transition-slow);
  border: 1px solid color-mix(in srgb, var(--color-orange), transparent 85%);
  background-clip: padding-box;
}

.card-red-glow {
  background-image: radial-gradient(
    circle at var(--glow-x) var(--glow-y),
    var(--color-red) 0.3%,
    transparent 70%
  );
  transition:
    --glow-x var(--transition-slow),
    --glow-y var(--transition-slow),
    transform var(--transition-slow),
    box-shadow var(--transition-slow);
  border: 1px solid color-mix(in srgb, var(--color-red), transparent 85%);
  background-clip: padding-box;
}

/* Hover/Active Update for coordinates */
.grid-obj-Two:hover,
.grid-obj-Two:active {
  --glow-x: -70%;
  --glow-y: -70%;
  transform: translateY(-4px);
  box-shadow: var(--shadow-Two);
}

/* Grid Cards Hover Effects */
.grid-obj-Two {
  transition:
    transform var(--transition-slow),
    box-shadow var(--transition-slow);
}

.grid-obj-Two .icon-wrapper svg path {
  transition: fill var(--transition-slow);
}

.grid-obj-Two:hover .icon_accent path,
.grid-obj-Two:active .icon_accent path {
  fill: var(--color-accent);
}

.grid-obj-Two:hover .icon_green path,
.grid-obj-Two:active .icon_green path {
  fill: var(--color-green);
}

.grid-obj-Two:hover .icon_orange path,
.grid-obj-Two:active .icon_orange path {
  fill: var(--color-orange);
}

.grid-obj-Two:hover .icon_red path,
.grid-obj-Two:active .icon_red path {
  fill: var(--color-red);
}

/* Alle Anzeigen Button Hover/Active Effects */
.btn-show-all {
  transition: color var(--transition);
}

.btn-show-all:hover h6,
.btn-show-all:hover svg,
.btn-show-all:active h6,
.btn-show-all:active svg {
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
}

.btn-show-all:hover h6,
.btn-show-all:active h6 {
  animation-name: glow-burst, color-burst;
}

.btn-show-all:hover svg,
.btn-show-all:active svg {
  animation-name: nudge-right, color-burst;
}

@keyframes color-burst {
  0% {
    color: var(--color-accent);
    fill: var(--color-accent);
  }
  35% {
    color: var(--color-accent-Two);
    fill: var(--color-accent-Two);
  }
  100% {
    color: var(--color-accent);
    fill: var(--color-accent);
  }
}

@keyframes nudge-right {
  0% {
    transform: translateX(0);
  }
  35% {
    transform: translateX(6px);
  }
  70% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes glow-burst {
  0% {
    text-shadow: 0 0 0 rgba(79, 70, 229, 0);
  }
  30% {
    text-shadow: 0 0 12px rgba(79, 70, 229, 0.6);
  }
  100% {
    text-shadow: 0 0 0 rgba(79, 70, 229, 0);
  }
}

/* Entrance Animations: Fly-in from sides */
@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Grid Cards Staggered & Directional */
.grid .grid-obj-Two:nth-child(1) {
  animation: fx-slide-in-left 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.1s;
  opacity: 0;
}
.grid .grid-obj-Two:nth-child(2) {
  animation: fx-slide-in-right 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.2s;
  opacity: 0;
}
.grid .grid-obj-Two:nth-child(3) {
  animation: fx-slide-in-left 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.3s;
  opacity: 0;
}
.grid .grid-obj-Two:nth-child(4) {
  animation: fx-slide-in-right 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.4s;
  opacity: 0;
}

/* Existing Animations refined to use utility names if possible, keeping for backward compatibility */
.listContainer .list-elemt:nth-child(odd) {
  animation: fx-slide-in-left 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.5s;
  opacity: 0;
}

.listContainer .list-elemt:nth-child(even) {
  animation: fx-slide-in-right 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.6s;
  opacity: 0;
}

/* Core Keyframes */
@keyframes fx-pop-in {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  70% {
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fx-slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fx-slide-in-right {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fx-slide-in-up {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fx-slide-in-down {
  from {
    opacity: 0;
    transform: translateY(-40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Utility Animation Classes */
.fx-pop {
  opacity: 0;
  animation: fx-pop-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.fx-slide-left {
  opacity: 0;
  animation: fx-slide-in-left 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.fx-slide-right {
  opacity: 0;
  animation: fx-slide-in-right 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.fx-slide-up {
  opacity: 0;
  animation: fx-slide-in-up 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.fx-slide-down {
  opacity: 0;
  animation: fx-slide-in-down 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Stagger Helpers */
.fx-delay-1 {
  animation-delay: 0.1s;
}
.fx-delay-2 {
  animation-delay: 0.2s;
}
.fx-delay-3 {
  animation-delay: 0.3s;
}
.fx-delay-4 {
  animation-delay: 0.4s;
}
.fx-delay-5 {
  animation-delay: 0.5s;
}

/* Keep existing classes for compatibility if needed, but updated to use new keyframes */
header .circle {
  opacity: 0;
  animation: fx-pop-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: 0.2s;
}

header .circle:nth-child(2) {
  animation-delay: 0.3s;
}

.list-elemt-footer {
  opacity: 0;
  animation: fx-slide-in-up 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: 0.7s;
}