/* Five individually colored, tightly furled roses open into overlapping spiral petals. */
.rose-flower{height:153px;perspective:650px}.rose-flower .flower-stem{top:65px;height:80px;width:4px;transform:rotate(-3deg)}
.rose-flower .flower-leaf{top:99px;width:16px;height:34px;border-radius:60% 3% 60% 3%;background:repeating-linear-gradient(35deg,transparent 0 5px,#1e452524 6px 7px),linear-gradient(115deg,#a3b780,#547650 45%,#294f3d);clip-path:polygon(50% 0,65% 10%,72% 8%,78% 24%,88% 28%,87% 43%,100% 51%,89% 65%,94% 74%,70% 86%,50% 100%,31% 89%,10% 81%,16% 65%,0 52%,13% 40%,13% 24%,30% 19%)}
.rose-flower .leaf-right{top:81px}.rose-calyx{position:absolute;top:57px;left:calc(50% - 16px);width:32px;height:30px;background:linear-gradient(90deg,#355d47,#81976d,#355542);clip-path:polygon(0 0,35% 35%,50% 0,65% 35%,100% 0,70% 82%,50% 100%,30% 82%)}
.flower-button .rose-head,.rose-head{position:absolute;display:block;top:-5px;left:calc(50% - 48px);width:96px;height:96px;overflow:visible;filter:drop-shadow(3px 6px 4px #06091a66);transform:perspective(500px) rotateX(20deg) rotateY(-9deg);animation:rose-breeze 9s ease-in-out infinite}
.rose-ring{transform-box:view-box;transform-origin:50px 50px;transition:transform 1.7s cubic-bezier(.22,.65,.28,1)}
.rose-outer{transform:scale(.67) rotate(-15deg)}.rose-middle{transform:scale(.76) rotate(-12deg);transition-delay:.12s}.rose-inner{transform:scale(.86) rotate(-8deg);transition-delay:.24s}.rose-core{transform:scale(.96);transition-delay:.32s}
.flower-button.picked .rose-ring,.coastal-blooms .rose-ring{transform:scale(1) rotate(0deg)}
.flower-button:hover .rose-head{filter:drop-shadow(3px 6px 5px #03081866) drop-shadow(0 0 9px #e2b4bd55)}
.flower-button.picked .rose-head{filter:drop-shadow(3px 7px 5px #03081866) drop-shadow(0 0 12px #e5c7b733)}
.flower-button:nth-child(2) .rose-head{animation-delay:-2s}.flower-button:nth-child(3) .rose-head{animation-delay:-4s}.flower-button:nth-child(4) .rose-head{animation-delay:-6s}.flower-button:nth-child(5) .rose-head{animation-delay:-3s}
.rose-label{position:absolute;bottom:1px;left:0;right:0;font-size:9px;letter-spacing:.8px;color:#d7c8d1}.flower-button.picked:after{bottom:21px;font-size:9px;width:15px;height:15px;left:calc(50% - 7.5px)}
.flowers{height:180px;gap:8px;margin-top:30px}.flower-button{height:173px;min-width:0}.flower-button:focus-visible{outline:1px solid #e5c19b;border-radius:20px;outline-offset:5px}
.coastal-blooms .rose-head{width:100px;height:100px;left:calc(50% - 50px)}
.maple-surface{position:absolute;inset:0;width:100%;height:100%;overflow:visible;backface-visibility:hidden;filter:drop-shadow(2px 3px 2px #0c0b1333)}
.maple-front{transform:rotateY(-7deg) translateZ(.7px)}.maple-back{transform:rotateY(173deg) translateZ(.7px);filter:brightness(.74) saturate(.8)}
.petal.maple-leaf{height:calc(var(--leaf-size)*1.12)}.petal.drifting-orchid{height:var(--leaf-size)}
.drifting-orchid .leaf-tumbler>svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(2px 3px 2px #0c0b1344);transform:rotateX(22deg);backface-visibility:visible}
@keyframes rose-breeze{0%,100%{transform:perspective(500px) rotateX(20deg) rotateY(-9deg) rotateZ(-2deg)}50%{transform:perspective(500px) rotateX(12deg) rotateY(9deg) rotateZ(3deg)}}
@media(max-width:650px){.flowers{gap:2px;height:163px;margin-top:25px}.flower-button{height:157px}.flower-button .rose-head{width:74px;height:74px;left:calc(50% - 37px);top:1px}.rose-label{font-size:8px;letter-spacing:.1px}.rose-flower .flower-stem{top:54px;height:76px}.rose-calyx{top:44px}.rose-flower .flower-leaf{top:89px}.rose-flower .leaf-right{top:74px}.flower-button.picked:after{bottom:19px}}
@media(prefers-reduced-motion:reduce){.rose-head{animation:none!important}.rose-ring{transition:none!important}}
body.cosmos-resting .rose-head{animation-play-state:paused!important}
