/* Bee — Band 2 (v2: adds tilt + holographic scan + iridescent ring + pulse) */
.bee {
  position: relative;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 1 / 0.86;
  margin: 0 auto;
  perspective: 1200px;         /* for tilt child */
}

/* Radial vignette / hex grid fade to black at edges */
.bee::before {
  content: "";
  position: absolute; inset: -40px;
  background:
    radial-gradient(circle at center, rgba(0,255,255,0.06) 0%, transparent 58%),
    radial-gradient(circle at center, transparent 62%, #000 100%);
  pointer-events: none;
  z-index: 0;
}

/* Twin green under-lights */
.bee__underlight {
  position: absolute;
  width: 360px; height: 360px;
  bottom: 8%;
  border-radius: 50%;
  filter: blur(30px);
  background: radial-gradient(circle, rgba(0,255,136,0.28), transparent 65%);
  pointer-events: none; z-index: 1;
}
.bee__underlight--l { left: 12%; }
.bee__underlight--r { right: 12%; }

/* Cyan head halo */
.bee__halo {
  position: absolute;
  left: 50%; top: 28%;
  transform: translate(-50%, -50%);
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,255,255,0.22), transparent 60%);
  filter: blur(20px);
  z-index: 1;
}

/* Broken-line rotating ring */
.bee__ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 500px; height: 500px;
  transform: translate(-50%, -50%);
  z-index: 2;
  animation: ring-rotate 40s linear infinite;
}
.bee__ring svg { width: 100%; height: 100%; overflow: visible; }
@keyframes ring-rotate { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* 4 orbital HUD targets at 12/3/6/9 */
.bee__targets {
  position: absolute;
  left: 50%; top: 50%;
  width: 500px; height: 500px;
  transform: translate(-50%, -50%);
  z-index: 3;
  pointer-events: none;
}
.bee__target {
  position: absolute;
  left: 50%; top: 50%;
  width: 12px; height: 12px;
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(-250px) rotate(calc(-1 * var(--a)));
  color: var(--cyan);
}
.bee__target::before {
  content: "";
  position: absolute; inset: 3px;
  border: 1px solid var(--cyan);
  border-radius: 50%;
  box-shadow: var(--glow-cyan-sm);
}
.bee__target::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 4px; height: 4px;
  transform: translate(-50%,-50%);
  background: var(--cyan);
  border-radius: 50%;
  box-shadow: var(--glow-cyan-md);
}

/* UPGRADE A: tilt wrapper — only the bee image + shimmer tilt */
.bee-3d-tilt {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -52%) rotateX(0deg) rotateY(0deg);
  transform-style: preserve-3d;
  transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 4;
  will-change: transform;
}
.bee-3d-tilt[data-returning="true"] { transition: transform 600ms ease-out; }

.bee__img {
  display: block;
  width: 380px;
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.6));
}

/* Wing shimmer — sweep every 3s */
.bee__shimmer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  mix-blend-mode: screen;
}
.bee__shimmer::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 60px;
  background: linear-gradient(90deg, transparent, rgba(0,255,255,0.35), transparent);
  left: -80px;
  animation: wing-sweep 3s ease-in-out infinite;
}
@keyframes wing-sweep {
  0%, 60% { left: -80px; opacity: 0; }
  65%     { opacity: 1; }
  100%    { left: 440px; opacity: 0; }
}

/* UPGRADE B.1: Horizontal scan line */
.bee__scan {
  position: absolute;
  left: 0; right: 0;
  height: 80px;
  pointer-events: none;
  z-index: 5;
  mix-blend-mode: screen;
  background: linear-gradient(
    to bottom,
    rgba(0,255,255,0) 0%,
    rgba(0,255,255,0) 48%,
    rgba(0,255,255,0.6) 50%,
    rgba(0,255,255,0) 52%,
    rgba(0,255,255,0) 100%
  );
  top: -10%;
  animation: scan-sweep 6s ease-in-out infinite;
}
@keyframes scan-sweep {
  0%  { top: -10%; opacity: 1; }
  70% { top: 100%; opacity: 1; }
  75% { top: 100%; opacity: 1; }          /* hold 1.5s at bottom */
  95% { top: 100%; opacity: 0; }
  100%{ top: -10%; opacity: 0; }
}

/* UPGRADE B.3: Pulse ring — silent 8s of 10s cycle */
.bee__pulse {
  position: absolute;
  left: 50%; top: 50%;
  width: 500px; height: 500px;
  border: 1px solid rgba(0,255,255,0.6);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  animation: pulse-ring 10s ease-out infinite;
}
@keyframes pulse-ring {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.6; }
  20%  { transform: translate(-50%, -50%) scale(1.4); opacity: 0;   }
  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0;   }
}

/* Constellation particles */
.bee__stars { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.bee__star {
  position: absolute;
  width: 3px; height: 3px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--green);
  animation: twinkle 3s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50%      { opacity: 1;   transform: scale(1.2); }
}

/* Mobile degrade */
@media (max-width: 768px){
  .bee__ring, .bee__pulse { animation: none; }
  .bee__stars, .bee__shimmer, .bee__scan, .bee__pulse { display: none; }
  .bee__img { width: 75%; }
  .bee__ring, .bee__targets { width: 85vw; height: 85vw; max-width: 360px; max-height: 360px; }
  .bee__target { transform: translate(-50%,-50%) rotate(var(--a)) translateY(calc(-42vw + 8px)) rotate(calc(-1 * var(--a))); }
}

@media (hover: none) {
  /* tilt JS also exits early on touch; belt-and-suspenders for transform */
  .bee-3d-tilt { transform: translate(-50%, -52%); }
}

@media (prefers-reduced-motion: reduce) {
  .bee__ring, .bee__pulse, .bee__scan, .bee__shimmer::before,
  .bee__star, .wordmark__eyebrow::before, .wordmark__pill::before {
    animation: none !important;
  }
  .bee__scan, .bee__pulse, .bee__shimmer { display: none; }
  .bee-3d-tilt { transition: none; }
}