/* Pixora — custom styles that complement Tailwind */

:root { color-scheme: light; }
* { -webkit-tap-highlight-color: transparent; }

.hero-gradient {
    background:
        radial-gradient(1200px 500px at 10% -10%, rgba(99, 102, 241, .18), transparent 60%),
        radial-gradient(1000px 500px at 100% 0%, rgba(168, 85, 247, .16), transparent 55%);
}

.card-shadow { box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 12px 30px -12px rgba(16, 24, 40, .18); }

/* ---------- Dropzone ---------- */
.dropzone { transition: border-color .15s ease, background-color .15s ease, transform .15s ease; }
.dropzone.drag { border-color: rgb(99, 102, 241); background-color: rgb(238, 242, 255); transform: scale(1.005); }

/* ---------- Before / After slider ---------- */
.ba {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: .75rem;
    background: #0f172a;
    user-select: none;
    touch-action: none;
}
.ba-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}
.ba-top { position: absolute; inset: 0; }
.ba-handle {
    position: absolute;
    top: 0; bottom: 0;
    width: 2px;
    background: #fff;
    transform: translateX(-1px);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
    pointer-events: none;
}
.ba-knob {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px; height: 40px;
    border-radius: 9999px;
    background: #fff;
    display: flex; align-items: center; justify-content: center;
    color: #4f46e5;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    font-size: 14px;
}
.ba-tag {
    position: absolute;
    bottom: 10px;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    color: #fff;
    background: rgba(15, 23, 42, .65);
    border-radius: 9999px;
    backdrop-filter: blur(4px);
    pointer-events: none;
}

/* checkered background so transparent PNGs read clearly */
.checker {
    background-image:
        linear-gradient(45deg, #e2e8f0 25%, transparent 25%),
        linear-gradient(-45deg, #e2e8f0 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #e2e8f0 75%),
        linear-gradient(-45deg, transparent 75%, #e2e8f0 75%);
    background-size: 18px 18px;
    background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}

.fade-in { animation: fade .25s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* progress shimmer */
.shimmer { background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }