/* ==============================================
   CAKE – Pre-compiled from cake.less
   All dimensions derived from --cake-diameter (default 300px)
   ============================================== */

/* ── Position ── */

.cake {
  position: absolute;
  display: none;
  left: 50%;
  margin-left: calc(var(--cake-diameter) / -2);
  width: var(--cake-diameter);
  height: var(--cake-diameter);
}

/* ── Base ── */

.cake::after {
  background: rgba(255, 255, 255, 1);
  border-radius: var(--cake-diameter);
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: var(--cake-diameter);
  height: calc(var(--cake-diameter) / 50);
}

/* ── Candle ── */

.velas {
  background: var(--cake-candle);
  border-radius: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: calc(var(--cake-diameter) / -2 / 20);
  margin-top: calc(var(--cake-diameter) / -2 / 6);
  width: calc(var(--cake-diameter) / 20);
  height: calc(var(--cake-diameter) / 6);
}

.velas::after,
.velas::before {
  background: rgba(255, 0, 0, 0.4);
  content: "";
  position: absolute;
  width: 100%;
  height: calc(var(--cake-diameter) / 45);
}

.velas::after {
  top: 25%;
  left: 0;
}

.velas::before {
  top: 45%;
  left: 0;
}

/* ── Fire ── */

.fuego {
  display: none;
  border-radius: 100%;
  box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
  position: absolute;
  top: -12px;
  left: 50%;
  margin-left: calc(var(--cake-diameter) / -2 / 15);
  width: calc(var(--cake-diameter) / 15);
  height: calc(var(--cake-diameter) / 8);
}

.fuego:nth-child(1) {
  animation: fuego 2s infinite;
}

.fuego:nth-child(2) {
  animation: fuego 1.5s infinite;
}

.fuego:nth-child(3) {
  animation: fuego 1s infinite;
}

.fuego:nth-child(4) {
  animation: fuego 0.5s infinite;
}

.fuego:nth-child(5) {
  animation: fuego 0.2s infinite;
}

/* ── Fire Animation ── */

@keyframes fuego {
  0% {
    background: var(--cake-flame-start);
    transform: translateY(0) scale(1);
  }
  50% {
    background: var(--cake-flame-mid);
    transform: translateY(calc(var(--cake-diameter) / -5)) scale(0);
  }
  100% {
    background: var(--cake-flame-start);
    transform: translateY(0) scale(1);
  }
}

/* ── Frosting ── */

.cobertura {
  background: var(--cake-frosting);
  border-radius: calc(var(--cake-diameter) / 2);
  position: absolute;
  top: 60%;
  left: 50%;
  margin-left: calc(var(--cake-diameter) / -2 / 1.8);
  margin-top: calc(var(--cake-diameter) / -2 / 10);
  width: calc(var(--cake-diameter) / 1.8);
  height: calc(var(--cake-diameter) / 8);
  z-index: 10;
}

.cobertura::after,
.cobertura::before {
  background: var(--cake-frosting);
  border-radius: var(--cake-diameter);
  content: "";
  position: absolute;
  width: calc(var(--cake-diameter) / 20);
  height: calc(var(--cake-diameter) / 10);
}

.cobertura::after {
  top: calc(var(--cake-diameter) / 15);
  right: calc(var(--cake-diameter) / 7);
}

.cobertura::before {
  top: calc(var(--cake-diameter) / 10);
  right: calc(var(--cake-diameter) / 11);
}

/* ── Sponge (Bizcocho) ── */

.bizcocho {
  background: var(--cake-chocolate);
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: calc(var(--cake-diameter) / -2 / 2);
  width: calc(var(--cake-diameter) / 2);
  height: calc(var(--cake-diameter) / 3);
}

.bizcocho::after,
.bizcocho::before {
  background: rgba(236, 231, 227, 0.6);
  content: "";
  position: absolute;
  width: 100%;
  height: calc(var(--cake-diameter) / 20);
}

.bizcocho::after {
  top: 30%;
  left: 0;
}

.bizcocho::before {
  top: 60%;
  left: 0;
}

/* ── Text ── */

h1,
p {
  font-family: var(--font-body);
  font-weight: 300;
  font-style: italic;
  text-align: center;
  width: 100%;
  user-select: none;
}