/* One photo travels above the frame and settles into the original blue blob. */
.hero[data-hero-handoff]{isolation:isolate}
.hero[data-hero-handoff] .hero-grid{z-index:auto}
.hero[data-hero-handoff] .hero-copy{position:relative;z-index:3}
.hero[data-hero-handoff] .hero-photo{z-index:auto}
.hero[data-hero-handoff] .hero-photo .frame{z-index:1}
.hero[data-hero-handoff] .widget{z-index:3}
.hero[data-hero-handoff]>.blob{overflow:hidden;pointer-events:none}
.hero-blob-image{display:block;width:100%;height:100%;object-fit:cover;opacity:0;
  -webkit-mask-image:linear-gradient(225deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,.55) 27%,#000 67%);
  mask-image:linear-gradient(225deg,rgba(0,0,0,.22) 0%,rgba(0,0,0,.55) 27%,#000 67%)}
.blob.has-photo .hero-blob-image{opacity:1}
.hero-flight{position:absolute;z-index:2;overflow:hidden;transform-origin:0 0;pointer-events:none;will-change:transform;border-radius:44% 56% 62% 38% / 46% 40% 60% 54%}
.hero-flight img{display:block;width:100%;height:100%;object-fit:cover}
.hero[data-hero-handoff] .float-card{right:0;max-width:calc(100% + 16px);z-index:4}
.hero[data-hero-handoff] .float-card b{flex:1;min-width:0;line-height:1.45}
.hero-motion-controls{display:flex;align-items:center;gap:4px;margin-left:auto;flex:none}
.hero-motion-controls[hidden]{display:none}
.hero-motion-controls button{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--border);border-radius:50%;background:var(--surface-alt);color:var(--blue-ink);cursor:pointer}
.hero-motion-controls button[hidden]{display:none}
.hero-motion-controls button:hover{background:var(--surface);border-color:var(--info-ink)}
.hero-motion-controls button:disabled{opacity:.45;cursor:default}
.hero-motion-controls button i{font-size:.85rem}
@media(max-width:900px){
  .hero[data-hero-handoff] .hero-copy{max-width:100%}
  .hero[data-hero-handoff]>.blob.is-positioned{transition:none}
}
@media(max-width:560px){
  .hero[data-hero-handoff] .float-card{left:0;right:0;max-width:100%;padding:9px 11px;gap:8px}
  .hero[data-hero-handoff] .float-card b{font-size:.7rem}
  .hero-motion-controls{gap:3px}
}
@media(prefers-reduced-motion:reduce){.hero-flight{display:none!important}}