/* Namespaced background styles; no resets or global content styles. */
.hive-page { position: relative; isolation: isolate; }
.hive-content { position: relative; z-index: 1; }
.hive-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  --hive-filled: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20116%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22f%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23fff7ed%22%2F%3E%3Cstop%20offset%3D%22.55%22%20stop-color%3D%22%23fff0da%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ffe8c4%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpolygon%20points%3D%2250%2C1%2099.3634%2C29.5%2099.3634%2C86.5%2050%2C115%200.6366%2C86.5%200.6366%2C29.5%22%20fill%3D%22url%28%23f%29%22%2F%3E%3C%2Fsvg%3E");
  --hive-outline: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20116%22%3E%3Cpolygon%20points%3D%2250%2C1%2099.3634%2C29.5%2099.3634%2C86.5%2050%2C115%200.6366%2C86.5%200.6366%2C29.5%22%20fill%3D%22%23fffaf2%22%20fill-opacity%3D%22.35%22%20stroke%3D%22%23ff9a37%22%20stroke-width%3D%22.7%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
  --hive-glow: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20116%22%3E%3Cdefs%3E%3CradialGradient%20id%3D%22g%22%20cx%3D%22.3%22%20cy%3D%22.72%22%20r%3D%22.88%22%3E%3Cstop%20stop-color%3D%22%23ffc36b%22%20stop-opacity%3D%22.82%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23ff9b38%22%20stop-opacity%3D%22.38%22%2F%3E%3C%2FradialGradient%3E%3C%2Fdefs%3E%3Cpolygon%20points%3D%2250%2C1%2099.3634%2C29.5%2099.3634%2C86.5%2050%2C115%200.6366%2C86.5%200.6366%2C29.5%22%20fill%3D%22url%28%23g%29%22%20stroke%3D%22%23ff8526%22%20stroke-width%3D%22.9%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}
