/* Chapter 2: falling pins, heating glow, flames and the rod lab. */

.falling-pin { transform-box: fill-box; transform-origin: center; }
[data-el].on .falling-pin { animation: pin-fall .9s ease-in both; animation-delay: var(--d, 0s); }
@keyframes pin-fall {
  from { transform: none; opacity: 1; }
  to { transform: translateY(240px) rotate(35deg); opacity: 0; }
}

.glow-bar { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); }
[data-el].on .glow-bar { animation: rod-heat 5s linear forwards; }
@keyframes rod-heat { to { transform: scaleX(1); } }

.flame { transform-box: fill-box; transform-origin: center bottom; animation: flicker .25s ease-in-out infinite alternate; }
@keyframes flicker { to { transform: scaleY(1.08) scaleX(.95); } }

.ion-plus { font: 800 40px system-ui, sans-serif; fill: #7a1010; }

.rodlab svg { overflow: visible; }
.lab-pin { transform-box: fill-box; transform-origin: center; transition: transform .5s ease-in, opacity .5s; }
.lab-pin.dropped { transform: translateY(70px) rotate(25deg); opacity: .25; }

@media (prefers-reduced-motion: reduce) {
  .flame, [data-el].on .falling-pin, [data-el].on .glow-bar { animation: none; }
  [data-el].on .glow-bar { transform: scaleX(1); }
}