/* Product engine (product.js): stage, callouts, lens label, dots. Brand looks go in the page's own CSS. */
html { background: var(--stage, #0b0b0c); overscroll-behavior: none; }
body { background: var(--stage, #0b0b0c); overflow-x: hidden; }
#stage { position: fixed; top: 0; left: 0; width: 100vw; height: 100lvh; display: block; touch-action: none; }

#loader { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: var(--stage, #0b0b0c);
  transition: opacity .8s ease .15s, visibility 0s 1s; }
#loader > * { animation: breathe 1.6s ease-in-out infinite; }
.ready #loader { opacity: 0; visibility: hidden; }
@keyframes breathe { 50% { opacity: .35; } }

[data-beat] { position: fixed; z-index: 5; opacity: 0; visibility: hidden; pointer-events: none; will-change: opacity, transform; }
[data-beat] [data-swatches] button { pointer-events: auto; }

/* callouts: a dot on the product, a line drawn out to the label */
.co { left: 0; top: 0; width: 0; height: 0; }
.co .dot { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 0 4px rgba(255,255,255,.18), 0 0 18px rgba(255,255,255,.6); }
.co .ln { position: absolute; left: 0; top: -.5px; height: 1px; background: rgba(255,255,255,.7); transform-origin: 0 50%; }
.co .lb { position: absolute; left: 0; top: 0; white-space: nowrap; padding: 2px 0; }
.co.flip .lb { text-align: right; }

.lens-label { position: fixed; left: 0; top: 0; z-index: 4; pointer-events: none; opacity: 0;
  font: 500 10px/1 ui-monospace, monospace; letter-spacing: .24em; text-transform: uppercase; color: #fff; }

.after { position: relative; z-index: 6; min-height: 100vh; transform: translate3d(0, calc(100lvh + 80px), 0); will-change: transform; }

.dots { position: fixed; z-index: 9; right: max(10px, env(safe-area-inset-right)); top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; opacity: 0; transition: opacity .6s ease .4s; }
.ready .dots { opacity: 1; }
.ready .dots.away { opacity: 0; pointer-events: none; transition-delay: 0s; }
.dots button { width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.dots button::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,.35); transition: transform .35s, background-color .35s; }
.dots button.on::after { background: var(--accent, #fff); transform: scale(1.7); }
@media (max-width: 640px) { .dots { right: 2px; } .dots button { width: 18px; height: 18px; } }

.veil { position: fixed; inset: 0; z-index: 8; background: var(--stage, #0b0b0c); opacity: 0; pointer-events: none; transition: opacity .38s ease; }
.veil.on { opacity: 1; }

/* phones: callouts with data-n become numbered dots; the caption carries the legend (.legend, shown only there) */
.tall .co .dot[data-n]::after { content: attr(data-n); }
.tall .co[data-n] .lb, .tall .co[data-n] .ln { display: none; }
.tall .co .dot[data-n] { left: -10px; top: -10px; width: 20px; height: 20px; display: grid; place-items: center;
  font: 600 11px/1 ui-monospace, monospace; color: #0b0b0c; }
.legend { display: none; }
.tall .legend { display: block; }
.tall .legend + p, .tall .has-legend > p:not(.eyebrow) { display: none; }