/**
 * Lava Effect - Animated Fluid Background
 * =========================================
 * Full-screen animated lava/fluid background with toggle button.
 *
 * USAGE:
 *   1. Include this CSS file
 *   2. Include the JS dependencies (in order):
 *      - device-capabilities.js
 *      - liquid-cursor.js
 *      - fluid-simulation.js
 *      - adaptive-background.js
 *      - lava-effect.js
 *   3. Done. The background auto-initializes.
 *
 *   Optional: Add toggle button to your page:
 *      <button type="button" class="lava-toggle" id="lavaToggle">
 *        <span class="lava-toggle__indicator"></span>
 *        <svg class="lava-toggle__icon" width="14" height="14" viewBox="0 0 24 24"
 *             fill="none" stroke="currentColor" stroke-width="2">
 *          <path d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707
 *                   M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343
 *                   17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
 *        </svg>
 *        <span class="lava-toggle__label">Effects</span>
 *      </button>
 *
 *   Or call LavaBackground.createToggle() in JS to auto-create it.
 *
 * BRAND COLORS:
 *   Toggle indicator: #fb923c → #ec4899 gradient
 *   Toggle hover:     rgba(251, 146, 60, 0.3) border
 *
 * @version 1.0.0
 */

/* ==================== Page Base ==================== */

body.lava-bg {
  background: #0a0a1a;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ==================== Toggle Button ==================== */

.lava-toggle {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(15, 15, 35, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  opacity: 0;
  transform: translateY(10px);
  animation: lavaToggleFadeIn 0.5s ease 1s forwards;
}

@keyframes lavaToggleFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lava-toggle:hover {
  background: rgba(15, 15, 35, 0.85);
  border-color: rgba(251, 146, 60, 0.3);
  color: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.lava-toggle:active {
  transform: translateY(0);
}

/* Indicator dot */
.lava-toggle__indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fb923c, #ec4899);
  box-shadow: 0 0 8px rgba(251, 146, 60, 0.6);
  transition: all 0.3s ease;
}

/* Paused state */
.lava-toggle.paused .lava-toggle__indicator {
  background: rgba(255, 255, 255, 0.3);
  box-shadow: none;
}

.lava-toggle__icon {
  transition: all 0.3s ease;
}

.lava-toggle.paused .lava-toggle__icon {
  opacity: 0.5;
}

/* Mobile responsive */
@media (max-width: 480px) {
  .lava-toggle {
    bottom: 15px;
    left: 15px;
    padding: 8px 12px;
    font-size: 11px;
  }

  .lava-toggle__label {
    display: none;
  }
}