/**
 * Rendered neon glass AI cube (centerCube.png) hub with an animated glowing "A".
 * REVERT: remove link from _Layout, swap _HeroAICore → _HeroCubeLegacy.
 */

/* ── Hit target ────────────────────────────────────────────────── */

.hero__visual--ai-core .hub-scene__cube-hit--ai {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34%;
  aspect-ratio: 1076 / 889;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 31;
  transform: translate(-50%, -44%);
  will-change: transform;
  pointer-events: auto;
  overflow: visible;
}

.hero__visual--ai-core .hub-scene__cube-hit--ai:focus-visible {
  outline: 2px solid rgba(96, 165, 250, 0.85);
  outline-offset: 6px;
  border-radius: 12px;
}

.hero__visual--ai-core .ai-core {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.hero__visual--ai-core .ai-core__stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

/* ── Soft ambient aura behind the cube ─────────────────────────── */

.hero__visual--ai-core .ai-core__aura {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 90%;
  height: 90%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 45%,
    rgba(59, 130, 246, 0.45) 0%,
    rgba(99, 102, 241, 0.24) 34%,
    rgba(37, 99, 235, 0.08) 58%,
    transparent 74%
  );
  filter: blur(4px);
  pointer-events: none;
  z-index: 0;
  animation: aiAuraPulse 4.5s ease-in-out infinite;
}

@keyframes aiAuraPulse {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.94); }
  50%      { opacity: 0.9;  transform: translate(-50%, -50%) scale(1.04); }
}

/* ── The rendered cube itself ──────────────────────────────────── */

.hero__visual--ai-core .ai-core__cube-wrap {
  position: relative;
  width: 100%;
  z-index: 2;
  animation: aiCubeBob 4.5s ease-in-out infinite;
  will-change: transform;
}

.hero__visual--ai-core .ai-core__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter:
    drop-shadow(0 10px 30px rgba(37, 99, 235, 0.35))
    drop-shadow(0 0 18px rgba(59, 130, 246, 0.35));
  animation: aiCubeGlow 4.5s ease-in-out infinite;
  transition: filter 0.4s ease;
}

@keyframes aiCubeBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

@keyframes aiCubeGlow {
  0%, 100% {
    filter:
      drop-shadow(0 10px 30px rgba(37, 99, 235, 0.32))
      drop-shadow(0 0 16px rgba(59, 130, 246, 0.32));
  }
  50% {
    filter:
      drop-shadow(0 12px 38px rgba(37, 99, 235, 0.5))
      drop-shadow(0 0 30px rgba(99, 102, 241, 0.55));
  }
}

/* ── Animated energy pulse over the cube's front-face "A" logo ──── */

/* Positioned relative to the cube image box, centred on the rendered A
   which sits on the front-left (viewer-facing) face, just below centre.
   A soft cyan halo breathes through the A so it reads as "charging". */
.hero__visual--ai-core .ai-core__a-glow {
  position: absolute;
  left: 24%;
  top: 21%;
  width: 30%;
  height: 36%;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(
    ellipse 45% 55% at 55% 50%,
    rgba(165, 243, 252, 0.9) 0%,
    rgba(56, 189, 248, 0.55) 38%,
    rgba(59, 130, 246, 0.12) 65%,
    rgba(59, 130, 246, 0) 82%
  );
  filter: blur(4px);
  mix-blend-mode: screen;
  z-index: 3;
  animation: aiAGlow 2.4s ease-in-out infinite;
}

@keyframes aiAGlow {
  0%, 100% { opacity: 0.35; transform: scale(0.92); }
  50%      { opacity: 1;    transform: scale(1.12); }
}

/* ── Corner sparks bursting from the cube edges ────────────────── */

.hero__visual--ai-core .ai-core__sparks {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 46%;
  height: 46%;
  transform: translate(-50%, -50%);
  z-index: 5;
  pointer-events: none;
}

.hero__visual--ai-core .ai-core__spark {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #22d3ee;
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.9);
  opacity: 0;
}

.hero__visual--ai-core .ai-core__spark--n  { top: 0; left: 50%; }
.hero__visual--ai-core .ai-core__spark--s  { bottom: 0; left: 50%; }
.hero__visual--ai-core .ai-core__spark--e  { right: 0; top: 50%; }
.hero__visual--ai-core .ai-core__spark--w  { left: 0; top: 50%; }
.hero__visual--ai-core .ai-core__spark--ne { top: 8%; right: 12%; }
.hero__visual--ai-core .ai-core__spark--nw { top: 8%; left: 12%; }
.hero__visual--ai-core .ai-core__spark--se { bottom: 8%; right: 12%; }
.hero__visual--ai-core .ai-core__spark--sw { bottom: 8%; left: 12%; }

/* ── Hover / focus ─────────────────────────────────────────────── */

.hero__visual--ai-core .hub-scene__cube-hit--ai:hover .ai-core__img,
.hero__visual--ai-core .hub-scene__cube-hit--ai:focus-visible .ai-core__img {
  filter:
    drop-shadow(0 12px 40px rgba(37, 99, 235, 0.55))
    drop-shadow(0 0 34px rgba(99, 102, 241, 0.7))
    drop-shadow(0 0 54px rgba(59, 130, 246, 0.5));
}

.hero__visual--ai-core .hub-scene__cube-hit--ai:hover .ai-core__a-glow,
.hero__visual--ai-core .hub-scene__cube-hit--ai:focus-visible .ai-core__a-glow {
  animation-duration: 1.4s;
}

/* Hide legacy PNG cube when AI core active */
.hero__visual--ai-core .hub-scene__cube,
.hero__visual--ai-core .hub-scene__cube-glow {
  display: none;
}

@media (max-width: 768px) {
  .hero__visual--ai-core .hub-scene__cube-hit--ai {
    width: 40%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__visual--ai-core .ai-core__cube-wrap,
  .hero__visual--ai-core .ai-core__img,
  .hero__visual--ai-core .ai-core__aura,
  .hero__visual--ai-core .ai-core__a-glow {
    animation: none !important;
  }
}