/* Big Top — a creepy circus, for Halloween 2026. Background only: every layer sits behind the
   page, ignores taps, and uses transform/opacity so it stays smooth on phones. */
body.theme-big-top { background: #07060A; }
.theme-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }

/* The tent's insides: stripes converging on a point above the screen, fading into the dark. */
.bt-tent { position: absolute; inset: -10% -30%; transform-origin: 50% 0;
  background: repeating-conic-gradient(from 180deg at 50% -18%, #2A0710 0deg 5deg, #0B090D 5deg 10deg);
  -webkit-mask-image: radial-gradient(120% 75% at 50% 0%, #000 0%, rgba(0,0,0,.55) 45%, transparent 78%);
          mask-image: radial-gradient(120% 75% at 50% 0%, #000 0%, rgba(0,0,0,.55) 45%, transparent 78%);
  opacity: .9; animation: bt-breathe 14s ease-in-out infinite; }
@keyframes bt-breathe { 50% { transform: scale(1.03) rotate(.4deg); } }

/* A slow spotlight sweeping the ring. */
.bt-spot { position: absolute; top: -20%; left: 50%; width: 120vmax; height: 140vh; margin-left: -60vmax;
  background: radial-gradient(18% 60% at 50% 0%, rgba(255, 230, 190, .10), transparent 70%);
  transform-origin: 50% 0; animation: bt-sweep 18s ease-in-out infinite; mix-blend-mode: screen; }
@keyframes bt-sweep { 0%, 100% { transform: rotate(-24deg); } 50% { transform: rotate(24deg); } }

/* Two searchlights below the bottom edge: only the beams show, sweeping up and crossing. */
.bt-search { position: absolute; bottom: -4vh; width: 34vmax; height: 150vh; margin-left: -17vmax; transform-origin: 50% 100%;
  background: linear-gradient(to top, rgba(255, 236, 200, .17), rgba(255, 236, 200, .055) 45%, rgba(255, 236, 200, 0) 88%);
  filter: blur(4px);
  -webkit-clip-path: polygon(47% 100%, 53% 100%, 100% 0, 0 0); clip-path: polygon(47% 100%, 53% 100%, 100% 0, 0 0);
  mix-blend-mode: screen; }
.bt-search.left { left: 18%; animation: bt-search-l 13s ease-in-out infinite; }
.bt-search.right { left: 82%; animation: bt-search-r 11s ease-in-out infinite; }
@keyframes bt-search-l { 0%, 100% { transform: rotate(-26deg); } 50% { transform: rotate(22deg); } }
@keyframes bt-search-r { 0%, 100% { transform: rotate(24deg); } 50% { transform: rotate(-24deg); } }

/* The scalloped edge of the tent, swaying a little. */
.bt-valance { position: absolute; top: 0; left: -2%; width: 104%; height: 64px; transform-origin: 50% 0;
  animation: bt-sway 9s ease-in-out infinite; filter: drop-shadow(0 6px 10px rgba(0,0,0,.7)); }
.bt-valance svg { display: block; width: 100%; height: 64px; }
@keyframes bt-sway { 50% { transform: rotate(.5deg) translateY(1px); } }
.bt-bulbs { position: absolute; inset: 0; }
.bt-bulb { position: absolute; top: 44px; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%;
  background: #FFD27A; box-shadow: 0 0 6px 2px rgba(255, 190, 90, .75), 0 0 16px 4px rgba(255, 150, 60, .35); transition: opacity .08s; }
.bt-bulb.dim { opacity: .25; } .bt-bulb.dead { background: #3A2E24; box-shadow: none; }

/* Fog rolling along the floor. */
.bt-fog { position: absolute; left: -50%; width: 200%; bottom: -8vh; height: 46vh; opacity: .55;
  background: radial-gradient(28% 45% at 20% 60%, rgba(150, 140, 170, .16), transparent 70%),
              radial-gradient(22% 40% at 55% 70%, rgba(150, 140, 170, .13), transparent 70%),
              radial-gradient(30% 50% at 85% 55%, rgba(150, 140, 170, .15), transparent 70%);
  animation: bt-drift 46s linear infinite; }
.bt-fog.two { bottom: -14vh; opacity: .4; animation-duration: 70s; animation-direction: reverse; }
@keyframes bt-drift { from { transform: translateX(0); } to { transform: translateX(25%); } }

/* Occasional visitors. */
.bt-balloon { position: absolute; bottom: -120px; width: 42px; opacity: .78; animation: bt-rise 26s linear forwards; }
.bt-balloon svg { display: block; width: 42px; height: auto; animation: bt-bob 3.2s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes bt-rise { to { transform: translateY(calc(-100vh - 180px)); } }
@keyframes bt-bob { 50% { transform: translateX(10px) rotate(4deg); } }
.bt-eyes { position: absolute; display: flex; gap: 14px; opacity: 0; animation: bt-peek 5.5s ease-in-out forwards; }
.bt-eyes i { width: 9px; height: 5px; border-radius: 50%; background: #F6E27A;
  box-shadow: 0 0 6px 2px rgba(246, 226, 122, .6); animation: bt-blink 5.5s steps(1) forwards; }
@keyframes bt-peek { 0% { opacity: 0; } 15%, 75% { opacity: .8; } 100% { opacity: 0; } }
@keyframes bt-blink { 0%, 34%, 40%, 58%, 63%, 100% { transform: scaleY(1); } 36%, 60% { transform: scaleY(.1); } }

/* Text on the page sits over the dark, but give the header a touch of extra contrast. */
body.theme-big-top .party-head { text-shadow: 0 2px 18px rgba(0,0,0,.9); }
body.theme-big-top .top { padding-top: 54px; }

@media (prefers-reduced-motion: reduce) {
  .bt-tent, .bt-spot, .bt-valance, .bt-fog, .bt-search { animation: none !important; }
  .bt-balloon, .bt-eyes { display: none !important; }
}

/* Blood from the tent's edge: drips grow, then a drop lets go. JS places them under scallops. */
.bt-drip { position: absolute; top: 40px; width: 8px; height: 40px; margin-left: -4px; }
.bt-drip svg { display: block; width: 8px; height: 40px; transform-origin: 50% 0; animation: bt-grow var(--d, 9s) ease-in var(--o, 0s) infinite; }
.bt-drip b { position: absolute; left: 1.5px; top: 34px; width: 5px; height: 7px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: #7A0012; opacity: 0; animation: bt-drop var(--d, 9s) linear var(--o, 0s) infinite; }
@keyframes bt-grow { 0% { transform: scaleY(.18); } 84% { transform: scaleY(1); } 86%, 100% { transform: scaleY(.35); } }
@keyframes bt-drop { 0%, 84% { opacity: 0; transform: translateY(0); } 85% { opacity: .95; transform: translateY(0); } 100% { opacity: .9; transform: translateY(105vh); } }

/* The skeleton on the trapeze. Off to the right, behind everything, swinging on the ropes. */
.bt-trapeze { position: absolute; top: 0; right: clamp(2px, calc(50% - 470px), 30%); width: clamp(70px, 9vw, 110px); }
@media (max-width: 600px) { .bt-trapeze { right: 30px; } }
.bt-trapeze svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 4px rgba(235, 228, 210, .35)) drop-shadow(0 0 10px rgba(170, 20, 30, .3)); }
.bt-swing { transform-origin: 50px -20px; transform-box: view-box; animation: bt-swing 7.5s ease-in-out infinite; }
@keyframes bt-swing { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.bt-rope { stroke: #4A3A2C; stroke-width: 1.6; fill: none; }
.bt-bar { stroke: #6B4A22; stroke-width: 4.5; stroke-linecap: round; }
.bt-skel { stroke: #E9E3D3; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.bt-skel .bone-fill { fill: #E9E3D3; stroke: none; }
.bt-skel .socket { fill: #07060A; stroke: none; }
.bt-skel .socket-line { stroke: #07060A; stroke-width: 1.2; }
.bt-fall { position: absolute; left: 50%; top: 93%; width: 4px; height: 6px; margin-left: -2px; border-radius: 50%; background: #7A0012; opacity: 0;
  animation: bt-drop 6s linear infinite; }
.bt-fall.b { animation-delay: 3.4s; animation-duration: 8s; }

@media (prefers-reduced-motion: reduce) {
  .bt-drip svg, .bt-swing { animation: none !important; }
  .bt-drip b, .bt-fall { display: none !important; }
}

/* The balloon layer floats over the page so balloons can be tapped; only the balloons catch taps. */
.bt-air { position: fixed; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.bt-air .bt-balloon { pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; padding: 6px; }
.bt-gore { position: absolute; border-radius: 50%; background: #8A0014; box-shadow: inset -1px -1px 0 rgba(0,0,0,.35); pointer-events: none; }
.bt-splat { position: absolute; width: 150px; height: 150px; margin: -75px 0 0 -75px; pointer-events: none;
  animation: bt-splat 7s cubic-bezier(.2,.8,.3,1) forwards; }
.bt-splat svg { display: block; width: 100%; height: 100%; transform: scaleX(var(--flip, 1)); }
@keyframes bt-splat { 0% { transform: scale(.2); opacity: 1; } 6% { transform: scale(1.08); } 10% { transform: scale(1); }
  70% { transform: translateY(26px) scaleY(1.06); opacity: .9; } 100% { transform: translateY(44px) scaleY(1.1); opacity: 0; } }