.demo-frame{--subject-x:34%;--light-x:30%;--light-y:18%;--zoom:1;--shift:0%;--tilt:0deg;--focus:50% 60%;--look-filter:saturate(1);--treatment-filter:brightness(1);--grain-opacity:.18;--vignette-opacity:.25;--bars-opacity:0;--variant-tone:hue-rotate(0deg);--subject-scale:1;isolation:isolate;aspect-ratio:4/5;border-radius:calc(var(--radius) * 1.2);background:#0e0b09;position:relative;overflow:hidden}.demo-frame[data-variant="2"]{--subject-x:60%;--light-x:72%;--variant-tone:hue-rotate(-14deg) brightness(1.06);--subject-scale:.82}.demo-frame[data-variant="3"]{--subject-x:42%;--light-x:50%;--light-y:34%;--variant-tone:hue-rotate(10deg) brightness(.92);--subject-scale:1.18}.demo-frame[data-variant="4"]{--subject-x:18%;--light-x:80%;--light-y:10%;--variant-tone:hue-rotate(-24deg) saturate(1.1);--subject-scale:.68}.demo-frame-world{transform:rotate(var(--tilt)) scale(var(--zoom)) translateY(var(--shift));transform-origin:var(--focus);filter:var(--look-filter) var(--treatment-filter);transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .5s;position:absolute;inset:0}.demo-frame-backdrop,.demo-frame-ground,.demo-frame-light,.demo-frame-subject{transition:left .7s cubic-bezier(.2,.8,.2,1),background .5s;position:absolute}.demo-frame-backdrop{filter:var(--variant-tone);inset:0}.demo-frame-subject{scale:var(--subject-scale);transform-origin:50% 100%}.demo-frame-light{left:calc(var(--light-x) - 30%);top:calc(var(--light-y) - 30%);aspect-ratio:1;mix-blend-mode:screen;border-radius:50%;width:60%}.demo-frame:before,.demo-frame:after,.demo-frame-bars{content:"";pointer-events:none;position:absolute}.demo-frame:before{z-index:2;opacity:var(--vignette-opacity);background:radial-gradient(at 50% 45%,#0000 45%,#000000d9 100%);transition:opacity .5s;inset:0}.demo-frame:after{z-index:3;opacity:var(--grain-opacity);mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 1.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:.9s steps(5,end) infinite demo-grain;inset:-50%}.demo-frame-bars{z-index:4;opacity:var(--bars-opacity);background:linear-gradient(#0b0908 0 11%,#0000 11% 89%,#0b0908 89%);transition:opacity .5s;inset:0}@keyframes demo-grain{0%{transform:translate(0)}20%{transform:translate(-6%,4%)}40%{transform:translate(5%,-7%)}60%{transform:translate(-3%,8%)}80%{transform:translate(7%,2%)}to{transform:translate(0)}}.demo-frame[data-scene=lighthouse] .demo-frame-backdrop{background:linear-gradient(#17244a 0%,#4b3f73 42%,#d98b72 70%,#f4c39b 76% 100%)}.demo-frame[data-scene=lighthouse] .demo-frame-ground{background:repeating-linear-gradient(#ffffff14 0 1px,#0000 1px 7px),linear-gradient(#2b3a63,#0d1428);inset:72% 0 0}.demo-frame[data-scene=lighthouse] .demo-frame-light{background:radial-gradient(circle,#ffe7b0 0%,#ffc97a55 22%,#0000 60%)}.demo-frame[data-scene=lighthouse] .demo-frame-subject{left:var(--subject-x);clip-path:polygon(30% 0,70% 0,100% 100%,0 100%);background:linear-gradient(#0000 0 18%,#b9473a 18% 26%,#0000 26% 52%,#b9473a 52% 60%,#0000 60%),linear-gradient(90deg,#f1e9dc,#a89e92);width:9%;height:44%;bottom:27%}.demo-frame[data-scene=wine] .demo-frame-backdrop{background:radial-gradient(at 72% 18%,#5a4030 0%,#2a1c14 45%,#120c08 80%)}.demo-frame[data-scene=wine] .demo-frame-ground{background:linear-gradient(115deg,#0000 0 40%,#9d948a33 41%,#0000 43% 70%,#8f857b2e 71%,#0000 73%),linear-gradient(#f2ede6,#cfc6bb);inset:62% 0 0}.demo-frame[data-scene=wine] .demo-frame-light{background:radial-gradient(circle,#fff1dc66 0%,#0000 62%)}.demo-frame[data-scene=wine] .demo-frame-subject{left:var(--subject-x);width:26%;height:40%;bottom:30%}.demo-frame[data-scene=wine] .demo-frame-subject:before,.demo-frame[data-scene=wine] .demo-frame-subject:after{content:"";position:absolute}.demo-frame[data-scene=wine] .demo-frame-subject:before{background:linear-gradient(100deg,#0000 0 14%,#ffffff40 14% 20%,#0000 20%),linear-gradient(#ffffff1c 0 34%,#f0913f 34% 100%);border-radius:8% 8% 50% 50%/6% 6% 50% 50%;inset:0 0 42%;box-shadow:inset 0 -.6rem 1rem #9c4a1a99}.demo-frame[data-scene=wine] .demo-frame-subject:after{background:linear-gradient(90deg,#fff5,#fff2);border-radius:0 0 40% 40%;inset:58% 46% 0;box-shadow:0 0 0 .05rem #fff2}.demo-frame[data-scene=plaza] .demo-frame-backdrop{background:repeating-linear-gradient(105deg,#ffffff1a 0 1px,#0000 1px 10px),linear-gradient(#5f6d7e 0%,#a7b2bf 58%,#c9d0d8 62%)}.demo-frame[data-scene=plaza] .demo-frame-ground{background:repeating-linear-gradient(90deg,#ffffff12 0 2px,#0000 2px 15px),linear-gradient(#566373,#232a33);inset:60% 0 0}.demo-frame[data-scene=plaza] .demo-frame-light{background:radial-gradient(circle,#ffd59a 0%,#ffb35c44 20%,#0000 58%)}.demo-frame[data-scene=plaza] .demo-frame-subject{left:var(--subject-x);width:22%;height:34%;bottom:30%}.demo-frame[data-scene=plaza] .demo-frame-subject:before,.demo-frame[data-scene=plaza] .demo-frame-subject:after{content:"";position:absolute}.demo-frame[data-scene=plaza] .demo-frame-subject:before{z-index:1;background:linear-gradient(90deg,#a3301f,#d34a33 45%,#9c2c1c);border-radius:100% 100% 0 0;inset:0 0 72%}.demo-frame[data-scene=plaza] .demo-frame-subject:after{background:linear-gradient(90deg,#11151a,#262d36 50%,#11151a);border-radius:40% 40% 14% 14%/22% 22% 6% 6%;inset:24% 33% 0;box-shadow:0 1.2rem .9rem -.6rem #0006}.demo-frame[data-treatment=cinematic]{--bars-opacity:1;--vignette-opacity:.45;--treatment-filter:contrast(1.08)}.demo-frame[data-treatment=portrait]{--vignette-opacity:.8;--treatment-filter:brightness(1.04)}.demo-frame[data-treatment=street]{--tilt:-2.5deg;--vignette-opacity:.3;--treatment-filter:contrast(1.12)}.demo-frame[data-treatment=product]{--vignette-opacity:.08;--treatment-filter:brightness(1.12) contrast(.95)}.demo-frame[data-treatment=street] .demo-frame-world{scale:1.08}.demo-frame[data-framing=low]{--zoom:1.12;--shift:7%;--focus:50% 90%}.demo-frame[data-framing=high]{--zoom:1.1;--shift:-8%;--focus:50% 15%}.demo-frame[data-framing=close-up]{--zoom:1.9;--shift:2%;--focus:calc(var(--subject-x) + 5%) 60%}.demo-frame[data-look=warm]{--look-filter:sepia(.28) saturate(1.2) hue-rotate(-8deg)}.demo-frame[data-look=faded]{--look-filter:sepia(.4) saturate(.7) contrast(.82) brightness(1.1);--grain-opacity:.32}.demo-frame[data-look=noir]{--look-filter:grayscale(1) contrast(1.6) brightness(.9);--grain-opacity:.3;--vignette-opacity:.7}.demo-frame[data-look=vivid]{--look-filter:saturate(1.75) contrast(1.12);--grain-opacity:.1}