/* ===================================================================
   AlexIT — nucleul comun pentru scenele animate
   Layout de pagină, stage, comenzi Play/Pause/Replay, phasebar cu
   chip-uri clickabile, caption, intro de 3s, tranziția vignetei
   (dark/dead/act/lg/lgout), tranziția logo-ului (timing fix),
   badge-ul final și eticheta de scenariu pentru actele cu contrast.

   Fiecare scenă adaugă DOAR: desenul SVG propriu, CSS-ul fazelor sale
   specifice și STEPS-ul ei (vezi scene-core.js). Nu edita acest fișier
   pentru nevoi specifice unei singure scene — acolo intră în <style>
   local, sub „SPECIFIC SCENEI”.

   Convenția claselor puse pe :is(#s,[id^="s-"]) (rădăcina SVG) de fiecare scenă:
     intro     — secvența de deschidere (3s), identică peste tot
     dark      — vigneta se închide complet, FĂRĂ logo
     dead      — ca „dark”, dar pentru finalul unui act fără soluție
                 (rămâne închis; arată .lostmsg dacă scena o are)
     act       — logo-ul intră, vigneta se redeschide, apoi logo-ul
                 se retrage (0.25s apare, 0.95s complet, 1.75s se
                 redeschide imaginea, 2.15s se retrage)
     lg        — logo-ul rămâne retras, mic, sus
     lgout     — logo-ul iese din cadru
     bdg       — arată badge-ul final (ex: „operațional”)
     scnshow   — arată eticheta de scenariu (.scn) — doar la scenele
                 cu două acte (contrast mare); rămâne pornit cât timp
                 clasa e prezentă, indiferent cum se numesc actele
                 scenei (sc1/sc2, nb/bk etc.)

   Poziția de retragere a logo-ului diferă de la o scenă la alta, ca
   să nu se suprapună peste desen — se schimbă local prin variabila
   --logo-retract (vezi :is(#s,[id^="s-"]) la fiecare scenă).
   =================================================================== */

:root {
  --bg:#080e1a; --panel:#0d1526; --text:#e6edf7; --muted:#8296b4;
  --accent:#38bdf8; --ok:#34d399; --warn:#fbbf24; --fail:#f87171; --line:#22304a;
  --logo-retract: translate(0px,-114px) scale(.7);
}
:root:not([data-theme="light"]) { color-scheme:dark; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  padding:28px 16px 56px; }
.wrap { max-width:900px; margin:0 auto; }
h1 { font-size:19px; font-weight:600; margin:0 0 4px; }
.sub { color:var(--muted); font-size:13.5px; margin:0 0 24px; }

.stage { position:relative;
  background: radial-gradient(900px 380px at 50% 0%, rgba(56,189,248,.07), transparent 65%), var(--panel);
  border:1px solid var(--line); border-radius:16px; padding:6px; overflow:hidden; }
svg { display:block; width:100%; height:auto; }

/* ===== COMENZI PESTE FILM ===== */
.ctrl { position:absolute; left:14px; bottom:14px; display:flex; gap:8px; z-index:6;
        opacity:.35; transition:opacity .25s ease; }
.stage:hover .ctrl, .stage:focus-within .ctrl { opacity:1; }
.cbtn { width:34px; height:34px; padding:0; display:flex; align-items:center; justify-content:center;
  background:rgba(10,20,36,.82); color:var(--accent); border:1px solid rgba(56,189,248,.4);
  border-radius:50%; cursor:pointer; backdrop-filter:blur(3px);
  transition:background .2s ease, border-color .2s ease, transform .15s ease; }
.cbtn:hover { background:rgba(56,189,248,.16); border-color:rgba(56,189,248,.75); }
.cbtn:active { transform:scale(.93); }
.cbtn svg { width:15px; height:15px; display:block; }
@media (hover:none) { .ctrl { opacity:.85; } }

