.card-preview--ethics {
  background: rgba(28, 22, 18, 0.92);
  border: 1px solid rgba(220, 200, 170, 0.22);
}

.card-preview--ethics:hover {
  border-color: rgba(232, 212, 184, 0.32);
}

.card-art--rose {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.card-art-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
}

.card-art-layer--stem,
.card-art-layer--leaves,
.card-art-layer--bud,
.card-art-layer--flower {
  transform-origin: left bottom;
}

.card-art-layer--tendrils {
  transform-origin: left center;
}

.card-art-layer--stem {
  background: url('/images/rose-stem.svg') no-repeat left bottom;
  background-size: auto 100%;
  transform: translate(-12%, 18%) scale(0.15, 0.05) rotate(-6deg);
}

.card-art-layer--leaves {
  background: url('/images/rose-leaves.svg') no-repeat left bottom;
  background-size: auto 100%;
  transform: translate(-10%, 12%) scale(0.2, 0.2) rotate(-12deg);
}

.card-art-layer--bud {
  background: url('/images/rose-bud.svg') no-repeat left bottom;
  background-size: auto 90%;
  transform: translate(-8%, 14%) scale(0.05) rotate(-12deg);
}

.card-art-layer--flower {
  background: url('/images/rose-flower.svg') no-repeat left bottom;
  background-size: auto 95%;
  transform: translate(-4%, 8%) scale(0.3) rotate(-8deg);
}

.card-art-layer--tendrils {
  background: url('/images/rose-tendrils.svg') no-repeat left bottom;
  background-size: 100% auto;
  clip-path: inset(0 100% 0 0);
  transform: translate(-40%, 8%) scale(0.8) rotate(-4deg);
}

@keyframes stem-grow {
  0% {
    opacity: 0;
    transform: translate(-12%, 18%) scale(0.15, 0.05) rotate(-6deg);
  }
  40% {
    opacity: 0.8;
    transform: translate(-6%, 10%) scale(0.7, 0.8) rotate(-2deg);
  }
  65% {
    opacity: 1;
    transform: translate(-3%, 4%) scale(1.05, 1.12) rotate(1deg);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1, 1) rotate(0deg);
  }
}

@keyframes leaves-unfurl {
  0% {
    opacity: 0;
    transform: translate(-10%, 12%) scale(0.2, 0.2) rotate(-12deg);
  }
  35% {
    opacity: 0.5;
    transform: translate(-6%, 8%) scale(0.6, 0.6) rotate(-4deg);
  }
  70% {
    opacity: 0.9;
    transform: translate(-3%, 4%) scale(1.05, 1.05) rotate(1deg);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1, 1) rotate(0deg);
  }
}

@keyframes bud-form {
  0% {
    opacity: 0;
    transform: translate(-8%, 14%) scale(0.05) rotate(-12deg);
  }
  45% {
    opacity: 0.7;
    transform: translate(-4%, 8%) scale(0.6) rotate(-2deg);
  }
  75% {
    opacity: 0.6;
    transform: translate(-3%, 6%) scale(0.7) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate(-3%, 6%) scale(0.7) rotate(0deg);
  }
}

@keyframes flower-bloom {
  0% {
    opacity: 0;
    transform: translate(-4%, 8%) scale(0.3) rotate(-8deg);
  }
  30% {
    opacity: 0.8;
    transform: translate(-3%, 5%) scale(0.8) rotate(-2deg);
  }
  100% {
    opacity: 1;
    transform: translate(-2%, 3%) scale(0.98) rotate(0deg);
  }
}

@keyframes tendrils-spread {
  0% {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translate(-40%, 8%) scale(0.8) rotate(-4deg);
  }
  40% {
    opacity: 0.6;
    clip-path: inset(0 35% 0 0);
    transform: translate(-25%, 4%) scale(0.95) rotate(-1deg);
  }
  100% {
    opacity: 0.85;
    clip-path: inset(0 0 0 0);
    transform: translate(-10%, 0) scale(1.15) rotate(0deg);
  }
}

.card-preview:hover .card-art-layer--stem {
  animation: stem-grow 2.2s ease-out forwards;
}

.card-preview:hover .card-art-layer--leaves {
  animation: leaves-unfurl 2.6s ease-out 0.3s forwards;
}

.card-preview:hover .card-art-layer--bud {
  animation: bud-form 2.8s ease-out 0.6s forwards;
}

.card-preview:hover .card-art-layer--flower {
  animation: flower-bloom 3.4s ease-out 1.2s forwards;
}

.card-preview:hover .card-art-layer--tendrils {
  animation: tendrils-spread 3.2s ease-out 1.6s forwards;
}