/* /css/ocla-style.css */

/* --- Spinner Overlay (Base) --- */
.ocla-spinner-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 999998; display: flex; justify-content: center; align-items: center;
    opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
}
.ocla-spinner-overlay.visible { opacity: 1; pointer-events: all; }

/* --- Spinner Overlay Styles --- */
.ocla-spinner-overlay--default {
    background-color: rgba(255, 255, 255, 0.85); /* Fallback, overridden by inline style */
}
.ocla-spinner-overlay--blur {
    background-color: transparent; /* Fallback, overridden by inline style for tint */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
.ocla-spinner-overlay--none {
    background-color: transparent;
}

/* --- SPINNER STYLES --- */

/* 1. Half Ring (The box-shadow is now set dynamically via inline style, this is a fallback) */
.spinner-half-ring { width: 12px; height: 12px; border-radius: 50%; background: transparent; animation: ocla-rotate 1.2s infinite linear; }

/* 2. Dot Ring (UPDATED) */
.spinner-dot-ring { display: inline-block; position: relative; width: 40px; height: 40px; }
.spinner-dot-ring div { box-sizing: border-box; display: block; position: absolute; width: 32px; height: 32px; margin: 4px; border: 4px solid var(--ocla-spinner-color); border-radius: 50%; animation: ocla-dot-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-color: var(--ocla-spinner-color) transparent transparent transparent; }
.spinner-dot-ring div:nth-child(1) { animation-delay: -0.45s; }
.spinner-dot-ring div:nth-child(2) { animation-delay: -0.3s; }
.spinner-dot-ring div:nth-child(3) { animation-delay: -0.15s; }

/* 3. Material UI (UPDATED) */
.spinner-material-ui { width: 36px; height: 36px; border: 4px solid rgba(0,0,0,0.1); border-left-color: var(--ocla-spinner-color); border-radius: 50%; animation: ocla-rotate 1s infinite linear; }

/* 4. Comet (UPDATED) */
.spinner-comet { width: 36px; height: 36px; border: 4px solid transparent; border-top-color: var(--ocla-spinner-color); border-radius: 50%; animation: ocla-rotate 0.8s infinite ease; }

/* 5. Double Arc (UPDATED) */
.spinner-double-arc, .spinner-double-arc:after { width: 36px; height: 36px; border: 4px solid var(--ocla-spinner-color); border-radius: 50%; animation: ocla-rotate 1.5s infinite linear; border-color: var(--ocla-spinner-color) transparent var(--ocla-spinner-color) transparent; }
.spinner-double-arc { position: relative; }
.spinner-double-arc:after { content: ""; position: absolute; left: -4px; top: -4px; animation-direction: reverse; }
@keyframes ocla-rotate { to { transform: rotate(360deg); } }
@keyframes ocla-dot-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* --- Progress Bar & Mouse Circle Styles --- */
:root {
    --ocla-progress-bar-color: #0073aa;
    --ocla-progress-bar-height: 5px;
    --ocla-click-animation-color: #0073aa;
    --ocla-click-animation-border-width: 3px;
}
#ocla-progress-bar { position: fixed; top: 0; left: 0; width: 0%; height: var(--ocla-progress-bar-height); z-index: 999999; background-color: var(--ocla-progress-bar-color); transition: width 15s cubic-bezier(0.2, 1, 0.2, 1); box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
#ocla-progress-bar.ocla-finished { opacity: 0; transition: opacity 0.4s ease-out; }

/* -- NEW: Mouse Click Animation System -- */
#ocla-click-animation {
    position: fixed;
    /* This initial size is a baseline for scaling */
    width: 35px;
    height: 35px;
    border-style: solid;
    border-width: var(--ocla-click-animation-border-width);
    border-color: var(--ocla-click-animation-color);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
    z-index: 999998;
}
#ocla-click-animation.animate {
    /* JS will set these variables dynamically */
    animation: var(--ocla-click-animation-name) var(--ocla-click-animation-duration, 0.7s) ease-out forwards;
}

/* -- NEW: Keyframes for each animation style -- */
@keyframes ocla-ripple {
    from { transform: translate(-50%, -50%) scale(0); opacity: 1; }
    to { transform: translate(-50%, -50%) scale(var(--ocla-click-animation-end-scale, 2)); opacity: 0; }
}
@keyframes ocla-explode {
    from { transform: translate(-50%, -50%) scale(0); opacity: 1; border-width: var(--ocla-click-animation-border-width); }
    to { transform: translate(-50%, -50%) scale(var(--ocla-click-animation-end-scale, 1.5)); opacity: 0; border-width: 0px; }
}
@keyframes ocla-fade-out {
    from { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    50% { opacity: 0.8; }
    to { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* --- NEW: Mouse Trail Canvas --- */
#ocla-mouse-trail-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allows clicking through the canvas */
    z-index: 999997; /* Below the click animation, above most other content */
}