@charset "UTF-8";

/* The glossy layer owns its children and individual CSS properties. Existing
   transforms remain available to the garden controls and card tilt effects. */
.gloss-heading .gloss-word {
    display: inline-block;
    transform-origin: 50% 100%;
    backface-visibility: hidden;
}

.button.gloss-spotlight,
.gloss-ink-host {
    position: relative;
    isolation: isolate;
}

.gloss-sheen,
.gloss-ink {
    display: block;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
    z-index: 4;
}

.gloss-sheen {
    background:
        radial-gradient(ellipse 230px 160px at var(--gloss-x, 50%) var(--gloss-y, 40%), #ffffff30, #ffffff08 48%, transparent 75%),
        radial-gradient(ellipse 400px 250px at var(--gloss-x, 50%) var(--gloss-y, 40%), #e5f7cf10, transparent 78%);
    opacity: 0;
    transition: opacity .55s ease;
    mix-blend-mode: screen;
}

.button .gloss-sheen {
    background: radial-gradient(ellipse 100px 85px at var(--gloss-x, 50%) var(--gloss-y, 40%), #ffffff72, #ffffff14 52%, transparent 76%);
}

.hero-studio-card .gloss-sheen {
    background: radial-gradient(ellipse 150px 190px at var(--gloss-x, 50%) var(--gloss-y, 40%), #edfbd148, #ffffff0b 52%, transparent 76%);
}

.is-gloss-lit > .gloss-sheen {
    opacity: 1;
}

.gloss-ripple {
    display: block;
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, #ffffffc9, #ffffff49 55%, #ffffff00 72%);
    pointer-events: none;
}

.gloss-motion-ready .hero-photo {
    translate: 0 var(--gloss-scroll-photo, 0px);
    scale: var(--gloss-scroll-scale, 1);
}

.gloss-motion-ready .hero-copy {
    translate: 0 var(--gloss-scroll-copy, 0px);
}

.gloss-ambient-host {
    position: relative;
    isolation: isolate;
}

.gloss-ambient {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
    border-radius: inherit;
    contain: paint;
}

.gloss-ambient::before,
.gloss-ambient::after {
    content: '';
    position: absolute;
    width: min(68vw, 760px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(ellipse, #d5e5b52e, #c7dfb10b 44%, transparent 69%);
    left: -15%;
    top: -55%;
    animation: gloss-ambient-drift 18s ease-in-out infinite alternate;
    animation-play-state: paused;
}

.gloss-ambient::after {
    width: min(54vw, 650px);
    background: radial-gradient(ellipse, #c5deab24, transparent 68%);
    left: auto;
    top: auto;
    right: -12%;
    bottom: -65%;
    animation-name: gloss-ambient-return;
    animation-duration: 23s;
}

.is-gloss-inview > .gloss-ambient::before,
.is-gloss-inview > .gloss-ambient::after {
    animation-play-state: running;
}

.garden-explorer > .gloss-ambient::before,
.closing-cta > .gloss-ambient::before {
    background: radial-gradient(ellipse, #c9e99b1c, #9ec28b08 43%, transparent 70%);
}

.page-intro > .gloss-ambient::before {
    width: 75%;
    left: 45%;
    top: -130%;
    background: radial-gradient(ellipse, #bcd5a232, transparent 65%);
}

@keyframes gloss-ambient-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(17%, 15%, 0) scale(1.14); }
}

@keyframes gloss-ambient-return {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(-14%, -17%, 0) scale(1.1); }
}

html.gloss-document-hidden .gloss-ambient::before,
html.gloss-document-hidden .gloss-ambient::after {
    animation-play-state: paused;
}

html[data-motion=paused] .gloss-sheen {
    opacity: 0 !important;
}

html[data-motion=paused] .hero-photo,
html[data-motion=paused] .hero-copy {
    translate: none !important;
    scale: none !important;
}

html[data-motion=paused] .gloss-heading .gloss-word {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
}

@media (max-width: 650px) {
    .gloss-motion-ready .hero-copy { translate: none; }
    .gloss-ambient::before, .gloss-ambient::after { width: 115vw; }
    .gloss-ambient::before { top: -20%; left: -50%; }
    .gloss-ambient::after { bottom: -25%; right: -55%; }
}

@media (hover: none), (pointer: coarse) {
    .gloss-sheen { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .gloss-heading .gloss-word { opacity: 1 !important; transform: none !important; filter: none !important; }
    .gloss-motion-ready .hero-photo, .gloss-motion-ready .hero-copy { translate: none !important; scale: none !important; }
    .gloss-sheen { display: none; }
    .gloss-ambient::before, .gloss-ambient::after { animation: none !important; }
}