/* ==========================================================================
   Reusable Holographic 3D Card Style: "Estampita Coleccionable"
   ========================================================================== */

/* Apply this class to make a card container golden holographic */
.estampita-holografica {
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    perspective: 1000px;
    border: 2px solid #ffd700 !important; /* Standout gold border */
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease, border-color 0.4s ease;
    /* Unified animation: tilting 3D (8s cycle) + gold pulsing breathing glow (2s cycle) */
    animation: gold-hologram-pulse-tilt 8s infinite ease-in-out;
    z-index: 5; /* Slightly raised for the shadow glow */
}

/* Bright gold metallic iridescent light sweep */
.estampita-holografica::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to right,
        rgba(255, 215, 0, 0) 0%,
        rgba(255, 223, 0, 0.4) 20%,      /* Soft Gold */
        rgba(255, 255, 255, 0.95) 45%,   /* Bright White-Gold Glare Core */
        rgba(255, 215, 0, 0.9) 55%,      /* Intense Gold */
        rgba(218, 165, 32, 0.4) 75%,     /* Deep Gold */
        rgba(255, 215, 0, 0) 100%
    );
    transform: translate(-100%, 100%) rotate(35deg);
    pointer-events: none;
    z-index: 2;
    mix-blend-mode: screen; /* Clean high-luminosity sheen overlay */
    animation: shine-estampita 4s infinite ease-in-out;
}

/* Unified animation loop: 3D tilt + Golden breathing glow */
@keyframes gold-hologram-pulse-tilt {
    0% {
        transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
        box-shadow: 0 0 8px rgba(255, 215, 0, 0.6), inset 0 0 6px rgba(255, 215, 0, 0.3);
        border-color: #ffd700 !important;
    }
    12.5% { /* 1s: Glow peak, mild tilt */
        transform: perspective(1000px) rotateX(2deg) rotateY(3deg) scale3d(1.04, 1.04, 1.04);
        box-shadow: 0 0 25px rgba(255, 215, 0, 0.95), inset 0 0 12px rgba(255, 215, 0, 0.6);
        border-color: #fffb00 !important;
    }
    25% { /* 2s: Glow valley, full tilt right-down */
        transform: perspective(1000px) rotateX(4deg) rotateY(6deg) scale3d(1, 1, 1);
        box-shadow: 0 0 8px rgba(255, 215, 0, 0.6), inset 0 0 6px rgba(255, 215, 0, 0.3);
        border-color: #ffd700 !important;
    }
    37.5% { /* 3s: Glow peak, mild tilt */
        transform: perspective(1000px) rotateX(2deg) rotateY(3deg) scale3d(1.04, 1.04, 1.04);
        box-shadow: 0 0 25px rgba(255, 215, 0, 0.95), inset 0 0 12px rgba(255, 215, 0, 0.6);
        border-color: #fffb00 !important;
    }
    50% { /* 4s: Glow valley, neutral tilt */
        transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
        box-shadow: 0 0 8px rgba(255, 215, 0, 0.6), inset 0 0 6px rgba(255, 215, 0, 0.3);
        border-color: #ffd700 !important;
    }
    62.5% { /* 5s: Glow peak, mild negative tilt */
        transform: perspective(1000px) rotateX(-2deg) rotateY(-3deg) scale3d(1.04, 1.04, 1.04);
        box-shadow: 0 0 25px rgba(255, 215, 0, 0.95), inset 0 0 12px rgba(255, 215, 0, 0.6);
        border-color: #fffb00 !important;
    }
    75% { /* 6s: Glow valley, full tilt left-up */
        transform: perspective(1000px) rotateX(-4deg) rotateY(-6deg) scale3d(1, 1, 1);
        box-shadow: 0 0 8px rgba(255, 215, 0, 0.6), inset 0 0 6px rgba(255, 215, 0, 0.3);
        border-color: #ffd700 !important;
    }
    87.5% { /* 7s: Glow peak, mild negative tilt */
        transform: perspective(1000px) rotateX(-2deg) rotateY(-3deg) scale3d(1.04, 1.04, 1.04);
        box-shadow: 0 0 25px rgba(255, 215, 0, 0.95), inset 0 0 12px rgba(255, 215, 0, 0.6);
        border-color: #fffb00 !important;
    }
    100% {
        transform: perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1);
        box-shadow: 0 0 8px rgba(255, 215, 0, 0.6), inset 0 0 6px rgba(255, 215, 0, 0.3);
        border-color: #ffd700 !important;
    }
}

/* Light sweep keyframes */
@keyframes shine-estampita {
    0% {
        transform: translate(-100%, 100%) rotate(35deg);
    }
    50% {
        transform: translate(100%, -100%) rotate(35deg);
    }
    100% {
        transform: translate(-100%, 100%) rotate(35deg);
    }
}

/* Interactive hover state overrides */
.estampita-holografica:hover {
    animation-play-state: paused;
    transform: perspective(1000px) rotateX(6deg) rotateY(12deg) scale3d(1.1, 1.1, 1.1) !important;
    box-shadow: 0 20px 45px rgba(255, 215, 0, 0.95), inset 0 0 15px rgba(255, 215, 0, 0.8) !important;
    z-index: 100 !important;
}

.estampita-holografica:hover::after {
    animation-play-state: paused;
    transform: translate(30%, -30%) rotate(35deg);
}