/* =====================================================================
   hero.css — cinematic landing intro + animated "CS universe" hero
   Loaded only on public/index.php. Uses transform/opacity for speed.
   ===================================================================== */

/* ---------------- one-time cinematic intro overlay ---------------- */
.cspv-intro{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(circle at 50% 38%, #211a52 0%, #120f2e 45%, #07060f 100%);
  animation:introOut 1s cubic-bezier(.7,0,.3,1) 3s forwards;
}
.cspv-intro.gone{display:none}
@keyframes introOut{to{opacity:0;visibility:hidden;transform:scale(1.06)}}
/* moving aurora blobs */
.cspv-intro::before,.cspv-intro::after{
  content:"";position:absolute;width:60vw;height:60vw;border-radius:50%;filter:blur(70px);opacity:.5;
}
.cspv-intro::before{background:#7c3aed;top:-20%;left:-10%;animation:blob 7s ease-in-out infinite alternate}
.cspv-intro::after{background:#2563eb;bottom:-25%;right:-10%;animation:blob 8s ease-in-out infinite alternate-reverse}
@keyframes blob{to{transform:translate(40px,30px) scale(1.2)}}

.intro-stage{position:relative;text-align:center;color:#fff;z-index:2;padding:20px}
.intro-core{filter:drop-shadow(0 0 26px rgba(124,58,237,.7))}
.intro-core .ring{fill:none;stroke-width:1.6;transform-origin:150px 150px}
.intro-core .ring.dash{stroke-dasharray:6 10;animation:spin 9s linear infinite}
.intro-core .ring.dash.rev{animation:spin 12s linear infinite reverse}
.intro-core .seg{fill:none;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:560;stroke-dashoffset:560;
  transform-origin:150px 150px;animation:draw 1.3s ease forwards .15s}
.intro-core .dot{animation:pop .5s ease both}
.intro-core .glow{transform-origin:150px 150px;animation:pulse 2.4s ease-in-out infinite}
.intro-369{font:900 46px 'Segoe UI',sans-serif;fill:#fff;opacity:0;animation:fadeUp .7s ease .6s both}
@keyframes draw{to{stroke-dashoffset:120}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.08);opacity:1}}
@keyframes pop{0%{transform:scale(0);opacity:0}70%{transform:scale(1.3)}100%{transform:scale(1);opacity:1}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.intro-brand{font:800 30px 'Segoe UI',sans-serif;margin-top:18px;letter-spacing:.5px;
  opacity:0;animation:fadeUp .7s ease 1s both}
.intro-brand span{background:linear-gradient(90deg,#c4b5fd,#93c5fd);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent}
.intro-tag{font-size:16px;color:#c7d2fe;margin-top:10px;opacity:0;animation:fadeUp .7s ease 1.35s both}
.intro-count{margin-top:20px;font-size:15px;color:#a5b4fc;opacity:0;animation:fadeUp .7s ease 1.7s both}
.intro-count b{font-size:34px;color:#fff;background:linear-gradient(90deg,#a78bfa,#60a5fa);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:900;
  display:inline-block;vertical-align:-4px;margin-right:6px}
.intro-line{width:0;height:3px;margin:18px auto 0;border-radius:3px;
  background:linear-gradient(90deg,#7c3aed,#2563eb);animation:lineGrow 1.4s ease 1.9s forwards}
@keyframes lineGrow{to{width:230px}}
.intro-skip{position:absolute;bottom:26px;right:30px;background:rgba(255,255,255,.1);color:#e0e7ff;
  border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:8px 18px;font-size:13px;font-weight:700;
  cursor:pointer;z-index:3;backdrop-filter:blur(6px);opacity:0;animation:fadeUp .6s ease 1.4s both}
.intro-skip:hover{background:rgba(255,255,255,.2)}

/* ---------------- animated hero text reveal ---------------- */
.hero .reveal{opacity:0;animation:fadeUp .8s cubic-bezier(.2,.8,.2,1) both}
.hero .reveal.d1{animation-delay:3.1s}.hero .reveal.d2{animation-delay:3.25s}
.hero .reveal.d3{animation-delay:3.4s}.hero .reveal.d4{animation-delay:3.55s}.hero .reveal.d5{animation-delay:3.7s}
.count-up{font-variant-numeric:tabular-nums}

/* ---------------- animated "CS universe" hero graphic ---------------- */
.hero-universe{width:100%;max-width:460px;height:auto;display:block;margin:0 auto;
  opacity:0;animation:fadeUp 1s ease 3.3s both}
.hero-universe .uorbit{fill:none;stroke:#c7d2fe;stroke-width:1.2;opacity:.5}
.hero-universe .ogroup{transform-origin:230px 210px}
.hero-universe .ogroup.o1{animation:spin 24s linear infinite}
.hero-universe .ogroup.o2{animation:spin 34s linear infinite reverse}
.hero-universe .ogroup.o3{animation:spin 46s linear infinite}
.hero-universe .node{filter:drop-shadow(0 4px 8px rgba(37,99,235,.25))}
.hero-universe .node text{font:700 11px 'Segoe UI',sans-serif;fill:#1e293b}
.hero-universe .ucore{animation:pulse 3s ease-in-out infinite;transform-origin:230px 210px}
.hero-universe .uspark{animation:twinkle 2.6s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:1}}

@media (max-width:640px){
  .intro-369{font-size:38px}.intro-brand{font-size:24px}.intro-tag{font-size:14px}
}
/* accessibility: skip the whole cinematic intro for reduced-motion users */
@media (prefers-reduced-motion:reduce){
  .cspv-intro{display:none}
  .hero .reveal,.hero-universe{opacity:1;animation:none}
  .hero-universe .ogroup,.hero-universe .ucore,.intro-core *{animation:none}
}