/* Chapter 6: scene text, looping station animations, the solar panel lab and the energy chain builder. */

.ch6-note { font: 600 26px system-ui, sans-serif; fill: #cfd9ef; }
.ch6-note.gold { font-weight: 800; fill: #ffd166; }
.ch6-note.small { font-size: 22px; }
.ch6-chain { font: 700 22px system-ui, sans-serif; fill: #ffe7a8; }
.ch6-pole { font: 800 34px system-ui, sans-serif; fill: #fff; }
.ch6-g { font: 800 26px system-ui, sans-serif; fill: #fff; }

/* Dash periods in lesson.js all divide 600, so the loop restarts without a jump. */
.flow-dash, .photon-flow { animation: ch6-dash 8s linear infinite; }
.photon-flow { stroke-dasharray: 40 60; animation-duration: 3s; }
.e-flow { animation: ch6-electrons .7s linear infinite; }
.spin { transform-box: fill-box; transform-origin: center; animation: ch6-spin 2.6s linear infinite; }
.spin.slow { animation-duration: 24s; }
.puff { transform-box: fill-box; transform-origin: center; animation: ch6-puff 3s ease-out infinite; }
.coil-turn { transform-box: fill-box; transform-origin: center; animation: ch6-coil 1.3s ease-in-out infinite; }
.excite { transform-box: fill-box; transform-origin: center; animation: ch6-excite 1.6s ease-out infinite; }
.glow { animation: ch6-glow 2s ease-in-out infinite; }

@keyframes ch6-dash { to { stroke-dashoffset: -600; } }
@keyframes ch6-electrons { to { stroke-dashoffset: -40; } }
@keyframes ch6-spin { to { transform: rotate(360deg); } }
@keyframes ch6-puff {
  0% { transform: translateY(0) scale(.5); opacity: 0; }
  20% { opacity: .85; }
  100% { transform: translateY(-90px) scale(1.5); opacity: 0; }
}
@keyframes ch6-coil { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.12); } }
@keyframes ch6-excite {
  0%, 65% { transform: scale(1); fill: #74c0fc; }
  78% { transform: scale(1.7); fill: #fff; }
  100% { transform: scale(1); fill: #74c0fc; }
}
@keyframes ch6-glow { 0%, 100% { opacity: .28; } 50% { opacity: .5; } }

/* Switched-off stations and bulbs. */
.idle .spin, .idle .flow-dash, .idle .puff, .idle .photon-flow { animation-play-state: paused; }
.idle .run-only, .idle .glow, .idle .on-text, .off .glow { visibility: hidden; }
.idle .bulb-glass, .off .bulb-glass { fill: #5c6476; }
svg:not(.idle) .wire-off, svg:not(.idle) .off-text { display: none; }
.on-text { fill: #ffd166; }
.off-text { fill: #9fb4dd; }

/* Solar panel lab */
.lab-svg-text { font: 800 26px system-ui, sans-serif; fill: #fff; }
.lab-svg-note { font: 600 18px system-ui, sans-serif; fill: #cfd9ef; }
.lab-svg-note.dim { fill: #6f7f9f; font-size: 15px; }
.pl-stage { align-self: center; width: min(100%, 54cqw); border-radius: 12px; overflow: hidden; }
.pl-controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: max(6px, 1cqw) max(10px, 1.6cqw); }
.pl-weather .chip-btn { min-width: 6.5em; }
.pl-tick { color: var(--ok); font-weight: 800; }
.pl-meter { display: flex; align-items: center; gap: .5em; font-weight: 700; color: #cfd9ef; }
.pl-meter-bar { display: block; width: 7em; height: .8em; border-radius: .4em; background: rgba(255, 255, 255, .12); overflow: hidden; }
.pl-meter-fill { display: block; width: 0; height: 100%; background: var(--gold); transition: width .2s; }
.pl-meter-text { min-width: 7.5em; }
.pl-question { display: flex; flex-direction: column; align-items: center; gap: max(6px, 1cqw); width: 100%; }
.pl-question[hidden] { display: none; }
.pl-options { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.pl-options .option { width: auto; text-align: center; font-weight: 700; }
.chip-btn.hint { box-shadow: 0 0 0 3px var(--gold); }

/* Energy chain builder */
.cb-tabs .chip-btn { min-width: 6.5em; }
.cb-tabs .chip-btn.correct { animation: none; }
.cb-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: max(8px, 1.4cqw); align-items: start; width: 100%; }
.cb-left { display: flex; flex-direction: column; align-items: center; gap: max(4px, .6cqw); }
.cb-picture { width: 86%; }
.cb-picture svg { display: block; width: 100%; height: auto; border-radius: 12px; }
.cb-chain { display: flex; flex-direction: column; align-items: stretch; width: 100%; }
.cb-slot {
  padding: .3em .8em;
  border: 2px dashed rgba(255, 255, 255, .35);
  border-radius: .7em;
  text-align: center;
  font-weight: 700;
  color: rgba(255, 255, 255, .55);
}
.cb-slot.next { border: 2px solid var(--gold); color: var(--gold); }
.cb-slot.filled { border: 2px solid var(--ok); background: #1f5a3a; color: #fff; animation: land .35s ease-out; }
.cb-arrow { text-align: center; font-weight: 800; color: var(--gold); line-height: 1.1; }
.cb-pool { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: max(6px, .9cqw); }
.cb-tile { text-align: center; font-weight: 700; font-size: .95em; padding: .5em .6em; }

@container (max-width: 620px) {
  .pl-stage { width: 100%; }
  .cb-main { grid-template-columns: 1fr; }
  .cb-picture { width: 75%; }
}

@media (prefers-reduced-motion: reduce) {
  .flow-dash, .photon-flow, .e-flow, .spin, .puff, .coil-turn, .excite, .glow { animation: none; }
}