@keyframes loaderPulse {
  0%, 100% { transform: scale(0.84); opacity: 0.42; }
  50% { transform: scale(1.08); opacity: 0.92; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

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

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes portfolioRail {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

@keyframes projectStrip {
  from { transform: translate3d(-50%, 0, 0); }
  to { transform: translate3d(0, 0, 0); }
}

@keyframes previewFloatA {
  0%, 100% { transform: rotateY(-10deg) rotateX(4deg) translate3d(0, 0, 0); }
  50% { transform: rotateY(-4deg) rotateX(2deg) translate3d(0, -18px, 0); }
}

@keyframes previewFloatB {
  0%, 100% { transform: rotateY(14deg) rotateX(-3deg) translate3d(0, 0, 90px); }
  50% { transform: rotateY(8deg) rotateX(-1deg) translate3d(0, 16px, 90px); }
}

.smoke {
  position: absolute;
  inset: auto -10% 0;
  height: 38vh;
  pointer-events: none;
  opacity: 0.28;
  filter: blur(24px);
  background:
    radial-gradient(circle at 20% 60%, rgba(0, 212, 255, 0.2), transparent 18rem),
    radial-gradient(circle at 46% 80%, rgba(124, 58, 237, 0.16), transparent 20rem),
    radial-gradient(circle at 80% 70%, rgba(0, 100, 180, 0.18), transparent 18rem);
  animation: smokeDrift 10s ease-in-out infinite alternate;
}

@keyframes smokeDrift {
  from { transform: translate3d(-2%, 4%, 0) scale(1); }
  to { transform: translate3d(2%, -4%, 0) scale(1.08); }
}

.orbital-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 0 60px rgba(0,212,255,.2);
  pointer-events: none;
}

.orbital-ring.one {
  width: 42vw;
  max-width: 620px;
  aspect-ratio: 1;
  right: 8vw;
  top: 18vh;
  animation: spin 18s linear infinite;
}

.orbital-ring.two {
  width: 28vw;
  max-width: 430px;
  aspect-ratio: 1;
  right: 16vw;
  top: 30vh;
  transform: rotateX(70deg);
  animation: spin 12s linear reverse infinite;
}

.holo-panel {
  position: absolute;
  right: clamp(1rem, 7vw, 7rem);
  z-index: 4;
  width: min(24vw, 260px);
  min-width: 170px;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(18px);
  box-shadow: 0 0 40px rgba(0,212,255,.16);
  animation: float 5s ease-in-out infinite;
}

.holo-panel.a { top: 24vh; }
.holo-panel.b { top: 56vh; right: clamp(1rem, 22vw, 22rem); animation-delay: -1.4s; }

.holo-panel small {
  display: block;
  color: var(--rose);
  letter-spacing: .18em;
  text-transform: uppercase;
}

.holo-panel strong {
  display: block;
  margin-top: .45rem;
  font-family: var(--heading);
  font-size: 1.3rem;
}

@keyframes showcaseFloat {
  0%, 100% { transform: rotateY(-8deg) rotateX(4deg) translateY(0); }
  50% { transform: rotateY(-4deg) rotateX(2deg) translateY(-15px); }
}

@keyframes floatCard1 {
  0%, 100% { transform: rotate(5deg) translateY(0); }
  50% { transform: rotate(3deg) translateY(-20px); }
}

@keyframes floatCard2 {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50% { transform: rotate(-2deg) translateY(15px); }
}

@keyframes morphShape1 {
  0%, 100% { transform: scale(1) translate(0, 0); border-radius: 50%; }
  33% { transform: scale(1.1) translate(20px, -10px); border-radius: 40% 60% 50% 50%; }
  66% { transform: scale(0.95) translate(-15px, 15px); border-radius: 55% 45% 60% 40%; }
}

@keyframes morphShape2 {
  0%, 100% { transform: scale(1) translate(0, 0); }
  50% { transform: scale(1.15) translate(-20px, 20px); }
}

@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}