/* ===================================================
 * PACK SYSTEM EFFECTS - Cinematische Animationen & Effekte
 * Extrahiert aus cards-album.ejs für bessere Organisation
 * =================================================== */

/* === CINEMATISCHE ANIMATIONEN === */
@keyframes screenFlash {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes shockwaveExpand {
    0% { 
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    100% { 
        transform: translate(-50%, -50%) scale(5);
        opacity: 0;
    }
}

@keyframes particleBurst {
    0% { 
        transform: translate(-50%, -50%) translate(0, 0);
        opacity: 1;
    }
    100% { 
        transform: translate(-50%, -50%) translate(calc(cos(var(--angle)) * var(--distance)), calc(sin(var(--angle)) * var(--distance)));
        opacity: 0;
    }
}

@keyframes floatUp {
    0% { 
        transform: translateY(0);
        opacity: 1;
    }
    100% { 
        transform: translateY(-100vh);
        opacity: 0;
    }
}

@keyframes screenShake {
    0%, 100% { transform: translateX(0); }
    10% { transform: translateX(-5px); }
    20% { transform: translateX(5px); }
    30% { transform: translateX(-3px); }
    40% { transform: translateX(3px); }
    50% { transform: translateX(-2px); }
    60% { transform: translateX(2px); }
    70% { transform: translateX(-1px); }
    80% { transform: translateX(1px); }
    90% { transform: translateX(-0.5px); }
}

/* === EXAMPLE-STYLE ELEMENTE === */
.pack-particles-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.pack-opening-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.3);
    width: 400px;
    height: 400px;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
}

.pack-opening-container:hover {
    filter: brightness(1.1);
}

.pack-opening-container.pack-flash {
    animation: packFlashEffect 300ms ease-out;
}

@keyframes packFlashEffect {
    0% { filter: brightness(1); }
    50% { filter: brightness(2) saturate(1.5); }
    100% { filter: brightness(1); }
}

/* Pack Zoom-In Animation wie im Example */
.pack-opening-container.pack-zoom-in {
    animation: packZoomIn 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes packZoomIn {
    0% { 
        transform: translate(-50%, -50%) scale(0.3);
        opacity: 0;
    }
    100% { 
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

.pack-click-indicators {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 20px;
    z-index: 20;
}

.click-indicator {
    width: 60px !important;  /* Größer als aktuell */
    height: 60px !important; /* Größer als aktuell */
    background: #666 !important; /* Grauer Kreis */
    border-radius: 50% !important;
    border: 3px solid #444 !important;
    position: relative !important;
    margin: 0 8px !important; /* Mehr Abstand zwischen Kreisen */
    /* KEINE Transition/Animation! Grauer Kreis ist IMMER statisch */
}

.click-indicator.active {
    background: rgba(255, 255, 255, 0.8);
    border-color: #FFD700;
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.8);
    /* KEINE Animation auf grauem Kreis! Nur ::after animiert */
}

.click-indicator.clicked {
    background: rgba(100, 100, 100, 0.8);
    border-color: #666;
    /* Grauer Kreis bleibt statisch */
}

.click-indicator.upgraded {
    background: rgba(0, 255, 136, 0.8);
    border-color: #00FF88;
    box-shadow: 0 0 15px rgba(0, 255, 136, 0.8);
    /* KEINE Animation auf grauem Kreis! Nur ::after hat Effekte */
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* Example-Style Marker Bounce Animation */
@keyframes markerBounce {
    0%, 60%, 100% {
        transform: translateY(0) scaleY(1) scaleX(1);
    }
    10% {
        transform: translateY(-8px) scaleY(1.1) scaleX(0.95);
    }
    20% {
        transform: translateY(0) scaleY(0.9) scaleX(1.05);
    }
    30% {
        transform: translateY(-4px) scaleY(1.05) scaleX(0.98);
    }
    40% {
        transform: translateY(0) scaleY(1) scaleX(1);
    }
}

/* === MARKER SYSTEM MIT TEXTUREN === */
/* Marker-1 Textur (liegt auf allen Kreisen zu Beginn) */
.click-indicator::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('/packs/indikatoren/marker-1.png') center/contain no-repeat;
    z-index: 2;
    opacity: 1; /* Alle haben initial marker-1 */
    transition: all 200ms ease;
}

/* Geklickt OHNE Upgrade: Marker-1 entfernen (grauer Kreis bleibt) */
.click-indicator.clicked::after {
    opacity: 0; /* Marker verschwindet, grauer Kreis bleibt */
}

/* Geklickt MIT Upgrade: Marker-1 durch Marker-2 ersetzen */
.click-indicator.upgraded::after {
    background: url('/packs/indikatoren/marker-2.png') center/contain no-repeat;
    opacity: 1;
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.9)) brightness(1.2);
}

/* Nur der AKTUELLE Marker hat Spring-Animation (SCHNELLER) */
.click-indicator.active::after {
    animation: markerSpring 0.8s ease-in-out infinite;
}

