/* HEXPOP concept showcase: standalone section. Animates only its own elements. */
.hexpop {
  --hx-pink: #ff2d95; --hx-lime: #c6f432;
  position: relative; overflow: clip; isolation: isolate; background: var(--ink); color: var(--paper);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-l);
  padding: clamp(4rem, 8vw, 8rem) var(--gutter); -webkit-font-smoothing: antialiased;
}
.hexpop-copy { display: grid; justify-items: start; align-content: center; gap: var(--space-m); position: relative; z-index: 2; }
.hexpop-copy > * { margin: 0; }
.hexpop h2 { font-size: var(--t-display); line-height: 0.92; max-width: 9ch; text-wrap: balance; }
.hexpop h2 em { color: var(--hx-pink); }
.hexpop-lede { font-size: var(--t-body); line-height: 1.5; color: rgb(242 242 242 / 0.88); max-width: 34ch; }
.hexpop-controls { display: grid; gap: var(--space-s); justify-items: start; }
.hexpop-controls .actions { gap: var(--space-s) var(--space-m); }
.hexpop-shake[hidden] { display: none; }
.hexpop-shake { border: 0; cursor: pointer; font: inherit; font-weight: 600; min-height: 3rem; }
.hexpop-shake .btn-arrow { background: var(--hx-lime); }
.hexpop-shake:focus-visible, .hexpop-stage:focus-visible { outline: 3px solid var(--hx-lime); outline-offset: 6px; }
.hexpop-meter { display: grid; gap: 0.5rem; width: min(22rem, 100%); font-size: var(--t-small); color: rgb(242 242 242 / 0.8); }
.hexpop-meter[hidden] { display: none; }
.hexpop-track { height: 0.75rem; border-radius: 999px; background: rgb(242 242 242 / 0.14); overflow: hidden; }
.hexpop-fill { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--hx-pink); transform-origin: 0 50%; transform: scaleX(0); transition: transform 0.35s cubic-bezier(.2,.8,.2,1); }
.hexpop-meter.is-full .hexpop-fill { background: var(--hx-lime); }
.hexpop-status { min-height: 1.5em; color: var(--paper); font-weight: 600; }
.hexpop-note { font-size: var(--t-small); color: rgb(242 242 242 / 0.66); max-width: 44ch; }

.hexpop-stage-wrap { position: relative; display: grid; place-items: center; min-height: min(80svh, 46rem); }
.hexpop-stage { position: relative; z-index: 1; display: block; background: none; border: 0; padding: 0; margin: 0; cursor: default; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.hexpop.is-live .hexpop-stage { cursor: grab; }
.hexpop-object { position: relative; display: block; transform-origin: 50% 85%; }
.hexpop-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.hexpop-canvas[hidden] { display: none; }
.hexpop.is-3d .hexpop-bottle { opacity: 0; }
.hexpop-splash { position: absolute; left: 50%; top: 4%; width: 78%; height: auto; margin-left: -39%; pointer-events: none; opacity: 0; }
.hexpop-bottle { display: block; width: auto; height: min(78svh, 44rem); max-width: 78vw; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.hexpop-fizz { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hexpop-fizz i { position: absolute; left: 50%; top: 8%; width: 0.9rem; height: 0.9rem; border-radius: 50%; background: var(--hx-lime); }
.hexpop-fizz i:nth-child(3n) { background: var(--hx-pink); width: 0.6rem; height: 0.6rem; }
.hexpop-fizz i:nth-child(3n+1) { background: var(--paper); width: 0.45rem; height: 0.45rem; }

.hexpop.is-live:not(.is-still) .hexpop-object.is-shaking { animation: hexpop-shake 0.72s cubic-bezier(.36,.07,.19,.97) both; }
.hexpop.is-live:not(.is-still) .hexpop-object.is-shaking-soft { animation: hexpop-shake-soft 0.9s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes hexpop-shake {
  0%, 100% { transform: translate3d(0,0,0) rotate(0); }
  10% { transform: translate3d(-12px,-6px,0) rotate(-6deg); }
  22% { transform: translate3d(14px,4px,0) rotate(6deg); }
  34% { transform: translate3d(-12px,-8px,0) rotate(-5deg); }
  46% { transform: translate3d(11px,3px,0) rotate(5deg); }
  58% { transform: translate3d(-8px,-4px,0) rotate(-3.5deg); }
  72% { transform: translate3d(6px,2px,0) rotate(2.5deg); }
  86% { transform: translate3d(-3px,0,0) rotate(-1deg); }
}
@keyframes hexpop-shake-soft {
  0%, 100% { transform: translate3d(0,0,0) rotate(0); }
  18% { transform: translate3d(-6px,-3px,0) rotate(-3deg); }
  38% { transform: translate3d(7px,2px,0) rotate(3deg); }
  60% { transform: translate3d(-4px,-2px,0) rotate(-1.8deg); }
  80% { transform: translate3d(2px,0,0) rotate(0.8deg); }
}

@media (min-width: 900px) and (min-height: 520px) {
  .hexpop { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(2rem, 5vw, 6rem); min-height: 100svh; }
}
@media (max-width: 899px), (max-height: 519px) {
  .hexpop { padding-block: var(--space-xl) var(--space-2xl); }
  .hexpop-stage-wrap { order: -1; min-height: 0; padding-block: var(--space-s); }
  .hexpop-bottle { height: min(62svh, 30rem); }
}
@media (prefers-reduced-motion: reduce) {
  .hexpop-object { animation: none !important; }
  .hexpop-fill { transition: none; }
}