/* mounib.ca : page personnelle, animation « circuit + console » */
:root{--bg:#07080b;--violet:#a78bfa;--cyan:#67e8f9;--dim:#5d6174}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);overflow:hidden;color:var(--dim);font:500 12px/1 "JetBrains Mono",ui-monospace,Menlo,monospace;-webkit-font-smoothing:antialiased}
#fx{position:fixed;inset:0;width:100%;height:100%;display:block}
.scan{position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px);mix-blend-mode:screen}
.scan::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 45%,rgba(0,0,0,.65))}

/* Cœur : logo console au centre */
.core{position:fixed;left:50%;top:50%;width:clamp(150px,22vmin,220px);aspect-ratio:1;transform:translate(-50%,-50%);display:grid;place-items:center}
.glow{position:absolute;inset:-40%;border-radius:50%;background:radial-gradient(circle,rgba(167,139,250,.22),rgba(103,232,249,.06) 40%,transparent 68%);animation:breathe 5s ease-in-out infinite}
.core.hit .glow{animation:breathe 5s ease-in-out infinite,hit .7s ease-out}
.ring{position:absolute;inset:0;width:100%;height:100%;fill:none}
.ring circle{stroke-width:.6;vector-effect:non-scaling-stroke}
.r1 circle{stroke:rgba(167,139,250,.55);stroke-dasharray:2 7}
.r1{animation:spin 40s linear infinite}
.r2{inset:-14%;width:128%;height:128%}
.r2 circle{stroke:rgba(103,232,249,.28);stroke-dasharray:120 40 8 40 60 335;stroke-linecap:round}
.r2{animation:spin 22s linear infinite reverse}
.r3{inset:-34%;width:168%;height:168%}
.r3 circle{stroke:rgba(255,255,255,.07)}
.logo{position:relative;width:46%;height:46%;overflow:visible;filter:drop-shadow(0 0 10px rgba(167,139,250,.45))}
.logo .d{fill:none;stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.logo .chev{stroke:var(--violet);animation:draw .7s .3s cubic-bezier(.6,0,.2,1) forwards}
.logo .em{stroke:#fff;animation:draw 1.1s .8s cubic-bezier(.6,0,.2,1) forwards}
.logo .cur{fill:var(--violet);opacity:0;animation:on .01s 1.9s forwards,blink 1.05s 1.9s steps(1) infinite}

footer{position:fixed;left:0;right:0;bottom:max(22px,env(safe-area-inset-bottom));text-align:center;letter-spacing:.32em;color:var(--dim);opacity:0;animation:fade 1s 2.2s forwards}

@keyframes draw{to{stroke-dashoffset:0}}
@keyframes on{to{opacity:1}}
@keyframes blink{50%{opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes breathe{50%{transform:scale(1.08);opacity:.85}}
@keyframes hit{0%{filter:brightness(1.9)}100%{filter:brightness(1)}}
@keyframes fade{to{opacity:1}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important}
  .logo .d{stroke-dashoffset:0}.logo .cur,footer{opacity:1}
}