/* == Existing == */
.glass-panel {
  background: rgba(17,17,17,0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.1);
}
.glow-effect { box-shadow: 0 0 20px rgba(0,242,255,0.3); }
.scan-line {
  position: absolute; top: 0; left: 0;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, #00f2ff, transparent);
  box-shadow: 0 0 10px #00f2ff;
}

/* == Keyframes == */
@keyframes fadeInUp { from{opacity:0;transform:translateY(40px)} to{opacity:1;transform:translateY(0)} }
@keyframes floatY   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes pulseGlow {
  0%,100%{box-shadow:0 0 8px rgba(0,219,231,0.35)}
  50%    {box-shadow:0 0 28px rgba(0,219,231,0.8),0 0 50px rgba(0,219,231,0.25)}
}
@keyframes scanMove   { 0%{top:0%} 100%{top:100%} }
@keyframes orbitSpin  { from{transform:translate(-50%,-50%) rotate(0deg)} to{transform:translate(-50%,-50%) rotate(360deg)} }
@keyframes gradPulse  { 0%,100%{opacity:0.3} 50%{opacity:0.65} }
@keyframes spin       { to{transform:rotate(360deg)} }

/* == Scroll reveal == */
.reveal {
  opacity:0; transform:translateY(32px);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-stagger>.reveal:nth-child(1){transition-delay:.05s}
.reveal-stagger>.reveal:nth-child(2){transition-delay:.15s}
.reveal-stagger>.reveal:nth-child(3){transition-delay:.25s}
.reveal-stagger>.reveal:nth-child(4){transition-delay:.35s}

/* == Hero entrance == */
.hero-animate{animation:fadeInUp .9s cubic-bezier(.16,1,.3,1) both}
.hero-delay-1{animation-delay:.05s}
.hero-delay-2{animation-delay:.18s}
.hero-delay-3{animation-delay:.32s}
.hero-delay-4{animation-delay:.46s}
.hero-delay-5{animation-delay:.60s}

/* == Platform nodes == */
.platform-node{animation:floatY 3.2s ease-in-out infinite}
.platform-node:nth-child(1){animation-delay:0s}
.platform-node:nth-child(2){animation-delay:.4s}
.platform-node:nth-child(3){animation-delay:.8s}
.platform-node:nth-child(4){animation-delay:1.2s}
.platform-node:nth-child(5){animation-delay:1.6s}
.platform-node:nth-child(6){animation-delay:2s}
.platform-node:nth-child(7){animation-delay:2.4s}
.node-available{animation:pulseGlow 2.5s ease-in-out infinite}

/* == Node states (scan / taken / reveal) == */
@keyframes nodeScanPulse {
  0%,100%{box-shadow:0 0 8px rgba(251,191,36,.5)}
  50%    {box-shadow:0 0 24px rgba(251,191,36,.9),0 0 44px rgba(251,191,36,.25)}
}
@keyframes nodeRedGlow {
  0%,100%{box-shadow:0 0 10px rgba(239,68,68,.45)}
  50%    {box-shadow:0 0 24px rgba(239,68,68,.85),0 0 44px rgba(239,68,68,.25)}
}
@keyframes nodeReveal {
  from{transform:scale(0.82);opacity:.5}
  to  {transform:scale(1);   opacity:1}
}
.node-scanning{animation:nodeScanPulse .5s ease-in-out infinite!important}
.node-taken   {animation:nodeRedGlow 2.5s ease-in-out infinite}
.node-reveal  {animation:nodeReveal .35s cubic-bezier(.16,1,.3,1) forwards}
.node-idle    {animation:none!important;box-shadow:none!important}

/* == Status badge == */
.node-badge{
  position:absolute;bottom:-4px;right:-4px;
  width:16px;height:16px;border-radius:50%;
  font-size:9px;font-weight:700;line-height:1;
  display:flex;align-items:center;justify-content:center;
  border:2px solid #131313;
  opacity:0;transform:scale(0);
  transition:opacity .2s ease,transform .3s cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.node-badge.show     {opacity:1;transform:scale(1)}
.node-badge.available{background:#00dbe7;color:#002022}
.node-badge.taken    {background:#ef4444;color:#fff}

/* == Orbit rings == */
.orbit-ring{position:absolute;top:50%;left:50%;border-radius:50%;border:1px solid rgba(0,242,255,.07);pointer-events:none}
.orbit-ring-1{width:560px;height:280px;animation:orbitSpin 22s linear infinite}
.orbit-ring-2{width:760px;height:380px;animation:orbitSpin 34s linear infinite reverse}
.orbit-ring-3{width:360px;height:180px;animation:orbitSpin 16s linear infinite}

/* == Scan line on hover == */
.group:hover .scan-line{animation:scanMove 2s linear infinite}

/* == Bg glow pulse == */
.bg-glow-pulse{animation:gradPulse 4s ease-in-out infinite}

/* == CTA button shimmer == */
.cta-btn{
  background-image:linear-gradient(105deg,#00f2ff 0%,#00f2ff 40%,rgba(255,255,255,.35) 50%,#00f2ff 60%,#00f2ff 100%);
  background-size:200% auto;
  transition:background-position .5s ease,transform .2s ease,box-shadow .2s ease;
}
.cta-btn:hover{background-position:right center;box-shadow:0 0 30px rgba(0,242,255,.5);transform:scale(1.04)}

/* == Spinner == */
.spinner{width:15px;height:15px;border:2px solid rgba(0,54,58,.3);border-top-color:#00363a;border-radius:50%;animation:spin .7s linear infinite;display:inline-block;flex-shrink:0}

/* == Search glow == */
.search-input:focus{box-shadow:0 0 0 2px rgba(0,242,255,.25),0 0 40px rgba(0,242,255,.12)}

/* == Gradient text == */
.gradient-text{background:linear-gradient(90deg,#00f2ff,#ebb2ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* == Toast == */
.toast{
  position:fixed;bottom:24px;right:24px;z-index:9999;
  padding:14px 18px;border-radius:10px;
  font-family:'Inter',sans-serif;font-size:14px;font-weight:500;
  display:flex;align-items:center;gap:10px;
  max-width:calc(100vw - 48px);
  box-shadow:0 8px 40px rgba(0,0,0,.5);
  transform:translateY(90px);opacity:0;pointer-events:none;
  transition:transform .4s cubic-bezier(.16,1,.3,1),opacity .4s ease;
}
.toast.show{transform:translateY(0);opacity:1;pointer-events:auto}
.toast.success{background:#0a2425;border:1px solid rgba(0,219,231,.45);color:#00dbe7}
.toast.error  {background:#2a0d0d;border:1px solid rgba(255,100,100,.4);color:#ffb4ab}

/* == Mobile menu == */
#mobile-menu{display:none}
#mobile-menu.open{display:block}

/* == Responsive section padding == */
.section-py{padding-top:64px;padding-bottom:64px}
@media(min-width:640px){.section-py{padding-top:120px;padding-bottom:120px}}