/* ══════════════════════════════════════════════════════════════
   Additional CSS variables needed in style.css
══════════════════════════════════════════════════════════════ */

/* These custom properties are used via JS */
:root {
  --white-25: rgba(255,255,255,0.25);
  --white-30: rgba(255,255,255,0.3);
  --white-50: rgba(255,255,255,0.5);
  --white-60: rgba(255,255,255,0.6);
}

/* Shake animation for form validation */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  15%, 45%, 75% { transform: translateX(-8px); }
  30%, 60%, 90% { transform: translateX(8px); }
}
.shake {
  animation: shake 0.5s ease-in-out;
}

/* Loading spinner for submit button */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.btn-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(8,15,26,0.3);
  border-top-color: var(--navy);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  flex-shrink: 0;
}

/* Glow pulse on brand cards hover */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(77,157,224,0.15); }
  50%       { box-shadow: 0 0 40px rgba(77,157,224,0.3); }
}

/* Active nav link highlight */
.nav__link.active {
  color: var(--cs-blue) !important;
}

/* Subscribe success state */
.content-hub__form.success .content-hub__input {
  border-color: var(--cs-blue);
  background: rgba(77,157,224,0.04);
}

/* Typing cursor blink in hero */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.cursor {
  display: inline-block;
  width: 3px;
  height: 1em;
  background: var(--cs-blue);
  margin-left: 4px;
  vertical-align: text-bottom;
  animation: blink 1s step-end infinite;
}