/* tap interactions for the early chapters: intro tree, birth ladybugs, the brother's neck, the school bell */

/* these animate themselves, so skip the shared "pressed" bounce (it would fight their transforms) */
.ptree-hit.tap-pop, .lbug-hit.tap-pop, .bro-head.tap-pop, .bro-neck.tap-pop, .sbell-hit.tap-pop { animation: none; }
.ptree-hit:hover, .lbug-hit:hover, .sbell-hit:hover { filter: none; }

/* the brother: the neck springs from its base; a bigger invisible target around his head for small screens */
.bro-neck { transform-origin: 50% 100%; }
.bro-head.tappable::after { content: ""; position: absolute; inset: -30% -35%; border-radius: 50%; }
.bro-neck.tappable::after { content: ""; position: absolute; inset: 0 -160%; }
.bro-neck::before { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .25s;
  background: repeating-linear-gradient(0deg, rgba(120, 60, 30, .22) 0 2px, transparent 2px 9px); }
.bro.boing .bro-neck::before { opacity: 1; }   /* faint coils while he boings */

/* the school bell (js/scenes/school.js) */
.sbell { position: absolute; bottom: var(--feet); width: calc(var(--u) * 16); height: calc(var(--u) * 50);
  transform: translateX(-50%); pointer-events: none; }
.sbell svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sbell-hit { cursor: pointer; }
.sbell .sb-wave { opacity: 0; }

@media (prefers-reduced-motion: reduce) { .bro-neck::before { transition: none; } }