/* ==========================================================================
   matrix-brain.css
   A rotating 3D brain made of Matrix code, in front of falling code rain.
   Works together with matrix-brain.js.

   USAGE
     <link rel="stylesheet" href="matrix-brain.css">
     <div class="matrix-brain"></div>
     <script src="matrix-brain.js" defer></script>

   Anything you put inside the div (a headline, a button) sits on top.

   TUNING (set on .matrix-brain, or on one instance with a style attribute)
     --mb-color   the code color (hex). #00ff41 is the classic Matrix green.
     --mb-bg      the background color (hex).
     --mb-spin    seconds for one full turn of the brain.
     --mb-rain    how visible the background rain is, 0 to 1.
     --mb-size    how much of the box the brain fills, 0 to 1.
   ========================================================================== */

.matrix-brain {
  --mb-color: #00ff41;
  --mb-bg: #000000;
  --mb-spin: 16s;
  --mb-rain: 0.55;
  --mb-size: 0.78;

  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  height: 100vh;               /* full screen; change to e.g. 600px for a band */
  min-height: 420px;
  background: var(--mb-bg);
  color: var(--mb-color);
}

/* Layers, back to front */
.matrix-brain > .mb-rain,
.matrix-brain > .mb-halo,
.matrix-brain > .mb-brain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 1. Falling code, dimmed so the brain stands out */
.matrix-brain > .mb-rain {
  z-index: -3;
}

/* 2. A dark pool behind the brain that pushes the rain back */
.matrix-brain > .mb-halo {
  z-index: -2;
  background: radial-gradient(
    ellipse 46% 50% at 50% 50%,
    color-mix(in srgb, var(--mb-bg) 92%, transparent) 0%,
    color-mix(in srgb, var(--mb-bg) 70%, transparent) 45%,
    transparent 75%
  );
}

/* 3. The brain, with a soft phosphor glow */
.matrix-brain > .mb-brain {
  z-index: -1;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--mb-color) 35%, transparent));
}

/* CRT scanlines and a vignette, for the film look */
.matrix-brain::before,
.matrix-brain::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.matrix-brain::before {
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 2px,
    rgb(0 0 0 / 0.18) 2px 3px
  );
}
.matrix-brain::after {
  background: radial-gradient(ellipse at center, transparent 55%, rgb(0 0 0 / 0.75) 100%);
}

/* Your own content inside the box sits above everything */
.matrix-brain > :not(canvas):not(.mb-halo):not(.mb-toggle) {
  position: relative;
  z-index: 1;
}

/* Fade in once the script has drawn the first frame */
.matrix-brain > canvas { opacity: 0; transition: opacity 1.2s ease; }
.matrix-brain.mb-ready > .mb-brain { opacity: 1; }
.matrix-brain.mb-ready > .mb-rain  { opacity: var(--mb-rain); }

/* ---- Play / pause button (created by the script) ----
   Starts as a large play button over a still image. While playing it
   shrinks to a semi-transparent pause button at the bottom center, and
   fades out entirely when the pointer leaves the box. */
.matrix-brain > .mb-toggle {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 84px;
  height: 84px;
  padding: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  cursor: pointer;
  color: var(--mb-color);
  background: color-mix(in srgb, var(--mb-bg) 55%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--mb-color) 75%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--mb-color) 35%, transparent);
  transform: translate(-50%, -50%);
  opacity: 0;
  -webkit-tap-highlight-color: transparent;
  transition: top 0.5s ease, transform 0.5s ease, opacity 0.6s ease,
              background 0.2s ease, box-shadow 0.2s ease;
}
.matrix-brain > .mb-toggle:hover {
  background: color-mix(in srgb, var(--mb-color) 22%, var(--mb-bg));
  box-shadow: 0 0 30px color-mix(in srgb, var(--mb-color) 55%, transparent);
}
.matrix-brain > .mb-toggle:focus-visible {
  outline: 2px solid var(--mb-color);
  outline-offset: 5px;
}
.mb-toggle svg { width: 38%; height: 38%; fill: currentColor; }
.mb-toggle .mb-ico-play  { margin-left: 6%; }          /* optical centering of the triangle */
.mb-toggle .mb-ico-pause { display: none; }

.matrix-brain.mb-ready > .mb-toggle { opacity: 1; }

/* Playing: small, semi-transparent pause button at the bottom center */
.matrix-brain.mb-playing > .mb-toggle {
  top: calc(100% - 44px);
  transform: translate(-50%, -50%) scale(0.6);
  opacity: 0.45;
}
.matrix-brain.mb-playing > .mb-toggle:hover,
.matrix-brain.mb-playing > .mb-toggle:focus-visible { opacity: 0.9; }
.matrix-brain.mb-playing .mb-ico-play  { display: none; }
.matrix-brain.mb-playing .mb-ico-pause { display: block; }

/* Pointer left the box: fade the button out (still reachable by keyboard) */
.matrix-brain.mb-playing.mb-idle > .mb-toggle { opacity: 0; pointer-events: none; }
.matrix-brain.mb-playing.mb-idle > .mb-toggle:focus-visible { opacity: 0.9; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  .matrix-brain > canvas,
  .matrix-brain > .mb-toggle { transition: none; }
}