/* ===================================================
   MIGUEL SEN QUIZ — Animations
   msq-animations.css
   =================================================== */

/* ─── Keyframes ─── */
@keyframes msq-pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(79,142,247,0.5); transform: scale(1); }
  50%       { box-shadow: 0 0 0 8px rgba(79,142,247,0); transform: scale(1.15); }
}

@keyframes msq-float-1 {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%       { transform: translateY(-12px) rotate(1deg); }
}

@keyframes msq-float-2 {
  0%, 100% { transform: translateY(0) rotate(1deg); }
  50%       { transform: translateY(-16px) rotate(-1deg); }
}

@keyframes msq-fade-in-up {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

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

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

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

@keyframes msq-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

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

@keyframes msq-ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes msq-bounce-in {
  0%   { opacity: 0; transform: scale(0.3); }
  50%  { transform: scale(1.05); }
  70%  { transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes msq-progress-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(79,142,247,0.4); }
  50%       { box-shadow: 0 0 20px rgba(79,142,247,0.8); }
}

/* ─── Reveal on scroll ─── */
.msq-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.msq-reveal.msq-revealed {
  opacity: 1;
  transform: translateY(0);
}
.msq-reveal-delay-1 { transition-delay: 0.1s; }
.msq-reveal-delay-2 { transition-delay: 0.2s; }
.msq-reveal-delay-3 { transition-delay: 0.3s; }
.msq-reveal-delay-4 { transition-delay: 0.4s; }
.msq-reveal-delay-5 { transition-delay: 0.5s; }

/* ─── Page load hero animation ─── */
.msq-hero-animate-1 {
  animation: msq-fade-in-up 0.8s ease 0.1s both;
}
.msq-hero-animate-2 {
  animation: msq-fade-in-up 0.8s ease 0.25s both;
}
.msq-hero-animate-3 {
  animation: msq-fade-in-up 0.8s ease 0.4s both;
}
.msq-hero-animate-4 {
  animation: msq-fade-in-up 0.8s ease 0.55s both;
}
.msq-hero-animate-5 {
  animation: msq-fade-in-up 0.8s ease 0.7s both;
}

/* ─── Quiz option pop ─── */
.msq-quiz-option-pop {
  animation: msq-scale-in 0.2s ease;
}

/* ─── Score reveal ─── */
.msq-score-bounce {
  animation: msq-bounce-in 0.6s cubic-bezier(0.34,1.56,0.64,1);
}

/* ─── Progress bar glow ─── */
.msq-quiz-progress-fill {
  animation: msq-progress-glow 2s infinite;
}

/* ─── Loading spinner ─── */
.msq-spinner {
  width: 24px; height: 24px;
  border: 3px solid rgba(79,142,247,0.2);
  border-top-color: var(--msq-accent);
  border-radius: 50%;
  animation: msq-spin 0.8s linear infinite;
  display: inline-block;
}

/* ─── Ticker strip ─── */
.msq-ticker-strip {
  overflow: hidden;
  background: var(--msq-surface);
  border-top: 1px solid var(--msq-border);
  border-bottom: 1px solid var(--msq-border);
  padding: 14px 0;
}
.msq-ticker-inner {
  display: flex;
  width: max-content;
  animation: msq-ticker 30s linear infinite;
  gap: 0;
}
.msq-ticker-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 48px;
  font-size: 0.85rem;
  color: var(--msq-text-muted);
  white-space: nowrap;
}
.msq-ticker-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--msq-accent);
  flex-shrink: 0;
}

/* ─── Shimmer skeleton ─── */
.msq-skeleton {
  background: linear-gradient(90deg, var(--msq-card) 25%, var(--msq-border) 50%, var(--msq-card) 75%);
  background-size: 400px 100%;
  animation: msq-shimmer 1.5s infinite;
  border-radius: var(--msq-radius-sm);
}

/* ─── Hover lift ─── */
.msq-hover-lift {
  transition: transform var(--msq-transition), box-shadow var(--msq-transition);
}
.msq-hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--msq-shadow);
}

/* ─── Pulse ring ─── */
.msq-pulse-ring {
  position: relative;
}
.msq-pulse-ring::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: inherit;
  border: 2px solid var(--msq-accent);
  opacity: 0;
  animation: msq-pulse-dot 2s infinite;
}

/* ─── Gradient text ─── */
.msq-gradient-text {
  background: linear-gradient(135deg, var(--msq-accent) 0%, var(--msq-accent-teal) 50%, var(--msq-accent-warm) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ─── Animated counter ─── */
.msq-counter-num {
  display: inline-block;
  transition: transform 0.3s ease;
}

/* ─── Tab content transition ─── */
.msq-tab-content-enter {
  animation: msq-fade-in-up 0.4s ease;
}

/* ─── Score meter ─── */
.msq-score-meter-ring {
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 1.5s cubic-bezier(0.34,1.2,0.64,1);
  transform-origin: center;
  transform: rotate(-90deg);
}

/* ─── Wipe in ─── */
.msq-wipe-in {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.8s cubic-bezier(0.4,0,0.2,1);
}
.msq-wipe-in.msq-revealed {
  clip-path: inset(0 0% 0 0);
}