/* ============================================================
   JARVIS : écran de démarrage holographique.
   Réacteur incliné en perspective, arc de progression orange,
   anneau segmenté, capsules d'étapes réelles (session, noyau, GitHub, missions, mémoire).
   ============================================================ */

.loader { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; overflow: hidden; background: radial-gradient(ellipse 70% 60% at 45% 50%, rgba(10, 40, 52, 0.55), rgba(1, 6, 10, 0.94) 70%), #01060a; transition: opacity 0.6s var(--ease), visibility 0.6s; }
.loader.hidden { display: grid !important; opacity: 0; visibility: hidden; pointer-events: none; }
.loader::before, .loader::after { content: none; }

/* Sol en grille perspective */
.loader__floor { position: absolute; left: -20%; right: -20%; bottom: -30%; height: 90%; transform: perspective(700px) rotateX(64deg); transform-origin: 50% 0; background: linear-gradient(rgba(99, 231, 255, 0.14) 1px, transparent 1px), linear-gradient(90deg, rgba(99, 231, 255, 0.14) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask: radial-gradient(ellipse 60% 70% at 50% 10%, #000, transparent 75%); mask: radial-gradient(ellipse 60% 70% at 50% 10%, #000, transparent 75%); animation: loaderFloor 6s linear infinite; }
@keyframes loaderFloor { to { background-position: 0 64px, 0 0; } }

.loader__stage { position: relative; display: flex; align-items: center; gap: clamp(20px, 5vw, 80px); perspective: 1400px; }

/* ---------- Réacteur ---------- */
.loader__reactor { --p: 0; --size: min(52vh, 440px); position: relative; width: var(--size); height: var(--size); transform-style: preserve-3d; transform: rotateX(38deg) rotateY(-16deg) rotateZ(8deg); }
.loader__reactor > i { position: absolute; border-radius: 50%; }
.loader__ring--outer { inset: 0; border: 2px solid rgba(220, 245, 255, 0.55); box-shadow: 0 0 22px rgba(99, 231, 255, 0.25), inset 0 0 22px rgba(99, 231, 255, 0.12); }
.loader__ring--glow { inset: -4%; border: 1px solid rgba(255, 170, 60, 0.35); transform: translateZ(-30px); animation: spin 30s linear infinite reverse; }
.loader__segments { inset: 6%; background: repeating-conic-gradient(from -90deg, rgba(255, 196, 60, 0.95) 0 7deg, transparent 7deg 12deg); -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%, #000 67%, transparent 68%); mask: radial-gradient(circle, transparent 60%, #000 61%, #000 67%, transparent 68%); opacity: 0.18; transform: translateZ(18px); }
.loader__segments--lit { opacity: 1; filter: drop-shadow(0 0 6px rgba(255, 196, 60, 0.7)); clip-path: inset(0); -webkit-mask: radial-gradient(circle, transparent 60%, #000 61%, #000 67%, transparent 68%), conic-gradient(from -90deg, #000 calc(var(--p) * 1turn), transparent 0); -webkit-mask-composite: source-in; mask: radial-gradient(circle, transparent 60%, #000 61%, #000 67%, transparent 68%), conic-gradient(from -90deg, #000 calc(var(--p) * 1turn), transparent 0); mask-composite: intersect; }
.loader__ring--mid { inset: 18%; background: repeating-conic-gradient(rgba(99, 231, 255, 0.4) 0 1deg, transparent 1deg 10deg); -webkit-mask: radial-gradient(circle, transparent 69%, #000 70%, #000 72%, transparent 73%); mask: radial-gradient(circle, transparent 69%, #000 70%, #000 72%, transparent 73%); transform: translateZ(34px); animation: spin 14s linear infinite; }
.loader__arc { inset: 22%; background: conic-gradient(from -90deg, #ff8a2c calc(var(--p) * 1turn), rgba(255, 138, 44, 0.08) 0); -webkit-mask: radial-gradient(circle, transparent 57%, #000 58%, #000 70%, transparent 71%); mask: radial-gradient(circle, transparent 57%, #000 58%, #000 70%, transparent 71%); filter: drop-shadow(0 0 14px rgba(255, 138, 44, 0.75)); transform: translateZ(52px); }
.loader__hex { inset: 30%; background: radial-gradient(circle at 50% 50%, rgba(99, 231, 255, 0.18) 1.4px, transparent 1.6px) 0 0 / 10px 9px, radial-gradient(circle, rgba(8, 30, 40, 0.9), rgba(2, 10, 16, 0.95)); border: 1px solid rgba(220, 245, 255, 0.4); box-shadow: inset 0 0 30px rgba(99, 231, 255, 0.15); transform: translateZ(60px); }
.loader__core { position: absolute; inset: 30%; display: grid; place-content: center; justify-items: center; gap: 2px; text-align: center; transform: translateZ(70px); }
.loader__core small, .loader__core span { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(220, 245, 255, 0.78); }
.loader__core b { font-family: var(--font-mono); font-size: clamp(40px, 8vh, 72px); font-weight: 600; line-height: 1; color: #fff4e6; text-shadow: 0 0 18px rgba(255, 150, 60, 0.8), 0 0 40px rgba(255, 120, 40, 0.4); font-variant-numeric: tabular-nums; }
.loader__core b::after { content: "%"; margin-left: 2px; font-size: 0.4em; color: rgba(255, 220, 190, 0.8); }
.loader--ok .loader__core b::after { content: none; }
.loader--ok .loader__arc { filter: drop-shadow(0 0 22px rgba(255, 150, 60, 0.95)); }
.loader--error .loader__arc { background: conic-gradient(from -90deg, #ff5c6c calc(var(--p) * 1turn), rgba(255, 92, 108, 0.1) 0); filter: drop-shadow(0 0 14px rgba(255, 92, 108, 0.7)); }

/* ---------- Capsules d'étapes ---------- */
.loader__slots { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; transform: rotateY(-22deg) rotateX(6deg); transform-origin: left center; }
.slot { position: relative; display: flex; align-items: center; gap: 14px; min-width: clamp(240px, 24vw, 320px); padding: 8px 22px 8px 8px; border: 2px solid rgba(220, 245, 255, 0.35); border-radius: 999px; background: rgba(3, 14, 21, 0.55); opacity: 0.55; transition: opacity 0.4s, border-color 0.4s, box-shadow 0.4s; }
.slot::after { content: ""; position: absolute; inset: 5px -8px -7px 6px; border: 1px solid rgba(255, 170, 60, 0.35); border-radius: 999px; pointer-events: none; }
.slot__icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 2px solid rgba(255, 196, 60, 0.6); color: #ffd28a; font-size: 18px; }
.slot__body { display: grid; gap: 1px; }
.slot__label { font-family: var(--font-mono); font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #eefcff; }
.slot__state { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(220, 245, 255, 0.62); }
.slot.is-active { opacity: 1; border-color: rgba(255, 196, 60, 0.85); box-shadow: 0 0 18px rgba(255, 170, 60, 0.35); }
.slot.is-active .slot__icon { animation: slotPulse 1s ease-in-out infinite; }
.slot.is-done { opacity: 1; border-color: rgba(220, 245, 255, 0.85); box-shadow: 0 0 16px rgba(99, 231, 255, 0.25); }
.slot.is-done .slot__icon { border-color: var(--cin-cyan); color: var(--cin-cyan); box-shadow: 0 0 12px rgba(99, 231, 255, 0.5); }
.slot.is-done .slot__state { color: #8ff0c4; }
@keyframes slotPulse { 50% { box-shadow: 0 0 16px rgba(255, 196, 60, 0.9); } }

.loader__caption { position: absolute; bottom: 5vh; left: 0; right: 0; text-align: center; font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase; color: rgba(184, 247, 255, 0.62); }

@media (max-width: 760px) {
  .loader__stage { flex-direction: column; gap: 26px; }
  .loader__reactor { --size: min(62vw, 300px); transform: rotateX(30deg) rotateZ(6deg); }
  .loader__slots { transform: none; gap: 10px; }
  .slot { min-width: 78vw; }
}
@media (prefers-reduced-motion: reduce) {
  .loader__floor, .loader__ring--glow, .loader__ring--mid, .slot.is-active .slot__icon { animation: none !important; }
}
html.no-motion .loader__floor, html.no-motion .loader__ring--glow, html.no-motion .loader__ring--mid, html.no-motion .slot.is-active .slot__icon { animation: none !important; }