/* style.css */

.pattern-grid {
    background-size: 40px 40px;
    background-image:
        linear-gradient(to right, currentColor 1px, transparent 1px),
        linear-gradient(to bottom, currentColor 1px, transparent 1px);
}

.template-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    background-color: #F9FAFB;
    border-width: 1px;
    border-color: #E5E7EB;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #475569;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.dark .template-btn {
    background-color: #0F172A;
    border-color: #334155;
    color: #94A3B8;
}

.template-btn:hover {
    border-color: #3B82F6;
    color: #3B82F6;
}

.template-btn:active {
    transform: scale(.95);
}

.template-btn.active {
    border-color: #3B82F6;
    background-color: rgba(59, 130, 246, 0.1);
    color: #3B82F6;
    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) #3B82F6;
    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

/* SVG Editor elements */
.node-point {
    cursor: pointer;
    transition: r 0.1s, fill 0.2s;
}

.node-point:hover {
    r: 8;
}

.control-point {
    cursor: pointer;
    transition: r 0.1s;
}

.control-point:hover {
    r: 6;
}

.control-line {
    pointer-events: none;
}

.path-stroke {
    pointer-events: stroke;
}

/* Base style for animation targets */
.anim-target {
    width: 48px;
    height: 48px;
    /* offset-path acts relative to the element's position. 
       We center it to 0,0 of the canvas logically by translating or adjusting origin, 
       but standard offset-path centers the element on the path. */
    position: absolute;
    top: 0;
    left: 0;
    /* offset-position is not universally supported yet, default center is fine */
    offset-anchor: center;
    transform-origin: center;
    z-index: 20;
}

/* The actual animation logic is driven via JS injected CSS variables or inline styles */

/* Checkbox toggle inside sidebar */
.lg-labels label {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    font-weight: 700;
    font-size: 11px;
}

/* Modal animation classes */
.modal-show {
    opacity: 1 !important;
    pointer-events: auto !important;
}

.modal-show>div {
    transform: scale(1) !important;
}