.hero-visual {
  position: relative;
  justify-self: center;
  width: min(340px, 60vw);
  aspect-ratio: 1;
}

.hero-visual::before {
  content: '';
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.14), transparent 65%);
}

.hero-visual > * {
  position: absolute;
}

.cube-lg {
  width: 68%;
  top: 14%;
  left: 16%;
  color: var(--accent);
  opacity: 0.75;
  animation: float-y 9s ease-in-out infinite;
}

.cube-md {
  width: 26%;
  top: 0;
  left: 0;
  color: var(--accent-strong);
  opacity: 0.6;
  animation: float-y 7s ease-in-out 0.8s infinite reverse;
}

.cube-sm {
  width: 17%;
  right: 2%;
  bottom: 10%;
  color: var(--accent);
  opacity: 0.5;
  animation: float-y 5.5s ease-in-out 0.4s infinite;
}

.gizmo-ring {
  width: 9%;
  top: 8%;
  right: 12%;
  border: 2px solid var(--accent);
  border-radius: 50%;
  aspect-ratio: 1;
  opacity: 0.4;
  animation: float-y 6s ease-in-out 1.2s infinite reverse;
}

.gizmo-plus {
  font-family: var(--font-mono);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--accent);
  opacity: 0.45;
  animation: float-y 6.5s ease-in-out infinite;
}

.gizmo-plus.p1 {
  left: 4%;
  bottom: 22%;
}

.gizmo-plus.p2 {
  right: 24%;
  bottom: -2%;
  animation-delay: 1.6s;
  font-size: 1rem;
}

.gizmo-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-strong);
  opacity: 0.55;
  animation: float-y 4.5s ease-in-out infinite;
}

.gizmo-dot.d1 {
  top: 30%;
  left: 2%;
  animation-delay: 0.5s;
}

.gizmo-dot.d2 {
  top: 62%;
  right: 0;
  animation-delay: 1s;
}

@keyframes float-y {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-14px);
  }
}

.ripple-layer {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}

.ripple-ring {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border: 2px solid rgba(var(--accent-rgb), 0.75);
  border-radius: 50%;
  animation: ripple-expand 0.7s var(--ease-out) forwards;
}

.ripple-echo {
  animation: ripple-expand 0.85s var(--ease-out) 0.12s forwards;
  border-color: rgba(var(--accent-rgb), 0.4);
  opacity: 0;
}

@keyframes ripple-expand {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(12);
    opacity: 0;
  }
}

.page-decor {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.page-decor > * {
  position: absolute;
}

.decor-cube-tr {
  width: 300px;
  top: -70px;
  right: -90px;
  color: var(--text);
  opacity: 0.05;
  transform: rotate(14deg);
}

.decor-cube-mr {
  width: 240px;
  top: 36%;
  right: -70px;
  color: var(--accent);
  opacity: 0.05;
  transform: rotate(9deg);
}

.decor-cube-ml {
  width: 180px;
  top: 60%;
  left: -55px;
  color: var(--text);
  opacity: 0.05;
  transform: rotate(-14deg);
}

.decor-cube-bl {
  width: 220px;
  bottom: -60px;
  left: -70px;
  color: var(--accent);
  opacity: 0.06;
  transform: rotate(-10deg);
}

.decor-ring-l {
  width: 62px;
  height: 62px;
  top: 27%;
  left: 2.5vw;
  border: 2px solid var(--accent);
  border-radius: 50%;
  opacity: 0.1;
}

.decor-plus-l {
  top: 22%;
  left: 4.5vw;
  font-family: var(--font-mono);
  font-size: 1.6rem;
  color: var(--accent);
  opacity: 0.14;
}

.decor-plus-r {
  top: 78%;
  right: 3vw;
  font-family: var(--font-mono);
  font-size: 1.9rem;
  color: var(--text);
  opacity: 0.1;
}

.decor-tri-r {
  width: 48px;
  height: 48px;
  top: 52%;
  right: 4vw;
  border: 1.5px solid var(--text);
  opacity: 0.08;
  transform: rotate(20deg);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  background: currentColor;
  border: 0;
  color: var(--text);
}

.decor-yarn {
  width: 110px;
  top: 13%;
  right: 3vw;
  color: var(--accent);
  opacity: 0.11;
  transform: rotate(-14deg);
}

.decor-bus {
  width: 160px;
  top: 44%;
  left: 1.5vw;
  color: var(--text);
  opacity: 0.09;
  transform: rotate(-6deg);
}

.decor-catbox {
  width: 150px;
  top: 64%;
  right: 2.5vw;
  color: var(--accent);
  opacity: 0.12;
  transform: rotate(8deg);
}

.decor-fsm {
  width: 120px;
  top: 84%;
  left: 2.5vw;
  color: var(--text);
  opacity: 0.09;
  transform: rotate(6deg);
}

.decor-paw {
  width: 66px;
  top: 91%;
  right: 5vw;
  color: var(--accent);
  opacity: 0.09;
  transform: rotate(-18deg);
}

.decor-square-l {
  width: 44px;
  height: 44px;
  top: 8%;
  left: 3vw;
  border: 2px solid var(--text);
  opacity: 0.08;
  transform: rotate(18deg);
}

.decor-diamond-r {
  width: 38px;
  height: 38px;
  top: 33%;
  right: 4.5vw;
  border: 2px solid var(--accent);
  opacity: 0.1;
  transform: rotate(45deg);
}

.decor-ring-r {
  width: 64px;
  height: 64px;
  top: 56%;
  right: 6vw;
  border: 2px solid var(--text);
  border-radius: 50%;
  opacity: 0.07;
}

.decor-tri-l {
  width: 56px;
  top: 71%;
  left: 4.5vw;
  color: var(--accent);
  opacity: 0.09;
  transform: rotate(-12deg);
}

.decor-x-r {
  top: 18%;
  right: 6vw;
  font-family: var(--font-mono);
  font-size: 1.6rem;
  color: var(--text);
  opacity: 0.09;
  transform: rotate(12deg);
}

.decor-dot-a,
.decor-dot-b,
.decor-dot-c {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.12;
}

.decor-dot-a {
  top: 29%;
  left: 6vw;
}

.decor-dot-b {
  top: 50%;
  right: 2vw;
}

.decor-dot-c {
  top: 76%;
  right: 7vw;
}

@media (max-width: 1180px) {
  .page-decor {
    display: none;
  }
}

@media (max-width: 920px) {
  .hero-visual {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-visual > *,
  .page-decor > * {
    animation: none;
  }
}