Floating Card Hero

<!-- Floating Card Hero — three stacked cards floating in 3D-ish space -->
<section class="nuda-fchero">
  <div class="nuda-fchero__card nuda-fchero__card--back"></div>
  <div class="nuda-fchero__card nuda-fchero__card--mid"></div>
  <div class="nuda-fchero__card nuda-fchero__card--front">
    <span class="nuda-fchero__title">Ship now</span>
    <span class="nuda-fchero__sub">Open source.</span>
  </div>
</section>

/* Floating Card Hero
   Three stacked cards float independently — front carries the message.
   Customize: --fc-accent, individual card transforms. */

.nuda-fchero {
  --fc-accent: #e4ff54;
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.nuda-fchero__card {
  position: absolute;
  width: 240px;
  height: 150px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.nuda-fchero__card--back {
  background: rgba(228, 255, 84, 0.04);
  border-color: rgba(228, 255, 84, 0.15);
  transform: translate(-32px, -20px) rotate(-6deg);
  animation: nuda-fc-bk 4s ease-in-out infinite alternate;
}

.nuda-fchero__card--mid {
  background: rgba(255, 255, 255, 0.05);
  transform: translate(20px, 10px) rotate(4deg);
  animation: nuda-fc-md 4s ease-in-out 1s infinite alternate;
}

.nuda-fchero__card--front {
  background: linear-gradient(180deg, rgba(228, 255, 84, 0.15), rgba(228, 255, 84, 0.05));
  border-color: rgba(228, 255, 84, 0.3);
  box-shadow: 0 16px 40px -8px rgba(228, 255, 84, 0.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  animation: nuda-fc-fr 4s ease-in-out infinite alternate;
}

.nuda-fchero__title {
  font: 800 1.5rem ui-sans-serif, system-ui, sans-serif;
  color: #fafafa;
  letter-spacing: -0.02em;
}

.nuda-fchero__sub {
  font: 500 0.875rem ui-sans-serif, system-ui, sans-serif;
  color: #a1a1aa;
}

@keyframes nuda-fc-bk {
  from { transform: translate(-32px, -20px) rotate(-6deg); }
  to   { transform: translate(-36px, -26px) rotate(-7deg); }
}

@keyframes nuda-fc-md {
  from { transform: translate(20px, 10px) rotate(4deg); }
  to   { transform: translate(24px, 14px) rotate(5deg); }
}

@keyframes nuda-fc-fr {
  from { transform: translateY(0); }
  to   { transform: translateY(-6px); }
}

@media (prefers-reduced-motion: reduce) {
  .nuda-fchero__card { animation: none; }
}