/*
 * Sporebox Core Styles
 *
 * These rules control the appearance of the sporebox wrapper, the halo
 * layer and the canvas element.  They are kept separate from
 * myco-care.css so that you can override care styles without
 * interfering with the particle effect.  Custom properties are used
 * sparingly to avoid leaking variables into the global scope.
 */

/*
 * Base wrapper styles for the sporebox.  In addition to isolating
 * blending effects, we apply a soft border and glow so that the
 * container itself appears like a neon window into the spore field.
 * Colours are derived from the CSS variables defined on :root or via
 * plugin settings.  If variables are not set, sensible fallbacks
 * ensure the box still looks vibrant.  The border radius and
 * overflow rules mirror those used in care sheets to maintain
 * consistency across components.
 */
.myco-sporebox {
  /* Inherit custom properties for colours.  Provide fallbacks if
   * variables are undefined. */
  --accent1: var(--accent1, #00F0FF);
  --accent2: var(--accent2, #9D00E4);
  --bg:      var(--bg, #0B0B12);
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  overflow: hidden;
  /* Subtle background gradient matching care cards */
  background: linear-gradient(180deg, #12121C, var(--bg));
  /* Soft inner and outer glow using accent colours */
  box-shadow:
    0 0 18px rgba(0,240,255,0.08) inset,
    0 0 18px rgba(157,0,228,0.08) inset;
  border: 1px solid #232336;
}

/* Neon halo behind the particles.  Uses mix‑blend-mode to
 * create a glowing overlay that blends with the background. */
.myco-spore-halo {
  position: absolute;
  inset: -12%;
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
  background:
    radial-gradient(38% 32% at 62% 38%, rgba(0,240,255,.10), transparent 60%),
    radial-gradient(36% 32% at 28% 66%, rgba(157,0,228,.10), transparent 60%);
  filter: blur(12px);
  mix-blend-mode: screen;
  opacity: .85;
}

/* Canvas fills the wrapper.  The script will size it according to
 * device pixel ratio and set its transform so drawing operates in
 * logical pixels. */
.myco-sporebox > .myco-spore-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
}

/* Creature wrapper holds the image or video.  It’s placed above
 * the particles so the creature floats on top.  pointer-events: none
 * ensures that the mouse moves behind the creature element. */
.myco-creature-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}

/* Creature media defaults.  We centre the element via transform and
 * allow the script to set translate/rotate/scale.  The max size is
 * deliberately conservative to avoid cropping; you can override via
 * data attributes or CSS if needed. */
.myco-creature {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  max-width: 55%;
  max-height: 70%;
  image-rendering: auto;
}

/* Pause animation on hover if data-hover-pause="true".  The JS
 * toggles this class when the mouse enters/leaves.  Pausing the
 * creature’s animation is achieved via CSS: animation-play-state. */
.myco-sporebox.is-hover-paused video.myco-creature,
.myco-sporebox.is-hover-paused img.myco-creature {
  animation-play-state: paused;
}

/* Reduce effects for users who prefer reduced motion.  We tone down
 * the halo to minimise flashing and remove blur for better
 * readability. */
@media (prefers-reduced-motion: reduce) {
  .myco-spore-halo {
    opacity: .5;
    filter: none;
  }
}