.hero-copy { position: relative; }
.catalog-page { position: relative; z-index: 1; }
.catalog-hero { position: relative; isolation: isolate; }
.catalog-hero > :not(.lavender-decoration) { position: relative; z-index: 1; }
.lavender-decoration { position: absolute; z-index: 2; width: 184px; right: -155px; bottom: -136px; pointer-events: none; opacity: .86; transform: rotate(-7deg); transform-origin: 82% 100%; animation: lavender-sway 8s ease-in-out infinite alternate; }
.lavender-decoration--inner { position: absolute; z-index: 0; width: clamp(260px, 27vw, 540px); right: -670px; top: 16px; bottom: auto; opacity: .76; transform: rotate(-38deg) scaleY(1.7); transform-origin: 100% 100%; animation: lavender-sway-inner 10s ease-in-out infinite alternate; }
.lavender-decoration img { display: block; width: 100%; height: auto; filter: saturate(.82) contrast(.98); }
.lavender-petal { position: absolute; width: 8px; height: 13px; border-radius: 75% 25% 75% 25%; background: rgba(139, 112, 156, .64); box-shadow: 0 1px 5px rgba(69, 52, 68, .12); animation: lavender-fall 7s linear infinite; }
.lavender-petal--one { left: 38%; top: 35%; animation-delay: -1s; }.lavender-petal--two { left: 63%; top: 47%; width: 6px; height: 10px; animation-delay: -4s; }.lavender-petal--three { left: 20%; top: 56%; width: 7px; height: 11px; animation-delay: -5.5s; }
.lavender-leaf { position: absolute; width: 10px; height: 20px; border-radius: 90% 10% 90% 10%; background: rgba(79, 102, 75, .62); box-shadow: 0 1px 4px rgba(43, 56, 40, .14); animation: lavender-fall 8s linear infinite; }
.lavender-leaf--one { left: 54%; top: 42%; transform: rotate(25deg); animation-delay: -2s; }.lavender-leaf--two { left: 73%; top: 60%; width: 8px; height: 16px; transform: rotate(-16deg); animation-delay: -5s; }.lavender-leaf--three { left: 30%; top: 65%; width: 7px; height: 14px; transform: rotate(12deg); animation-delay: -6.5s; }
@keyframes lavender-sway { from { transform: rotate(-9deg) translateY(0); } to { transform: rotate(-3deg) translateY(-5px); } }
@keyframes lavender-sway-inner { from { transform: rotate(-41deg) scaleY(1.7) translateY(0); } to { transform: rotate(-35deg) scaleY(1.7) translateY(-8px); } }
@keyframes lavender-leaf-drift { 0% { opacity: 0; transform: translate3d(0, -8vh, 0) rotate(0deg); } 10% { opacity: .48; } 78% { opacity: .32; } 100% { opacity: 0; transform: translate3d(-13vw, 106vh, 0) rotate(430deg); } }
.lavender-fall-layer { position: fixed; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.lavender-fall-layer i { position: absolute; top: 18vh; right: 6%; width: 7px; height: 15px; border-radius: 85% 15% 85% 15%; background: rgba(92, 111, 82, .56); box-shadow: 0 1px 4px rgba(43, 56, 40, .12); animation: lavender-leaf-drift 14s linear infinite; }
.lavender-fall-layer i:nth-child(2) { right: 10%; width: 6px; height: 12px; animation-delay: -3s; }.lavender-fall-layer i:nth-child(3) { right: 3%; animation-delay: -5.5s; }.lavender-fall-layer i:nth-child(4) { right: 14%; width: 8px; height: 17px; animation-delay: -8s; }.lavender-fall-layer i:nth-child(5) { right: 8%; width: 5px; height: 11px; animation-delay: -10.5s; }.lavender-fall-layer i:nth-child(6) { right: 1%; animation-delay: -12.5s; }
@keyframes lavender-fall { 0% { opacity: 0; transform: translate3d(0,0,0) rotate(0deg); } 10% { opacity: .75; } 85% { opacity: .25; } 100% { opacity: 0; transform: translate3d(34px,118px,0) rotate(210deg); } }
@media (max-width: 1450px) { .lavender-decoration--inner { width: clamp(220px, 28vw, 380px); right: -125px; top: 10px; bottom: auto; } }
@media (max-width: 1100px) { .lavender-decoration { right: -84px; bottom: -120px; width: 144px; } .lavender-decoration--inner { width: clamp(190px, 25vw, 300px); right: -70px; top: 8px; bottom: auto; } }
@media (max-width: 820px) { .lavender-decoration:not(.lavender-decoration--inner) { display: none; } .lavender-decoration--inner { display: block; width: clamp(130px, 36vw, 190px); right: -58px; top: 8px; bottom: auto; opacity: .32; } .lavender-fall-layer { display: none; } }
@media (prefers-reduced-motion: reduce) { .lavender-decoration, .lavender-fall-layer { display: none; } }
.catalog-page .catalog-card, .catalog-page .reviews-grid, .catalog-page .reviews-2gis-banner, .catalog-page .reviews-filter-bar, .catalog-page .catalog-cta, .catalog-page .contacts-modern__list { position: relative; z-index: 2; }