/*! © 2026 Dastan Invites, dastaninvites.com. All rights reserved. This invitation's design, code, artwork and music may not be copied, reused or resold. */

.gate {
    --pic-r: .5628;
    --shape: "phone";
    --gap-x: 50.883%;
    --gap-w: .956%;
    --top: 2.213%;
    --foot: 87.321%;
    --leaf-l-x: 5.739%;
    --leaf-l-w: 45.909%;
    --leaf-r-x: 50.053%;
    --leaf-r-w: 45.802%;
    --gap-in: 50.095%;
    --hint-y: 57.38%;
    --bar-x: 87.691%;
    --bar-y: 46.71%;
    --bar-w: 50.227%;
    --bar-h: 5.902%;
    --staple-x: 4.985%;
    --staple-y: 48.098%;
    --staple-w: 7.406%;
    --staple-h: 3.792%;
    --ring-x: -3.038%;
    --ring-y: 51.784%;
    --ring-w: 23.1%;
    --ring-h: 7.637%;
    --btn-x: -8.857%;
    --btn-y: 46.71%;
    --btn-w: 50.343%;
    --btn-h: 12.711%;
    --pin-x: 6.83%;
    --pin-y: 52.489%;
    --hang-x: 51.527%;
    --hang-y: 3.147%;
    --branch-x: 0%;
    --branch-y: 48.624%;
    --branch-w: 100%;
    --branch-h: 38.696%;
    --branch-py: 32.79%
}

.gate .g-leaf-l .g-art {
    background-image: url(shutter-l.webp)
}

.gate .g-leaf-r .g-art {
    background-image: url(shutter-r.webp)
}

.gate .g-frame {
    background-image: url(frame.webp)
}

.gate .g-blur {
    background-image: url(data:image/webp;base64,UklGRtIAAABXRUJQVlA4IMYAAADwBQCdASoYACsAPu1sr1GppaQipWsxMB2JZQC/sApTS0aeaiaysFCfd0AIQupTnL8PasdCtUyxAAD+pqxmTYW68eeHkIE6cLisGnCZVablVOHPnE6rCKG96WuGvwJK1ZuJU/1HxiNDlD2oXVSX5avn6DrFMeeG4eSQyBGlcD649RHVYnXOeImh7PnhTpQxJnbBUIGR7AtEdVkM/rtDIth3fmcC2OhONGl9LSx+eKQswwHzdR48JqEb5T0IuOl+fHlFCgIAAAA=)
}

.gate .g-bar {
    background-image: url(bar.webp)
}

.gate .g-staple {
    background-image: url(staple.webp)
}

.gate .g-ring {
    background-image: url(ring.webp)
}

.gate .g-branch i {
    background-image: url(branch.webp)
}

@media(min-aspect-ratio:5/8) {
    html:root .gate {
        --pic-r: .75;
        --shape: "tab";
        --gap-x: 50.018%;
        --gap-w: .645%;
        --top: 2.417%;
        --foot: 92.541%;
        --leaf-l-x: 5.525%;
        --leaf-l-w: 45.212%;
        --leaf-r-x: 49.448%;
        --leaf-r-w: 45.304%;
        --gap-in: 49.865%;
        --hint-y: 60.84%;
        --bar-x: 89.823%;
        --bar-y: 46.71%;
        --bar-w: 40.527%;
        --bar-h: 5.902%;
        --staple-x: 3.808%;
        --staple-y: 48.098%;
        --staple-w: 5.95%;
        --staple-h: 3.792%;
        --ring-x: -2.657%;
        --ring-y: 51.784%;
        --ring-w: 18.558%;
        --ring-h: 7.637%;
        --btn-x: -7.311%;
        --btn-y: 46.71%;
        --btn-w: 40.445%;
        --btn-h: 12.711%;
        --pin-x: 6.83%;
        --pin-y: 52.489%;
        --hang-x: 51.527%;
        --hang-y: 3.147%;
        --branch-x: 0%;
        --branch-y: 51.564%;
        --branch-w: 79.463%;
        --branch-h: 40.977%;
        --branch-py: 32.79%
    }
    html:root .gate .g-leaf-l .g-art {
        background-image: url(shutter-l-tab.webp)
    }
    html:root .gate .g-leaf-r .g-art {
        background-image: url(shutter-r-tab.webp)
    }
    html:root .gate .g-frame {
        background-image: url(frame-tab.webp)
    }
    html:root .gate .g-blur {
        background-image: url(data:image/webp;base64,UklGRqYAAABXRUJQVlA4IJoAAABQBQCdASoYACAAPu1qr1CppaQiqAqpMB2JQBOmcBUl0E5UcTJRFdRZMVRLAsR2u9KPLQAA/jPSX+HFtvCL6yaQrKTE3x5LyiRoIJIVNByyICCV1ZWuDrUIqNBYJ8/sUW4jIV0hl+HObJhwNGKSa6hEtqAMVWaiWPyXAVcDq+MktM2AO9nNyebKFmw3hFGrK6WOyfU62zb1i/AA)
    }
}

@media(min-aspect-ratio:6/5) {
    html.is-tablet .gate {
        --pic-r: 1.33333;
        --shape: "land";
        --gap-x: 50.448%;
        --gap-w: .552%;
        --top: 4.328%;
        --foot: 86.372%;
        --leaf-l-x: 4.903%;
        --leaf-l-w: 46.064%;
        --leaf-r-x: 50%;
        --leaf-r-w: 45.304%;
        --gap-in: 50.381%;
        --hint-y: 57.51%;
        --bar-x: 94.558%;
        --bar-y: 46.71%;
        --bar-w: 20.369%;
        --bar-h: 5.902%;
        --staple-x: 2.294%;
        --staple-y: 48.098%;
        --staple-w: 3.047%;
        --staple-h: 3.792%;
        --ring-x: -1.018%;
        --ring-y: 51.784%;
        --ring-w: 9.503%;
        --ring-h: 7.637%;
        --btn-x: -3.399%;
        --btn-y: 46.71%;
        --btn-w: 20.71%;
        --btn-h: 12.711%;
        --pin-x: 6.83%;
        --pin-y: 52.489%;
        --hang-x: 51.527%;
        --hang-y: 3.147%;
        --branch-x: 0%;
        --branch-y: 49.069%;
        --branch-w: 40.691%;
        --branch-h: 37.303%;
        --branch-py: 32.79%
    }
    html.is-tablet .gate .g-leaf-l .g-art {
        background-image: url(shutter-l-land.webp)
    }
    html.is-tablet .gate .g-leaf-r .g-art {
        background-image: url(shutter-r-land.webp)
    }
    html.is-tablet .gate .g-frame {
        background-image: url(frame-land.webp)
    }
    html.is-tablet .gate .g-blur {
        background-image: url(data:image/webp;base64,UklGRoYAAABXRUJQVlA4IHoAAADQBACdASoYABIAPu1ur1IppiQiqAgBMB2JYwCdMyGBWube0xF6Rey68/FRaaWoAAD+pmdQM3o5SY1d3aGYA88rtQCiJ/JMzhkZ/Udrv1URQ+T7sh/8KpuUTJs+C4FxGq+jWifMmImK7j3kB5PzlshQTM0zS8GOxQAAAA==)
    }
}