/* The 13beacons.com hero, ported from 13Beacons/website/index.html: same art, colors, layout and
   motion (starfield, mesas, cacti, tumbleweeds, the badge saucer centered on its tractor beam, and
   the abduction cast). Scoped under .bh. `.bh--compact` is the shorter banner on the play home. */

.bh {
  position: relative; isolation: isolate; display: flex; align-items: center; overflow: hidden;
  min-height: min(72svh, 760px); padding: 3.5rem 0 clamp(8rem, 14vh, 10.5rem);
  background:
    radial-gradient(90% 46% at 50% 108%, rgba(253, 81, 1, 0.42), rgba(253, 81, 1, 0.12) 45%, transparent 72%),
    linear-gradient(180deg, var(--ink) 0%, #120D1E 46%, var(--night) 82%, var(--dusk) 100%);
}
.bh__stars { position: absolute; inset: -10% -2% 0 -2%; width: 104%; height: 110%; will-change: transform; }
.bh__wrap {
  position: relative; z-index: 6; width: min(1120px, 100% - 40px); margin: 0 auto;
  display: grid; gap: clamp(2rem, 6vw, 4rem); grid-template-columns: 1.05fr 0.95fr; align-items: center; pointer-events: none;
}
.bh__wrap > * { pointer-events: auto; }
@media (max-width: 900px) { .bh__wrap { grid-template-columns: 1fr; text-align: center; } }

/* desert diorama */
.bh__desert { position: absolute; inset: auto 0 0 0; height: clamp(160px, 28vh, 260px); z-index: 7; pointer-events: none; }
.bh__desert svg { position: absolute; bottom: 0; display: block; }
.bh .mesa-far, .bh .mesa-near { left: -2%; width: 104%; }
.bh .mesa-far { height: 80%; color: var(--night); will-change: transform; }
.bh .mesa-near { height: 54%; color: #170E24; will-change: transform; }
.bh .floor-line {
  position: absolute; left: 0; right: 0; bottom: 0; height: 26%;
  background: #0A0812; border-top: 2px solid rgba(255, 138, 61, 0.55); box-shadow: 0 -8px 28px rgba(253, 81, 1, 0.35);
}
.bh .plant { position: absolute; bottom: 23%; pointer-events: auto; filter: drop-shadow(2px -1px 0 rgba(255, 138, 61, 0.5)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.7)); }
.bh .plant svg { position: static; width: 100%; height: auto; transform-origin: 50% 100%; }
.bh .plant:hover svg { animation: bh-wiggle 0.7s ease-in-out; }
.bh .p1 { left: 5%; width: clamp(56px, 7vw, 104px); }
.bh .p2 { left: 17%; width: clamp(80px, 10vw, 150px); }
.bh .p3 { right: 6%; width: clamp(44px, 5.5vw, 80px); }
@media (max-width: 640px) { .bh .p1 { display: none; } }

/* tumbleweeds: rolled by hero.js, tap to kick */
.bh .tumble {
  position: absolute; left: 0; bottom: 3%; z-index: 3; display: block; aspect-ratio: 1;
  color: rgba(245, 239, 227, 0.58); cursor: pointer; pointer-events: auto;
  transform: translate3d(-300px, 0, 0); will-change: transform; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.bh .tumble svg { position: static; width: 100%; height: 100%; display: block; }
.bh .t1 { width: clamp(88px, 14vw, 210px); }
.bh .t2 { width: clamp(64px, 9.5vw, 146px); color: rgba(245, 239, 227, 0.42); z-index: 2; }
.bh .t3 { width: clamp(50px, 6.5vw, 100px); color: rgba(255, 194, 75, 0.5); }
@media (max-width: 640px) { .bh .t3 { display: none; } }
.bh .puff { position: absolute; bottom: 4%; width: 9px; height: 9px; border-radius: 50%; background: rgba(245, 239, 227, 0.55); opacity: 0; z-index: 4; animation: bh-puff 0.7s ease-out forwards; }

/* craft: the badge saucer, centered on its beam */
.bh__craft { position: relative; display: grid; place-items: center; padding-bottom: 3rem; z-index: 5; will-change: transform; }
.bh__badge {
  width: min(390px, 62vw); height: auto; cursor: pointer; position: relative; z-index: 3;
  animation: bh-bob 6s ease-in-out infinite; transition: transform 0.25s ease;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-drag: none;
}
.bh__badge:active { transform: scale(0.96); }
.bh__badge.zap { animation: bh-zap 0.6s ease; }
.bh__badge.warp { animation: bh-warp 1.9s cubic-bezier(0.5, 0, 0.3, 1); }
.bh__beam {
  position: absolute; top: 58%; left: 50%; transform: translateX(-50%);
  width: min(510px, 80vw); height: 46vh; max-height: 460px; z-index: 1;
  clip-path: polygon(41% 0, 59% 0, 100% 100%, 0 100%);
  background: linear-gradient(to bottom, rgba(255, 194, 75, 0.2), rgba(253, 81, 1, 0.16) 45%, transparent 88%);
  filter: blur(1px); animation: bh-flicker 4.5s ease-in-out infinite; pointer-events: none; transition: filter 0.3s, opacity 0.25s;
}
.bh__beam::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(255, 255, 255, 0.16) 0 2px, transparent 2px 16px);
  animation: bh-rain 2.6s linear infinite;
}
.bh__craft:has(.bh__badge:hover) .bh__beam { filter: blur(1px) brightness(1.7); }
.bh__craft.warping .bh__beam, .bh__craft.warping .abductee { opacity: 0 !important; animation-play-state: paused; }
.bh .abductee {
  --dir: -1; position: absolute; left: 50%; bottom: -22vh; width: clamp(44px, 5.5vw, 72px); z-index: 2; pointer-events: none;
  animation: bh-abduct 9s ease-in-out 1.5s infinite; color: #0A0812;
}
.bh .abductee.mid { width: clamp(58px, 7.2vw, 96px); }
.bh .abductee.wide { width: clamp(72px, 9.2vw, 124px); }
.bh .abductee svg { width: 100%; height: auto; display: block; }
.bh .dust { position: absolute; bottom: 2.4rem; width: 6px; height: 6px; border-radius: 50%; background: var(--beam); opacity: 0; z-index: 2; pointer-events: none; }

