/**
 * visual-engine.css
 * ─────────────────────────────────────────────────────────────
 * Styles for the Three.js visual engine toggle button and
 * background canvas overlay elements.
 *
 * HOW TO CUSTOMIZE
 * ─────────────────
 * - Change button size: edit --ve-btn-size below
 * - Change glow color: edit --ve-glow-color
 * - Change position:   edit .engine-toggle-wrap bottom/right
 * - Change spin speed: edit animation-duration on ::before/::after
 * ─────────────────────────────────────────────────────────────
 */

/* ── Color / size tokens ─────────────────────────────────── */
:root {
  --ve-btn-size:    64px;
  --ve-glow-color:  rgba(255, 69, 0, 0.8);
  --ve-glow-wide:   rgba(255, 69, 0, 0.3);
  --ve-cyan-ring:   rgba(0, 229, 255, 0.15);
  --ve-spin-speed:  4s;
}

/* ── Canvas ──────────────────────────────────────────────── */
#gl {
  position: fixed;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: .85;
}

/* ── Toggle wrapper (positions button + label together) ───── */
.engine-toggle-wrap {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 9995;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
}

@media (max-width: 768px) {
  .engine-toggle-wrap {
    bottom: 1.2rem;
    right: 1.2rem;
    gap: .3rem;
  }
}

/* ── Label below button ───────────────────────────────────── */
.engine-toggle-label {
  font-family: "Share Tech Mono", monospace;
  font-size: .55rem;
  color: var(--acc2, #FF6B35);
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: .7;
  transition: opacity .3s;
  white-space: nowrap;
  text-align: center;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.engine-toggle-wrap:hover .engine-toggle-label {
  opacity: 1;
}

/* ── Main button ─────────────────────────────────────────── */
.engine-toggle-btn {
  width:  var(--ve-btn-size);
  height: var(--ve-btn-size);
  border-radius: 50%;
  position: relative;
  overflow: visible;             /* allow rings to bleed outside */

  background: linear-gradient(135deg, rgba(255,69,0,.18), rgba(0,229,255,.08));
  border: 2px solid rgba(255, 69, 0, .6);
  color: var(--acc, #FF4500);

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: none;
  backdrop-filter: blur(16px);

  box-shadow:
    0 0 25px rgba(255,69,0,.40),
    0 0 60px rgba(255,69,0,.15),
    inset 0 0 20px rgba(255,69,0,.08);

  transition: all .5s cubic-bezier(.175, .885, .32, 1.275);
}

/* Spinning dashed ring (inner) */
.engine-toggle-btn::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px dashed rgba(255, 69, 0, .3);
  animation: ve-spinA var(--ve-spin-speed) linear infinite;
}

/* Spinning solid ring (outer) */
.engine-toggle-btn::after {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid var(--ve-cyan-ring);
  animation: ve-spinB 7s linear infinite;
}

/* Hover state — brighter glow, larger scale */
.engine-toggle-btn:hover {
  background: linear-gradient(135deg, rgba(255,69,0,.35), rgba(0,229,255,.15));
  border-color: var(--acc, #FF4500);
  transform: scale(1.18);
  box-shadow:
    0 0 50px var(--ve-glow-color),
    0 0 100px var(--ve-glow-wide),
    inset 0 0 30px rgba(255,69,0,.2);
}

/* Speed up inner ring on hover */
.engine-toggle-btn:hover::before {
  animation-duration: 1s;
}

/* ── Icon inside button ──────────────────────────────────── */
.engine-toggle-btn svg {
  width: 28px; height: 28px;
  animation: ve-pulseIcon 2.5s infinite ease-in-out;
  position: relative;
  z-index: 1;
}
.engine-toggle-btn:hover svg {
  animation: ve-spinFast .8s linear infinite;
}

/* ── Engine counter badge ────────────────────────────────── */
.engine-counter {
  position: absolute;
  top: -6px; right: -6px;
  background: var(--acc, #FF4500);
  color: #fff;
  font-family: "Share Tech Mono", monospace;
  font-size: .52rem;
  letter-spacing: 1px;
  font-weight: 700;
  width: 20px; height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(255, 69, 0, .8);
  z-index: 2;
}

/* ── Keyframes ───────────────────────────────────────────── */
@keyframes ve-spinA {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes ve-spinB {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}
@keyframes ve-pulseIcon {
  0%, 100% { transform: scale(1)    rotate(0deg);  opacity: .9; }
  50%       { transform: scale(1.15) rotate(20deg); opacity: 1;
              filter: drop-shadow(0 0 8px var(--acc, #FF4500)); }
}
@keyframes ve-spinFast {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}