/* =============================================
   Corrupt Backup Repair — Animations
   cb- prefix on all classes/IDs
   ============================================= */

/* === KEYFRAMES === */
@keyframes cb-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

@keyframes cb-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes cb-slide-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes cb-slide-in-right {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes cb-scale-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes cb-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(61,139,255,0); }
  50%       { box-shadow: 0 0 0 10px rgba(61,139,255,0.12); }
}

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

@keyframes cb-spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes cb-progress-fill {
  from { width: 0%; }
  to   { width: var(--cb-target-width, 80%); }
}

@keyframes cb-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes cb-type-cursor {
  0%, 100% { border-right-color: var(--cb-accent); }
  50%       { border-right-color: transparent; }
}

@keyframes cb-bg-pan {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes cb-orbit {
  from { transform: rotate(0deg) translateX(60px) rotate(0deg); }
  to   { transform: rotate(360deg) translateX(60px) rotate(-360deg); }
}

/* === ANIMATION UTILITY CLASSES === */

.cb-anim-fade-in {
  animation: cb-fade-in 0.7s ease forwards;
}

.cb-anim-slide-up {
  animation: cb-slide-up 0.7s ease forwards;
}

.cb-anim-scale-in {
  animation: cb-scale-in 0.5s ease forwards;
}

.cb-anim-float {
  animation: cb-float 3.5s ease-in-out infinite;
}

.cb-anim-pulse {
  animation: cb-pulse-glow 2.5s ease-in-out infinite;
}

.cb-anim-spin {
  animation: cb-spin-slow 12s linear infinite;
}

/* Staggered entrance delays */
.cb-delay-0  { animation-delay: 0s; }
.cb-delay-1  { animation-delay: 0.1s; }
.cb-delay-2  { animation-delay: 0.2s; }
.cb-delay-3  { animation-delay: 0.3s; }
.cb-delay-4  { animation-delay: 0.4s; }
.cb-delay-5  { animation-delay: 0.5s; }
.cb-delay-6  { animation-delay: 0.6s; }
.cb-delay-8  { animation-delay: 0.8s; }

/* === HERO ENTRANCE === */
.cb-hero-technical .cb-hero-eyebrow {
  animation: cb-slide-up 0.6s ease 0.1s both;
}
.cb-hero-technical .cb-hero-title {
  animation: cb-slide-up 0.7s ease 0.2s both;
}
.cb-hero-technical .cb-hero-desc {
  animation: cb-slide-up 0.7s ease 0.35s both;
}
.cb-hero-technical .cb-hero-actions {
  animation: cb-slide-up 0.7s ease 0.48s both;
}
.cb-hero-technical .cb-hero-stats {
  animation: cb-slide-up 0.7s ease 0.6s both;
}
.cb-hero-technical .cb-hero-visual {
  animation: cb-slide-in-right 0.9s ease 0.3s both;
}

/* === TERMINAL TYPING EFFECT === */
.cb-term-typed {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--cb-accent);
  animation: cb-type-cursor 0.75s step-end infinite;
  display: inline-block;
}

/* === SHIMMER LOADING === */
.cb-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.03) 25%,
    rgba(255,255,255,0.07) 50%,
    rgba(255,255,255,0.03) 75%
  );
  background-size: 200% 100%;
  animation: cb-shimmer 1.6s infinite;
}

/* === GRADIENT ANIMATED BG === */
.cb-animated-gradient {
  background: linear-gradient(270deg, var(--cb-bg-deep), var(--cb-bg-mid), #0c1628, var(--cb-bg-deep));
  background-size: 400% 400%;
  animation: cb-bg-pan 12s ease infinite;
}

/* === HOVER EFFECTS === */
.cb-hover-lift {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cb-hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.3);
}

.cb-hover-glow {
  transition: box-shadow 0.25s ease;
}
.cb-hover-glow:hover {
  box-shadow: 0 0 28px rgba(61,139,255,0.2);
}

/* === UNDERLINE DRAW === */
.cb-underline-draw {
  position: relative;
  display: inline-block;
}
.cb-underline-draw::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  height: 2px;
  width: 0%;
  background: var(--cb-accent);
  transition: width 0.35s ease;
}
.cb-underline-draw:hover::after { width: 100%; }

/* === ORBIT DECORATION === */
.cb-orbit-wrap {
  position: absolute;
  width: 160px; height: 160px;
  pointer-events: none;
  opacity: 0.18;
}
.cb-orbit-ring {
  position: absolute;
  inset: 0;
  border: 1px dashed var(--cb-accent);
  border-radius: 50%;
}
.cb-orbit-dot {
  position: absolute;
  width: 8px; height: 8px;
  background: var(--cb-accent);
  border-radius: 50%;
  top: 50%; left: 50%;
  margin: -4px 0 0 -4px;
  animation: cb-orbit 6s linear infinite;
}

/* === NOTIFICATION BELL === */
@keyframes cb-ring {
  0%, 100% { transform: rotate(0deg); }
  10%, 30%  { transform: rotate(-12deg); }
  20%, 40%  { transform: rotate(12deg); }
  50%       { transform: rotate(0deg); }
}
.cb-anim-ring {
  animation: cb-ring 2.5s ease-in-out infinite;
  display: inline-block;
}

/* === STATUS PING === */
@keyframes cb-ping {
  0%   { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2.2); opacity: 0; }
}
.cb-status-indicator {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.cb-status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--cb-accent-alt);
  position: relative;
  flex-shrink: 0;
}
.cb-status-dot::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--cb-accent-alt);
  animation: cb-ping 1.8s ease-out infinite;
}
.cb-status-dot.cb-status-warn { background: var(--cb-accent-warn); }
.cb-status-dot.cb-status-warn::before { background: var(--cb-accent-warn); }

/* === SCROLL PROGRESS BAR === */
#cb-scroll-progress {
  position: fixed;
  top: 68px; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--cb-accent), var(--cb-accent-alt));
  z-index: 999;
  transition: width 0.1s linear;
}

/* === BACK TO TOP === */
#cb-back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 42px; height: 42px;
  background: var(--cb-bg-card);
  border: 1px solid var(--cb-border-bright);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cb-text-secondary);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 900;
}
#cb-back-to-top.cb-visible {
  opacity: 1;
  visibility: visible;
}
#cb-back-to-top:hover {
  background: var(--cb-accent);
  color: #fff;
  border-color: var(--cb-accent);
  transform: translateY(-3px);
}