/* The leaf-only stem follows the photograph's edge. Small independent roses
   attach to that same stem; only their heads scale and turn as they open. */
.rose-frame{position:relative;isolation:isolate;min-width:0;overflow:visible;margin-bottom:28px;transition:transform 1.2s cubic-bezier(.19,1,.22,1)}
.rose-frame.is-flourishing{transform:scale(1.018)}
.rose-photo{position:relative;z-index:0}
.rose-center{position:absolute;left:50%;top:50%;height:1px;width:1px;pointer-events:none}
.photo-garden{position:absolute;inset:0;z-index:3;overflow:visible;pointer-events:none;user-select:none}
.photo-vine,.photo-rose{position:absolute;display:block;pointer-events:none}
.photo-garden [hidden]{display:none}
.photo-vine{z-index:0;left:1%;top:-2%;width:18%;height:104%;translate:-50% 0;--flip:1}
.photo-vine img{display:block;width:100%;height:100%;object-fit:fill;transform:scaleX(var(--flip));transform-origin:50% 100%}
.photo-rose{z-index:1;left:var(--attach-x,1%);top:var(--attach-y);width:min(var(--size,15%),82px);aspect-ratio:1;translate:-50% -50%;--delay:150ms;--petal-angle:-7deg;--unfurl:-30deg}
.photo-rose img{width:100%;height:100%;display:block;object-fit:contain;transform:rotate(var(--petal-angle));transform-origin:50% 50%;filter:drop-shadow(0 2px 2px #392b2322)}
/* X follows the measured centreline of the generated leaf-only stem. */
.photo-rose-1{--attach-x:1.3%;--attach-y:9%;--size:15%}
.photo-rose-2{--attach-x:1.15%;--attach-y:23%;--size:12%;--delay:330ms;--petal-angle:10deg;--unfurl:24deg}
.photo-rose-3{--attach-x:1%;--attach-y:37%;--size:15%;--delay:510ms;--petal-angle:-5deg}
.photo-rose-4{--attach-x:1%;--attach-y:51%;--size:13%;--delay:690ms;--petal-angle:8deg;--unfurl:24deg}
.photo-rose-5{--attach-x:1.2%;--attach-y:65%;--size:15%;--delay:870ms;--petal-angle:-10deg}
.photo-rose-6{--attach-x:1.3%;--attach-y:79%;--size:12%;--delay:1050ms;--petal-angle:9deg;--unfurl:24deg}
.photo-rose-7{--attach-x:1.3%;--attach-y:93%;--size:14%;--delay:1230ms;--petal-angle:-3deg}
.rose-frame--right .photo-vine{left:auto;right:1%;translate:50% 0;--flip:-1}
.rose-frame--right .photo-rose{left:auto;right:var(--attach-x,1%);translate:50% -50%}
@media(prefers-reduced-motion:no-preference){
 .rose-frame.roses-ready .photo-rose img{visibility:hidden;transform:scale(0) rotate(calc(var(--petal-angle) + var(--unfurl)))}
 .rose-frame.roses-ready .photo-vine img{clip-path:inset(0 0 100%);transform:scaleX(var(--flip)) scaleY(.96)}
 .rose-frame.roses-ready.is-flourishing .photo-vine img{animation:vine-unfurl 1500ms cubic-bezier(.18,.7,.2,1) both}
 .rose-frame.roses-ready.is-flourishing .photo-rose img{animation:rose-unfurl 1000ms var(--delay) forwards}
 @keyframes vine-unfurl{from{clip-path:inset(0 0 100%);transform:scaleX(var(--flip)) scaleY(.96)}to{clip-path:inset(-2%);transform:scaleX(var(--flip)) scaleY(1)}}
 @keyframes rose-unfurl{
  0%{visibility:visible;transform:scale(0) rotate(calc(var(--petal-angle) + var(--unfurl)));animation-timing-function:cubic-bezier(.2,.65,.25,1)}
  78%{visibility:visible;transform:scale(1.025) rotate(calc(var(--petal-angle) + 1deg));animation-timing-function:ease-out}
  100%{visibility:visible;transform:scale(1) rotate(var(--petal-angle))}
 }
}
@media(max-width:768px){
 .rose-frame{margin:0 6px 30px}
 .rose-frame.is-flourishing{transform:scale(1.01)}
 .rose-frame--portrait{max-width:470px}
}
@media(prefers-reduced-motion:reduce){.rose-frame,.rose-frame.is-flourishing{transform:none;transition:none}.photo-rose img{visibility:visible;transform:rotate(var(--petal-angle))}.photo-vine img{clip-path:none;transform:scaleX(var(--flip))}}