/**
 * @file
 * Grid Pattern Component Styles
 *
 * Animated hover blocks in Venneker brand colors.
 * Animation mimics Framer Motion's { opacity: [0, 1, 0] } with duration: 2s
 */

/* Animation keyframes - matches Framer Motion behavior */
@keyframes grid-block-fade {
  0% { opacity: 0; }
  10% { opacity: 1; }
  100% { opacity: 0; }
}

.grid-pattern__block--animating {
  animation: grid-block-fade 2s ease-in-out forwards;
}

/* === Venneker Brand Colors (from logo) === */

/* Dark theme (homepage with image background) - subtle visibility */
.grid-pattern__block--green {
  fill: color-mix(in srgb, var(--color-venneker-viehhandel) 20%, transparent); /* ds-exception: Grid pattern decorative color */
}

.grid-pattern__block--red {
  fill: color-mix(in srgb, var(--color-venneker-natur-600) 20%, transparent);
}

.grid-pattern__block--teal {
  fill: color-mix(in srgb, var(--color-venneker-logistik-400) 20%, transparent);
}

.grid-pattern__block--lime {
  fill: color-mix(in srgb, var(--color-primary) 20%, transparent);
}

/* Light theme (subpages with white background) - very subtle */
[data-grid-theme="light"] .grid-pattern__block--green {
  fill: color-mix(in srgb, var(--color-venneker-viehhandel) 8%, transparent); /* ds-exception: Grid pattern decorative color */
}

[data-grid-theme="light"] .grid-pattern__block--red {
  fill: color-mix(in srgb, var(--color-venneker-natur-600) 8%, transparent);
}

[data-grid-theme="light"] .grid-pattern__block--teal {
  fill: color-mix(in srgb, var(--color-venneker-logistik-400) 8%, transparent);
}

[data-grid-theme="light"] .grid-pattern__block--lime {
  fill: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .grid-pattern__block--animating {
    animation: none;
    opacity: 0;
  }
}