/* Subtle theme - easier on the eyes */
.fade-in {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-duration: 0.2s;
}


@keyframes fadeInOpacity {
    0% {
        opacity: 0;
        transform: scale(0.1);
    }
    100% {
        opacity: 1;
    }
}

.htmx-transition {
    transition-timing-function: ease-in-out;
}

/* 1. Fade & Scale (based on your original) */
.fade-scale-in {
    opacity: 1;
    animation-name: fadeScaleIn;
    animation-iteration-count: 1;
    animation-timing-function: ease-in-out;
    animation-duration: 0.3s;
}

@keyframes fadeScaleIn {
    0% {
        opacity: 0;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* 2. Slide In from Right */
.slide-in-right {
    animation-name: slideInRight;
    animation-duration: 0.4s;
    animation-timing-function: ease-out;
}

@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 3. Slide In from Left */
.slide-in-left {
    animation-name: slideInLeft;
    animation-duration: 0.4s;
    animation-timing-function: ease-out;
}

@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-100%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 4. Slide Up */
.slide-up {
    animation-name: slideUp;
    animation-duration: 0.35s;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes slideUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 5. Flip In */
.flip-in {
    animation-name: flipIn;
    animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
}

@keyframes flipIn {
    0% {
        opacity: 0;
        transform: rotateY(-90deg);
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
        transform: rotateY(0deg);
    }
}

/* 6. Bounce In */
.bounce-in {
    animation-name: bounceIn;
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* 7. Zoom In */
.zoom-in {
    animation-name: zoomIn;
    animation-duration: 0.3s;
    animation-timing-function: ease-out;
}

@keyframes zoomIn {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* 8. Rotate In */
.rotate-in {
    animation-name: rotateIn;
    animation-duration: 0.5s;
    animation-timing-function: ease-in-out;
}

@keyframes rotateIn {
    0% {
        opacity: 0;
        transform: rotate(-180deg) scale(0.5);
    }
    100% {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}

/* 9. Elastic In */
.elastic-in {
    animation-name: elasticIn;
    animation-duration: 0.7s;
    animation-timing-function: ease-out;
}

@keyframes elasticIn {
    0% {
        opacity: 0;
        transform: scale(0.1);
    }
    40% {
        transform: scale(1.1);
    }
    60% {
        transform: scale(0.9);
    }
    80% {
        transform: scale(1.02);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* 10. Fade & Blur */
.fade-blur-in {
    animation-name: fadeBlurIn;
    animation-duration: 0.4s;
    animation-timing-function: ease-out;
}

@keyframes fadeBlurIn {
    0% {
        opacity: 0;
        filter: blur(10px);
        transform: scale(1.1);
    }
    100% {
        opacity: 1;
        filter: blur(0px);
        transform: scale(1);
    }
}

/* HTMX Specific Classes */
/* Use these classes with HTMX swap modifiers */

/* For settling animations (when content is being settled into place) */
.htmx-settling .fade-scale-in,
.htmx-settling .slide-up,
.htmx-settling .zoom-in {
    animation-duration: 0.2s;
}

/* For added content */
.htmx-added {
    opacity: 0;
}

.htmx-added.fade-scale-in {
    animation-name: fadeScaleIn;
    animation-duration: 0.3s;
    animation-fill-mode: forwards;
}

/* For swapping content */
.htmx-swapping {
    opacity: 0;
    transition: opacity 0.2s ease-out;
}

.uk-theme-subtle {
    /* Light mode - softer whites and grays */
    --background: 210 11% 96%;          /* Soft off-white instead of pure white */
    --foreground: 210 11% 15%;          /* Dark gray instead of black */
    --muted: 210 11% 88%;
    --muted-foreground: 210 6% 45%;
    --popover: 210 11% 97%;
    --popover-foreground: 210 11% 15%;
    --card: 210 11% 98%;
    --card-foreground: 210 11% 15%;
    --border: 210 11% 85%;
    --input: 210 11% 90%;
    --primary: 210 70% 55%;              /* Nice blue */
    --primary-foreground: 210 70% 98%;
    --secondary: 210 11% 82%;
    --secondary-foreground: 210 11% 25%;
    --accent: 210 30% 75%;
    --accent-foreground: 210 30% 15%;
    --destructive: 0 75% 55%;
    --destructive-foreground: 0 75% 98%;
    --ring: 210 70% 55%;
    --chart-1: 210 70% 55%;
    --chart-2: 160 60% 50%;
    --chart-3: 30 80% 60%;
    --chart-4: 280 60% 65%;
    --chart-5: 340 65% 60%;
    --radius: 0.5rem;
    --uk-form-checkbox-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='%232563eb' /%3E%3Cpath d='M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z' fill='%23ffffff' fill-rule='evenodd' clip-rule='evenodd' %3E%3C/path%3E%3C/svg%3E");
    --uk-form-checkbox-image-indeterminate: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%232563eb%22%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%20%2F%3E%0A%3C%2Fsvg%3E");
    --uk-form-radio-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z' fill='%232563eb' fill-rule='evenodd' clip-rule='evenodd' %3E%3C/path%3E%3C/svg%3E%0A");
    --uk-form-list-image: url("data:image/svg+xml,%3Csvg width='24' height='16' viewBox='0 0 24 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon fill='%23737373' points='12 1 9 6 15 6' /%3E%3Cpolygon fill='%23737373' points='12 13 9 8 15 8' /%3E%3C/svg%3E%0A");
    --uk-divider-icon-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22none%22%20stroke%3D%22%231e293b%22%20stroke-width%3D%222%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
    --uk-list-bullet-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22%231e293b%22%20cx%3D%223%22%20cy%3D%223%22%20r%3D%223%22%20%2F%3E%0A%3C%2Fsvg%3E");
}

.dark.uk-theme-subtle {
    /* Dark mode - softer blacks and lighter text */
    --background: 210 11% 12%;           /* Dark gray instead of pure black */
    --foreground: 210 11% 88%;           /* Light gray instead of pure white */
    --muted: 210 11% 18%;
    --muted-foreground: 210 6% 55%;
    --popover: 210 11% 14%;
    --popover-foreground: 210 11% 88%;
    --card: 210 11% 13%;
    --card-foreground: 210 11% 88%;
    --border: 210 11% 22%;
    --input: 210 11% 18%;
    --primary: 210 70% 65%;              /* Slightly brighter for dark mode */
    --primary-foreground: 210 70% 8%;
    --secondary: 210 11% 20%;
    --secondary-foreground: 210 11% 75%;
    --accent: 210 30% 45%;
    --accent-foreground: 210 30% 85%;
    --destructive: 0 75% 65%;
    --destructive-foreground: 0 75% 8%;
    --ring: 210 70% 65%;
    --chart-1: 210 70% 65%;
    --chart-2: 160 60% 60%;
    --chart-3: 30 80% 70%;
    --chart-4: 280 60% 75%;
    --chart-5: 340 65% 70%;
    --uk-form-checkbox-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='%233b82f6' /%3E%3Cpath d='M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z' fill='%23000000' fill-rule='evenodd' clip-rule='evenodd' %3E%3C/path%3E%3C/svg%3E");
    --uk-form-checkbox-image-indeterminate: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%233b82f6%22%20x%3D%223%22%20y%3D%228%22%20width%3D%2210%22%20height%3D%221%22%20%2F%3E%0A%3C%2Fsvg%3E");
    --uk-form-radio-image: url("data:image/svg+xml,%3Csvg width='15' height='15' viewBox='0 0 15 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z' fill='%233b82f6' fill-rule='evenodd' clip-rule='evenodd' %3E%3C/path%3E%3C/svg%3E%0A");
    --uk-form-list-image: url("data:image/svg+xml,%3Csvg width='24' height='16' viewBox='0 0 24 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon fill='%23a3a3a3' points='12 1 9 6 15 6' /%3E%3Cpolygon fill='%23a3a3a3' points='12 13 9 8 15 8' /%3E%3C/svg%3E%0A");
    --uk-divider-icon-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22none%22%20stroke%3D%22%23e2e8f0%22%20stroke-width%3D%222%22%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%227%22%20%2F%3E%0A%3C%2Fsvg%3E%0A");
    --uk-list-bullet-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22%23e2e8f0%22%20cx%3D%223%22%20cy%3D%223%22%20r%3D%223%22%20%2F%3E%0A%3C%2Fsvg%3E");
}