.fotium-lightbox.fotium-focus-mode {
    --fotium-focus-color: 24, 24, 24;
    --fotium-focus-x: 50%;
    --fotium-focus-y: 35%;
    --focus-ambient-opacity: 0.55;
    --focus-vignette-opacity: 0.7;
    --focus-zoom: 1.01;
    --focus-tilt: 0deg;
    --focus-sat: 1.05;
    --focus-contrast: 1.05;
    --focus-hue: 0deg;
    --focus-grain-opacity: 0;
    --focus-leak-opacity: 0;
    --focus-leak-color: 255, 120, 80;
    background: radial-gradient(circle at var(--fotium-focus-x) var(--fotium-focus-y), rgba(var(--fotium-focus-color), var(--focus-ambient-opacity)) 0%, rgba(0, 0, 0, 0.95) 62%);
    transition: background 240ms ease;
}

.fotium-lightbox.fotium-focus-mode::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, var(--focus-vignette-opacity)) 78%);
    pointer-events: none;
}

.fotium-lightbox.fotium-focus-mode::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 15% 15%, rgba(var(--focus-leak-color), var(--focus-leak-opacity)) 0%, transparent 45%),
        radial-gradient(circle at 85% 10%, rgba(var(--focus-leak-color), calc(var(--focus-leak-opacity) * 0.7)) 0%, transparent 50%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, calc(var(--focus-grain-opacity) * 0.12)) 0px, rgba(255, 255, 255, calc(var(--focus-grain-opacity) * 0.12)) 1px, transparent 1px, transparent 2px);
    mix-blend-mode: screen;
    opacity: 1;
    pointer-events: none;
}

.fotium-lightbox.fotium-focus-mode .fotium-lightbox-inner {
    position: relative;
    z-index: 1;
}

.fotium-lightbox.fotium-focus-mode .fotium-lightbox-media img {
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
    transition: transform 240ms ease, filter 240ms ease;
    transform: translate(var(--fotium-motion-x, 0px), var(--fotium-motion-y, 0px)) scale(var(--focus-zoom)) rotate(var(--focus-tilt));
    filter: saturate(var(--focus-sat)) contrast(var(--focus-contrast)) hue-rotate(var(--focus-hue));
}

.fotium-lightbox.fotium-focus-mode .fotium-lightbox-media:hover img {
    transform: translate(var(--fotium-motion-x, 0px), var(--fotium-motion-y, 0px)) scale(calc(var(--focus-zoom) + 0.01)) rotate(var(--focus-tilt));
}

.fotium-lightbox.fotium-focus-mode[data-focus-template="classic"] {
    --focus-ambient-opacity: 0.55;
    --focus-vignette-opacity: 0.7;
    --focus-zoom: 1.01;
    --focus-tilt: 0deg;
    --focus-sat: 1.05;
    --focus-contrast: 1.05;
    --focus-hue: 0deg;
    --focus-grain-opacity: 0.2;
    --focus-leak-opacity: 0.1;
    --focus-leak-color: 255, 150, 100;
}

.fotium-lightbox.fotium-focus-mode[data-focus-template="neon"] {
    --focus-ambient-opacity: 0.7;
    --focus-vignette-opacity: 0.6;
    --focus-zoom: 1.02;
    --focus-tilt: 0.4deg;
    --focus-sat: 1.25;
    --focus-contrast: 1.2;
    --focus-hue: 8deg;
    --focus-grain-opacity: 0.1;
    --focus-leak-opacity: 0.2;
    --focus-leak-color: 120, 170, 255;
}

.fotium-lightbox.fotium-focus-mode[data-focus-template="soft"] {
    --focus-ambient-opacity: 0.45;
    --focus-vignette-opacity: 0.55;
    --focus-zoom: 1.005;
    --focus-tilt: 0deg;
    --focus-sat: 0.95;
    --focus-contrast: 0.95;
    --focus-hue: -4deg;
    --focus-grain-opacity: 0.05;
    --focus-leak-opacity: 0.12;
    --focus-leak-color: 255, 210, 170;
}

.fotium-lightbox.fotium-focus-mode[data-focus-template="noir"] {
    --focus-ambient-opacity: 0.5;
    --focus-vignette-opacity: 0.85;
    --focus-zoom: 1.01;
    --focus-tilt: 0deg;
    --focus-sat: 0.3;
    --focus-contrast: 1.35;
    --focus-hue: 0deg;
    --focus-grain-opacity: 0.35;
    --focus-leak-opacity: 0;
}

.fotium-lightbox.fotium-focus-mode[data-focus-template="dusk"] {
    --focus-ambient-opacity: 0.6;
    --focus-vignette-opacity: 0.65;
    --focus-zoom: 1.015;
    --focus-tilt: 0.2deg;
    --focus-sat: 1.1;
    --focus-contrast: 1.1;
    --focus-hue: 6deg;
    --focus-grain-opacity: 0.12;
    --focus-leak-opacity: 0.18;
    --focus-leak-color: 255, 140, 90;
}

.fotium-lightbox.fotium-focus-mode[data-focus-template="glacier"] {
    --focus-ambient-opacity: 0.65;
    --focus-vignette-opacity: 0.55;
    --focus-zoom: 1.01;
    --focus-tilt: 0.2deg;
    --focus-sat: 1.05;
    --focus-contrast: 1.12;
    --focus-hue: -8deg;
    --focus-grain-opacity: 0.08;
    --focus-leak-opacity: 0.14;
    --focus-leak-color: 120, 200, 255;
}

.fotium-lightbox.fotium-focus-mode[data-focus-template="prism"] {
    --focus-ambient-opacity: 0.7;
    --focus-vignette-opacity: 0.55;
    --focus-zoom: 1.02;
    --focus-tilt: 0.6deg;
    --focus-sat: 1.3;
    --focus-contrast: 1.2;
    --focus-hue: 12deg;
    --focus-grain-opacity: 0.08;
    --focus-leak-opacity: 0.25;
    --focus-leak-color: 160, 120, 255;
}

.fotium-lightbox.fotium-focus-mode[data-focus-template="vintage"] {
    --focus-ambient-opacity: 0.5;
    --focus-vignette-opacity: 0.75;
    --focus-zoom: 1.01;
    --focus-tilt: 0.1deg;
    --focus-sat: 0.85;
    --focus-contrast: 0.9;
    --focus-hue: -6deg;
    --focus-grain-opacity: 0.25;
    --focus-leak-opacity: 0.12;
    --focus-leak-color: 255, 190, 130;
}

.fotium-lightbox.fotium-focus-mode[data-focus-template="minimal"] {
    --focus-ambient-opacity: 0.4;
    --focus-vignette-opacity: 0.5;
    --focus-zoom: 1.0;
    --focus-tilt: 0deg;
    --focus-sat: 1.0;
    --focus-contrast: 1.0;
    --focus-hue: 0deg;
    --focus-grain-opacity: 0;
    --focus-leak-opacity: 0;
}

.fotium-lightbox.fotium-focus-mode[data-focus-template="blaze"] {
    --focus-ambient-opacity: 0.75;
    --focus-vignette-opacity: 0.6;
    --focus-zoom: 1.03;
    --focus-tilt: 0.6deg;
    --focus-sat: 1.2;
    --focus-contrast: 1.25;
    --focus-hue: 14deg;
    --focus-grain-opacity: 0.12;
    --focus-leak-opacity: 0.3;
    --focus-leak-color: 255, 90, 40;
}