/* Obj180 Image Styles */

.obj-image {
    display: inline-block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.obj-image__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease-out;
}

.obj-image__img.opacity-0 {
    opacity: 0;
}

.obj-image__img.opacity-100 {
    opacity: 1;
}

/* LQIP Blur Background */
.obj-image__lqip {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(64px);
    transition: opacity 0.5s ease-out;
    animation: obj-lqip-wander 5s ease-in-out infinite;
    will-change: transform;
}

/* Skeleton Placeholder */
.obj-image__skeleton {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 10;
}

/* Picture Container */
.obj-image__picture {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* Organic Wandering Blobs */
@keyframes obj-wander-1 {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30%, -20%) scale(1.2); }
    66% { transform: translate(-20%, 20%) scale(0.8); }
    100% { transform: translate(0, 0) scale(1); }
}

@keyframes obj-wander-2 {
    0% { transform: translate(0, 0) scale(1.1); }
    33% { transform: translate(-30%, 30%) scale(0.9); }
    66% { transform: translate(20%, -20%) scale(1.1); }
    100% { transform: translate(0, 0) scale(1.1); }
}

@keyframes obj-wander-3 {
    0% { transform: translate(0, 0) scale(0.9); }
    33% { transform: translate(20%, 20%) scale(1.1); }
    66% { transform: translate(-30%, -10%) scale(0.95); }
    100% { transform: translate(0, 0) scale(0.9); }
}

@keyframes obj-lqip-wander {
    0% { transform: scale(1.4) translate(0, 0); }
    25% { transform: scale(1.2) translate(-1%, -2%); }
    50% { transform: scale(1.4) translate(-2%, -1%); }
    75% { transform: scale(1.2) translate(-1%, -2%); }
    100% { transform: scale(1.4) translate(0, 0); }
}

.obj-image .animate-pulse {
    position: relative;
    overflow: hidden;
    z-index: 10;
    animation: none !important;
}

.obj-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.5;
    mix-blend-mode: overlay;
}

.obj-blob-1 {
    top: -10%;
    left: -10%;
    width: 150%;
    height: 150%;
    background-color: #e5e7eb; /* Gray 200 */
    animation: obj-wander-1 5s ease-in-out infinite;
}

.obj-blob-2 {
    top: -10%;
    right: -10%;
    width: 130%;
    height: 130%;
    background-color: #d1d5db; /* Gray 300 */
    animation: obj-wander-2 6s ease-in-out infinite reverse;
}

.obj-blob-3 {
    bottom: -10%;
    left: 20%;
    width: 120%;
    height: 120%;
    background-color: #9ca3af; /* Gray 400 */
    animation: obj-wander-3 7s ease-in-out infinite;
}

/* Dark mode adjustment */
@media (prefers-color-scheme: dark) {
    .obj-blob { mix-blend-mode: screen; }
    .obj-image .animate-pulse { background-color: #1f2937; }
    .obj-blob-1 { background-color: #374151; }
    .obj-blob-2 { background-color: #4b5563; }
    .obj-blob-3 { background-color: #6b7280; }
}

/* Placeholder fallback styles */
.obj-image--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f3f4f6; /* Tailwind gray-100 */
    color: #9ca3af; /* Tailwind text-gray-400 */
}

/* Dark mode adjustment (Media Query) */
@media (prefers-color-scheme: dark) {
    html:not(.light) .obj-image--placeholder {
        background-color: #1f2937; /* Tailwind gray-800 */
        color: #4b5563; /* Tailwind text-gray-600 */
    }
}

/* Dark mode adjustment (Tailwind .dark class) */
.dark .obj-image--placeholder {
    background-color: #1f2937;
    color: #4b5563;
}

/* Force Light mode if .light class is present (Tailwind toggle) */
.light .obj-image--placeholder {
    background-color: #f3f4f6;
    color: #9ca3af;
}