/* ═══════════════════════════════════════════════════════════
   PART 04 — Smiles, blush, heart eyes  (t = 27.5s)
═══════════════════════════════════════════════════════════ */

@keyframes smileAppear { from { opacity: 0; } to { opacity: 1; } }
@keyframes blushAppear  { from { opacity: 0; } to { opacity: 1; } }
@keyframes eyesHide     { from { opacity: 1; } to { opacity: 0; } }
@keyframes heartPop {
  0%   { opacity: 0; transform: scale(0);    }
  55%  { opacity: 1; transform: scale(1.35); }
  100% { opacity: 1; transform: scale(1);    }
}
@keyframes heartPulse {
  0%, 100% { transform: scale(1);    }
  50%       { transform: scale(1.2);  }
}

/* ── Both smile ─────────────────────────────────────────── */
body.scenes-started #stage #s3-boy  .mouth.smile,
body.scenes-started #stage #s3-girl .mouth.smile {
  animation: smileAppear 0.5s 27.5s ease-out both;
}

/* ── Both blush ─────────────────────────────────────────── */
body.scenes-started #stage #s3-boy  .blush,
body.scenes-started #stage #s3-girl .blush {
  animation: blushAppear 0.8s 27.5s ease-out both;
}

/* ── Boy: normal eyes fade out as hearts pop in ─────────── */
body.scenes-started #stage #s3-boy .eye {
  animation: eyesHide 0.3s 27.5s ease-out both;
}

/* ── Boy: heart eyes appear then pulse ─────────────────── */
#s3-boy .heart-eye {
  transform-box: fill-box;
  transform-origin: center;
}
body.scenes-started #stage #s3-boy .heart-eye {
  animation:
    heartPop   0.5s 27.5s ease-out     both,
    heartPulse 0.9s 28s   ease-in-out  infinite;
}