/* =========================================================================
   AIDiveForge — 3D AI Brain Loader
   Reusable component. Size-controlled via --size custom property.
   Pure CSS, zero dependencies. Works as inline indicator, button state,
   skeleton placeholder, and full-page route-transition overlay.

   Usage:
     <div class="brain-loader" style="--size: 160px;" role="status" aria-label="Loading">
       ... 8 rings + 6 nodes + brain svg + AI text ...
     </div>

   Or in PHP templates:   echo adf_brain_loader(160, 'Loading');
   Or in WP content:      [adf_brain_loader size="120"]
   ========================================================================= */

.brain-loader {
  --size: 160px;
  --ring-color: #00c8ff;
  --text-gradient: linear-gradient(135deg, #00c8ff 0%, #0066ff 55%, #7000ff 100%);
  --spin-duration: 12s;
  --breathe-duration: 3.2s;

  width: var(--size);
  height: var(--size);
  position: relative;
  display: inline-block;
  perspective: calc(var(--size) * 4);
  transform-style: preserve-3d;
  vertical-align: middle;
}

/* Ambient outer halo */
.brain-loader::before {
  content: "";
  position: absolute;
  inset: -15%;
  background: radial-gradient(circle, rgba(0, 200, 255, 0.18) 0%, transparent 60%);
  pointer-events: none;
  animation: brain-loader-halo 4s ease-in-out infinite;
  z-index: -1;
  border-radius: 50%;
}
@keyframes brain-loader-halo {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 0.9; transform: scale(1.08); }
}

/* --- Wireframe 3D sphere --- */
.brain-loader__sphere {
  position: absolute;
  inset: 6%;
  transform-style: preserve-3d;
  animation: brain-loader-spin var(--spin-duration) linear infinite;
}
@keyframes brain-loader-spin {
  from { transform: rotateY(0deg) rotateX(18deg); }
  to   { transform: rotateY(360deg) rotateX(18deg); }
}

.brain-loader__ring {
  position: absolute;
  inset: 0;
  border: 1px solid var(--ring-color);
  border-left-color: transparent;
  border-right-color: transparent;
  border-radius: 50%;
  box-shadow:
    0 0 calc(var(--size) * 0.06) rgba(0, 200, 255, 0.35),
    inset 0 0 calc(var(--size) * 0.06) rgba(0, 200, 255, 0.18);
  opacity: 0.55;
}
.brain-loader__ring:nth-child(1) { transform: rotateY(  0deg);   opacity: 0.85; }
.brain-loader__ring:nth-child(2) { transform: rotateY( 22.5deg); opacity: 0.75; }
.brain-loader__ring:nth-child(3) { transform: rotateY( 45deg);   opacity: 0.65; }
.brain-loader__ring:nth-child(4) { transform: rotateY( 67.5deg); opacity: 0.55; }
.brain-loader__ring:nth-child(5) { transform: rotateY( 90deg);   opacity: 0.5; }
.brain-loader__ring:nth-child(6) { transform: rotateY(112.5deg); opacity: 0.55; }
.brain-loader__ring:nth-child(7) { transform: rotateY(135deg);   opacity: 0.65; }
.brain-loader__ring:nth-child(8) { transform: rotateY(157.5deg); opacity: 0.75; }

.brain-loader__ring--equator {
  transform: rotateX(90deg) !important;
  opacity: 1 !important;
  border-color: var(--ring-color);
  border-left-color: transparent;
  border-right-color: transparent;
  box-shadow:
    0 0 calc(var(--size) * 0.08) rgba(0, 200, 255, 0.5),
    inset 0 0 calc(var(--size) * 0.08) rgba(0, 200, 255, 0.25);
}

