/* Bienvenida animada de los libros Enlaces */
.ei {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(circle at 50% 40%, #f4f4f6 0, #dcdce2 70%); cursor: pointer;
  animation: ei-entra .35s ease-out both;
}
.ei.is-sale { animation: ei-sale .38s ease-in forwards; }
.ei-escena { position: relative; width: min(500px, 100%); display: flex; flex-direction: column; align-items: center; }
.ei-marca {
  position: relative; z-index: 2; margin-bottom: -4%; padding: 6px 26px; background: #d61e78; color: #fff; border-radius: 10px;
  font: 900 clamp(2rem, 8vw, 3.4rem)/1 "Baloo 2", "Montserrat", sans-serif; letter-spacing: .04em; transform: rotate(-3deg);
  box-shadow: 6px 6px 0 #9c1257; animation: ei-cae .6s .1s cubic-bezier(.3, 1.6, .5, 1) both;
}
/* Escena de la carátula por capas (posiciones en % desde libros/<código>/intro.json) */
.ei-arte { position: relative; width: min(440px, 86vw, 52vh); }
.ei-arte img { position: absolute; display: block; user-select: none; -webkit-user-drag: none; }
.ei-fondo { inset: 0; width: 100%; height: 100%; animation: ei-zoom .55s .15s ease-out both; }
.ei-pj {
  transform-origin: 50% 100%;
  animation: ei-pj-entra .7s .45s cubic-bezier(.3, 1.5, .5, 1) both, ei-pj-vive 3.4s 1.4s ease-in-out infinite;
}
.ei-nota {
  transform-origin: 50% 10%; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .22));
  animation: ei-nota .75s .8s cubic-bezier(.3, 1.6, .5, 1) both, ei-nota-vive 4.2s 1.8s ease-in-out infinite;
}
.ei-brillo {
  position: absolute; width: 14%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 236, 140, .95) 0, rgba(255, 220, 90, .45) 35%, transparent 70%);
  z-index: 1; opacity: 0; animation: ei-foco 1.6s 1.5s ease-in-out infinite;
}
.ei-nota { z-index: 0; } .ei-pj { z-index: 2; }
.ei-texto {
  margin: 10px 0 0; text-align: center;
  font: 700 clamp(1rem, 3.4vw, 1.3rem)/1.3 "Montserrat", sans-serif; color: #1f2433; animation: ei-sube .5s 1s both;
}
.ei-texto b { color: #b0145f; }
.ei-texto span { display: block; font-size: .78em; font-weight: 600; color: #5b6070; }
.ei-btn {
  margin-top: 12px; padding: 10px 26px; border: 0; border-radius: 999px;
  background: #d61e78; color: #fff; font: 800 1rem "Montserrat", sans-serif; cursor: pointer;
  box-shadow: 0 6px 0 #9c1257; animation: ei-sube .5s 1.3s both;
}
.ei.is-quieto *, .ei.is-quieto { animation: none !important; }
@keyframes ei-entra { from { opacity: 0; } }
@keyframes ei-sale { to { opacity: 0; transform: scale(1.04); } }
@keyframes ei-cae { from { opacity: 0; transform: translateY(-60px) rotate(-12deg); } }
@keyframes ei-zoom { from { opacity: 0; transform: scale(.4); } }
@keyframes ei-sube { from { opacity: 0; transform: translateY(40px); } }
@keyframes ei-pj-entra { from { opacity: 0; transform: translateY(35%) scale(.85); } }
@keyframes ei-pj-vive { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-2.2deg) translateY(-1.5%); } 60% { transform: rotate(1.6deg); } }
@keyframes ei-nota { from { opacity: 0; transform: translateY(-60%) rotate(-24deg) scale(.6); } }
@keyframes ei-nota-vive { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(1.8deg); } }
@keyframes ei-foco { 0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.7); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); } }