/* ==============================================
   QENTROXA - Animations
   qen-animations.css
   ============================================== */

/* ---- KEYFRAMES ---- */

@keyframes qen-fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes qen-fadeInDown {
  from { opacity: 0; transform: translateY(-30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes qen-fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes qen-fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes qen-scalePop {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes qen-pulse-glow {
  0%, 100% { box-shadow: 0 0 12px rgba(0,212,255,0.2); }
  50%       { box-shadow: 0 0 32px rgba(0,212,255,0.45); }
}

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

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

@keyframes qen-gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes qen-blink-cursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

@keyframes qen-counter-tick {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@keyframes qen-slide-left {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

@keyframes qen-ripple {
  0%   { transform: scale(0); opacity: 0.5; }
  100% { transform: scale(4); opacity: 0; }
}

/* ---- ANIMATION UTILITY CLASSES ---- */

.qen-animate-fadeup {
  animation: qen-fadeInUp 0.7s ease both;
}

.qen-animate-fadein {
  animation: qen-fadeInUp 0.5s ease both;
}

.qen-animate-float {
  animation: qen-float 4s ease-in-out infinite;
}

.qen-animate-pulse-glow {
  animation: qen-pulse-glow 2.5s ease-in-out infinite;
}

/* ---- SCROLL-TRIGGERED ANIMATIONS ---- */

.qen-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.qen-reveal.qen-visible {
  opacity: 1;
  transform: translateY(0);
}

.qen-reveal-left {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.qen-reveal-left.qen-visible {
  opacity: 1;
  transform: translateX(0);
}

.qen-reveal-right {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.qen-reveal-right.qen-visible {
  opacity: 1;
  transform: translateX(0);
}

.qen-reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.qen-reveal-scale.qen-visible {
  opacity: 1;
  transform: scale(1);
}

/* Delay helpers */
.qen-delay-1 { transition-delay: 0.1s !important; }
.qen-delay-2 { transition-delay: 0.2s !important; }
.qen-delay-3 { transition-delay: 0.3s !important; }
.qen-delay-4 { transition-delay: 0.4s !important; }
.qen-delay-5 { transition-delay: 0.5s !important; }
.qen-delay-6 { transition-delay: 0.6s !important; }

/* ---- HERO SVG ANIMATIONS ---- */

.qen-hero-svg-shape {
  position: absolute;
  pointer-events: none;
}

.qen-svg-orbit {
  animation: qen-spin-slow 30s linear infinite;
  transform-origin: center;
}

.qen-svg-float-1 {
  animation: qen-float 5s ease-in-out infinite;
}

.qen-svg-float-2 {
  animation: qen-float 7s ease-in-out infinite;
  animation-delay: 1.5s;
}

.qen-svg-float-3 {
  animation: qen-float 6s ease-in-out infinite;
  animation-delay: 0.8s;
}

/* ---- GRADIENT ANIMATED BACKGROUND ---- */
.qen-gradient-animated {
  background: linear-gradient(270deg, #0b1629, #0f2344, #0b1a30, #0b1629);
  background-size: 400% 400%;
  animation: qen-gradient-shift 12s ease infinite;
}

/* ---- QUOTE CAROUSEL FADE ---- */
.qen-quote-fade-enter {
  animation: qen-fadeInUp 0.5s ease both;
}

.qen-quote-fade-exit {
  animation: qen-fadeInDown 0.4s ease both reverse;
}

/* ---- BUTTON RIPPLE ---- */
.qen-btn-ripple {
  position: relative;
  overflow: hidden;
}

.qen-btn-ripple::after {
  content: '';
  position: absolute;
  background: rgba(255,255,255,0.25);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  margin-top: -20px;
  transform: scale(0);
  opacity: 0;
}

.qen-btn-ripple:active::after {
  animation: qen-ripple 0.5s ease-out;
}

/* ---- LOADING INDICATOR ---- */
.qen-loading-dots {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}

.qen-loading-dots span {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--qen-neon);
  animation: qen-float 1s ease-in-out infinite;
}

.qen-loading-dots span:nth-child(2) { animation-delay: 0.15s; }
.qen-loading-dots span:nth-child(3) { animation-delay: 0.3s; }

/* ---- TYPING CURSOR ---- */
.qen-type-cursor::after {
  content: '|';
  animation: qen-blink-cursor 1s step-end infinite;
  color: var(--qen-neon);
}

/* ---- HERO SECTION DELAY CHAIN ---- */
.qen-hero-label { animation: qen-fadeInUp 0.6s ease 0.1s both; }
.qen-hero-title { animation: qen-fadeInUp 0.7s ease 0.25s both; }
.qen-hero-subtitle { animation: qen-fadeInUp 0.7s ease 0.4s both; }
.qen-hero-actions { animation: qen-fadeInUp 0.7s ease 0.55s both; }
.qen-hero-stats { animation: qen-fadeInUp 0.7s ease 0.7s both; }
.qen-hero-image-col { animation: qen-fadeInRight 0.9s ease 0.3s both; }