/* ═══════════════════════════════════════════════════════════════════════
   SWIRLY FINALE — interactive Vertwo wordmark + blinking tagline
   Verbatim port of prototype <style> block at lines 3972–4074.
   Lives in DOM order BELOW </footer> (homepage only, via footer.php).
   Hidden on ≤768px to save battery on mobile.
   ═══════════════════════════════════════════════════════════════════════ */

/* scoped to .swirly-finale so --vw-* doesn't collide with the
   stats section (which also uses --vw-*). */
.swirly-finale {
  --vw-stage-bg: #1d1d1f;           /* matches footer bg */
  --vw-stage-height: 300px;         /* +25% (240→300) */
  --vw-radius: 0px;
  --vw-outline-color: rgba(255, 255, 255, 0.72);
  --vw-outline-width: 1;
  --vw-hint-color: rgba(255, 255, 255, 0.35);
  --vw-hint-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --vw-hint-text: "move the cursor";
}




.vw-stage {
  position: relative;
  width: 100%;
  height: var(--vw-stage-height);
  background: var(--vw-stage-bg);
  border-radius: var(--vw-radius);
  overflow: hidden;
}

.vw-arena {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

.vw-canvas {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

.vw-hint {
  position: absolute;
  top: 16px;                /* moved from bottom → top (above the logo) */
  left: 0;
  right: 0;
  text-align: center;
  font-family: var(--vw-hint-font-family);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vw-hint-color);
  pointer-events: none;
  user-select: none;
  opacity: 1;
  transition: opacity 600ms ease;
  z-index: 3;
}

.vw-hint::before { content: var(--vw-hint-text); }

.vw-arena.vw-interacted .vw-hint { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .vw-arena { cursor: default; }
  .vw-hint { display: none; }
}


/* closing-hero wrapper — +25% height for more breathing room */
.swirly-finale{
  background:#1d1d1f;
  padding:0 0 24px 0;
  position:relative;
  min-height:300px;
}
.swirly-finale .vw-stage{
  border-radius:0;
  background:#1d1d1f;
}

/* caption under the interactive logo */
.swirly-caption{
  margin:28px 0 0 0;
  text-align:center;
  font-family:var(--font-body);
  font-size:0.92rem;
  font-weight:600;
  letter-spacing:0.03em;
  color:#fff;
  animation:swirlyCaptionBlink 2.4s ease-in-out infinite;
  white-space:nowrap;
}
@keyframes swirlyCaptionBlink{
  0%,100% { color:#fff }
  50%     { color:var(--orange) }
}

/* hide the swirly finale on touch devices — cursor-driven swirl
   doesn't translate to touch, so hide on any device without a
   real hovering pointer (phones, all iPads incl. iPad Pro 12.9
   landscape at 1366px which a width-based breakpoint would miss). */
@media (hover: none) and (pointer: coarse) {
  .swirly-finale { display: none; }
}