/* ============================================================
   Cosmic backdrop — deep-space gradient + drifting particle field
   ------------------------------------------------------------
   Extracted from the coming-soon landing page (root assets/index.html).
   Two moving parts, both opt-in:

     .axl-cosmic     the gradient ground + light-on-dark ink tokens
     .axl-particles  the particle layer that sits behind that element's
                     content (populated by assets/js/cosmic.js)

   This file is the COMPONENT only: every rule is scoped under .axl-cosmic, so
   loading it changes nothing until something carries that class. It is safe in
   both site modes and stays enqueued in both.

   The dark-site skin — glass header/footer, the light-paper guard on episodes,
   and anything else that only makes sense when the WHOLE site is dark — lives
   in cosmic-site.css, which is enqueued only while the dark mode is on. Put
   new dark-site rules THERE, not here, so switching back to the light site is
   a matter of that one stylesheet not loading.

   Apply it per section from Section settings → Background → "Cosmic" on any
   block in the library, or site-wide via axl_cosmic_site() in functions.php.

   Colours come through custom properties so a section can be retuned
   without a new rule:  style="--axl-cosmic-2:#123"
   ============================================================ */

.axl-cosmic {
  --axl-cosmic-1: #0B0E2D;   /* deep navy — the two end stops */
  --axl-cosmic-2: #1A1F5E;   /* mid blue */
  --axl-cosmic-3: #2D1B69;   /* violet */
  --axl-cosmic-angle: 135deg;

  position: relative;
  background: linear-gradient(
    var(--axl-cosmic-angle),
    var(--axl-cosmic-1) 0%,
    var(--axl-cosmic-2) 40%,
    var(--axl-cosmic-3) 70%,
    var(--axl-cosmic-1) 100%
  );

  /* New stacking context, so .axl-particles' negative z-index stays trapped
     behind THIS section's content instead of sliding under the page. */
  isolation: isolate;
}

/* Light-on-dark ink. Remapping the same --bs-*/*--axl-* variables theme.css
   sets means every block dropped on a cosmic section inherits readable
   colours — no per-block dark variants. */
.axl-cosmic {
  color: #F4F3FA;
  --bs-body-color: #E4E2F2;
  --bs-emphasis-color: #F4F3FA;
  --bs-heading-color: #F4F3FA;
  --bs-secondary-color: #A8B4FF;
  --bs-border-color: rgba(255, 255, 255, .12);
  --bs-link-color: #64E8FF;
  --bs-link-hover-color: #A78BFA;
  --axl-ink: #F4F3FA;
  --axl-ink-2: #F4F3FA;
  --axl-muted: #A8B4FF;
  --axl-line: rgba(255, 255, 255, .12);
  --axl-paper: transparent;
  --axl-surface-2: rgba(255, 255, 255, .05);
}

.axl-cosmic h1,
.axl-cosmic h2,
.axl-cosmic h3,
.axl-cosmic h4,
.axl-cosmic h5,
.axl-cosmic h6 {
  color: #F4F3FA;
}

/* Content links. Bootstrap's `a` rule paints from the -rgb pair, not the hex,
   so both are set. Kept in a rule of their own on purpose: the ink block above
   never reaches the browser — its comment's "--bs-* slash *--axl-*" wording
   contains a comment terminator, and the leftover text swallows that rule as
   an invalid selector. Links
   were the visible casualty (brand blue on the gradient); the rest of that
   block is still switched off until it can be checked page by page. */
.axl-cosmic {
  --bs-link-color: #64E8FF;
  --bs-link-color-rgb: 100, 232, 255;
  --bs-link-hover-color: #A78BFA;
  --bs-link-hover-color-rgb: 167, 139, 250;
}

/* Cards and panels become the landing page's frosted glass rather than the
   light surfaces theme.css gives them. */
.axl-cosmic .card {
  --bs-card-bg: rgba(255, 255, 255, .05);
  --bs-card-color: #E4E2F2;
  --bs-card-border-color: rgba(255, 255, 255, .12);
  --bs-card-border-width: 1px;
}

/* ---- Particle layer -------------------------------------------------
   Sits inside the .axl-cosmic element, covering it edge to edge. z-index -1
   puts it above the gradient but below everything else in the section, so
   content needs no z-index of its own. */
.axl-particles {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* Site-wide use: pin the field to the viewport so it drifts on while the
   page scrolls, exactly as the landing page does. */
body.axl-cosmic > .axl-particles {
  position: fixed;
}

.axl-particle {
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  opacity: 0;
  animation: axl-particle-float linear infinite;
  will-change: transform, opacity;
}

/* --axl-cosmic-travel is written by cosmic.js as the host element's height,
   so a particle crosses its own section rather than a viewport it may be
   much shorter than. The 100vh fallback keeps a full-height hero correct if
   the script never runs. */
@keyframes axl-particle-float {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 0;
  }
  10%,
  90% {
    opacity: var(--axl-particle-opacity, .4);
  }
  100% {
    transform: translate3d(0, calc(-1 * var(--axl-cosmic-travel, 100vh)), 0) rotate(360deg);
    opacity: 0;
  }
}

/* The gradient stays; only the drift stops. cosmic.js skips generating
   particles under the same query, so this is the belt to its braces. */
@media (prefers-reduced-motion: reduce) {
  .axl-particle {
    animation: none;
  }
}

/* ---- Gradient cards: glass effect preview in the block editor ----------
   The editor canvas is light, so the glass state is drawn the way the dark site
   draws it: the gradient faded over a deep-navy pane. editor.js adds the class and
   the --axl-glass-gradient value; the front end does the same in cosmic-site.css.
   The solid state needs nothing here, the gradient simply shows as picked. */
.editor-styles-wrapper .card.axl-glass-on {
  position: relative;
  isolation: isolate;
  background: #0B0E2D !important;
  border-color: rgba(255, 255, 255, .16);
  color: #E4E2F2;
}

.editor-styles-wrapper .card.axl-glass-on::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--axl-glass-gradient);
  opacity: .35;
  pointer-events: none;
}

/* Colour cards: the same navy pane, with the colour mixed down the way
   cosmic-site.css does it (40% fading to 18%). */
.editor-styles-wrapper .card.axl-glass-on[style*="--axl-tint"] {
  background:
    linear-gradient(160deg, color-mix(in srgb, var(--axl-tint) 40%, transparent), color-mix(in srgb, var(--axl-tint) 18%, transparent)),
    #0B0E2D !important;
}