/* Solo la mascota y su vuelo. */
.tooth-mascot { --mascot-width: 76px; --mascot-height: 104px; position: fixed; width: var(--mascot-width); height: var(--mascot-height); left: 18px; bottom: 58px; z-index: 6; pointer-events: none; user-select: none; }
.tooth-mascot-art { display: block; width: 100%; height: auto; overflow: visible; }
.tooth-character { filter: drop-shadow(0 3px 3px #002c3c20); }
.tooth-shadow { display: none; }
@media(prefers-reduced-motion:no-preference) {
  .tooth-mascot { animation: mascot-flight 42s ease-in-out infinite; }
  .tooth-character { animation: tooth-float 3.2s ease-in-out infinite; }
  .tooth-eyes { transform-box: fill-box; transform-origin: center; animation: tooth-blink 5.8s infinite; }
  .tooth-sparkle { transform-box: fill-box; transform-origin: center; animation: tooth-sparkle 3.2s ease-in-out infinite; }
}
.tooth-mascot.is-paused, .tooth-mascot.is-paused * { animation-play-state: paused !important; }
@keyframes mascot-flight {
  0%,100% { transform: translate(0,0) rotate(-5deg); }
  18% { transform: translate(calc(42vw - 60px),calc(-60vh + 120px)) rotate(7deg); }
  38% { transform: translate(calc(100vw - var(--mascot-width) - 60px),calc(-35vh + 80px)) rotate(-6deg); }
  58% { transform: translate(calc(55vw - 65px),calc(-85vh + 180px)) rotate(-9deg); }
  78% { transform: translate(0,calc(-45vh + 90px)) rotate(5deg); }
}
@keyframes tooth-float { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-7px) rotate(3deg); } }
@keyframes tooth-blink { 0%,43%,47%,100% { transform: scaleY(1); } 45% { transform: scaleY(.12); } }
@keyframes tooth-sparkle { 0%,100% { transform: scale(.7); opacity: .45; } 50% { transform: scale(1.1); opacity: 1; } }
@media(max-width:640px) { .tooth-mascot { --mascot-width: 58px; --mascot-height: 79px; left: 10px; bottom: 58px; } }
@media print { .tooth-mascot { display: none; } }

/* Segundo personaje de Halloween: recorrido independiente de la muelita. */
.ghost-mascot { position: fixed; right: 24px; bottom: 155px; width: 62px; height: 69px; z-index: 6; pointer-events: none; user-select: none; }
.ghost-mascot svg { display: block; width: 100%; height: auto; overflow: visible; }
.ghost-character { filter: drop-shadow(0 4px 6px #49247825); }
.ghost-mascot.is-paused, .ghost-mascot.is-paused * { animation-play-state: paused !important; }
@media(prefers-reduced-motion:no-preference) {
  .ghost-mascot { animation: ghost-flight 48s ease-in-out infinite; }
  .ghost-character { animation: ghost-bob 3.7s ease-in-out infinite; }
  .ghost-eyes { transform-box: fill-box; transform-origin: center; animation: tooth-blink 6.3s infinite; }
}
@keyframes ghost-flight {
  0%,100% { transform: translate(0,0) rotate(4deg); }
  20% { transform: translate(calc(-35vw + 40px),calc(-45vh + 130px)) rotate(-7deg); }
  42% { transform: translate(calc(-100vw + 115px),calc(-25vh + 80px)) rotate(5deg); }
  65% { transform: translate(calc(-55vw + 60px),calc(-70vh + 200px)) rotate(8deg); }
  82% { transform: translate(calc(-15vw + 20px),calc(-30vh + 90px)) rotate(-5deg); }
}
@keyframes ghost-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media(max-width:640px) { .ghost-mascot { width: 47px; height: 53px; right: 14px; bottom: 150px; } }
@media print { .ghost-mascot { display: none; } }

/* Las mascotas pertenecen a la portada y se desplazan con ella al hacer scroll. */
.season-mascot-host { position: relative; }
.season-mascot-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.tooth-mascot, .ghost-mascot { position: absolute; visibility: hidden; }
.season-mascot-layer .tooth-mascot,
.season-mascot-layer .ghost-mascot { visibility: visible; }
.season-mascot-layer .tooth-mascot { left: 24px; bottom: 24px; }
.season-mascot-layer .ghost-mascot { right: 24px; bottom: 24px; }
@keyframes mascot-flight {
  0%,100% { transform: translate(0,0) rotate(-5deg); }
  20% { transform: translate(calc(var(--flight-x) * .15),calc(var(--flight-y) * -1)) rotate(7deg); }
  40% { transform: translate(var(--flight-x),calc(var(--flight-y) * -.3)) rotate(-6deg); }
  60% { transform: translate(var(--flight-x),calc(var(--flight-y) * -1)) rotate(-9deg); }
  80% { transform: translate(0,calc(var(--flight-y) * -.45)) rotate(5deg); }
}
@keyframes ghost-flight {
  0%,100% { transform: translate(0,0) rotate(4deg); }
  20% { transform: translate(calc(var(--flight-x) * -.15),calc(var(--flight-y) * -1)) rotate(-7deg); }
  42% { transform: translate(calc(var(--flight-x) * -1),calc(var(--flight-y) * -.25)) rotate(5deg); }
  65% { transform: translate(calc(var(--flight-x) * -1),calc(var(--flight-y) * -1)) rotate(8deg); }
  82% { transform: translate(calc(var(--flight-x) * -.15),calc(var(--flight-y) * -.3)) rotate(-5deg); }
}