/* style.css — final visual */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

:root{
  --bg-1:#050505;
  --accent:#2ecc71;
  --accent-strong:#18b24f;
  --muted:#ffffff;
  --glass: rgba(255,255,255,0.03);
  --card-radius:18px;
  --ease: cubic-bezier(.2,.9,.2,1);
}

/* reset */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:linear-gradient(180deg,var(--bg-1),#000);font-family:'Orbitron',system-ui,-apple-system,'Segoe UI',Roboto,Arial;color:var(--muted);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}

/* loader */
#loader{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#000;z-index:9999}
.loader-ring{width:66px;height:66px;border-radius:50%;box-shadow:0 0 30px rgba(46,204,113,0.12) inset;position:relative}
.loader-ring::after{content:'';position:absolute;inset:6px;border-radius:50%;background:conic-gradient(rgba(46,204,113,0.95), rgba(255,255,255,0.06));transform:rotate(45deg);filter:blur(8px);opacity:0.95;animation:spin 900ms linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* bg canvas */
#bg-canvas{position:fixed;inset:0;z-index:-50;display:block}

/* wrapper + panel */
.wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:36px}
.panel{width:min(980px,96%);padding:36px;border-radius:var(--card-radius);background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));backdrop-filter: blur(8px) saturate(120%);box-shadow: 0 28px 100px rgba(0,0,0,0.75);border:1px solid rgba(46,204,113,0.06);text-align:center;position:relative;overflow:visible}

/* profile area */
.profile-block{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;margin-bottom:18px}
.profile-3d{width:200px;height:200px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;transform-style:preserve-3d;transition:transform .45s var(--ease), box-shadow .45s var(--ease);cursor:pointer;z-index:6}
.profile-img{width:180px;height:180px;border-radius:50%;object-fit:cover;border:4px solid var(--accent);box-shadow: 0 16px 40px rgba(46,204,113,0.08), inset 0 0 30px rgba(46,204,113,0.03);transform:translateZ(20px)}
.profile-aura{position:absolute;inset:-18px;border-radius:50%;filter:blur(36px);pointer-events:none;z-index:3;background:radial-gradient(circle at 40% 35%, rgba(46,204,113,0.26), rgba(46,204,113,0.09) 30%, transparent 62%);opacity:0;transition:transform .6s var(--ease),opacity .5s}
.profile-rim{position:absolute;inset:-6px;border-radius:50%;pointer-events:none;z-index:5;box-shadow:0 0 36px rgba(46,204,113,0.08) inset}

/* orbit canvas (slightly larger to keep dots ~10-15px away) */
.orbit-canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:220px;height:220px;pointer-events:none;z-index:4}

/* brand / title */
.head{margin-bottom:8px}
.brand{display:inline-flex;gap:.28rem;align-items:center;justify-content:center;font-weight:700;font-size:clamp(1.8rem,6vw,3.6rem);line-height:1;position:relative}
.brand .char{display:inline-block;opacity:0;transform:translateY(18px) rotateX(12deg) scale(.98);will-change:transform,opacity; text-shadow:0 0 12px rgba(46,204,113,0.12)}
.brand .char.accent{ color: var(--muted); text-shadow:0 0 20px rgba(46,204,113,0.2), 0 0 40px rgba(46,204,113,0.08) }
.subtitle{margin-top:6px;color:var(--muted);opacity:0.92;font-size:1.05rem;text-shadow:0 0 8px rgba(46,204,113,0.04);opacity:0;transition:opacity .5s var(--ease)}

/* links / buttons */
.links{display:flex;gap:14px;justify-content:center;margin-top:18px;flex-wrap:wrap;opacity:0;transition:opacity .5s var(--ease)}
.btn{position:relative;display:inline-flex;align-items:center;gap:12px;padding:12px 26px;border-radius:12px;text-decoration:none;color:var(--muted);font-weight:700;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:2px solid rgba(46,204,113,0.12);min-width:180px;overflow:visible;z-index:7;transition:transform .28s var(--ease), box-shadow .28s var(--ease)}
.btn-icon{width:20px;height:20px;filter:drop-shadow(0 6px 12px rgba(0,0,0,0.45))}
.btn-bg{position:absolute;inset:0;border-radius:12px;pointer-events:none;z-index:0}
.btn:hover{transform:translateY(-8px) scale(1.02);box-shadow:0 28px 80px rgba(46,204,113,0.12)}
.btn-primary{border-color:rgba(46,204,113,0.28)}
.btn-secondary{border-color:rgba(46,204,113,0.12);opacity:0.96}

/* ripple element created by JS */
.btn .ripple{position:absolute;border-radius:999px;transform:translate(-50%,-50%) scale(0);opacity:0.9;pointer-events:none;z-index:3;box-shadow:0 0 20px rgba(46,204,113,0.35)}

/* gloss sweep */
.btn::before{content:"";position:absolute;left:-40%;top:-30%;width:30%;height:160%;transform:skewX(-20deg);background:linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.02));opacity:0;transition:opacity .45s var(--ease), transform .45s var(--ease);z-index:1}
.btn:hover::before{opacity:0.12;transform:translateX(120%) skewX(-20deg)}

/* meta */
.meta{margin-top:18px;font-size:0.85rem;opacity:0.6}

/* entrance */
.panel{transform:translateY(10px);opacity:0;animation:panelIn .8s var(--ease) forwards .08s}
@keyframes panelIn{to{transform:none;opacity:1}}

/* responsive */
@media (max-width:720px){
  .panel{padding:18px}
  .orbit-canvas{width:200px;height:200px}
  .profile-3d{width:170px;height:170px}
  .profile-img{width:150px;height:150px}
  .brand{font-size:2.0rem}
  .btn{min-width:140px;padding:10px 18px}
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .panel,.brand .char,.btn,.profile-3d,#bg-canvas,.orbit-canvas{transition:none !important;animation:none !important}
  .btn:hover{transform:none;box-shadow:none}
  .btn .ripple{display:none}
}