/* The stage reserves the metal emblem's original space above the wordmark. */
.reference-hero .hero-brand .rose-stage {
  --rose-settle-y:38%;
  position:relative;display:block;width:max-content;max-width:100%;margin:0 auto -2px;
  padding:0;border:0;background:transparent;appearance:none;color:inherit;
  line-height:0;overflow:visible;cursor:pointer;touch-action:manipulation;
}
.hero-brand .rose-stage > .rose-metal {margin:0;pointer-events:none}
.hero-brand .rose-stage > :is(.rose-pocket,.rose-glint,.rose-shell) {
  position:absolute;inset:0;display:block;pointer-events:none;
}
/* Let the stem slip behind the first line of type, then disappear before the subtitle. */
.hero-brand .rose-stage > .rose-pocket {
  bottom:-10%;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 0 93%,transparent);
  mask-image:linear-gradient(#000 0 93%,transparent);
}
.hero-brand .rose-petal-life {
  position:absolute;left:0;top:0;width:100%;aspect-ratio:1;
  opacity:0;transform-origin:50% 90%;
}
.hero-brand .rose-petal-life > :is(.rose-live,.rose-waving-leaves) {
  width:100%;height:100%;max-width:none;display:block;margin:0;object-fit:contain;
  mix-blend-mode:normal;mask:none;-webkit-mask:none;pointer-events:none;
}
/* The gold reflection is confined to the rose silhouette. */
.hero-brand .rose-stage > .rose-glint {
  overflow:hidden;opacity:0;
  -webkit-mask:url('/living-rose-sunset.webp?v=1') center/100% 100% no-repeat;
  mask:url('/living-rose-sunset.webp?v=1') center/100% 100% no-repeat;
}
.hero-brand .rose-glint-band {
  position:absolute;inset:0;display:block;
  background:linear-gradient(112deg,transparent 37%,rgba(244,227,181,.18) 45%,rgba(255,248,221,.94) 50%,rgba(244,227,181,.25) 53%,transparent 61%);
}
.hero-brand .rose-stage canvas {position:absolute;display:block;pointer-events:none}
.hero-brand .rose-stage + div {position:relative;z-index:1;pointer-events:none}
.hero-brand .rose-stage:is(.is-bloom,.is-waving) .rose-metal {visibility:hidden}
.hero-brand .rose-stage:is(.is-bloom,.is-waving) .rose-petal-life {opacity:1;transform:translateY(var(--rose-settle-y)) scale(.98)}
/* During the single wave, split off the right spray at its junction with the stem. */
.hero-brand .rose-stage.is-waving .rose-live {
  clip-path:polygon(0 0,100% 0,100% 35%,77% 35%,67% 38%,64% 43%,61% 47%,54% 51%,49.5% 55.5%,50% 57.5%,76% 60%,100% 60%,100% 100%,0 100%);
}
.hero-brand .rose-petal-life > .rose-waving-leaves {
  position:absolute;inset:0;transform-origin:49.5% 56.5%;
  clip-path:polygon(100% 35%,77% 35%,67% 38%,64% 43%,61% 47%,54% 51%,49.5% 55.5%,50% 57.5%,76% 60%,100% 60%);
}
.hero-brand .rose-stage:focus-visible {outline:1px solid #d8cdab;outline-offset:5px;border-radius:3px}