Cyber Feature Card

---
/**
 * CyberFeatureCard — A feature card with sharp angles and neon stroke animations.
 * 
 * @param {string} title - The main headline of the feature card.
 * @param {string} subtitle - Optional description context.
 */
interface Props {
  title: string;
  subtitle?: string;
}

const { title, subtitle } = Astro.props;
---

<div class="cyber-card">
  <div class="cyber-card__glitch-line"></div>
  <h3 class="cyber-card__title">{title}</h3>
  {subtitle && <p class="cyber-card__subtitle">{subtitle}</p>}
  <slot />
</div>

<style>
  .cyber-card { 
    background: var(--c-bg-elev, #000); 
    color: var(--c-text-1, #00e0ff); 
    border: 1px solid var(--c-primary, #ff003c); 
    padding: var(--sp-6, 1.5rem); 
    clip-path: polygon(0 0, 100% 0, 100% 85%, 85% 100%, 0 100%); 
    position: relative; 
  }
  .cyber-card__glitch-line { 
    position: absolute; 
    height: 1px; 
    width: 100%; 
    background: var(--c-primary, #ff003c); 
    top: 10%; left: 0; 
    opacity: 0.5; 
    animation: glitch-anim 4s infinite; 
  }
  .cyber-card__title {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    color: var(--c-text-1);
  }
  .cyber-card__subtitle {
    margin: 0;
    font-size: 0.9rem;
    color: var(--c-text-2, #ccc);
  }
  
  @keyframes glitch-anim { 
    0%, 100% { top: 10%; } 
    50% { top: 90%; } 
  }
</style>