.hero-garden {
    position: relative;
    isolation: isolate;
}

.hero-garden > .hero {
    z-index: 2;
    padding-bottom: 36px;
}

.botanical-definitions {
    position: absolute;
    overflow: hidden;
    pointer-events: none;
}

.foliage-green {
    --leaf-fill: url(#logo-green);
    --leaf-fold: url(#logo-green-fold);
}

.foliage-teal {
    --leaf-fill: url(#logo-teal);
    --leaf-fold: url(#logo-teal-fold);
}

.foliage-lilac {
    --leaf-fill: url(#logo-lilac);
    --leaf-fold: url(#logo-lilac-fold);
}

.logo-leaf-body {
    fill: var(--leaf-fill);
}

.logo-leaf-fold {
    fill: var(--leaf-fold);
}

.side-foliage {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    --edge-space: max(76px, calc((100% - 1300px) / 2));
    mask-image: linear-gradient(
        to right,
        #000 20px,
        transparent var(--edge-space),
        transparent calc(100% - var(--edge-space)),
        #000 calc(100% - 20px)
    );
}

.side-vine {
    position: absolute;
    width: 155px;
    height: 930px;
    opacity: 0.75;
    --vine-delay: 0s;
    --vine-period: 12s;
}

.side-vine-left {
    left: -21px;
    top: -35px;
}

.side-vine-right {
    right: -30px;
    top: 45px;
    transform: scaleX(-1);
    --vine-delay: 0.3s;
    --vine-period: 14s;
}

.side-vine-accent {
    right: -40px;
    top: 475px;
    width: 135px;
    height: 650px;
    opacity: 0.4;
    transform: scaleX(-1) rotate(7deg);
    --vine-delay: 0.5s;
    --vine-period: 11s;
}

.vine-growth {
    width: 100%;
    height: 100%;
    animation: vine-unfurl 2600ms var(--motion-ease) var(--vine-delay) both;
}

.vine-sway {
    width: 100%;
    height: 100%;
    overflow: visible;
    transform-origin: 50% 0;
    animation: vine-breeze var(--vine-period) ease-in-out infinite;
}

.vine-stem,
.vine-tendril {
    fill: none;
    stroke: #4b9b7c;
    stroke-width: 1.9px;
    stroke-linecap: round;
}

.vine-tendril {
    stroke-width: 1.3px;
    opacity: 0.65;
}

.leaf-curtain {
    position: relative;
    height: 365px;
    width: 100%;
    margin-top: -12px;
    overflow: clip;
    pointer-events: none;
    z-index: 1;
    --cell-width: max(78px, calc(100vw / 18));
    --row-step: 58px;
    background: linear-gradient(0deg, #d8eedd, transparent 90%);
}

.curtain-leaf {
    position: absolute;
    left: calc((var(--leaf-column) + var(--row-offset) - 1) * var(--cell-width));
    top: calc(var(--leaf-row) * var(--row-step));
    width: calc(var(--cell-width) * 1.42);
    height: calc(var(--cell-width) * 1.7);
    transform: rotate(var(--rest-angle));
    transform-origin: 50% 50%;
    --leaf-push: 0deg;
    --leaf-shift: 0px;
    --leaf-lift: 0px;
}

.leaf-interaction,
.leaf-breeze,
.leaf-face {
    display: block;
    width: 100%;
    height: 100%;
}

.leaf-interaction {
    transform: translate(var(--leaf-shift), var(--leaf-lift)) rotate(var(--leaf-push));
    transform-origin: 50% 50%;
    transition: transform 950ms cubic-bezier(0.2, 0.8, 0.3, 1);
}

.leaf-breeze {
    transform-origin: 60% 35%;
    animation: woven-breeze var(--breeze-period) ease-in-out var(--breeze-delay) infinite;
}

.leaf-face {
    overflow: visible;
}

.leaf-reflected .leaf-face {
    transform: scaleX(-1);
}

.curtain-leaf:nth-child(3n) .leaf-breeze {
    animation-direction: reverse;
}

.curtain-edge {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 32px;
    background: linear-gradient(0deg, var(--bloom-bg), transparent);
}

@keyframes woven-breeze {
    0%,
    100% {
        transform: translateY(0) rotate(-1.3deg);
    }
    45% {
        transform: translateY(-4px) rotate(2deg);
    }
    75% {
        transform: translateY(-1px) rotate(0.5deg);
    }
}

@keyframes vine-unfurl {
    from {
        clip-path: inset(0 0 100% 0);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes vine-breeze {
    0%,
    100% {
        transform: rotate(-1deg);
    }
    50% {
        transform: rotate(1.5deg);
    }
}

html[data-motion="paused"] .vine-growth,
html:not([data-motion]) .vine-growth {
    animation: none;
    clip-path: none;
}

html[data-motion="paused"] .leaf-interaction {
    transition: none;
}

@media (min-width: 1600px) {
    .side-vine-left {
        left: 15px;
    }
    .side-vine-right {
        right: 15px;
    }
    .side-vine-accent {
        right: 30px;
    }
    .leaf-curtain {
        --row-step: 64px;
        height: 400px;
    }
}

@media (max-width: 800px) {
    .side-foliage {
        --edge-space: 32px;
        mask-image: linear-gradient(
            to right,
            #000,
            transparent var(--edge-space),
            transparent calc(100% - var(--edge-space)),
            #000
        );
    }
    .side-vine-left {
        left: -58px;
        top: 10px;
        opacity: 0.45;
    }
    .side-vine-right {
        right: -65px;
        top: 410px;
        opacity: 0.5;
    }
    .side-vine-accent {
        top: 870px;
        right: -60px;
    }
    .leaf-curtain {
        --row-step: 48px;
        height: 285px;
        margin-top: 4px;
    }
    .curtain-leaf[data-leaf-row="4"] {
        display: none;
    }
}

@media (max-width: 480px) {
    .leaf-curtain {
        --row-step: 43px;
        height: 255px;
        margin-top: 0;
    }
    .side-vine-left {
        left: -63px;
    }
    .side-vine-right {
        right: -68px;
        top: 700px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vine-growth,
    .vine-sway,
    .leaf-breeze {
        animation: none !important;
    }
    .vine-growth {
        clip-path: none;
    }
    .leaf-interaction {
        transition: none;
        transform: none;
    }
}