/* ragdoll joints */
.bh .rag .j { transform-box: fill-box; transform-origin: 50% 4px; animation: bh-rag var(--t, 2.4s) ease-in-out var(--d, 0s) infinite alternate; }
.bh .rag .head { transform-origin: 50% 100%; --a: -8deg; --b: 10deg; --t: 1.9s; }
.bh .rag .al { --a: -70deg; --b: -20deg; --t: 2.1s; }
.bh .rag .ar { --a: 20deg; --b: 75deg; --t: 2.5s; --d: -0.8s; }
.bh .rag .fore { --a: -30deg; --b: 30deg; --t: 1.6s; --d: -0.4s; }
.bh .rag .ll { --a: -25deg; --b: 10deg; --t: 2.3s; --d: -1.1s; }
.bh .rag .lr { --a: -5deg; --b: 30deg; --t: 2.7s; --d: -0.3s; }
.bh .rag .shin { --a: -35deg; --b: 5deg; --t: 1.8s; --d: -0.9s; }
.bh .rag .up { transform-origin: 50% 100%; }
.bh .rag .tail { --a: -18deg; --b: 22deg; --t: 1.4s; }
.bh .rag .ear { --a: -14deg; --b: 12deg; --t: 1.3s; }

@keyframes bh-rag { from { transform: rotate(var(--a)); } to { transform: rotate(var(--b)); } }
@keyframes bh-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes bh-flicker { 0%, 100% { opacity: 0.85; } 45% { opacity: 0.55; } 70% { opacity: 0.95; } }
@keyframes bh-rain { to { background-position: 0 -16px; } }
@keyframes bh-wiggle { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-5deg); } 45% { transform: rotate(4deg); } 70% { transform: rotate(-2deg); } }
@keyframes bh-zap { 0% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-26px) rotate(-4deg); } 55% { transform: translateY(6px) rotate(3deg); } 100% { transform: translateY(0) rotate(0); } }
@keyframes bh-warp {
  0% { transform: none; opacity: 1; }
  22% { transform: translate(-26px, 12px) rotate(-8deg) scale(1.04); opacity: 1; }
  48% { transform: translate(110vw, -70vh) rotate(22deg) scale(0.25); opacity: 1; }
  49% { transform: translate(110vw, -70vh) scale(0.25); opacity: 0; }
  50% { transform: translate(-110vw, -30vh) rotate(-16deg) scale(0.25); opacity: 0; }
  52% { opacity: 1; }
  86% { transform: translate(10px, -8px) rotate(3deg) scale(1.02); }
  100% { transform: none; opacity: 1; }
}
@keyframes bh-lift { 0% { opacity: 0; transform: translateY(0) scale(0.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-260px) scale(1.1); } }
@keyframes bh-puff { 0% { opacity: 0.8; transform: translate(0, 0) scale(0.6); } 100% { opacity: 0; transform: translate(var(--dx, 0), -46px) scale(1.8); } }
@keyframes bh-abduct {
  0% { transform: translate(-50%, 0) rotate(0); opacity: 0; }
  8% { opacity: 1; }
  62% { transform: translate(-50%, -30vh) rotate(calc(var(--dir) * 160deg)); opacity: 1; }
  74% { transform: translate(-50%, -42vh) rotate(calc(var(--dir) * 200deg)) scale(0.45); opacity: 0; }
  100% { transform: translate(-50%, -42vh) scale(0.45); opacity: 0; }
}

/* phone breakpoint (same as the website) */
@media (max-width: 640px) {
  .bh { min-height: 0; padding: 3rem 0 6.5rem; }
  .bh__craft { padding-bottom: 1rem; }
  .bh__badge { width: min(340px, 50vw); }
  .bh__beam { height: 26vh; width: 60vw; }
  .bh__desert { height: 110px; }
}

/* The play home's shorter banner: copy on the left, craft on the right, even on phones. */
.bh--compact { min-height: 0; padding: 1rem 0 118px; }
.bh--compact .bh__wrap { grid-template-columns: 1.15fr 0.85fr; text-align: left; gap: 0.5rem; }
.bh--compact .bh__craft { padding-bottom: 0; }
.bh--compact .bh__badge { width: min(200px, 32vw); }
.bh--compact .bh__beam { top: 56%; height: 200px; width: min(270px, 46vw); }
.bh--compact .abductee { bottom: -120px; }
.bh--compact .bh__desert { height: 120px; }
@media (min-width: 900px) { .bh--compact { padding: 2.5rem 0 150px; } .bh--compact .bh__desert { height: 170px; } .bh--compact .bh__beam { height: 300px; } }

/* Reduce Motion: the scene holds still (the system setting or the in-app "Still sky"). */
@media (prefers-reduced-motion: reduce) { .bh .tumble, .bh .abductee { display: none; } }
html.still .bh .tumble, html.still .bh .abductee { display: none; }