:root{
  --bg:#0d0f15; --surface:#141822; --line:#232938; --text:#e7eaf2; --muted:#79829a;
  --accent:#8b7cff; --accent-2:#5eb5ff; --ok:#4ade9f;
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%}
body{
  background:radial-gradient(900px 500px at 50% 18%,#171b2b 0%,var(--bg) 70%);
  color:var(--text);font-family:'Sora',system-ui,sans-serif;
  display:grid;place-items:center;padding:24px;overflow-x:hidden;
}
.stage{width:min(640px,100%);display:flex;flex-direction:column;align-items:center;gap:28px}

/* Icône */
.icon-wrap{position:relative;width:96px;height:96px;display:grid;place-items:center;
  transition:transform 1s var(--ease)}
.icon-wrap img{width:96px;height:96px;object-fit:contain;position:relative;z-index:2;
  animation:float 4s ease-in-out infinite;filter:drop-shadow(0 10px 24px rgba(139,124,255,.35));transition:filter .8s}
.icon-wrap.no-img img{display:none}
.icon-wrap.no-img::after{content:"";width:56px;height:56px;border-radius:16px;z-index:2;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));animation:float 4s ease-in-out infinite}
.ring{position:absolute;inset:-14px;border-radius:50%;opacity:0;transition:opacity .6s;
  background:conic-gradient(from 0deg,transparent 0 60%,var(--accent) 85%,var(--accent-2) 100%);
  -webkit-mask:radial-gradient(circle,transparent 62%,#000 63%);mask:radial-gradient(circle,transparent 62%,#000 63%)}
.halo{position:absolute;inset:-30px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(74,222,159,.35),transparent 65%)}
@keyframes float{50%{transform:translateY(-6px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{from{transform:scale(.7);opacity:.9}to{transform:scale(1.9);opacity:0}}

body[data-phase=build] .ring,body[data-phase=test] .ring{opacity:1;animation:spin 1.4s linear infinite}
body[data-phase=deploy] .ring{opacity:1;animation:spin .7s linear infinite}
body[data-phase=deploy] .icon-wrap{transform:translateY(-10px) scale(1.08)}
body[data-phase=live] .icon-wrap img{filter:drop-shadow(0 10px 28px rgba(74,222,159,.55))}
body[data-phase=live] .halo{animation:pulse 1.6s var(--ease) 2}

/* Éditeur */
.window{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.7);overflow:hidden;
  transition:opacity .8s var(--ease),transform .8s var(--ease)}
body[data-phase=live] .window{opacity:.45;transform:scale(.985)}
.bar{display:flex;align-items:center;gap:14px;padding:12px 16px;border-bottom:1px solid var(--line)}
.dots{display:flex;gap:6px}.dots i{width:10px;height:10px;border-radius:50%;background:#2b3245}
.file{font:12px 'JetBrains Mono',monospace;color:var(--muted)}
pre{padding:18px 20px;height:226px;font:13px/1.75 'JetBrains Mono',monospace;color:#c9d1e6;overflow:hidden;white-space:pre}
code{font:inherit}
.caret{display:inline-block;width:7px;height:15px;background:var(--accent);vertical-align:-3px;margin-left:1px;
  animation:blink 1s steps(1) infinite}
body:not([data-phase=write]) .caret{opacity:0;animation:none}
@keyframes blink{50%{opacity:0}}
.k{color:#b4a8ff}.s{color:#7fd9b0}.f{color:#7cc4ff}.c{color:#566079;font-style:italic}.n{color:#f0b27a}

/* Pipeline */
.pipeline{list-style:none;padding:0;width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pipeline li{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:center;opacity:.4;transition:opacity .5s}
.pipeline li.active,.pipeline li.done{opacity:1}
.dot{width:10px;height:10px;border-radius:50%;background:var(--line);transition:background .4s,box-shadow .4s}
.active .dot{background:var(--accent);box-shadow:0 0 0 5px rgba(139,124,255,.18)}
.done .dot{background:var(--ok);box-shadow:none}
.name{font-size:13px;font-weight:600}
.track{grid-column:1/-1;height:3px;border-radius:3px;background:var(--line);overflow:hidden}
.track i{display:block;height:100%;width:100%;transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,var(--accent),var(--accent-2))}
.done .track i{background:var(--ok)}

/* Textes d'état */
.log{font:12.5px 'JetBrains Mono',monospace;color:var(--muted);min-height:20px;transition:opacity .3s}
.live{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--ok);
  position:absolute;opacity:0;transform:translateY(8px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.live span{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(74,222,159,.6);animation:ping 1.6s infinite}
@keyframes ping{to{box-shadow:0 0 0 10px rgba(74,222,159,0)}}
body[data-phase=live] .live{opacity:1;transform:none;position:static}
body[data-phase=live] .log{display:none}

@media (max-width:520px){
  pre{font-size:11.5px;padding:14px}
  .pipeline{gap:10px}.name{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}