// ============================================================
// Cards Component
// .cyber-card with cut corners, bracket decorations, and variants
// ============================================================

@layer components {
  .cyber-card {
    --card-accent: var(--cyber-cyan-500);

    position: relative;
    padding: var(--space-md);
    border: 1px solid var(--color-border-default);
    background: var(--color-bg-secondary);
    clip-path: polygon(
      0 0,
      calc(100% - 20px) 0,
      100% 20px,
      100% 100%,
      20px 100%,
      0 calc(100% - 20px)
    );

    // Corner bracket decorations (30px, 2px border)
    &::before,
    &::after {
      content: "";
      position: absolute;
      width: 30px;
      height: 30px;
      border: 2px solid var(--card-accent);
      pointer-events: none;
    }

    &::before {
      top: -1px;
      left: -1px;
      border-right: none;
      border-bottom: none;
    }

    &::after {
      right: -1px;
      bottom: -1px;
      border-top: none;
      border-left: none;
    }

    // --------------------------------------------------------
    // Sub-components
    // --------------------------------------------------------

    &__header {
      display: flex;
      gap: var(--space-sm);
      align-items: center;
      margin-bottom: var(--space-md);
      padding-bottom: var(--space-sm);
      border-bottom: 1px solid var(--color-border-default);
    }

    &__icon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border: 1px solid var(--card-accent);
      font-size: var(--text-lg);
      color: var(--card-accent);
      background: color-mix(in srgb, var(--card-accent) 15%, transparent);
    }

    &__title {
      font-family: var(--font-display);
      font-size: var(--text-lg);
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--card-accent);
    }

    &__badge {
      margin-left: auto;
      padding: var(--space-3xs) var(--space-xs);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 700;
      color: var(--cyber-void-500);
      background: var(--card-accent);
    }

    // --------------------------------------------------------
    // Interactive variant
    // --------------------------------------------------------

    &--interactive {
      transition: all var(--duration-normal);
      cursor: pointer;

      &:hover {
        box-shadow:
          inset 0 0 30px color-mix(in srgb, var(--card-accent) 10%, transparent),
          0 0 30px color-mix(in srgb, var(--card-accent) 30%, transparent);
        transform: translateY(-2px);
      }
    }

    // --------------------------------------------------------
    // Holographic variant - animated gradient background
    // --------------------------------------------------------

    &--holo {
      background: linear-gradient(
        135deg,
        var(--color-bg-secondary) 0%,
        color-mix(in srgb, var(--cyber-cyan-500) 5%, var(--color-bg-secondary)) 25%,
        color-mix(in srgb, var(--cyber-magenta-500) 5%, var(--color-bg-secondary)) 50%,
        color-mix(in srgb, var(--cyber-green-500) 5%, var(--color-bg-secondary)) 75%,
        var(--color-bg-secondary) 100%
      );
      background-size: 400% 400%;
      animation: holo-shift 8s ease infinite;
    }

    // --------------------------------------------------------
    // Color variants
    // --------------------------------------------------------

    &--magenta {
      --card-accent: var(--cyber-magenta-500);
    }

    &--yellow {
      --card-accent: var(--cyber-yellow-500);
    }

    &--green {
      --card-accent: var(--cyber-green-500);
    }
  }

  // Holographic shift animation
  @keyframes holo-shift {
    0%,
    100% {
      background-position: 0% 50%;
    }

    25% {
      background-position: 100% 50%;
    }

    50% {
      background-position: 100% 100%;
    }

    75% {
      background-position: 0% 100%;
    }
  }

  // --------------------------------------------------------
  // Reduced motion support
  // --------------------------------------------------------

  @media (prefers-reduced-motion: reduce) {
    .cyber-card--holo {
      animation: none;
    }

    .cyber-card--interactive {
      transition: none;

      &:hover {
        transform: none;
      }
    }
  }
}