/* Shared hexagon-tunnel animation.
 * Extracted from templates/beta/wall.html (v25 iter-13/14/15) so the
 * same warp-tunnel effect can be reused by the Smart Search loading
 * overlay and any future place that needs an ARes-branded "working…"
 * indicator. The beta wall keeps its page-specific tweaks (frosted
 * card, fullscreen-tunnel mask) inline in wall.html; everything below
 * is the canonical, shared piece — change here and both places update.
 *
 * Required SVG markup lives in templates/_partials/hex_tunnel.html:
 *   - one <symbol id="warpHex"> definition rendered once per page
 *   - one <svg class="hex-tunnel"> per tunnel instance, containing
 *     eight <use class="warp-hex h0..h7"> plus a center .anchor-hex
 */

:root {
  /* Concentric brand palette — purple → indigo → teal → dark teal */
  --beta-hex-1: #5B4FCF;
  --beta-hex-2: #818CF8;
  --beta-hex-3: #5EEAD4;
  --beta-hex-4: #FFFFFF;
  --beta-hex-5: #134E4A;
}

.hex-stage {
  width: 240px;
  height: 240px;
  margin: 8px auto 32px;
  position: relative;
  display: grid;
  place-items: center;
  background: radial-gradient(
    120px 120px at center,
    rgba(94, 234, 212, 0.12) 0%,
    rgba(91, 79, 207, 0.05) 50%,
    rgba(255, 255, 255, 0)   75%);
}

.hex-tunnel {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.warp-hex {
  fill: none;
  stroke-width: 1.4;
  stroke-linejoin: round;
  transform-origin: center;
  transform-box: fill-box;
  animation: tunnel-warp 4s linear infinite;
  opacity: 0;
  filter: drop-shadow(0 0 6px rgba(94, 234, 212, 0.25));
}

.warp-hex.h0 { stroke: var(--beta-hex-1); animation-delay:  0.0s; }
.warp-hex.h1 { stroke: var(--beta-hex-2); animation-delay: -0.5s; }
.warp-hex.h2 { stroke: var(--beta-hex-3); animation-delay: -1.0s; }
.warp-hex.h3 { stroke: var(--beta-hex-5); animation-delay: -1.5s; }
.warp-hex.h4 { stroke: var(--beta-hex-1); animation-delay: -2.0s; }
.warp-hex.h5 { stroke: var(--beta-hex-2); animation-delay: -2.5s; }
.warp-hex.h6 { stroke: var(--beta-hex-3); animation-delay: -3.0s; }
.warp-hex.h7 { stroke: var(--beta-hex-5); animation-delay: -3.5s; }

@keyframes tunnel-warp {
  0%   { transform: scale(0.08); opacity: 0;    stroke-width: 0.6; }
  15%  {                         opacity: 1;                       }
  80%  {                         opacity: 0.55; stroke-width: 3.2; }
  100% { transform: scale(1.55); opacity: 0;    stroke-width: 4.5; }
}

.anchor-hex {
  fill: var(--color-bg, #ffffff);
  stroke: rgba(94, 234, 212, 0.45);
  stroke-width: 1;
  transform-origin: center;
  transform-box: fill-box;
  animation: anchor-pulse 2.4s ease-in-out infinite;
}

@keyframes anchor-pulse {
  0%, 100% { transform: scale(0.95); }
  50%      { transform: scale(1.08); }
}

/* Reduced-motion fallback — show a static stack of concentric hexes so
 * the mark still reads as the ARes brand without any movement. */
@media (prefers-reduced-motion: reduce) {
  .warp-hex, .anchor-hex { animation: none; }
  .warp-hex { opacity: 0.9; stroke-width: 2; }
  .warp-hex.h0 { transform: scale(1.30); }
  .warp-hex.h2 { transform: scale(1.00); }
  .warp-hex.h4 { transform: scale(0.70); }
  .warp-hex.h6 { transform: scale(0.40); }
  .warp-hex.h1, .warp-hex.h3, .warp-hex.h5, .warp-hex.h7 { display: none; }
}