/* Spring-Animation nur für die Marker-Textur */
@keyframes markerSpring {
    0%, 60%, 100% {
        transform: translateY(0) scaleY(1) scaleX(1);
    }
    15% {
        transform: translateY(-8px) scaleY(1.15) scaleX(0.95);
    }
    30% {
        transform: translateY(-12px) scaleY(0.9) scaleX(1.05);
    }
    45% {
        transform: translateY(-3px) scaleY(1.05) scaleX(0.98);
    }
}

/* === SPIN LIGHT ERUPTION === */
.spin-light-eruption {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 200px;
    height: 200px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0.4) 30%, transparent 70%);
    border-radius: 50%;
    animation: lightEruption 400ms ease-out forwards;
    pointer-events: none;
    z-index: 100;
    mix-blend-mode: screen;
}

@keyframes lightEruption {
    0% { 
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    50% { 
        transform: translate(-50%, -50%) scale(2);
        opacity: 1;
    }
    100% { 
        transform: translate(-50%, -50%) scale(3);
        opacity: 0;
    }
}

/* GRÖßERE Licht-Eruption für bessere Klick-Response */
@keyframes bigLightEruption {
    0% { 
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    30% { 
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 1;
    }
    100% { 
        transform: translate(-50%, -50%) scale(3.5);
        opacity: 0;
    }
}

.pack-confetti-container {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 15;
    overflow: hidden;
}

.pack-upgrade-text {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 3rem;
    font-weight: 900;
    color: #FFD700;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.8);
    opacity: 0;
    z-index: 25;
    pointer-events: none;
    transition: all 0.3s ease;
}

.pack-upgrade-text.show {
    opacity: 1;
    animation: upgradeTextShow 1s ease-out;
}

@keyframes upgradeTextShow {
    0% { 
        transform: translateX(-50%) scale(0.5);
        opacity: 0;
    }
    50% { 
        transform: translateX(-50%) scale(1.2);
        opacity: 1;
    }
    100% { 
        transform: translateX(-50%) scale(1);
        opacity: 1;
    }
}

.pack-3d-ui-panel {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 300px;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.8);
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 30;
}

/* === PACK OPEN PROMPT === */
.pack-open-prompt {
    position: absolute !important;
    top: calc(65% - 60px) !important; /* Über den Markern */
    left: 50% !important;
    transform: translateX(-50%) !important;
    
    font-family: 'Orbitron', 'Arial', sans-serif !important;
    font-size: 28px !important; 
    font-weight: bold !important;
    color: #fff !important;
    /* KEIN Hintergrund - nur Text! */
    text-shadow: 
        0 0 20px rgba(255, 215, 0, 1),
        0 0 30px rgba(255, 215, 0, 0.8),
        0 0 40px rgba(255, 215, 0, 0.6),
        2px 2px 4px rgba(0, 0, 0, 0.8) !important; /* Kontrast für Lesbarkeit */
    
    text-align: center !important;
    white-space: nowrap !important;
    z-index: 9999 !important;
    cursor: pointer !important;
    
    /* EINBLEND-ANIMATION */
    animation: promptFadeIn 1s ease-out forwards, packOpenWaber 2s ease-in-out 1s infinite !important;
    opacity: 0 !important; /* Startet unsichtbar */
}

/* EINBLEND-ANIMATION für Schriftzug */
@keyframes promptFadeIn {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(30px) scale(0.7);
        filter: blur(4px);
    }
    60% {
        opacity: 1;
        transform: translateX(-50%) translateY(-5px) scale(1.1);
        filter: blur(0px);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
        filter: blur(0px);
    }
}

/* WABER-ANIMATION für "Klicke zu Öffnen" (läuft nach fadeIn) */
@keyframes packOpenWaber {
    0%, 100% {
        transform: translateX(-50%) translateY(0) scale(1);
    }
    50% {
        transform: translateX(-50%) translateY(-8px) scale(1.05);
        text-shadow: 
            0 0 25px rgba(255, 215, 0, 1),
            0 0 35px rgba(255, 215, 0, 0.8),
            0 0 45px rgba(255, 215, 0, 0.6),
            2px 2px 4px rgba(0, 0, 0, 0.8);
    }
}

/* === EPISCHE EFFEKT-ANIMATIONEN === */
@keyframes lensFlare {
    0% { 
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    50% { 
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% { 
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

@keyframes lightBurstExpand {
    0% { 
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    100% { 
        transform: translate(-50%, -50%) scale(4);
        opacity: 0;
    }
}

@keyframes lightningStrike {
    0% { 
        opacity: 0;
        transform: scaleY(0);
    }
    50% { 
        opacity: 1;
        transform: scaleY(1);
    }
    100% { 
        opacity: 0;
        transform: scaleY(1);
    }
}

@keyframes radialRayExpand {
    0% { 
        transform: translate(-50%, -100%) rotate(var(--angle, 0deg)) scaleY(0);
        opacity: 1;
    }
    100% { 
        transform: translate(-50%, -100%) rotate(var(--angle, 0deg)) scaleY(1);
        opacity: 0;
    }
}