/* Abelha: moldura em forma de favo (hexágono) com borda tracejada da marca */
.abelha {
  position: relative;
  aspect-ratio: 1;
  width: 100%;
  isolation: isolate;
  filter: drop-shadow(0 0 22px rgba(61, 244, 208, .22)) drop-shadow(0 12px 22px rgba(0, 0, 0, .35));
}
.abelha-favo {
  position: absolute;
  inset: 0;
  background: #fff;
  clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
  overflow: hidden;
}
.abelha-borda { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; overflow: visible; }
.abelha-borda polygon { fill: none; stroke: #78bbff; stroke-width: .8; stroke-dasharray: 3.2 2.2; stroke-linejoin: round; opacity: .7; animation: abelha-borda 18s linear infinite; }
@keyframes abelha-borda { to { stroke-dashoffset: -82; } }
.abelha-cena {
  position: absolute;
  transform-origin: 66.5% 31.9%;
  inset: 6%;
  transition: transform .65s cubic-bezier(.6, 0, .25, 1);
  animation: abelha-flutua 2.6s ease-in-out infinite;
}
.abelha.zoom .abelha-cena { transform: scale(2.35); animation-play-state: paused; }
@keyframes abelha-flutua { 50% { translate: 0 -2.2%; } }

.abelha-cena img,
.abelha-cena video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.abelha-cena .a-base.oculta { opacity: 0; transition: none; } /* some na hora: por baixo fica o visor apagado */
/* O vídeo entra e sai em fusão sobre a imagem igual ao seu primeiro/último quadro */
.abelha-cena video { opacity: 0; transition: opacity .22s ease; }
.abelha-cena video.on { opacity: 1; transition-duration: .12s; }
.abelha-cena .a-base { transition: opacity .18s ease; }

/* Tela do visor: canvas de 64×36 recortado no formato do vidro */
.a-tela {
  position: absolute;
  left: 52.05%;
  top: 23.44%;
  width: 28.9%;
  height: 17%;
  transform: rotate(1.4deg);
  opacity: 0;
  pointer-events: none;
  /* Bordas esfumadas: os pixels somem antes de chegar ao aro, sem caixa visível */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent), linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  mask-composite: intersect;
}
.a-tela { transition: opacity .16s ease; }
.a-tela.on { opacity: 1; }
.a-tela canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; mix-blend-mode: screen; }
/* Com a tela acesa, a imagem de baixo é sempre a de visor desligado */
.abelha-cena .a-off { opacity: 1; }

/* Chip com o símbolo de pixel da trilha */
.chip-pixel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 8px;
  border-radius: 99px;
  background: #0b1a33;
  border: 1px solid rgba(61, 244, 208, .35);
  color: #e8f6ff;
  font: 700 14px Inter, system-ui, sans-serif;
}
.chip-pixel i {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: #090c16;
  color: #3df4d0;
  box-shadow: inset 0 0 0 1px rgba(61, 244, 208, .3);
}