/* „Jak powstaje wydruk 3D” - wspólna animacja (O mnie, Centrum Nauki → „Jak działa drukarka 3D?”): 5 faz jak w Centrum Nauki - pomysł (żarówka i szkic), projekt 3D (model z wymiarem),
   slicer (cięcie na warstwy i wysyłka), drukowanie (stół zjeżdża, licznik warstw), gotowy przedmiot (GOTOWE, rakieta startuje ze stołu).
   Pod spodem pasek faz podświetlany w rytm animacji. Inna niż drukarka przy zapisach (zamknięta obudowa, wyświetlacz). */
.p2 { position: relative; margin: 0 0 2rem; padding: 1.1rem 1.1rem 1rem; border-radius: 20px;
  --p2-line: color-mix(in srgb, var(--muted) 60%, transparent); --p2-ok: #22C55E;
  background: color-mix(in srgb, var(--blue) 4%, transparent); border: 1px solid color-mix(in srgb, var(--blue) 22%, transparent); }
body.light .p2 { background: rgba(255,255,255,.55); }
.p2::before { content: ''; position: absolute; top: 0; left: 8%; right: 8%; height: 2px; opacity: .8;
  background: linear-gradient(90deg, transparent, var(--blue) 30%, var(--purple) 70%, transparent); box-shadow: 0 0 10px 0 var(--blue); }
