.loader {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at center, rgba(11, 13, 29, 0.95), rgba(3, 7, 17, 1));
  z-index: 2000;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

.loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader__core {
  text-align: center;
  width: min(360px, 90vw);
}

.loader__core h1 {
  font-size: clamp(1.3rem, 4vw, 2rem);
  margin: 10px 0 20px;
}

.loader__bar {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.1);
  overflow: hidden;
  margin-bottom: 12px;
}

.loader__bar-fill {
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  box-shadow: 0 0 22px var(--accent);
}

@keyframes pulse {
  0%, 100% { transform: scale(0.96); opacity: 0.78; }
  50% { transform: scale(1.04); opacity: 1; }
}

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

@keyframes drift {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(3deg); }
}

.hero__floating-card,
.card,
.final__content {
  animation: float 6s ease-in-out infinite;
}

.card:nth-child(2n) {
  animation-duration: 7.2s;
}

.ripple {
  position: fixed;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: rgba(255,255,255,0.28);
  animation: rippleOut 0.8s ease-out forwards;
  z-index: 1500;
}

@keyframes rippleOut {
  from { width: 6px; height: 6px; opacity: 0.8; }
  to { width: 220px; height: 220px; opacity: 0; }
}