.fx-cd{position:relative;display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:minmax(0,1fr);grid-template-areas:"content" "field";--fx-cd-ease: cubic-bezier(.37, 0, .63, 1);--fx-cd-period-x: var(--bar-2, 6.6667s);--fx-cd-period-y: var(--bar, 3.3333s);--fx-cd-period-r: var(--bar-4, 13.3333s);--fx-cd-ax: 10%;--fx-cd-ay: 8%;--fx-cd-spin: 5deg}.fx-cd[data-side=start]{grid-template-areas:"field" "content"}.fx-cd[data-layout=band] .fx-cd__field{max-inline-size:min(100%,34rem);justify-self:start}.fx-cd__content{grid-area:content;min-inline-size:0}.fx-cd__field{grid-area:field;position:relative;inline-size:100%;aspect-ratio:5 / 4;pointer-events:none;overflow:clip;contain:layout paint}.fx-cd__slot{position:absolute;inline-size:var(--fx-cd-size);aspect-ratio:1;inset-inline-start:var(--fx-cd-cx);inset-block-start:var(--fx-cd-cy);transform:translate(-50%,-50%);opacity:var(--fx-cd-opacity)}.fx-cd__slot:before{content:"";position:absolute;inset:-8%;background:radial-gradient(circle at 50% 54%,color-mix(in srgb,var(--w-ink, #f4fff4) 8%,transparent) 0%,color-mix(in srgb,var(--w-ink, #f4fff4) 3%,transparent) 46%,transparent 70%)}.fx-cd__x,.fx-cd__y{position:absolute;inset:0}.fx-cd__art{display:block;inline-size:100%;block-size:auto;rotate:var(--fx-cd-tilt)}.fx-cd__slot[data-slot="1"]{--fx-cd-size: 32%;--fx-cd-cx: 23%;--fx-cd-cy: 28.12%;--fx-cd-tilt: -5deg;--fx-cd-opacity: .95;--fx-cd-delay-x: 0s;--fx-cd-delay-y: 0s;--fx-cd-delay-r: 0s}.fx-cd__slot[data-slot="2"]{--fx-cd-size: 30%;--fx-cd-cx: 77.5%;--fx-cd-cy: 25.62%;--fx-cd-tilt: 4deg;--fx-cd-opacity: 1;--fx-cd-delay-x: -2.2s;--fx-cd-delay-y: -1.1s;--fx-cd-delay-r: -4.4s}.fx-cd__slot[data-slot="3"]{--fx-cd-size: 28%;--fx-cd-cx: 47.5%;--fx-cd-cy: 76.88%;--fx-cd-tilt: -3deg;--fx-cd-opacity: .85;--fx-cd-delay-x: -4.4s;--fx-cd-delay-y: -2.6s;--fx-cd-delay-r: -8.8s}@media(min-width:60rem){.fx-cd:not([data-layout=band]){grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);grid-template-areas:"content field";align-items:center}.fx-cd:not([data-layout=band])[data-side=start]{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);grid-template-areas:"field content"}.fx-cd:not([data-layout=band]) .fx-cd__field{aspect-ratio:2 / 3}.fx-cd:not([data-layout=band]) .fx-cd__slot[data-slot="1"]{--fx-cd-size: 40%;--fx-cd-cx: 30%;--fx-cd-cy: 17.28%}.fx-cd:not([data-layout=band]) .fx-cd__slot[data-slot="2"]{--fx-cd-size: 44%;--fx-cd-cx: 66%;--fx-cd-cy: 51.96%}.fx-cd:not([data-layout=band]) .fx-cd__slot[data-slot="3"]{--fx-cd-size: 36%;--fx-cd-cx: 33%;--fx-cd-cy: 84.67%}}@media(prefers-reduced-motion:no-preference){.fx-cd__x{animation:fx-cd-drift-x var(--fx-cd-period-x) var(--fx-cd-ease) var(--fx-cd-delay-x) infinite alternate}.fx-cd__y{animation:fx-cd-drift-y var(--fx-cd-period-y) var(--fx-cd-ease) var(--fx-cd-delay-y) infinite alternate}.fx-cd__art{animation:fx-cd-sway var(--fx-cd-period-r) var(--fx-cd-ease) var(--fx-cd-delay-r) infinite alternate}.fx-cd[data-drift=paused] .fx-cd__x,.fx-cd[data-drift=paused] .fx-cd__y,.fx-cd[data-drift=paused] .fx-cd__art{animation-play-state:paused}}@media(prefers-reduced-motion:reduce){.fx-cd__x,.fx-cd__y,.fx-cd__art{animation:none}}@keyframes fx-cd-drift-x{0%{transform:translate3d(calc(-1 * var(--fx-cd-ax)),0,0)}to{transform:translate3d(var(--fx-cd-ax),0,0)}}@keyframes fx-cd-drift-y{0%{transform:translate3d(0,calc(-1 * var(--fx-cd-ay)),0)}to{transform:translate3d(0,var(--fx-cd-ay),0)}}@keyframes fx-cd-sway{0%{rotate:calc(var(--fx-cd-tilt) - var(--fx-cd-spin))}to{rotate:calc(var(--fx-cd-tilt) + var(--fx-cd-spin))}}