/* --- Neural nodes on the sphere surface --- */
.brain-loader__node {
  position: absolute;
  top: 50%; left: 50%;
  width: calc(var(--size) * 0.04);
  height: calc(var(--size) * 0.04);
  margin-top: calc(var(--size) * -0.02);
  margin-left: calc(var(--size) * -0.02);
  background: var(--ring-color);
  border-radius: 50%;
  box-shadow:
    0 0 calc(var(--size) * 0.05) var(--ring-color),
    0 0 calc(var(--size) * 0.09) var(--ring-color),
    0 0 calc(var(--size) * 0.14) rgba(0, 200, 255, 0.6);
  animation: brain-loader-node-pulse 2.5s ease-in-out infinite;
}
.brain-loader__node:nth-child(9)  { transform: rotateY(  0deg) rotateX( 25deg) translateZ(calc(var(--size) * 0.44)); animation-delay: 0s; }
.brain-loader__node:nth-child(10) { transform: rotateY( 60deg) rotateX(-15deg) translateZ(calc(var(--size) * 0.44)); animation-delay: 0.4s; }
.brain-loader__node:nth-child(11) { transform: rotateY(120deg) rotateX( 40deg) translateZ(calc(var(--size) * 0.44)); animation-delay: 0.8s; }
.brain-loader__node:nth-child(12) { transform: rotateY(180deg) rotateX(-30deg) translateZ(calc(var(--size) * 0.44)); animation-delay: 1.2s; }
.brain-loader__node:nth-child(13) { transform: rotateY(240deg) rotateX( 10deg) translateZ(calc(var(--size) * 0.44)); animation-delay: 1.6s; }
.brain-loader__node:nth-child(14) { transform: rotateY(300deg) rotateX(-20deg) translateZ(calc(var(--size) * 0.44)); animation-delay: 2.0s; }
@keyframes brain-loader-node-pulse {
  0%, 100% { opacity: 0.7;  box-shadow: 0 0 calc(var(--size) * 0.04) var(--ring-color), 0 0 calc(var(--size) * 0.08) rgba(0, 200, 255, 0.5); }
  50%      { opacity: 1;    box-shadow: 0 0 calc(var(--size) * 0.07) var(--ring-color), 0 0 calc(var(--size) * 0.14) var(--ring-color), 0 0 calc(var(--size) * 0.2) rgba(0, 200, 255, 0.7); }
}

/* --- SVG brain silhouette (2D, overlaid in front, breathing) --- */
.brain-loader__brain {
  position: absolute;
  inset: 14%;
  display: grid;
  place-items: center;
  pointer-events: none;
  animation: brain-loader-breathe var(--breathe-duration) cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.brain-loader__brain svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 calc(var(--size) * 0.04) rgba(0, 200, 255, 0.5));
}
@keyframes brain-loader-breathe {
  0%, 100% { transform: scale(0.96); opacity: 0.7; }
  50%      { transform: scale(1.02); opacity: 1; }
}

/* --- "AI" text (static anchor, own pulse) --- */
.brain-loader__text {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "Syne", system-ui, sans-serif;
  font-weight: 800;
  font-size: calc(var(--size) * 0.22);
  letter-spacing: -0.06em;
  background: var(--text-gradient);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  pointer-events: none;
  z-index: 10;
  filter: drop-shadow(0 0 calc(var(--size) * 0.03) rgba(0, 200, 255, 0.5));
  animation: brain-loader-text-breathe calc(var(--breathe-duration) * 1.1) ease-in-out infinite;
}
@keyframes brain-loader-text-breathe {
  0%, 100% { filter: drop-shadow(0 0 calc(var(--size) * 0.02) rgba(0, 200, 255, 0.4)); transform: scale(1); }
  50%      { filter: drop-shadow(0 0 calc(var(--size) * 0.05) rgba(0, 200, 255, 0.8)); transform: scale(1.03); }
}

/* --- prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  .brain-loader__sphere { animation-duration: 60s; }
  .brain-loader__brain,
  .brain-loader__text,
  .brain-loader::before,
  .brain-loader__node { animation: none; }
}

/* =========================================================================
   Full-page route-transition overlay
   Rendered once in wp_body_open, toggled via the [hidden] attribute from JS.
   ========================================================================= */
.adf-route-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 14, 18, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  gap: 1.5rem;
  grid-auto-rows: min-content;
  align-content: center;
  justify-items: center;
  opacity: 0;
  animation: adf-route-overlay-in 180ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  padding: 2rem;
}
.adf-route-overlay[hidden] { display: none; }
@keyframes adf-route-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.adf-route-overlay__label {
  font-family: "Syne", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #e8eef4;
  text-shadow: 0 0 20px rgba(0, 200, 255, 0.5);
  margin: 0;
}
.adf-route-overlay__sub {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7a8b97;
  margin: 0;
}

/* =========================================================================
   Button loading state — swap content for a tiny brain-loader
   Apply [data-adf-loading="true"] to a <button> or <a class="btn"> via JS.
   ========================================================================= */
[data-adf-loading="true"] {
  position: relative;
  pointer-events: none;
  opacity: 0.85;
  cursor: wait;
}
[data-adf-loading="true"] > *:not(.brain-loader) {
  visibility: hidden;
}
[data-adf-loading="true"] > .brain-loader {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  --size: 22px;
}