Holographic TCG Admonitions - Bengal Theme Exploration

# ✨ Holographic TCG Admonitions

Pokemon/Trading Card Game inspired design exploration for Bengal documentation

🎮 Interaction: Hover over cards to see the holographic shimmer and glow effects!

## 🔮 Energy Orb Icons

Spherical resource indicators inspired by Pokemon TCG energy cards. Pulse animation on hover.

🔥
Fire
💧
Water
🌿
Grass
⚡
Electric
🔮
Psychic
🌑
Dark

## 🌈 Holographic Foil Admonition

Rainbow prismatic shimmer effect that activates on hover. Uses `mix-blend-mode: color-dodge` for authentic foil look.

Holographic Note

Hover over this card to see the rainbow foil shimmer effect! The diagonal shine sweeps across like a real holographic card.

Holographic Tip

This effect works great for highlighting special or premium content. The shine animation creates that satisfying TCG card tilt moment.

## ⭐ Rarity Tier System

Visual escalation from Common → Legendary with increasing effects.

Common

Basic styling with minimal effects. Clean and simple.

Uncommon

Green accent with subtle glow. A step up from common.

Rare

Blue glow with shimmer animation. Getting fancy!

Ultra Rare

Purple glow with rainbow overlay. For important callouts.

Legendary

Gold frame with full holographic effect and intense glow. Maximum impact for critical information!

## 🃏 TCG Card Frame

Full trading card inspired design with colored header banner.

Note Card

This style mimics a trading card with a colored header bar and metallic frame border.

Tip Card

Green variant for tips and success messages. The gradient header adds depth.

Warning Card

Orange/amber header for warnings. The card frame draws attention.

Danger Card

Red variant for critical errors. High visibility for important warnings.

## 🎴 Full TCG Design with Energy Orbs

Complete card design featuring energy orb icons instead of emoji.

Information

Water energy orb for info/note cards. The spherical icon adds that collectible card feel.

Pro Tip

Grass energy for tips and best practices. Matches the nature/growth theme of tips.

Caution

Fire energy for warnings. The warm glow draws attention to potential issues.

Critical

Psychic energy for dangers/errors. The mysterious purple conveys severity.

Example

Electric energy for examples. Bright and energetic for code examples!

## 🔥 Combining Effects

Mix and match classes for maximum impact.

Ultimate Legendary Card

This combines holographic foil, legendary rarity, and TCG styling. Maximum "wow" factor for your most important documentation callouts! Hover to see all effects.

- Gold frame border
- Rainbow holographic shimmer
- Intense legendary glow
- Energy orb icon

⚠️ Breaking Change

Perfect for documenting breaking changes or critical migrations. The purple ultra-rare glow commands attention.

## 📝 How to Use

Add these classes to your admonitions:

    <!-- Holographic foil effect -->
    <div class="admonition holo-foil note">...</div>

    <!-- Rarity tiers -->
    <div class="admonition rarity-common note">...</div>
    <div class="admonition rarity-uncommon tip">...</div>
    <div class="admonition rarity-rare info">...</div>
    <div class="admonition rarity-ultra-rare warning">...</div>
    <div class="admonition rarity-legendary danger">...</div>

    <!-- TCG card frame -->
    <div class="admonition tcg-card note">...</div>

    <!-- Full TCG with energy orbs -->
    <div class="admonition tcg-full note">...</div>

    <!-- Combine effects -->
    <div class="admonition holo-foil rarity-legendary tcg-full tip">...</div>

    <!-- Energy orb icons -->
    <div class="energy-orb fire">🔥</div>
    <div class="energy-orb water">💧</div>