/* komputer: animacja nie na całą szerokość - cała ramka mieści się na ekranie laptopa 14" */
.p2-svg { display: block; width: 100%; max-width: 640px; margin: 0 auto; height: auto; overflow: hidden; }
.p2-fr { fill: color-mix(in srgb, var(--text) 4%, transparent); stroke: var(--p2-line); stroke-width: 1.4; }
body.light .p2-fr { fill: rgba(255,255,255,.8); }
.p2-shadow { fill: var(--text); opacity: .07; }
.p2-scr { stroke: color-mix(in srgb, var(--blue) 25%, transparent); stroke-width: 1; }
.p2-dot { fill: color-mix(in srgb, var(--blue) 28%, transparent); }
.p2-cam { fill: var(--p2-line); }
.p2-t { font: 700 10px 'Space Mono', monospace; letter-spacing: .08em; fill: var(--blue); }
.p2-small { font-size: 8px; fill: var(--muted); letter-spacing: .04em; }
/* fazy na monitorze (elementy pojawiają się po kolei) */
.p2-file, .p2-tools, .p2-dim, .p2-dimt, .p2-cad-win, .p2-cad-fill, .p2-nlay, .p2-ok { opacity: 0; transition: opacity .5s; }
.p2.is-model .p2-file, .p2.is-model .p2-tools, .p2.is-model .p2-dim, .p2.is-model .p2-dimt, .p2.is-model .p2-cad-win, .p2.is-model .p2-cad-fill { opacity: 1; }
.p2.is-slice .p2-nlay, .p2.is-sent .p2-ok { opacity: 1; }
.p2-tools rect { fill: color-mix(in srgb, var(--blue) 12%, transparent); stroke: color-mix(in srgb, var(--blue) 35%, transparent); stroke-width: 1; transition: fill .3s; }
.p2.is-model .p2-tools rect:nth-child(2), .p2.is-slice .p2-tools rect:nth-child(2) { fill: color-mix(in srgb, var(--blue) 40%, transparent); }
.p2.is-slice .p2-tools rect:nth-child(2) { fill: color-mix(in srgb, var(--blue) 12%, transparent); }
.p2.is-slice .p2-tools rect:nth-child(3) { fill: color-mix(in srgb, var(--purple) 45%, transparent); }
.p2-idea { transform-box: fill-box; transform-origin: center; opacity: 0; transform: scale(.6); transition: opacity .4s, transform .5s cubic-bezier(.34,1.56,.64,1); }
.p2.is-idea .p2-idea { opacity: 1; transform: scale(1); }
.p2.is-idea.is-sketch .p2-idea { opacity: 0; transform: scale(1.35); transition-duration: .7s; }
.p2-bulb { fill: color-mix(in srgb, #FFC233 30%, transparent); stroke: #E8A100; stroke-width: 1.6; stroke-linejoin: round; }
.p2-bulb-base, .p2-rays { fill: none; stroke: #E8A100; stroke-width: 1.8; stroke-linecap: round; }
.p2.is-idea .p2-rays { animation: p2-rays 1s ease-in-out infinite alternate; }
.p2.is-idea .p2-glow { animation: p2-glow 1s ease-in-out infinite alternate; }
.p2-cad { fill: none; stroke: var(--blue); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.p2.is-sketch .p2-cad { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s ease-in-out; }
.p2-cad-fill { fill: url(#p2m); fill-opacity: .14; }
.p2-cad-done { fill: url(#p2m); fill-opacity: .55; }
.p2-cad-win { fill: none; stroke: var(--blue); stroke-width: 1.3; }
.p2-dim { fill: none; stroke: var(--muted); stroke-width: 1; }
.p2-slices line { stroke: var(--purple); stroke-width: 1.2; opacity: 0; transition: opacity .2s; transition-delay: calc(var(--k) * 45ms); }
.p2.is-slice .p2-slices line { opacity: .85; }
.p2.is-printing .p2-slices line, .p2.is-done .p2-slices line { opacity: .3; transition-delay: 0s; }
.p2-slice { stroke: var(--purple); stroke-width: 1.6; filter: drop-shadow(0 0 3px var(--purple)); opacity: 0; transition: transform .5s linear, opacity .3s; }
.p2.is-printing .p2-slice { opacity: 1; }
/* wysyłanie */
.p2-flow { fill: none; stroke: color-mix(in srgb, var(--blue) 55%, transparent); stroke-width: 1.6; stroke-dasharray: 4 5; }
.p2-arrow { fill: none; stroke: var(--blue); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.p2-packet { fill: var(--blue); filter: drop-shadow(0 0 5px var(--blue)); opacity: 0; }
.p2.is-sending .p2-packet { animation: p2-send .5s ease-in-out infinite; }
.p2.is-sending .p2-flow { animation: p2-flow .5s linear infinite; }
/* drukarka */
.p2-state { transition: fill .3s; }
.p2-temp { fill: #FF6B35; }
.p2.is-done .p2-state, .p2.is-done .p2-temp { fill: var(--p2-ok); }
.p2-track { fill: color-mix(in srgb, var(--muted) 25%, transparent); }
.p2-bar { fill: var(--blue); transform-box: fill-box; transform-origin: left center; transform: scaleX(0); transition: transform .5s linear, fill .3s; }
.p2.is-done .p2-bar { fill: var(--p2-ok); }
.p2-glass { fill: color-mix(in srgb, var(--blue) 5%, transparent); stroke: color-mix(in srgb, var(--blue) 30%, transparent); stroke-width: 1; }
.p2-led { stroke: var(--blue); stroke-width: 2; stroke-linecap: round; opacity: .3; filter: drop-shadow(0 2px 6px var(--blue)); transition: opacity .4s, stroke .4s; }
.p2.is-heating .p2-led, .p2.is-printing .p2-led { opacity: .9; }
.p2.is-done .p2-led { stroke: var(--p2-ok); opacity: .9; filter: drop-shadow(0 2px 6px var(--p2-ok)); }
.p2-handle { fill: var(--p2-line); }
.p2-rod { stroke: color-mix(in srgb, var(--muted) 40%, transparent); stroke-width: 2.5; }
.p2-tube { fill: none; stroke: color-mix(in srgb, var(--blue) 50%, transparent); stroke-width: 2; stroke-linecap: round; }
.p2-fan { fill: none; stroke: var(--blue); stroke-width: 1.3; stroke-dasharray: 4 4.64; transform-box: fill-box; transform-origin: center; }
.p2.is-heating .p2-fan, .p2.is-printing .p2-fan { animation: p2-spin .6s linear infinite; }
.p2-hot { fill: #FF8A3D; opacity: 0; filter: drop-shadow(0 0 5px #FF6B35); transition: opacity .5s; }
.p2.is-heating .p2-hot { opacity: .5; } .p2.is-printing .p2-hot { opacity: .95; }
.p2-head, .p2-bed { transition: transform .5s linear; }
.p2-plate { fill: color-mix(in srgb, var(--muted) 30%, transparent); stroke: var(--p2-line); stroke-width: 1.2; }
.p2-refl { pointer-events: none; } body.light .p2-refl { opacity: .6; }
.p2-base { fill: color-mix(in srgb, var(--muted) 12%, transparent); }
.p2-lcd { fill: color-mix(in srgb, var(--blue) 18%, transparent); }
.p2-lcd-bar { fill: var(--blue); transition: width .5s linear; }
.p2-pwr { fill: var(--p2-ok); filter: drop-shadow(0 0 3px var(--p2-ok)); }
/* wydruk + start rakiety */
.p2-obj { transition: opacity .5s, filter .5s; }
.p2.is-done .p2-obj { filter: drop-shadow(0 0 8px color-mix(in srgb, var(--blue) 60%, transparent)); }
.p2-obj.fade { opacity: 0; }
.p2-lay { fill: url(#p2g); transform-box: fill-box; transform: scaleX(0); transition: transform .5s linear, filter .3s; }
.p2-lay:nth-child(odd) { transform-origin: left center; } .p2-lay:nth-child(even) { transform-origin: right center; }
.p2-lay.on { transform: scaleX(1); }
.p2-lay.cur { filter: brightness(1.35) drop-shadow(0 0 3px #FF8A3D); }
.p2-win { fill: #fff; stroke: color-mix(in srgb, #fff 60%, var(--blue)); stroke-width: 1.6; opacity: 0; transition: opacity .3s; }
body:not(.light) .p2-win { fill: #0D1220; }
.p2-win.on { opacity: 1; }
    .p2.is-ignite .p2-rocket { animation: p2-shake .12s linear infinite; }
.p2.is-launch .p2-rocket { animation: p2-launch 2.4s cubic-bezier(.6,0,.85,.4) forwards; }
.p2-flame { fill: url(#p2fire); opacity: 0; transform-box: fill-box; transform-origin: top center; transform: scaleY(.3); transition: opacity .3s, transform .3s; }
.p2.is-ignite .p2-flame { opacity: .9; transform: scaleY(.6); }
.p2.is-launch .p2-flame { opacity: 1; animation: p2-fire .1s linear infinite alternate; }
.p2-puffs circle { fill: color-mix(in srgb, var(--muted) 45%, transparent); opacity: 0; transform-box: fill-box; transform-origin: center; }
.p2.is-launch .p2-puffs circle { animation: p2-puff 1.1s ease-out forwards; }
.p2.is-launch .p2-puffs circle:nth-child(2) { animation-delay: .08s; } .p2.is-launch .p2-puffs circle:nth-child(3) { animation-delay: .15s; }
.p2.no-anim, .p2.no-anim * { transition: none !important; }
/* pasek faz */
.p2-steps { list-style: none; display: flex; gap: .55rem; max-width: 760px; margin: .9rem auto 0; padding: 0; }
.p2-steps li { position: relative; flex: 1 1 0; min-width: 0; text-align: center; padding: .65rem .35rem .6rem; border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--muted) 25%, transparent); background: color-mix(in srgb, var(--text) 3%, transparent);
  transition: border-color .35s, box-shadow .35s, transform .35s, background .35s; }
body.light .p2-steps li { background: rgba(255,255,255,.75); }
.p2-steps li:not(:last-child)::after { content: '›'; position: absolute; right: -.5rem; top: 50%; transform: translateY(-50%); z-index: 1;
  font: 700 1rem/1 'Space Grotesk', sans-serif; color: var(--muted); }
.p2-steps i { display: block; font-size: 1.05rem; margin-bottom: .35rem; color: var(--muted); transition: color .35s, transform .35s; }
.p2-steps b { display: block; font: 700 .8rem/1.25 'Space Grotesk', sans-serif; color: var(--text); }
.p2-steps small { display: block; margin-top: .2rem; font-size: .68rem; line-height: 1.3; color: var(--muted); }
.p2-steps li.is-done i { color: var(--p2-ok); }
.p2-steps li.is-active { border-color: var(--blue); transform: translateY(-3px);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 14%, transparent), 0 12px 26px -14px var(--blue); }
.p2-steps li.is-active i { color: var(--blue); transform: scale(1.18); }
.p2-live { display: none; }
@keyframes p2-flow { to { stroke-dashoffset: -9; } }
@keyframes p2-send { 0% { transform: translateX(0); opacity: 0; } 15%, 85% { opacity: 1; } 100% { transform: translateX(48px); opacity: 0; } }
@keyframes p2-spin { to { transform: rotate(360deg); } }
@keyframes p2-rays { from { opacity: .35; } to { opacity: 1; } }
@keyframes p2-glow { from { opacity: .5; } to { opacity: 1; } }
@keyframes p2-launch { from { transform: translateY(0); } to { transform: translateY(-250px); } }
@keyframes p2-shake { 0% { transform: translateX(-1px); } 50% { transform: translateX(1px); } 100% { transform: translateX(-1px); } }
@keyframes p2-fire { from { transform: scaleY(.9); } to { transform: scaleY(1.25); } }
@keyframes p2-puff { 0% { opacity: .9; transform: scale(.3); } 100% { opacity: 0; transform: scale(2.6); } }
@media (max-width: 760px) { .p2-steps small { display: none; } .p2-steps b { font-size: .72rem; } }
/* telefon: same ikony faz, nazwa aktywnej fazy pod spodem */
@media (max-width: 560px) {
  .p2 { padding: .8rem .6rem .8rem; }
  .p2-steps { gap: .9rem; justify-content: center; }
  .p2-steps li { flex: 0 0 auto; width: 42px; height: 42px; padding: 0; border-radius: 50%; display: grid; place-items: center; }
  .p2-steps li:not(:last-child)::after { right: -.72rem; font-size: .85rem; }
  .p2-steps i { margin: 0; font-size: .95rem; }
  .p2-steps b, .p2-steps small { display: none; }
  .p2-live { display: block; margin: .7rem 0 0; text-align: center; font-size: .82rem; color: var(--muted); }
  .p2-live b { font-family: 'Space Grotesk', sans-serif; color: var(--blue); }
}
@media (max-width: 380px) { .p2-steps { gap: .55rem; } .p2-steps li { width: 34px; height: 34px; } .p2-steps i { font-size: .82rem; } .p2-steps li:not(:last-child)::after { right: -.5rem; font-size: .7rem; } }