/* ========================================
   PENDING HABIT ANIMATED BORDER (Laufband-Effekt)
   ======================================== */

/* Keyframe Animation: Laufende gestrichelte Linie */
@keyframes border-dash-flow {
    0% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: -40; /* Negative = läuft im Uhrzeigersinn */
    }
}

/* SVG Overlay für animierte Border */
.pending-habit-border-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Klicks durchlassen */
    border-radius: 12px; /* Matches card border-radius */
    overflow: visible;
    opacity: 1;
    transition: none; /* Keine Transition im normalen Zustand */
}

/* Fade-out Animation für die Border nach dem Einfrieren */
.pending-habit-border-overlay.fade-out {
    animation: border-fade-out 2s ease-out forwards;
}

@keyframes border-fade-out {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

.pending-habit-border-overlay svg {
    width: 100%;
    height: 100%;
}

.pending-habit-border-overlay rect {
    fill: none;
    stroke: rgba(0, 0, 0, 0.4); /* Dezente schwarze Punkte (Standard) */
    stroke-width: 3;
    stroke-dasharray: 10 10; /* 10px Strich, 10px Lücke */
    stroke-linecap: round;
    animation: border-dash-flow 2s linear infinite;
    rx: 12; /* Abgerundete Ecken */
    ry: 12;
}

/* Weiße Linie bei dunklem Hintergrund (ab Streak 12) */
.dark-bg .pending-habit-border-overlay rect {
    stroke: rgba(255, 255, 255, 0.5); /* Weiße Punkte */
}

/* ========================================
   FREEZE ANIMATION (Einfrieren beim Abhaken)
   ======================================== */

/* Keyframe Animation: Einfrieren-Effekt mit Button-Press */
@keyframes freeze-effect {
    0% {
        transform: scale(1);
        opacity: 1;
        filter: brightness(1) saturate(1);
    }
    /* Button-Press: Card drückt sich nach innen */
    20% {
        transform: scale(0.94);
        opacity: 0.9;
        filter: brightness(0.7) saturate(0.9);
        box-shadow: inset 0 5px 10px rgba(0, 0, 0, 0.3);
    }
    /* SEHR STARKER weißer Flash während des "Bounce Back" */
    35% {
        transform: scale(1.06);
        opacity: 1;
        filter: brightness(3) saturate(2);
        box-shadow: 0 0 30px rgba(255, 255, 255, 1),
                    0 0 60px rgba(255, 255, 255, 0.8),
                    inset 0 0 40px rgba(255, 255, 255, 0.6);
    }
    /* Bounce zurück (leicht über das Ziel hinaus) */
    55% {
        transform: scale(1.01);
        opacity: 1;
        filter: brightness(1.2) saturate(1.1);
    }
    /* Settle zur gefrorenen Position */
    80% {
        transform: scale(0.98);
        opacity: 0.85;
        filter: brightness(0.9) saturate(0.8);
    }
    100% {
        /* Finaler "gefrorener" Zustand */
        transform: scale(0.98);
        opacity: 0.7;
        filter: brightness(0.9) saturate(0.8);
    }
}

/* Klasse für gefrorene Habits (wird via JS hinzugefügt) */
.habit-frozen {
    animation: freeze-effect 1.4s ease-out forwards;
}

/* Blauer Frost-Overlay (Pseudo-Element) */
.habit-frozen::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(59, 130, 246, 0.08);
    border-radius: 12px;
    pointer-events: none;
    opacity: 0;
    animation: frost-overlay-fade 1.4s ease-out forwards;
}

@keyframes frost-overlay-fade {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Dauerhafter Zustand nach Animation (bleibt "gefroren") */
.habit-frozen-persistent {
    transform: scale(0.98);
    opacity: 0.7;
    filter: brightness(0.9) saturate(0.8);
    position: relative;
}

.habit-frozen-persistent::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(59, 130, 246, 0.08);
    border-radius: 12px;
    pointer-events: none;
}

/* ========================================
   MARIO-STYLE POINT POPUP (Jump & Run Style)
   ======================================== */

/* Container für Punkt-Popup (über der Card) */
.point-popup {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    font-weight: 900;
    pointer-events: none;
    z-index: 1000;
    text-shadow: 
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px 2px 0 #000,
        2px 2px 0 #000,
        -3px 0 0 #000,
        3px 0 0 #000,
        0 -3px 0 #000,
        0 3px 0 #000;
    animation: point-popup-animation 1.5s ease-out forwards;
}

/* Grüne Punktzahl (Erfolg) */
.point-popup.success {
    color: #22c55e;
    filter: drop-shadow(0 0 10px rgba(34, 197, 94, 0.8));
}

/* Rote Punktzahl (Misserfolg) */
.point-popup.failure {
    color: #ef4444;
    filter: drop-shadow(0 0 10px rgba(239, 68, 68, 0.8));
}

/* Animation: Pop up → Float up → Fade out */
@keyframes point-popup-animation {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    15% {
        /* Pop! - Größer als Ziel */
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 1;
    }
    25% {
        /* Settle - Normale Größe */
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        /* Float up und fade out */
        transform: translate(-50%, -150%) scale(1);
        opacity: 0;
    }
}