/* ===== BUTOANE DE FAZA ===== */
.phasebar { display:flex; gap:6px; margin-top:14px; flex-wrap:wrap; }
.chip { font-size:11.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line); padding:5px 11px; border-radius:999px; cursor:pointer;
  background:transparent; font-family:inherit; transition:all .3s ease; }
.chip:hover { color:var(--text); border-color:#3a4c6b; }
.chip.on { color:var(--accent); border-color:rgba(56,189,248,.45); background:rgba(56,189,248,.08); }
.chip.on.bad  { color:var(--fail); border-color:rgba(248,113,113,.45); background:rgba(248,113,113,.08); }
.chip.on.good { color:var(--ok); border-color:rgba(52,211,153,.45); background:rgba(52,211,153,.08); }
.chip.on.warn { color:var(--warn); border-color:rgba(251,191,36,.45); background:rgba(251,191,36,.08); }

.caption { margin-top:16px; min-height:80px; }
.caption h2 { font-size:18px; margin:0 0 6px; }
.caption p { margin:0; color:var(--muted); font-size:15px; line-height:1.6; max-width:62ch; }

text { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; }
.lbl { fill:var(--muted); font-size:9.5px; letter-spacing:.03em; }
.chassis { fill:#101b2e; stroke:#2a3c5c; stroke-width:1.4; transition:stroke .45s ease; }
.screen { fill:#16263f; transition:fill .45s ease; }
.grid { stroke:#16233a; stroke-width:.6; }
.cab { fill:none; stroke:#2a3c5c; stroke-width:1.6; stroke-linecap:round; transition:stroke .45s ease; }

/* led-uri: fiecare scenă își leagă propriile faze de acest keyframe */
@keyframes blink { 50% { opacity:.25 } }

/* ===== PAUZA ===== */
.stage.paused svg *, .stage.paused svg { animation-play-state:paused !important; }

/* ================= INTRO ================= */
.intro { opacity:0; pointer-events:none; }
:is(#s,[id^="s-"]).intro .intro { animation: introShow .01s both, introHide .55s ease 2.45s both; }
@keyframes introShow { to { opacity:1 } }
@keyframes introHide { to { opacity:0 } }

.intro-mark { opacity:0; transform-box:fill-box; transform-origin:center; }
:is(#s,[id^="s-"]).intro .intro-mark { animation: introMark .7s cubic-bezier(.34,1.4,.64,1) .15s both; }
@keyframes introMark { from { opacity:0; transform:scale(.6) } to { opacity:1; transform:scale(1) } }

.intro-t { opacity:0; }
:is(#s,[id^="s-"]).intro .intro-t { animation: introUp .65s cubic-bezier(.16,1,.3,1) .5s both; }
.intro-s { opacity:0; }
:is(#s,[id^="s-"]).intro .intro-s { animation: introUp .65s cubic-bezier(.16,1,.3,1) .78s both; }
@keyframes introUp { from { opacity:0; transform:translateY(12px) } to { opacity:1; transform:translateY(0) } }

.intro-rule { stroke-dasharray:120; stroke-dashoffset:120; opacity:0; }
:is(#s,[id^="s-"]).intro .intro-rule { animation: introRule .7s cubic-bezier(.16,1,.3,1) .95s both; }
@keyframes introRule { to { opacity:.8; stroke-dashoffset:0 } }

/* ================= VIGNETA ================= */
.vigwrap { opacity:0; pointer-events:none; }
.vig-hole { transform-box:fill-box; transform-origin:center; }
@keyframes vigOn { to { opacity:1 } }
@keyframes vigOff { to { opacity:0 } }
@keyframes vigBreathe { 0%,100% { opacity:.76 } 50% { opacity:1 } }
@keyframes vigCloseFull { from { transform:scale(1) } to { transform:scale(.001) } }
@keyframes vigOpenFull  { from { transform:scale(.001) } to { transform:scale(1) } }

/* faza intunecata - identica peste tot: cercul se inchide complet, fara logo */
:is(#s,[id^="s-"]).dark .vigwrap, :is(#s,[id^="s-"]).dead .vigwrap { animation: vigOn .4s ease both; }
:is(#s,[id^="s-"]).dark .vig, :is(#s,[id^="s-"]).dead .vig { animation: vigBreathe 1.05s ease-in-out infinite; }
:is(#s,[id^="s-"]).dark .vig-hole, :is(#s,[id^="s-"]).dead .vig-hole {
  animation: vigCloseFull 1.7s cubic-bezier(.4,0,.55,.25) both; }

/* mesaj de final pentru actele fara solutie (optional — doar daca scena are .lostmsg) */
.lostmsg { opacity:0; }
:is(#s,[id^="s-"]).dead .lostmsg { animation: lostIn .6s ease 1.45s both; }
@keyframes lostIn { to { opacity:1 } }

/* ================= LOGO — TRANZITIE UNIFICATA =================
   .act = momentul in care intra AlexIT, in toate scenele la fel:
   0.25s apare | 0.95s complet | 1.75s se redeschide imaginea | 2.15s se retrage */
.logo { opacity:0; transform-box:fill-box; transform-origin:center; transform:scale(.82); }
.logo-halo { opacity:0; }
.logoholder { transform-box:fill-box; transform-origin:center; transition: transform 1.1s cubic-bezier(.65,0,.2,1); }
@keyframes logoIn  { to { opacity:1; transform:scale(1) } }
@keyframes logoOut { from { opacity:1; transform:scale(1) } to { opacity:0; transform:scale(.9) } }
@keyframes halo { 0%,100% { opacity:.18 } 50% { opacity:.42 } }

:is(#s,[id^="s-"]).act .logo { animation: logoIn .7s cubic-bezier(.34,1.4,.64,1) .25s both; }
:is(#s,[id^="s-"]).act .logo-halo { animation: halo 2.2s ease-in-out .25s infinite; }
:is(#s,[id^="s-"]).act .vigwrap { opacity:1; animation: vigOff .9s ease-out 1.75s both; }
:is(#s,[id^="s-"]).act .vig { opacity:.9; animation:none; }
:is(#s,[id^="s-"]).act .vig-hole { animation: vigOpenFull .9s cubic-bezier(.16,1,.3,1) 1.75s both; }
:is(#s,[id^="s-"]).act .logoholder { transform: var(--logo-retract); transition-delay:2.15s; }

/* .lg = logo-ul ramane retras sus | .lgout = iese din cadru */
:is(#s,[id^="s-"]).lg .logo { opacity:1; transform:scale(1); }
:is(#s,[id^="s-"]).lg .logo-halo { animation: halo 2.2s ease-in-out infinite; }
:is(#s,[id^="s-"]).lg .logoholder { transform: var(--logo-retract); }
:is(#s,[id^="s-"]).lgout .logo { animation: logoOut .5s ease both; }
:is(#s,[id^="s-"]).lgout .logoholder { transform: var(--logo-retract); }

/* ================= BADGE FINAL ================= */
.badge { opacity:0; }
:is(#s,[id^="s-"]).bdg .badge { animation: pop .55s cubic-bezier(.34,1.56,.64,1) .7s both; }
@keyframes pop { 0%{opacity:0; transform:translateY(8px) scale(.92)} 100%{opacity:1; transform:translateY(0) scale(1)} }

/* ================= ETICHETA DE SCENARIU (doar acte cu contrast) ================= */
.scn { opacity:0; }
:is(#s,[id^="s-"]).scnshow .scn { animation: scnIn .5s ease .2s both; }
@keyframes scnIn { to { opacity:1 } }

@media (prefers-reduced-motion: reduce) { :is(#s,[id^="s-"]) * { animation:none !important; transition:none !important; } }