/**
 * Onion stacking photos
 *
 * Pôvodne WPCode snippet #45.
 */

.as-onion-wrap,
                .as-onion-wrap * {
                    box-sizing: border-box;
                }

                .as-onion-wrap {
                    position: relative;
                    width: 100%;
                    min-height: 100%;
                    background: #000;
                    overflow: hidden;
                    isolation: isolate;
                }

                .as-onion-stage {
                    position: relative;
                    width: 100%;
                    min-height: clamp(420px, 72vh, 920px);
                    display: grid;
                    place-items: center;
                    padding: clamp(24px, 4vw, 48px);
                    background:
                        radial-gradient(circle at 50% 35%, rgba(255,255,255,0.06), transparent 22%),
                        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.03), transparent 40%),
                        linear-gradient(180deg, #050505 0%, #000000 100%);
                }

                .as-onion-scene {
                    position: relative;
                    width: min(100%, 1100px);
                    display: grid;
                    place-items: center;
                    perspective-origin: center center;
                    transform-style: preserve-3d;
                }

                .as-onion-stack {
                    position: relative;
                    width: min(38vw, 420px);
                    aspect-ratio: 0.7;
                    transform-style: preserve-3d;
                    will-change: transform;
                }

                .as-onion-plane {
                    position: absolute;
                    inset: 0;
                    transform-style: preserve-3d;
                    will-change: transform, filter, opacity;
                    pointer-events: none;
                }

                .as-onion-frame {
                    width: 100%;
                    height: 100%;
                    overflow: hidden;
                    background: #111;
                    border-style: solid;
                    backdrop-filter: blur(3px);
                    -webkit-backdrop-filter: blur(3px);
                }

                .as-onion-img {
                    display: block;
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                    user-select: none;
                    -webkit-user-drag: none;
                    transform: scale(1.02);
                }

                .as-onion-wrap::before {
                    content: "";
                    position: absolute;
                    inset: 0;
                    pointer-events: none;
                    background:
                        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.045), transparent 28%),
                        linear-gradient(180deg, rgba(255,255,255,0.02), transparent 18%, transparent 82%, rgba(255,255,255,0.02));
                    z-index: 0;
                }

                @media (max-width: 1199px) {
                    .as-onion-stage {
                        min-height: clamp(400px, 68vh, 760px);
                    }

                    .as-onion-stack {
                        width: min(48vw, 390px);
                    }
                }

                @media (max-width: 767px) {
                    .as-onion-stage {
                        min-height: clamp(360px, 62vh, 680px);
                        padding: 24px 16px;
                    }

                    .as-onion-stack {
                        width: min(74vw, 320px);
                    }
                }

                @media (prefers-reduced-motion: reduce) {
                    .as-onion-plane,
                    .as-onion-stack {
                        transition: none !important;
                    }
                }