/* ============================================================
   Bloom — click any image; an overlay blooms open from the
   touch point, the image rises into a framed hero, and related
   pieces fan outward as a carousel. Opacity reveals throughout.
   ============================================================ */
.bloomable{cursor:zoom-in}

.bloom{position:fixed;inset:0;z-index:6000;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(16px,4vw,52px);opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.bloom[hidden]{display:none}
.bloom.open{pointer-events:auto;opacity:1}

/* the flower opening: a circular reveal anchored at the click point */
.bloom-scrim{position:absolute;inset:0;
  background:radial-gradient(130% 130% at 50% 38%,rgba(22,16,11,.86),rgba(7,5,3,.975));
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  clip-path:circle(0% at var(--bx,50%) var(--by,50%));
  transition:clip-path .82s cubic-bezier(.2,.7,.2,1)}
.bloom.open .bloom-scrim{clip-path:circle(155% at var(--bx,50%) var(--by,50%))}

.bloom-stage{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;max-width:min(1100px,92vw);
  opacity:0;transform:scale(.93) translateY(12px);
  transition:opacity .6s .14s var(--ease),transform .72s .14s var(--ease)}
.bloom.open .bloom-stage{opacity:1;transform:none}
.bloom-frame{position:relative;padding:clamp(10px,1.3vw,16px);background:linear-gradient(160deg,#241c14,#15110c);
  border:1px solid var(--rule);box-shadow:0 44px 110px rgba(0,0,0,.62),inset 0 0 0 1px rgba(205,214,223,.06)}
.bloom-frame::after{content:"";position:absolute;inset:clamp(10px,1.3vw,16px);pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(205,214,223,.14)}
.bloom-img{display:block;max-width:100%;max-height:60vh;object-fit:contain;transition:opacity .42s var(--ease)}
.bloom-img.swap{opacity:0}
.bloom-cap{margin-top:16px;text-align:center;display:flex;flex-direction:column;gap:5px;min-height:2.2em}
.bloom-title{font-family:var(--display);font-style:italic;font-size:clamp(20px,2.4vw,30px);color:var(--cream)}
.bloom-spec{font-family:var(--label);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted)}

/* petals — the carousel, blooming outward from the active piece */
.bloom-petals{position:relative;z-index:2;display:flex;justify-content:center;gap:clamp(8px,1vw,14px);
  margin-top:clamp(18px,3vh,30px);max-width:94vw;overflow-x:auto;padding:8px 4px 12px;scrollbar-width:none}
.bloom-petals::-webkit-scrollbar{display:none}
.bloom-petal{position:relative;flex:0 0 auto;width:clamp(66px,9vw,108px);aspect-ratio:16/10;cursor:pointer;
  border:1px solid var(--rule);overflow:hidden;background:var(--panel);
  opacity:0;transform:translateY(16px) scale(.78);
  transition:opacity .55s var(--ease),transform .6s var(--ease),border-color .3s,box-shadow .3s}
.bloom.open .bloom-petal{opacity:.62;transform:none}
.bloom-petal:hover{opacity:1;border-color:var(--bronze)}
.bloom-petal.is-on{opacity:1;border-color:var(--bronze-light);box-shadow:0 0 0 1px var(--bronze-light),0 8px 24px rgba(0,0,0,.5)}
.bloom-petal img{width:100%;height:100%;object-fit:cover;display:block}
.bloom-petal b{position:absolute;left:0;right:0;bottom:0;font-family:var(--label);font-size:8px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cream);background:linear-gradient(transparent,rgba(8,6,4,.82));
  padding:10px 4px 4px;text-align:center;font-weight:400;opacity:0;transition:opacity .3s}
.bloom-petal:hover b,.bloom-petal.is-on b{opacity:1}

/* chrome */
.bloom-close{position:absolute;top:clamp(14px,2.4vw,26px);right:clamp(14px,2.4vw,26px);z-index:3;
  width:44px;height:44px;border-radius:999px;border:1px solid var(--rule);background:rgba(20,15,10,.5);
  color:var(--cream-soft);font-size:19px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:border-color .25s,color .25s,transform .25s}
.bloom-close:hover{border-color:var(--bronze);color:var(--cream);transform:rotate(90deg)}
.bloom-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:48px;height:48px;border-radius:999px;
  border:1px solid var(--rule);background:rgba(20,15,10,.4);color:var(--cream-soft);font-size:22px;line-height:1;cursor:pointer;
  transition:border-color .25s,color .25s}
.bloom-nav:hover{border-color:var(--bronze);color:var(--cream)}
.bloom-nav.prev{left:clamp(8px,3vw,40px)}
.bloom-nav.next{right:clamp(8px,3vw,40px)}
.bloom-count{position:absolute;bottom:clamp(12px,2.2vw,22px);z-index:3;font-family:var(--label);font-size:10.5px;
  letter-spacing:.26em;color:var(--muted)}
.bloom-count b{color:var(--bronze-light);font-weight:400}

@media(max-width:700px){.bloom-nav{display:none}}
@media(prefers-reduced-motion:reduce){
  .bloom-scrim,.bloom-stage,.bloom-petal,.bloom-img,.bloom{transition-duration:.01ms!important}
}