.photo-effect {
    --photo-filter: none;
    --photo-overlay-opacity: 0;
    --photo-overlay-blend: normal;
    --photo-grain-opacity: 0;
    --photo-vignette-opacity: 0;
    --photo-position-x: 50%;
    --photo-position-y: 50%;
    --photo-transform: scale(1);
    --photo-animation-duration: 14s;
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    isolation: isolate;
    background: #07090b;
}
.photo-effect--cover { height: 100%; }
.photo-effect__visual {
    position: relative;
    display: grid;
    width: 100%;
    height: 100%;
    transform: var(--photo-transform);
    transform-origin: center;
    backface-visibility: hidden;
}
.photo-effect__visual > * { grid-area: 1 / 1; }
.photo-effect img {
    z-index: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: var(--photo-position-x) var(--photo-position-y);
    filter: var(--photo-filter);
    transform: none;
}
.photo-effect--natural img { height: auto; object-fit: contain; }
.photo-effect--contain { display: grid; place-items: center; background: transparent; }
.photo-effect--contain .photo-effect__visual { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.photo-effect--contain img { width: auto; height: auto; max-width: 100%; max-height: 75dvh; object-fit: contain; }
.photo-effect__overlay,
.photo-effect__texture,
.photo-effect__vignette {
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.photo-effect__overlay {
    opacity: var(--photo-overlay-opacity);
    mix-blend-mode: var(--photo-overlay-blend);
}
.photo-effect__texture {
    z-index: 2;
    opacity: var(--photo-grain-opacity);
    mix-blend-mode: soft-light;
    background-image:
        radial-gradient(circle at 20% 15%, rgba(255,255,255,.62) 0 .04rem, transparent .05rem),
        radial-gradient(circle at 73% 64%, rgba(255,255,255,.52) 0 .035rem, transparent .045rem),
        radial-gradient(circle at 46% 82%, rgba(0,0,0,.7) 0 .04rem, transparent .05rem),
        radial-gradient(circle at 88% 22%, rgba(0,0,0,.62) 0 .035rem, transparent .045rem);
    background-size: 1.25rem 1.1rem, 1.7rem 1.4rem, 1.45rem 1.6rem, 1.9rem 1.3rem;
}
.photo-effect__vignette {
    z-index: 3;
    opacity: var(--photo-vignette-opacity);
    background: radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,.18) 64%, rgba(0,0,0,.82) 100%);
}
.photo-effect[data-photo-overlay="none"] .photo-effect__overlay { background: transparent; }
.photo-effect[data-photo-overlay="light-leak-left"] .photo-effect__overlay {
    background: radial-gradient(circle at -5% 38%, rgba(255,220,145,.96), rgba(255,108,60,.48) 23%, transparent 55%);
}
.photo-effect[data-photo-overlay="light-leak-right"] .photo-effect__overlay {
    background: radial-gradient(circle at 105% 42%, rgba(255,221,147,.96), rgba(255,92,52,.5) 24%, transparent 56%);
}
.photo-effect[data-photo-overlay="amber-flare"] .photo-effect__overlay {
    background:
        radial-gradient(circle at 72% 22%, rgba(255,244,201,.95), rgba(255,176,76,.48) 13%, transparent 34%),
        linear-gradient(125deg, transparent 38%, rgba(255,124,48,.2), transparent 66%);
}
.photo-effect[data-photo-overlay="blue-flare"] .photo-effect__overlay {
    background:
        radial-gradient(circle at 18% 30%, rgba(188,236,255,.9), rgba(65,151,255,.42) 18%, transparent 43%),
        linear-gradient(145deg, transparent 42%, rgba(72,183,255,.18), transparent 70%);
}
.photo-effect[data-photo-overlay="halation"] .photo-effect__overlay {
    background:
        radial-gradient(circle at 50% 48%, transparent 45%, rgba(255,63,28,.24) 76%, rgba(255,151,65,.38) 100%),
        linear-gradient(180deg, rgba(255,203,153,.08), transparent 45%, rgba(255,65,40,.08));
}
.photo-effect[data-photo-overlay="fog"] .photo-effect__overlay {
    background:
        radial-gradient(ellipse at 22% 75%, rgba(255,255,255,.7), transparent 42%),
        radial-gradient(ellipse at 78% 66%, rgba(226,236,238,.56), transparent 44%),
        linear-gradient(180deg, rgba(227,237,238,.25), transparent 52%);
}
.photo-effect[data-photo-overlay="prism"] .photo-effect__overlay {
    background:
        linear-gradient(118deg, transparent 18%, rgba(255,83,120,.28) 35%, rgba(255,220,98,.18) 43%, rgba(89,224,255,.28) 56%, rgba(125,89,255,.24) 66%, transparent 82%);
}
.photo-effect[data-photo-overlay="dust"] .photo-effect__overlay {
    background-image:
        radial-gradient(circle at 13% 18%, rgba(255,255,255,.95) 0 .09rem, transparent .12rem),
        radial-gradient(circle at 71% 38%, rgba(255,255,255,.8) 0 .06rem, transparent .09rem),
        radial-gradient(circle at 38% 76%, rgba(255,255,255,.7) 0 .045rem, transparent .07rem),
        radial-gradient(circle at 86% 81%, rgba(255,255,255,.9) 0 .075rem, transparent .1rem),
        radial-gradient(circle at 55% 12%, rgba(255,255,255,.55) 0 .035rem, transparent .06rem);
    background-size: 8rem 7rem, 11rem 9rem, 6rem 8rem, 13rem 10rem, 7rem 11rem;
}
.photo-effect[data-photo-overlay="scratches"] .photo-effect__overlay {
    background-image:
        repeating-linear-gradient(92deg, transparent 0 2.4rem, rgba(255,255,255,.38) 2.43rem 2.47rem, transparent 2.5rem 5.6rem),
        repeating-linear-gradient(88deg, transparent 0 4.8rem, rgba(255,255,255,.18) 4.82rem 4.85rem, transparent 4.88rem 8rem);
}
.photo-effect[data-photo-overlay="grunge"] .photo-effect__overlay {
    background:
        radial-gradient(ellipse at 20% 20%, rgba(0,0,0,.72), transparent 34%),
        radial-gradient(ellipse at 82% 74%, rgba(0,0,0,.68), transparent 32%),
        repeating-linear-gradient(17deg, rgba(255,255,255,.09) 0 .08rem, transparent .09rem .7rem),
        repeating-linear-gradient(102deg, rgba(0,0,0,.18) 0 .12rem, transparent .13rem 1.4rem);
}
.photo-effect[data-photo-overlay="paper"] .photo-effect__overlay {
    background:
        repeating-linear-gradient(0deg, rgba(255,244,218,.18) 0 .08rem, transparent .09rem .42rem),
        repeating-linear-gradient(90deg, rgba(76,54,35,.12) 0 .06rem, transparent .07rem .55rem),
        #ccb995;
}
.photo-effect[data-photo-overlay="scanlines"] .photo-effect__overlay {
    background: repeating-linear-gradient(180deg, rgba(255,255,255,.18) 0 1px, transparent 1px 4px);
}
.photo-frame--fine-dark { box-shadow: inset 0 0 0 .42rem rgba(0,0,0,.72); }
.photo-frame--fine-light { box-shadow: inset 0 0 0 .35rem rgba(255,255,255,.72); }
.photo-frame--film-edge { box-shadow: inset 0 0 0 .5rem #0b0b0b, inset 0 0 0 .58rem rgba(255,255,255,.24); }
.photo-frame--cinema-bars::before,
.photo-frame--cinema-bars::after {
    content: "";
    position: absolute;
    z-index: 5;
    left: 0;
    width: 100%;
    height: 9%;
    background: #030405;
    pointer-events: none;
}
.photo-frame--cinema-bars::before { top: 0; }
.photo-frame--cinema-bars::after { bottom: 0; }
.photo-effect.is-photo-motion-active.photo-animation--ken-burns .photo-effect__visual,
.photo-effect[data-photo-preview].photo-animation--ken-burns .photo-effect__visual { animation: photo-ken-burns var(--photo-animation-duration) ease-in-out infinite alternate; will-change: transform; }
.photo-effect.is-photo-motion-active.photo-animation--slow-zoom-out .photo-effect__visual,
.photo-effect[data-photo-preview].photo-animation--slow-zoom-out .photo-effect__visual { animation: photo-zoom-out var(--photo-animation-duration) ease-in-out infinite alternate; will-change: transform; }
.photo-effect.is-photo-motion-active.photo-animation--drift-left .photo-effect__visual,
.photo-effect[data-photo-preview].photo-animation--drift-left .photo-effect__visual { animation: photo-drift-left var(--photo-animation-duration) ease-in-out infinite alternate; will-change: transform; }
.photo-effect.is-photo-motion-active.photo-animation--drift-right .photo-effect__visual,
.photo-effect[data-photo-preview].photo-animation--drift-right .photo-effect__visual { animation: photo-drift-right var(--photo-animation-duration) ease-in-out infinite alternate; will-change: transform; }
.photo-effect.is-photo-motion-active.photo-animation--drift-up .photo-effect__visual,
.photo-effect[data-photo-preview].photo-animation--drift-up .photo-effect__visual { animation: photo-drift-up var(--photo-animation-duration) ease-in-out infinite alternate; will-change: transform; }
.photo-effect.is-photo-motion-active.photo-animation--float .photo-effect__visual,
.photo-effect[data-photo-preview].photo-animation--float .photo-effect__visual { animation: photo-float var(--photo-animation-duration) ease-in-out infinite alternate; will-change: transform; }
@keyframes photo-ken-burns { from { transform: var(--photo-transform) scale(1); } to { transform: var(--photo-transform) scale(1.075) translate3d(-1.4%, -1%, 0); } }
@keyframes photo-zoom-out { from { transform: var(--photo-transform) scale(1.075); } to { transform: var(--photo-transform) scale(1); } }
@keyframes photo-drift-left { from { transform: var(--photo-transform) scale(1.045) translate3d(1.5%,0,0); } to { transform: var(--photo-transform) scale(1.045) translate3d(-1.5%,0,0); } }
@keyframes photo-drift-right { from { transform: var(--photo-transform) scale(1.045) translate3d(-1.5%,0,0); } to { transform: var(--photo-transform) scale(1.045) translate3d(1.5%,0,0); } }
@keyframes photo-drift-up { from { transform: var(--photo-transform) scale(1.04) translate3d(0,1.4%,0); } to { transform: var(--photo-transform) scale(1.04) translate3d(0,-1.4%,0); } }
@keyframes photo-float { from { transform: var(--photo-transform) translate3d(-.4%,.45%,0); } to { transform: var(--photo-transform) translate3d(.4%,-.45%,0); } }
.photo-effect.is-before-preview .photo-effect__visual { animation: none; transform: none; }
.photo-effect.is-before-preview img { filter: none; object-position: 50% 50%; }
.photo-effect.is-before-preview .photo-effect__overlay,
.photo-effect.is-before-preview .photo-effect__texture,
.photo-effect.is-before-preview .photo-effect__vignette { opacity: 0; }
.photo-effect.is-before-preview::before,
.photo-effect.is-before-preview::after { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
    .photo-effect__visual { animation: none !important; will-change: auto !important; }
}