.hive-band {
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
  contain: layout paint style;
  background:
    radial-gradient(ellipse 230px 240px at 1% 44%, #fff5e980, transparent 100%),
    radial-gradient(ellipse 360px 290px at 97% 48%, #fff0db65, transparent 100%);
}
.hive-cell {
  position: absolute;
  display: block;
  width: 100px;
  height: 116px;
}
.hive-cell::before,
.hive-cell::after,
.hive-cell__glow {
  position: absolute;
  display: block;
  inset: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.hive-cell::before {
  content: "";
  z-index: 1;
  background-image: var(--hive-filled);
  opacity: calc(0.82 * var(--cell-strength, 1) * var(--cell-fill-opacity, 1));
  filter: sepia(calc((var(--cell-warmth, 1) - 1) * 0.55)) saturate(var(--cell-saturate, 1)) brightness(var(--cell-brightness, 1));
}
.hive-cell::after {
  content: "";
  inset: -15%;
  z-index: 0;
  background: radial-gradient(ellipse at center, rgba(255, 201, 135, 0.42) 0%, rgba(255, 209, 151, 0.21) 42%, rgba(255, 219, 177, 0) 74%);
  opacity: calc(var(--cell-aura, 0.24) * var(--cell-strength, 1) * var(--hive-halo-opacity, 1));
  filter: saturate(calc(0.7 + var(--hive-halo-saturation, 1) * 0.7)) brightness(1.02);
  transform: scale(calc(var(--cell-aura-scale, 1.08) * var(--hive-glow-radius, 1)));
}
.hive-cell--outline::before {
  background-image: var(--hive-outline);
  opacity: calc(0.70 * var(--cell-strength, 1) * var(--cell-fill-opacity, 1));
  filter: sepia(calc((var(--cell-warmth, 1) - 1) * 0.55)) saturate(var(--cell-saturate, 1)) brightness(var(--cell-brightness, 1));
}
.hive-cell--faint::before { opacity: calc(0.45 * var(--cell-strength, 1) * var(--cell-fill-opacity, 1)); }
.hive-cell__glow {
  z-index: 2;
  background-image: var(--hive-glow);
  opacity: 0;
  filter: saturate(1.04) brightness(1.02);
  /* No permanent will-change / translateZ(0) on the entire field. */
}
.hive-bg--static {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20260%20700%22%3E%3Cg%20fill%3D%22%23fff1de%22%20stroke%3D%22%23ffd7a9%22%20stroke-width%3D%22.7%22%3E%3Cpolygon%20points%3D%2250%2C1%2099.3634%2C29.5%2099.3634%2C86.5%2050%2C115%200.6366%2C86.5%200.6366%2C29.5%22%20transform%3D%22translate%286%2056%29%22%2F%3E%3Cpolygon%20points%3D%2250%2C1%2099.3634%2C29.5%2099.3634%2C86.5%2050%2C115%200.6366%2C86.5%200.6366%2C29.5%22%20transform%3D%22translate%2860%20150%29%22%2F%3E%3Cpolygon%20points%3D%2250%2C1%2099.3634%2C29.5%2099.3634%2C86.5%2050%2C115%200.6366%2C86.5%200.6366%2C29.5%22%20transform%3D%22translate%28-43%20243%29%22%2F%3E%3Cpolygon%20points%3D%2250%2C1%2099.3634%2C29.5%2099.3634%2C86.5%2050%2C115%200.6366%2C86.5%200.6366%2C29.5%22%20transform%3D%22translate%2858%20430%29%22%2F%3E%3Cpolygon%20points%3D%2250%2C1%2099.3634%2C29.5%2099.3634%2C86.5%2050%2C115%200.6366%2C86.5%200.6366%2C29.5%22%20transform%3D%22translate%285%20526%29%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20260%20700%22%3E%3Cg%20fill%3D%22%23fff1de%22%20stroke%3D%22%23ffd7a9%22%20stroke-width%3D%22.7%22%3E%3Cpolygon%20points%3D%2250%2C1%2099.3634%2C29.5%2099.3634%2C86.5%2050%2C115%200.6366%2C86.5%200.6366%2C29.5%22%20transform%3D%22translate%286%2056%29%22%2F%3E%3Cpolygon%20points%3D%2250%2C1%2099.3634%2C29.5%2099.3634%2C86.5%2050%2C115%200.6366%2C86.5%200.6366%2C29.5%22%20transform%3D%22translate%2860%20150%29%22%2F%3E%3Cpolygon%20points%3D%2250%2C1%2099.3634%2C29.5%2099.3634%2C86.5%2050%2C115%200.6366%2C86.5%200.6366%2C29.5%22%20transform%3D%22translate%28-43%20243%29%22%2F%3E%3Cpolygon%20points%3D%2250%2C1%2099.3634%2C29.5%2099.3634%2C86.5%2050%2C115%200.6366%2C86.5%200.6366%2C29.5%22%20transform%3D%22translate%2858%20430%29%22%2F%3E%3Cpolygon%20points%3D%2250%2C1%2099.3634%2C29.5%2099.3634%2C86.5%2050%2C115%200.6366%2C86.5%200.6366%2C29.5%22%20transform%3D%22translate%285%20526%29%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-position: left top, right 120px;
  background-size: 240px 650px;
  background-repeat: repeat-y;
}
/* The landing HTML contains the final cells. CSS selects the responsive
   composition before JavaScript only attaches their glow animations. */
.hive-bg[data-hive-prerender] { container: hive-background / inline-size; }
.hive-band[data-hive-variant] { content-visibility: auto; }
.hive-band[data-hive-variant] > .hive-cell {
  width: var(--hive-cell-width);
  height: var(--hive-cell-height);
}
.hive-band[data-hive-variant="desktop"] > .hive-cell--left {
  /* atan2 gives a unitless length ratio in browsers without typed division. */
  --cell-strength: clamp(.24, tan(atan2(calc(max(90px, (100cqw - 1120px) / 2) + var(--cell-fade-offset)), var(--hive-cell-width))), 1);
}
@container hive-background (width >= 700px) {
  .hive-band[data-hive-variant="mobile"] { display: none; }
}
@container hive-background (width < 700px) {
  .hive-band[data-hive-variant="desktop"] { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hive-cell__glow { display: none; }
}
@media print {
  .hive-bg { display: none; }
}

/* Page-wide bee field. Small per-flight paint boxes, not a page-sized animated SVG. */
.hive-bees-host { position: relative; isolation: isolate; }
.hive-bees {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  --hive-bee-trail: #ef9a4e;
}
.hive-bee-flight {
  position: absolute;
  pointer-events: none;
  contain: layout paint style;
}
.hive-bee-trail {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  stroke: var(--hive-bee-trail);
}
.hive-bee {
  position: absolute;
  top: 0; left: 0;
  display: block;
  opacity: 1;
  transform-origin: center;
  --bee-wing-rate: 125ms;
  --bee-leg-rate: 430ms;
  --bee-antenna-rate: 360ms;
  will-change: transform, opacity;
}
.hive-bee__part {
  position: absolute;
  display: block;
  pointer-events: none;
}
.hive-bee__part-img,
.hive-bee__wing-svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  overflow: visible;
}
.hive-bee__part--body {
  inset: 0;
  z-index: 3;
  clip-path: polygon(39% 2.5%, 33% 5%, 27% 10%, 23% 18%, 20.5% 27%, 18.8% 36%, 17.6% 46%, 17.8% 55%, 19.4% 65%, 21.5% 75%, 25.4% 85%, 30.5% 93.5%, 38% 99.5%, 62% 99.5%, 69.5% 93.5%, 74.6% 85%, 78.5% 75%, 80.6% 65%, 82.2% 55%, 82.4% 46%, 81.2% 36%, 79.5% 27%, 77% 18%, 73% 10%, 67% 5%, 61% 2.5%, 50% 1.2%);
}
.hive-bee__part--body .hive-bee__part-img { filter: drop-shadow(0 2px 2px rgba(48, 34, 21, 0.14)); }
.hive-bee__part--leg-l1 { left: 0%; top: 16.28%; width: 27.83%; height: 22.79%; z-index: 2; transform-origin: 87% 74.3%; animation: hive-bee-leg-left-1 var(--bee-leg-rate) ease-in-out infinite alternate; }
.hive-bee__part--leg-r1 { left: 72.17%; top: 16.28%; width: 27.83%; height: 22.79%; z-index: 2; transform-origin: 13.3% 74.3%; animation: hive-bee-leg-right-1 var(--bee-leg-rate) ease-in-out infinite alternate; animation-delay: -120ms; }
.hive-bee__part--leg-l2 { left: 0%; top: 43.95%; width: 25.88%; height: 17.25%; z-index: 2; transform-origin: 84.2% 26%; animation: hive-bee-leg-left-2 calc(var(--bee-leg-rate) * 1.08) ease-in-out infinite alternate; animation-delay: -280ms; }
.hive-bee__part--leg-r2 { left: 74.12%; top: 43.95%; width: 25.88%; height: 17.25%; z-index: 2; transform-origin: 16.2% 26%; animation: hive-bee-leg-right-2 calc(var(--bee-leg-rate) * 1.08) ease-in-out infinite alternate; animation-delay: -160ms; }
.hive-bee__part--leg-l3 { left: 0%; top: 58.59%; width: 31.25%; height: 39.71%; z-index: 2; transform-origin: 56.2% 13.9%; animation: hive-bee-leg-left-3 calc(var(--bee-leg-rate) * 1.14) ease-in-out infinite alternate; animation-delay: -60ms; }
.hive-bee__part--leg-r3 { left: 68.75%; top: 58.59%; width: 31.25%; height: 39.71%; z-index: 2; transform-origin: 44.1% 13.9%; animation: hive-bee-leg-right-3 calc(var(--bee-leg-rate) * 1.14) ease-in-out infinite alternate; animation-delay: -220ms; }
.hive-bee__part--ant-l { left: 10.74%; top: 0%; width: 33.69%; height: 15.62%; z-index: 2; transform-origin: 61.2% 78.3%; animation: hive-bee-ant-left var(--bee-antenna-rate) ease-in-out infinite alternate; animation-delay: -150ms; }
.hive-bee__part--ant-r { left: 55.66%; top: 0%; width: 33.59%; height: 15.62%; z-index: 2; transform-origin: 38.4% 78.3%; animation: hive-bee-ant-right var(--bee-antenna-rate) ease-in-out infinite alternate; animation-delay: -45ms; }
/* The source image is 2:3. Hinge positions are 33.8% / 66.2% of its width,
   35% of its height. Wing tips must extend beyond the source body silhouette. */
.hive-bee__wing {
  position: absolute;
  top: 16%;
  width: 98%;
  height: 50%;
  display: block;
  z-index: 5;
  opacity: 1;
  transform-origin: 90.625% 38%;
  animation: hive-bee-wings var(--bee-wing-rate) ease-in-out infinite alternate;
}
.hive-bee__wing--far {
  left: -55%;
  animation-delay: -55ms;
}
.hive-bee__wing--near {
  right: -55%;
  z-index: 6;
  transform-origin: 9.375% 38%;
  animation-name: hive-bee-wings-right;
  animation-delay: -24ms;
}
.hive-bees--paused .hive-bee__wing,
.hive-bees--paused .hive-bee__part--leg-l1,
.hive-bees--paused .hive-bee__part--leg-r1,
.hive-bees--paused .hive-bee__part--leg-l2,
.hive-bees--paused .hive-bee__part--leg-r2,
.hive-bees--paused .hive-bee__part--leg-l3,
.hive-bees--paused .hive-bee__part--leg-r3,
.hive-bees--paused .hive-bee__part--ant-l,
.hive-bees--paused .hive-bee__part--ant-r,
.hive-bee-flight[data-phase="erase"] .hive-bee__wing,
.hive-bee-flight[data-phase="erase"] .hive-bee__part--leg-l1,
.hive-bee-flight[data-phase="erase"] .hive-bee__part--leg-r1,
.hive-bee-flight[data-phase="erase"] .hive-bee__part--leg-l2,
.hive-bee-flight[data-phase="erase"] .hive-bee__part--leg-r2,
.hive-bee-flight[data-phase="erase"] .hive-bee__part--leg-l3,
.hive-bee-flight[data-phase="erase"] .hive-bee__part--leg-r3,
.hive-bee-flight[data-phase="erase"] .hive-bee__part--ant-l,
.hive-bee-flight[data-phase="erase"] .hive-bee__part--ant-r { animation-play-state: paused; }
.hive-bee-flight[data-phase="erase"] .hive-bee { visibility: hidden; will-change: auto; }
@keyframes hive-bee-wings {
  from { transform: scaleY(.74) rotate(-10deg); }
  to { transform: scaleY(1) rotate(5deg); }
}
@keyframes hive-bee-wings-right {
  from { transform: scaleY(.74) rotate(10deg); }
  to { transform: scaleY(1) rotate(-5deg); }
}
@keyframes hive-bee-leg-left-1 { from { transform: rotate(-4deg) translateY(0); } to { transform: rotate(8deg) translateY(1px); } }
@keyframes hive-bee-leg-right-1 { from { transform: rotate(4deg) translateY(0); } to { transform: rotate(-8deg) translateY(1px); } }
@keyframes hive-bee-leg-left-2 { from { transform: rotate(-5deg) translateY(0); } to { transform: rotate(6deg) translateY(1px); } }
@keyframes hive-bee-leg-right-2 { from { transform: rotate(5deg) translateY(0); } to { transform: rotate(-6deg) translateY(1px); } }
@keyframes hive-bee-leg-left-3 { from { transform: rotate(-6deg) translateY(0); } to { transform: rotate(7deg) translateY(1px); } }
@keyframes hive-bee-leg-right-3 { from { transform: rotate(6deg) translateY(0); } to { transform: rotate(-7deg) translateY(1px); } }
@keyframes hive-bee-ant-left { from { transform: rotate(-4deg); } to { transform: rotate(5deg) translateY(-1px); } }
@keyframes hive-bee-ant-right { from { transform: rotate(4deg); } to { transform: rotate(-5deg) translateY(-1px); } }
@media (prefers-reduced-motion: reduce) {
  .hive-bees { display: none; }
  .hive-bee__wing,
  .hive-bee__part { animation: none; }
}
@media print { .hive-bees { display: none; } }
