@keyframes pulse-subtle {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ─── grapity animation library ─── */

@keyframes spin { to { transform: rotate(360deg); } }

@keyframes logo-glow {
  0%, 100% { filter: drop-shadow(0 0 3px #6366f188); }
  50% { filter: drop-shadow(0 0 10px #06b6d488); }
}
@keyframes logo-mark {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
.anim-logo { animation: logo-glow 2s ease-in-out infinite; }
.anim-logo .mark { animation: logo-mark 2s ease-in-out infinite; }

@keyframes logo-ring {
  0% { r: 10; opacity: 0.55; stroke-width: 1.5; }
  100% { r: 20; opacity: 0; stroke-width: 0.5; }
}
.anim-logo .logo-ring {
  animation: logo-ring 2.5s ease-out infinite;
}

@keyframes dot-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.4; }
  40% { transform: translateY(-4px); opacity: 1; }
}
.anim-waiting .dot {
  animation: dot-bounce 1.2s ease-in-out infinite;
  transform-origin: center;
}
.anim-waiting .dot:nth-child(2) { animation-delay: 0.2s; }
.anim-waiting .dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes check-draw {
  0%   { stroke-dashoffset: 40; opacity: 0; }
  10%  { opacity: 1; }
  40%  { stroke-dashoffset: 0; opacity: 1; }
  70%  { stroke-dashoffset: 0; opacity: 1; }
  85%  { stroke-dashoffset: 40; opacity: 0; }
  100% { stroke-dashoffset: 40; opacity: 0; }
}
@keyframes ring-pop {
  0% { r: 0; opacity: 0.8; stroke-width: 3; }
  100% { r: 20; opacity: 0; stroke-width: 0.5; }
}
.anim-success .check {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: check-draw 3s ease-in-out infinite;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.anim-success .ring-pulse {
  fill: none;
  animation: ring-pop 1.4s ease-out 0.3s infinite;
}

@keyframes shield-pulse {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.35; }
}
@keyframes slash-draw {
  0% { stroke-dashoffset: 20; }
  50% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -20; }
}
@keyframes blocked-glow {
  0%, 100% { filter: drop-shadow(0 0 2px #f43f5e44); }
  50% { filter: drop-shadow(0 0 6px #f43f5e88); }
}
.anim-blocked { animation: blocked-glow 2s ease-in-out infinite; }
.anim-blocked .shield-bg { animation: shield-pulse 2s ease-in-out infinite; }
.anim-blocked .slash {
  stroke-dasharray: 20;
  animation: slash-draw 2s ease-in-out infinite;
  fill: none;
  stroke-linecap: round;
}

@keyframes arrow-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5px); }
}
@keyframes dot-travel-up {
  0% { offset-distance: 0%; opacity: 0; }
  10% { opacity: 1; }
  85% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
.anim-upload .arrow-group {
  animation: arrow-bob 1.2s ease-in-out infinite;
  transform-origin: center;
}
.anim-upload .trail-dot {
  offset-path: path('M16 26 L16 8');
  animation: dot-travel-up 1.2s ease-in infinite;
}
.anim-upload .trail-dot:nth-child(2) { animation-delay: 0.4s; }
.anim-upload .trail-dot:nth-child(3) { animation-delay: 0.8s; }

@keyframes rocket-rise {
  0%, 100% { transform: translateY(0) rotate(-45deg); }
  50% { transform: translateY(-2px) rotate(-45deg); }
}
@keyframes exhaust {
  0% { offset-distance: 0%; opacity: 1; transform: scale(1); }
  100% { offset-distance: 100%; opacity: 0; transform: scale(0.3); }
}
.anim-deploy .rocket {
  animation: rocket-rise 1s ease-in-out infinite;
  transform-origin: center;
}
.anim-deploy .exhaust-dot {
  offset-path: path('M16 20 Q14 24 10 28');
  animation: exhaust 0.8s ease-in infinite;
}
.anim-deploy .exhaust-dot:nth-child(2) { animation-delay: 0.27s; }
.anim-deploy .exhaust-dot:nth-child(3) { animation-delay: 0.54s; }

@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes orbit-rev { to { transform: rotate(-360deg); } }
@keyframes center-pulse {
  0%, 100% { opacity: 0.4; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1); }
}
.anim-sync .orbit-group {
  transform-origin: 16px 16px;
  animation: orbit 1.8s linear infinite;
}
.anim-sync .orbit-group-rev {
  transform-origin: 16px 16px;
  animation: orbit-rev 2.4s linear infinite;
}
.anim-sync .center-dot {
  animation: center-pulse 1.8s ease-in-out infinite;
  transform-origin: 16px 16px;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.animate-pulse-subtle {
  animation: pulse-subtle 2s ease-in-out infinite;
}

.hero-gradient {
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99, 102, 241, 0.22), transparent),
    radial-gradient(ellipse 60% 40% at 30% 60%, rgba(6, 182, 212, 0.08), transparent),
    radial-gradient(ellipse 50% 30% at 70% 80%, rgba(99, 102, 241, 0.06), transparent);
}

.grid-overlay {
  background-image:
    linear-gradient(rgba(99, 102, 241, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(99, 102, 241, 0.03) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 50% 50% at 50% 40%, black 30%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 40%, black 30%, transparent 70%);
}

.gradient-text {
  background: linear-gradient(135deg, #6366f1 0%, #06b6d4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.problem-card {
  transition: border-color 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.problem-card:hover {
  border-color: rgba(99, 102, 241, 0.3);
  transform: translateY(-2px);
  background-color: rgba(18, 18, 26, 0.8);
}

.problem-card-highlight {
  border-left: 2px solid rgba(99, 102, 241, 0.6);
}

.layer-card {
  transition: border-color 0.2s ease, transform 0.15s ease;
}

.layer-card:hover {
  border-color: rgba(99, 102, 241, 0.3);
  transform: translateX(4px);
}

.layer-card-upcoming {
  transition: border-color 0.2s ease, transform 0.15s ease;
}

.layer-card-upcoming:hover {
  border-color: rgba(99, 102, 241, 0.2);
  transform: translateX(2px);
}

.step-card {
  transition: border-color 0.2s ease;
}

.step-card:hover {
  border-color: rgba(99, 102, 241, 0.3);
}

.step-connector {
  position: relative;
}

.step-connector::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -24px;
  transform: translateX(-50%);
  width: 2px;
  height: 24px;
  background: linear-gradient(to bottom, rgba(99, 102, 241, 0.4), rgba(99, 102, 241, 0.1));
}

.step-connector:last-child::after {
  display: none;
}

.step-arrow {
  text-align: center;
  color: rgba(99, 102, 241, 0.4);
  font-size: 1.25rem;
  line-height: 1;
  padding: 8px 0;
}

.pricing-card {
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.pricing-card:hover {
  transform: translateY(-4px);
}

.pricing-card:hover {
  border-color: rgba(255, 255, 255, 0.15);
}

.pricing-card-featured {
  border-color: rgba(99, 102, 241, 0.4);
}

.pricing-card-featured:hover {
  border-color: rgba(99, 102, 241, 0.6);
}

.deep-dive-card {
  transition: border-color 0.2s ease, background-color 0.2s ease;
}

.deep-dive-card:hover {
  border-color: rgba(99, 102, 241, 0.3);
  background-color: rgba(18, 18, 26, 0.8);
}

.breaking-badge {
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.safe-badge {
  background: rgba(34, 197, 94, 0.1);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.2);
}

.flow-arrow {
  color: rgba(99, 102, 241, 0.5);
}

html {
  scroll-behavior: smooth;
}

::selection {
  background-color: rgba(99, 102, 241, 0.3);
  color: #e4e4ed;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #0a0a0f;
}

::-webkit-scrollbar-thumb {
  background-color: #1e1e2e;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #2a2a3e;
}

@media (max-width: 640px) {
  .grid-overlay {
    background-size: 32px 32px;
  }
}