/* Murales originales de ciencia ficción retro: sin logos ni arte copiado. */
.axis {
  isolation: isolate;
  background-color: #0a0c10;
  background-image:
    linear-gradient(115deg, transparent 0 41%, color-mix(in srgb,var(--c) 42%,transparent) 42% 45%, transparent 46%),
    repeating-linear-gradient(168deg, transparent 0 17px, #ffffff0a 18px 20px),
    radial-gradient(circle at 83% 14%, color-mix(in srgb,var(--c) 28%,transparent), transparent 31%);
}
.axis::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  opacity:.42;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='s'%3E%3CfeTurbulence baseFrequency='.06' numOctaves='3' seed='7'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23s)' opacity='.3'/%3E%3C/svg%3E");
  mix-blend-mode:screen;
}
.axis-icon {
  height:190px;
  display:block;
  position:relative;
  transform:translateZ(45px) rotate(-3deg);
}
.orb {
  width:100%;
  height:100%;
  border:0;
  border-radius:0;
  box-shadow:none;
  animation:graffiti-float 5.5s ease-in-out infinite;
  filter:drop-shadow(9px 12px 0 #0008);
}
.orb::before {
  content:"PSY";
  position:absolute;
  inset:24px 9px auto 4px;
  border:3px solid #090a0d;
  border-radius:0;
  padding:11px 7px 5px;
  color:#08090b;
  background:var(--c);
  font:900 clamp(52px,5vw,80px)/.75 'Space Grotesk',sans-serif;
  letter-spacing:-8px;
  text-shadow:3px 3px 0 #f3ede0,-2px -2px 0 #f3ede0;
  transform:skew(-9deg) rotate(-4deg);
  clip-path:polygon(2% 13%,88% 0,100% 69%,83% 100%,4% 88%);
  animation:none;
}
.orb::after {
  content:"/// 01 SIGNAL";
  position:absolute;
  left:15px;
  bottom:13px;
  inset:auto auto 13px 15px;
  border:0;
  border-radius:0;
  background:#08090b;
  color:var(--c);
  padding:5px 9px;
  opacity:1;
  filter:none;
  font:700 10px 'DM Mono',monospace;
  letter-spacing:1px;
  transform:rotate(2deg);
  animation:none;
}
.axis:nth-child(2) .orb::before{content:"SØN";transform:skew(7deg) rotate(3deg);clip-path:polygon(0 4%,94% 12%,100% 83%,8% 100%)}
.axis:nth-child(2) .orb::after{content:"WAVE / 02 / NOISE"}
.axis:nth-child(3) .orb::before{content:"BODY";font-size:clamp(42px,4vw,65px);transform:skew(-4deg) rotate(-2deg);clip-path:polygon(7% 0,100% 17%,91% 94%,0 83%)}
.axis:nth-child(3) .orb::after{content:"FLESH / 03 / MOVE"}
.axis:nth-child(4) .orb::before{content:"NEURØ";font-size:clamp(36px,3.6vw,58px);transform:skew(6deg) rotate(4deg);clip-path:polygon(0 20%,89% 0,100% 91%,9% 100%)}
.axis:nth-child(4) .orb::after{content:"SYNAPSE / 04 / MAP"}
.axis:hover .orb::before{background:#f1ecdd;color:var(--c);text-shadow:3px 3px 0 #08090b,-2px -2px 0 #08090b}
@keyframes graffiti-float{50%{transform:translateY(-8px) rotate(1.5deg)}}
body.reduced .orb{animation:none!important}