/**
 * Estils específics per al Timer SVG
 * Anell de progrés animat
 */

/* ===== Contenidor del Timer ===== */
.timer-container {
    position: relative;
    width: var(--timer-size);
    height: var(--timer-size);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.timer-container.completed {
    animation: completionPulse 1.5s ease;
}

/* ===== SVG Timer (posicionat absolutament darrere) ===== */
.timer-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    overflow: hidden;
    pointer-events: none;
}

/* Cercle de fons */
.timer-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 8;
}

/* Cercle de progrés */
.timer-progress {
    fill: none;
    stroke: var(--color-focus);
    stroke-width: 8;
    stroke-linecap: round;
    stroke-dasharray: 565.48; /* 2 * PI * 90 */
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s linear, stroke 0.3s ease;
    transform-origin: center;
}

.timer-progress.running {
    animation: progressPulse 2s ease-in-out infinite;
}

/* Text del temps (element HTML, no SVG) */
.timer-time {
    position: relative;
    z-index: 2;
    color: var(--color-text);
    font-size: 48px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, monospace;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

/* ===== Animacions ===== */

@keyframes progressPulse {
    0%, 100% {
        opacity: 1;
        filter: drop-shadow(0 0 8px currentColor);
    }
    50% {
        opacity: 0.85;
        filter: drop-shadow(0 0 16px currentColor);
    }
}

@keyframes completionPulse {
    0% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.05);
    }
    50% {
        transform: scale(1);
    }
    75% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* ===== Colors per mode ===== */
.timer-progress[data-mode="focus"] {
    stroke: var(--color-focus);
}

.timer-progress[data-mode="short_break"] {
    stroke: var(--color-short-break);
}

.timer-progress[data-mode="long_break"] {
    stroke: var(--color-long-break);
}

/* ===== Efecte de brillantor ===== */
.timer-container::before {
    content: '';
    position: absolute;
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* ===== Estat completat ===== */
.timer-container.completed .timer-progress {
    animation: completeFlash 1.5s ease;
}

@keyframes completeFlash {
    0% {
        stroke-dashoffset: 0;
        filter: brightness(1);
    }
    25% {
        filter: brightness(1.5);
    }
    50% {
        stroke-dashoffset: 0;
        filter: brightness(1);
    }
    75% {
        filter: brightness(1.3);
    }
    100% {
        stroke-dashoffset: 0;
        filter: brightness(1);
    }
}

/* ===== Indicador de pausa ===== */
.timer-container.paused .timer-progress {
    stroke-dasharray: 565.48;
    animation: pausedPulse 2s ease-in-out infinite;
}

@keyframes pausedPulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.9;
    }
}

/* ===== Versió compacta per a pantalles petites ===== */
@media (max-width: 380px) {
    :root {
        --timer-size: 220px;
    }

    .timer-time {
        font-size: 36px;
    }

    .timer-bg,
    .timer-progress {
        stroke-width: 6;
    }
}