/* ============================================================
   AURORA — ambient blurred glow behind the whole trailer.
   Replicated from .aurora in the official landing.css: three
   large radial-gradient blobs, blurred and slowly drifting,
   blended with mix-blend-mode: screen.
   ============================================================ */
#aurora{
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  filter: blur(80px);
  opacity: 0.55;
}

#aurora span{
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform;
}

#aurora span:nth-child(1){
  width: 50vw; height: 50vw;
  top: 5%; left: 8%;
  background: radial-gradient(circle, #60A5FA, transparent 70%);
  animation: auroraDrift1 32s ease-in-out infinite;
}
#aurora span:nth-child(2){
  width: 42vw; height: 42vw;
  top: 30%; right: 5%;
  background: radial-gradient(circle, var(--mea-accent), transparent 70%);
  opacity: 0.5;
  animation: auroraDrift2 26s ease-in-out infinite;
}
#aurora span:nth-child(3){
  width: 38vw; height: 38vw;
  bottom: 0%; left: 28%;
  background: radial-gradient(circle, #4A7FB5, transparent 72%);
  opacity: 0.4;
  animation: auroraDrift3 38s ease-in-out infinite;
}

@keyframes auroraDrift1{
  0%, 100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(6%, 8%) scale(1.12); }
}
@keyframes auroraDrift2{
  0%, 100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(-8%, 6%) scale(0.92); }
}
@keyframes auroraDrift3{
  0%, 100%{ transform: translate(0,0) scale(1); }
  50%{ transform: translate(5%, -6%) scale(1.08); }
}

/* All scene content sits above the aurora layer. */
.scene{
  position: absolute;
  z-index: 1;
}

/* ============================================================
   GLASS — reusable glassmorphism surface, matching .glass in
   the official landing.css. Use on any card-like element that
   should read as "frosted" against the aurora glow.
   ============================================================ */
.glass{
  background: rgba(22, 22, 22, 0.55);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ============================================================
   ICON DEPTH — replicated from .icon-chip in the official
   shared/ecosystem-explorer.css: diagonal gradient + layered
   box-shadow (outer drop + inset top-highlight) is what gives
   the live site's icon tiles their 3D "raised glass" look,
   versus a flat single-color fill + border.
   ============================================================ */
.icon-chip-depth{
  background: linear-gradient(145deg, rgba(59, 130, 246, 0.16), rgba(59, 130, 246, 0.04));
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(59, 130, 246, 0.28);
  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

@media (prefers-reduced-motion: reduce){
  #aurora span{
    animation: none !important;
  }
}