/* Einrichtung: kleine Live-Karte (Schritt 1) und Stempel-Erklärung (Schritt 2). */

.setup-layer {
  --setup-ease: cubic-bezier(.2, .8, .2, 1);
  --setup-pop: cubic-bezier(.3, 1.6, .5, 1);
}

/* --- Schritt 1: Karte mit Live-Namen ------------------------------------- */

.setup-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 14px;
  width: min(100%, 300px);
  margin: 4px 0 22px;
  padding: 16px 18px 18px;
  border: 3px solid var(--build-black);
  border-radius: 18px;
  background: var(--build-blue);
  box-shadow: 7px 7px 0 var(--build-black);
  transform: rotate(-3deg);
  transform-origin: 30% 80%;
  animation: setupCardIn 520ms var(--setup-pop) both;
}

@keyframes setupCardIn {
  from { opacity: 0; transform: translateY(26px) rotate(6deg) scale(.9); }
  to { opacity: 1; transform: rotate(-3deg); }
}

.setup-card__logo {
  width: 56px;
  height: 56px;
  margin: -8px -6px -8px -8px;
}

.setup-card__name {
  justify-self: start;
  max-width: 100%;
  overflow: hidden;
  padding: 5px 10px 3px;
  background: var(--build-black);
  color: var(--build-blue);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.setup-card__name[data-empty="true"] { color: rgb(0 100 185 / 65%); }

.setup-card__name.is-typing {
  animation: setupNameBump 220ms var(--setup-pop);
}

@keyframes setupNameBump {
  from { transform: scale(1.08) rotate(-1deg); }
  to { transform: none; }
}

.setup-card__title {
  grid-column: 1 / -1;
  font-size: 30px;
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.02em;
}

.setup-card__hole {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 14px;
  height: 14px;
  border: 2px solid var(--build-black);
  border-radius: 50%;
  background: var(--build-yellow);
}

/* --- Schritt 2: So geht's ------------------------------------------------- */

.setup-stamps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  width: min(100%, 250px);
  margin: 4px 0 22px;
  padding: 14px;
  border: 3px solid var(--build-black);
  border-radius: 18px;
  background: var(--build-red);
  box-shadow: 7px 7px 0 var(--build-black);
  transform: rotate(2deg);
}

.setup-stamp {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--build-black);
  color: var(--build-red);
}

.setup-stamp:not(.setup-stamp--gift)::after {
  content: "";
  position: absolute;
  inset: 16%;
  background: url("./assets/icons/stamp-x.png") center / contain no-repeat;
  opacity: 0;
}

.setup-step:not([hidden]) .setup-stamp:not(.setup-stamp--gift)::after {
  animation: setupStampIn 420ms var(--setup-pop) both;
  animation-delay: calc(300ms + var(--n) * 170ms);
}

@keyframes setupStampIn {
  from { opacity: 0; transform: scale(2.2) rotate(-18deg); }
  60% { opacity: 1; }
  to { opacity: 1; transform: none; }
}

.setup-stamp--gift svg {
  width: 56%;
  height: 56%;
}

.setup-step:not([hidden]) .setup-stamp--gift svg {
  animation: setupGiftWiggle 700ms var(--setup-ease) both;
  animation-delay: 1250ms;
}

@keyframes setupGiftWiggle {
  0%, 100% { transform: none; }
  25% { transform: rotate(-14deg) scale(1.15); }
  55% { transform: rotate(10deg) scale(1.1); }
  80% { transform: rotate(-4deg); }
}

.setup-how {
  display: grid;
  gap: 12px;
  margin: 4px 0 8px;
  padding: 0;
  list-style: none;
  counter-reset: setup-how;
}

.setup-how li {
  position: relative;
  min-height: 34px;
  padding-left: 48px;
  font-size: clamp(14px, 4.2vw, 18px);
  line-height: 1.35;
  counter-increment: setup-how;
}

.setup-how li::before {
  content: counter(setup-how);
  position: absolute;
  top: -2px;
  left: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--build-black);
  color: var(--build-yellow);
  font-weight: 700;
}

.setup-how strong { display: block; }

.setup-next {
  background: var(--build-black) !important;
  color: var(--build-yellow) !important;
}

@media (prefers-reduced-motion: reduce) {
  .setup-card,
  .setup-card__name.is-typing,
  .setup-step:not([hidden]) .setup-stamp:not(.setup-stamp--gift)::after,
  .setup-step:not([hidden]) .setup-stamp--gift svg {
    animation: none;
  }

  .setup-stamp:not(.setup-stamp--gift)::after { opacity: 1; }
}