/* The grove artwork dissolves into the matching brand surface in each theme. */
#grove {
    --grove-section-padding: clamp(32px, 3vw, 48px);
    --grove-drift-start-x: -2.5%;
    --grove-drift-mid-x: .4%;
    --grove-drift-start-scale: 1.16;
    --grove-drift-mid-scale: 1.045;
    padding-block: var(--grove-section-padding);
    background: var(--brand-neutral);
    isolation: isolate;
}
#grove::before { content: none; }
#grove .grove-resolution-grid { min-height: 0; }
#grove .grove-resolution-copy { grid-column: 2; }
#grove .grove-resolution-art {
    position: absolute;
    inset: 0 auto 0 2%;
    width: 48%;
    max-width: none;
    margin: 0;
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
    pointer-events: none;
}
#grove .grove-resolution-art img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 84%;
    margin: 0;
    translate: -50% -50%;
    object-fit: contain;
    object-position: center;
    transform-origin: center;
    mask-image: linear-gradient(90deg, transparent, var(--brand-navy) 8%, var(--brand-navy) 92%, transparent),
        linear-gradient(180deg, transparent, var(--brand-navy) 12%, var(--brand-navy) 78%, transparent);
    mask-composite: intersect;
    mask-mode: alpha;
}
#grove .grove-kicker { color: var(--accent); }
#grove h2,
#grove .grove-resolution-line { color: var(--brand-navy); }
#grove .grove-resolution-copy > p { color: var(--blue); }
#grove .grove-resolution-line { border-color: color-mix(in srgb, var(--brand-navy) 20%, transparent); }
/* Opacity keeps both artwork variants on the same motion timeline. */
#grove .grove-art-light { opacity: 1; }
#grove .grove-art-dark { opacity: 0; }
[data-theme="dark"] #grove { background: var(--brand-navy); }
[data-theme="dark"] #grove .grove-art-light { opacity: 0; }
[data-theme="dark"] #grove .grove-art-dark { opacity: 1; }
[data-theme="dark"] #grove .grove-kicker,
[data-theme="dark"] #grove h2,
[data-theme="dark"] #grove .grove-resolution-copy > p { color: var(--brand-neutral); }
[data-theme="dark"] #grove .grove-resolution-line {
    border-color: color-mix(in srgb, var(--brand-neutral) 20%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
    #grove .grove-motion-started img { animation: orchard-drift 10s cubic-bezier(.25,.1,.3,1) both; }
}
@keyframes orchard-drift {
    0% { transform: translate(var(--grove-drift-start-x), 1%) scale(var(--grove-drift-start-scale)); }
    65% { transform: translate(var(--grove-drift-mid-x), -.2%) scale(var(--grove-drift-mid-scale)); }
    100% { transform: translate(0, 0) scale(1); }
}
@media (max-width: 900px) {
    #grove {
        --grove-art-height: min(336px, 45vw);
        --grove-drift-start-x: 0%;
        --grove-drift-mid-x: 0%;
        --grove-drift-start-scale: 1.06;
        --grove-drift-mid-scale: 1.018;
    }
    #grove .grove-resolution-grid {
        display: block;
        min-height: 0;
        padding-top: calc(var(--grove-art-height) - var(--grove-section-padding) + 20px);
    }
    #grove .grove-resolution-art {
        left: 0;
        bottom: auto;
        width: 100%;
        height: var(--grove-art-height);
    }
    #grove .grove-resolution-art img {
        width: min(90%, calc(var(--grove-art-height) * 2));
        max-height: none;
        object-position: center;
    }
}
@media (prefers-reduced-motion: reduce) {
    #grove .grove-resolution-art img { animation: none; transform: none; filter: none; }
}