{{--
    Luxury black card showcase — reuses the Apple-style tilt engine
    (apple-card.js auto-discovers any .apple-card-scene on the page) with a
    black metallic finish: noise grain, silver border glow, and a slow
    ambient auto-rotation blended into the float.
--}}
<div class="apple-card-stage relative rounded-[2.5rem] p-10 shadow-2xl sm:p-14">
    <div class="apple-card-stage__glow -top-10 -left-10 h-56 w-56 bg-slate-400"></div>
    <div class="apple-card-stage__glow -right-10 -bottom-10 h-64 w-64 bg-slate-200" style="animation-delay: -6s"></div>

    <div class="apple-card-scene relative mx-auto max-w-sm">
        <div class="card-shadow-shift">
            <div class="card-ambient-shadow"></div>
        </div>

        <div class="apple-card-magnet">
            <div class="animate-float-rotate">
                <div class="apple-card apple-card--luxury aspect-[16/10] overflow-hidden p-7 text-white transition-[background] duration-500"
                     :style="typeof colorGradients !== 'undefined' ? { background: colorGradients[color] } : {}">
                    <div class="card-border-glow card-border-glow--silver"></div>
                    <div class="card-noise"></div>
                    <div class="card-reflection"></div>
                    <div class="card-glare"></div>

                    <div class="relative flex h-full flex-col justify-between" style="transform: translateZ(30px)">
                        <div class="flex items-start justify-between">
                            <div class="h-8 w-11 rounded-md bg-gradient-to-br from-slate-200 via-slate-400 to-slate-500 shadow-inner"></div>
                            <span class="nfc-pulse">
                                <i class="fa-solid fa-wifi rotate-90 text-lg text-white/70"></i>
                            </span>
                        </div>

                        <div>
                            <p class="font-heading text-2xl font-extrabold tracking-tight text-white">YATRA</p>
                            <div class="card-glass-panel mt-2 inline-flex items-center gap-1.5 rounded-full px-3 py-1">
                                <i class="fa-solid fa-gem text-[9px] text-white/80"></i>
                                <p class="text-[10px] uppercase tracking-[0.2em] text-white/80">Premium Metal Card</p>
                            </div>
                        </div>

                        <div class="flex items-end justify-between">
                            <p class="font-mono text-sm tracking-[0.2em] text-white/60">•••• •••• •••• 8821</p>
                            <p class="text-[10px] font-semibold uppercase tracking-widest text-white/50">Nepal</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>