Advanced Holographic Card Effects - Bengal Theme

# ✨ Holographic Card Effects

Pokemon TCG-inspired holographic effects for Bengal documentation

Inspired by poke-holo.simey.me by @simeydotme

Move your cursor over the cards to see the holographic effect!

## 🃏 Holographic Cards

Full 3D tilt with rainbow foil, glare, and sparkle layers. Try tilting your cursor to different corners!

💧

### Rainbow Holo

Conic gradient rainbow

Holo Rare
Classic rainbow foil effect using conic-gradient that rotates based on cursor position. The colors shift dynamically as you move.
🔮

### Cosmos

Nebula & stars

Ultra Rare
Cosmic nebula effect with layered radial gradients creating a space-like atmosphere. Perfect for mystical content.
🔥

### Sunburst

Radiating rays

Holo Rare
Repeating conic gradient creates radiating light rays that follow your cursor position. High energy visual.
⚡

### Galaxy Secret

Gold frame treatment

Secret Rare
Gold border frame with enhanced sparkle. The premium treatment for your most important documentation callouts.

## 🔮 3D Energy Orbs

Spherical resource indicators with realistic 3D lighting and subtle float animation.

ℹ
Info
✓
Success
!
Warning
✕
Error
🔥
Fire
🔮
Psychic
⚡
Electric

## 📋 Holographic Admonitions

Apply holographic effects directly to Bengal's admonition components with the `.holo` class.

ℹ️ Holographic Note

This is a note admonition with holographic effects. Move your cursor around to see the rainbow shimmer and glare follow your movement. The effect is most visible at the edges!

💡 Pro Tip

The holographic effect uses CSS custom properties updated by JavaScript for smooth, performant animations. The effect respects `prefers-reduced-motion` for accessibility.

⚠️ Caution

Warning admonitions get an orange-shifted holo effect to maintain semantic meaning while still being visually striking.

🛑 Critical

Danger/error admonitions shift the holo effect red-ward. Even with the flashy effects, the semantic color coding remains clear.

## 📝 Usage

Add holographic effects to your Bengal documentation:

    <!-- Include the CSS and JS -->
    <link rel="stylesheet" href="css/experimental/holo-cards-advanced.css">
    <script src="js/holo-cards.js"></script>

    <!-- Holographic Card -->
    <div class="holo-card holo-card--rainbow holo-card--holo-rare">
      <div class="holo-card__inner">
        <div class="holo-card__shine"></div>
        <div class="holo-card__glare"></div>
        <div class="holo-card__sparkle"></div>
        <div class="holo-card__content">
          <!-- Your content here -->
        </div>
      </div>
    </div>

    <!-- Holographic Admonition (simpler!) -->
    <div class="admonition holo note">
      <p class="admonition-title">Title</p>
      <p>Content...</p>
    </div>

    <!-- Energy Orb -->
    <div class="energy-orb-3d fire">🔥</div>

## 🎨 Available Classes

### Effect Variants

    .holo-card--rainbow    /* Conic gradient rainbow */
    .holo-card--cosmos     /* Nebula/space effect */
    .holo-card--sunburst   /* Radiating rays */
    .holo-card--pixel      /* Digital/glitch grid */
    .holo-card--galaxy     /* Enhanced sparkle */

### Rarity Levels

    .holo-card--common       /* Subtle, no holo */
    .holo-card--uncommon     /* Light holo */
    .holo-card--holo-rare    /* Standard holo (default) */
    .holo-card--ultra-rare   /* Enhanced effects */
    .holo-card--secret-rare  /* Gold frame + max effects */

### Energy Orb Types

    .energy-orb-3d.info      /* Blue */
    .energy-orb-3d.success   /* Green */
    .energy-orb-3d.warning   /* Amber */
    .energy-orb-3d.error     /* Red */
    .energy-orb-3d.fire      /* Orange */
    .energy-orb-3d.psychic   /* Purple */
    .energy-orb-3d.electric  /* Yellow */