/* SmartPic marketing site styles (minimal, static) */

:root {
    color-scheme: dark;
}

/* Softer focus ring */
:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

/* Background noise-like pattern (pure CSS, subtle) */
.bg-grid {
    background-image:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.08) 1px, transparent 0);
    background-size: 24px 24px;
}

/* Better details/summary spacing */
details>summary {
    list-style: none;
}

details>summary::-webkit-details-marker {
    display: none;
}

/* Keep SVG crisp */
svg {
    shape-rendering: geometricPrecision;
}

/* --- On-load reveal animation (stagger) --- */

html.reveal-on [data-reveal] {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(8px);
    will-change: opacity, transform, filter;
}

html.reveal-on [data-reveal].is-revealed {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
    transition-property: opacity, transform, filter;
    transition-duration: 700ms;
    transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
    html.reveal-on [data-reveal] {
        opacity: 1;
        transform: none;
        filter: none;
    }

    html.reveal-on [data-reveal].is-revealed {
        transition: none;
    }
}

/* --- Before/After slider --- */

.before-after {
    --pos: 55%;
}

.before-after .ba-after {
    clip-path: inset(0 0 0 var(--pos));
}

/* Inverted mode: AFTER is the base layer; BEFORE is clipped to the left.
   Useful when AFTER has transparency (e.g. background removal), so the BEFORE layer does not show through. */
.before-after.is-inverted .ba-after {
    clip-path: none;
}

.before-after.is-inverted .ba-before {
    clip-path: inset(0 calc(100% - var(--pos)) 0 0);
}

/* Transparency checkerboard */
.transparency-grid {
    background-color: rgba(255, 255, 255, 0.03);
    background-image:
        linear-gradient(45deg, rgba(255, 255, 255, 0.10) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(255, 255, 255, 0.10) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(255, 255, 255, 0.10) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(255, 255, 255, 0.10) 75%);
    background-size: 28px 28px;
    background-position: 0 0, 0 14px, 14px -14px, -14px 0px;
}

.before-after .ba-handle {
    left: var(--pos);
}

.before-after input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}

.before-after input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.25);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.before-after input[type="range"]::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(0, 0, 0, 0.25);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}