/* ============================================================
   CaptiveWiFi — Experience Layer CSS
   ============================================================ */

/* ── Page loader ───────────────────────────────────────────── */
/* The loader div is injected by JS and removed on DOMContentLoaded */
#cw-loader {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
}
#cw-loader.cw-loader-out {
  opacity: 0;
  pointer-events: none;
}
.cw-loader-ring {
  width: 36px;
  height: 36px;
  border: 2.5px solid #f0e6ff;
  border-top-color: #832FFF;
  border-radius: 50%;
  animation: cw-spin 0.7s linear infinite;
}
@keyframes cw-spin {
  to { transform: rotate(360deg); }
}

/* ── Custom cursor ─────────────────────────────────────────── */
#cw-cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  background: #832FFF;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transition: width 0.2s ease, height 0.2s ease, background 0.2s ease, opacity 0.3s ease;
  will-change: transform;
}

#cw-cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 36px; height: 36px;
  border: 2px solid rgba(131, 47, 255, 0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transition: width 0.25s ease, height 0.25s ease, border-color 0.25s ease, opacity 0.3s ease;
  will-change: transform;
  animation: cw-breathe 3s ease-in-out infinite;
}

@keyframes cw-breathe {
  0%, 100% { border-color: rgba(131, 47, 255, 0.35); }
  50%       { border-color: rgba(131, 47, 255, 0.65); }
}

#cw-cursor-dot.cw-hover {
  width: 5px; height: 5px;
  background: #22e5a0;
}
#cw-cursor-ring.cw-hover {
  width: 52px; height: 52px;
  border-color: rgba(34, 229, 160, 0.6);
  animation: none;
}

#cw-cursor-dot.cw-click {
  width: 12px; height: 12px;
  transition: width 0.08s ease, height 0.08s ease;
}
#cw-cursor-ring.cw-click {
  width: 28px; height: 28px;
  border-color: rgba(131, 47, 255, 0.9);
  transition: width 0.08s ease, height 0.08s ease;
}

.cw-ripple {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 2px solid #832FFF;
  pointer-events: none;
  z-index: 99997;
  animation: cw-ripple-out 0.7s ease-out forwards;
}

@keyframes cw-ripple-out {
  0%   { width: 8px; height: 8px; opacity: 0.8; border-color: #832FFF; }
  50%  { border-color: #22e5a0; }
  100% { width: 80px; height: 80px; opacity: 0; border-color: #22e5a0; }
}