/* tap interactions: the SPOT (js/scenes/spot.js) and the trips (js/scenes/trips.js, js/tripart.js, js/backdrops.js) */

/* invisible hit shapes inside SVGs never bounce or glow themselves */
.car-hit.tap-pop, .tfire-hit.tap-pop, .tcamel-hit.tap-pop, .ahit.tap-pop, .ssun-hit.tap-pop, .sbird-hit.tap-pop, .tapple-hit.tap-pop { animation: none; }
.car-hit.tappable:hover, .tfire-hit.tappable:hover, .tcamel-hit.tappable:hover, .ahit.tappable:hover,
.ssun-hit.tappable:hover, .sbird-hit.tappable:hover, .tapple-hit.tappable:hover { filter: none; }
.car-hit:focus, .tfire-hit:focus, .tcamel-hit:focus, .ahit:focus, .ssun-hit:focus, .sbird-hit:focus { outline: none; }

/* ---- 9. the blue Swift: beep-beep, lights flash, a little hop on its springs ---- */
.car .car-flash { pointer-events: none; }
.car.honk .car-flash { animation: carFlash .55s ease-out; }
.car.honk svg { animation: carHonk .5s ease-out; }
.car.honk .car-tail { animation: carTail .55s ease-out; }
@keyframes carFlash { 0%, 100% { opacity: 0; } 12%, 30% { opacity: 1; } 42% { opacity: .1; } 55%, 72% { opacity: 1; } }
@keyframes carHonk { 0% { transform: none; } 25% { transform: translateY(-3%) scale(1.02, .98); } 55% { transform: translateY(0) scale(.99, 1.02); } 100% { transform: none; } }
@keyframes carTail { 0%, 100% { filter: none; } 20%, 70% { filter: brightness(1.6) drop-shadow(0 0 6px #ff4a5a); } }

/* ---- 10. Kalpa: a generous tap area over my head and the apple ---- */
.tapple-hit { width: calc(var(--u) * 11); height: calc(var(--u) * 14); bottom: calc(var(--feet) + var(--u) * 27);
  transform: translateX(-50%); pointer-events: none; border-radius: 50%; -webkit-tap-highlight-color: transparent; }
.tapple-hit:focus-visible { outline: 3px solid #ffd36b; outline-offset: 0; }

/* ---- 11. Jaisalmer night: sparks fly up, the flames leap; the camel turns to look ---- */
.tprop.night .tsparks { filter: drop-shadow(0 0 4px #ffb35c); }
.tprop.night .tspark { animation-name: tspark; animation-timing-function: cubic-bezier(.2, .6, .4, 1); animation-fill-mode: both; }
@keyframes tspark { 0% { transform: translate(0, 0); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)); opacity: 0; } }
.tprop.night .tfire .bd-flame { transform-origin: 50% 100%; }
.tprop.night.flare .tfire .bd-flame { animation: flameLeap 1.1s ease-out; }
.tprop.night.flare .fireglow { animation: glowLeap .9s ease-out; }
@keyframes flameLeap { 0% { transform: scale(1, 1); } 15% { transform: scale(1.3, 1.75); } 45% { transform: scale(1.18, 1.45); } 100% { transform: scale(1, 1); } }
@keyframes glowLeap { 0% { opacity: 1; transform: scale(1); } 25% { opacity: 1; transform: scale(1.15); } 100% { opacity: 1; transform: scale(1); } }
.tprop.night .tcamel-head { transform-box: fill-box; transform-origin: 0% 100%; }
.tprop.night.turn .tcamel-head { animation: camelTurn 2s ease-in-out; }
.tprop.night .tcamel-ear { transform-box: fill-box; transform-origin: 50% 100%; }
.tprop.night.turn .tcamel-ear { animation: earFlick .4s ease-in-out 2 alternate .3s; }
@keyframes camelTurn { 0% { transform: none; } 18% { transform: rotate(15deg); } 32% { transform: rotate(9deg); } 46%, 72% { transform: rotate(15deg); } 100% { transform: none; } }
@keyframes earFlick { to { transform: rotate(-30deg); } }

/* ---- 12. the clownfish home: they dart in to hide, peek out, then swim back out ---- */
.anemone-home .cf { transform-box: fill-box; transform-origin: 50% 50%; }
.anemone-home.hide .cf { animation: cfHide 3.2s cubic-bezier(.3, .7, .3, 1); }
.anemone-home.hide .cf:nth-of-type(2) { animation-delay: .06s; }
.anemone-home.hide .cf:nth-of-type(3) { animation-delay: .12s; }
@keyframes cfHide {
  0% { transform: none; opacity: 1; }
  12% { transform: translate(var(--hx), var(--hy)) scale(.45); opacity: .15; }
  52% { transform: translate(var(--hx), var(--hy)) scale(.45); opacity: .15; }
  60% { transform: translate(calc(var(--hx) * .7), calc(var(--hy) * .7)) scale(.7); opacity: 1; }   /* a peek */
  68% { transform: translate(calc(var(--hx) * .85), calc(var(--hy) * .85)) scale(.6); opacity: .6; }
  100% { transform: none; opacity: 1; }
}
.anemone-home .atent { transform-box: fill-box; transform-origin: 50% 100%; }
.anemone-home.hide .atent { animation: aClose 3.2s ease-in-out; }
@keyframes aClose { 0%, 100% { transform: none; } 12%, 52% { transform: scale(.82, .78); } 62% { transform: scale(.94, .92); } }

/* ---- 8. the SPOT: the sun flares warm, the birds take off ---- */
.prop.spot .sbird { transform-box: fill-box; transform-origin: 50% 50%; }
.prop.spot .sbird.fly { animation: birdFly 3.4s ease-in forwards; }
.prop.spot .sbird.fly path { transform-box: fill-box; transform-origin: 50% 100%; animation: flap .16s ease-in-out infinite alternate; }
@keyframes birdFly {
  0% { transform: none; opacity: 1; }
  55% { transform: translate(var(--fx, 320px), -260px) scale(.6); opacity: 0; }
  75% { transform: translate(0, -30px); opacity: 0; }
  100% { transform: none; opacity: 1; }
}
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(-.6); } }

@media (prefers-reduced-motion: reduce) {
  .car.honk svg, .anemone-home.hide .cf, .anemone-home.hide .atent, .tprop.night.turn .tcamel-head, .prop.spot .sbird.fly path { animation-duration: .01s; }
}