/* Bioluminescence. All rules scoped under .bl-* */
.bl-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.bl-cap { font-size: 13px; color: var(--dim); text-align: center; max-width: 320px; }
.bl-photo { width: 100%; display: grid; place-items: center; }
.bl-photo img { width: 100%; max-width: 380px; max-height: 36vh; object-fit: contain; border-radius: 16px; display: block; }

/* the water */
.bl-sea { position: relative; width: 100%; height: 300px; border-radius: 16px; overflow: hidden; touch-action: none; }
.bl-sea canvas { width: 100%; height: 100%; display: block; cursor: pointer; }
.bl-hint { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; font-size: 13px; font-weight: 700; color: rgba(200,220,245,.55); pointer-events: none; transition: opacity .4s; }
.bl-sea.go .bl-hint { opacity: 0; }

/* two glasses */
.bl-glasses svg { width: 100%; max-width: 340px; display: block; margin: 0 auto; }
.bl-cup { fill: none; stroke: rgba(234,227,215,.55); stroke-width: 2.5; }
.bl-liq { fill: #2A3345; transition: fill .5s, filter .5s; }
.bl-glasses.bl-dry .bl-liq { opacity: 0; }
.bl-glass.lit .bl-liq { fill: #7FE6FF; filter: drop-shadow(0 0 10px rgba(90,210,255,.9)); }
.bl-glass.b .bl-liq { transition: transform .7s ease-in, opacity .7s; transform-box: fill-box; transform-origin: 50% 100%; }
.bl-glasses.pour .bl-glass.b .bl-liq { transform: scaleY(0); opacity: 0; }
.bl-glasses text { fill: var(--text); font: 700 14px var(--sans); }

/* 94 */
.bl-n { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bl-n b { font: 800 44px/1 var(--sans); color: #8FE3FF; }
.bl-n span { font-size: 14px; color: var(--dim); }
.bl-dots94 { width: 100%; max-width: 250px; display: grid; grid-template-columns: repeat(14, 1fr); gap: 4px; }
.bl-dots94 i { aspect-ratio: 1; border-radius: 50%; background: var(--raised); transition: background .2s, box-shadow .2s; }
.bl-dots94 i.on { background: #6FD8FF; box-shadow: 0 0 6px rgba(90,210,255,.8); }
.bl-dots94 i.on:nth-child(5n+2) { background: #C8F56A; box-shadow: 0 0 6px rgba(190,240,90,.7); }
.bl-dots94 i.on:nth-child(7n+3) { background: #5A8CFF; box-shadow: 0 0 6px rgba(90,140,255,.8); }

@media (max-height: 700px) {
  .bl-photo img { max-height: 28vh; }
  .bl-sea { height: 240px; }
}