/* ════════════════════════════════════════════════
   OleaNova Industrial AI — Animations CSS
   ════════════════════════════════════════════════ */

/* ── Reveal Animations ── */
.reveal-up,
.reveal-left,
.reveal-right {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1),
              transform 0.7s cubic-bezier(0.4,0,0.2,1);
}

.reveal-up { transform: translateY(40px); }
.reveal-left { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }

.reveal-up.visible,
.reveal-left.visible,
.reveal-right.visible {
  opacity: 1;
  transform: translate(0);
}

/* ── Tilt Card Effect ── */
.tilt-card {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.15s ease, box-shadow 0.3s ease;
}
.tilt-card:hover { box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
.tilt-card-inner { transform: translateZ(10px); }

/* ── Glow Pulse ── */
@keyframes glowPulse {
  0%,100% { box-shadow: 0 0 20px rgba(0,180,216,0.2); }
  50%      { box-shadow: 0 0 40px rgba(0,180,216,0.4); }
}
@keyframes glowPulseGold {
  0%,100% { box-shadow: 0 0 20px rgba(201,162,39,0.2); }
  50%      { box-shadow: 0 0 40px rgba(201,162,39,0.4); }
}
@keyframes glowPulseOlive {
  0%,100% { box-shadow: 0 0 20px rgba(107,158,72,0.2); }
  50%      { box-shadow: 0 0 40px rgba(107,158,72,0.4); }
}

.glow-cyan  { animation: glowPulse 3s ease infinite; }
.glow-gold  { animation: glowPulseGold 3s ease infinite; }
.glow-olive { animation: glowPulseOlive 3s ease infinite; }

/* ── Floating ── */
@keyframes float {
  0%,100% { transform: translateY(0px); }
  50%      { transform: translateY(-12px); }
}
.float { animation: float 5s ease-in-out infinite; }
.float-delayed { animation: float 5s ease-in-out infinite 1.5s; }

/* ── Spin Slow ── */
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.spin-slow { animation: spinSlow 30s linear infinite; }

/* ── Shimmer ── */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.shimmer {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.12) 50%,
    rgba(255,255,255,0.04) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 2.5s infinite;
}

/* ── Gradient Border ── */
.gradient-border {
  position: relative;
}
.gradient-border::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(107,158,72,0.5),
    rgba(0,180,216,0.5),
    rgba(201,162,39,0.5)
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ── Data Flow Lines ── */
@keyframes dataFlow {
  0%   { stroke-dashoffset: 100; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
.data-flow-line {
  stroke-dasharray: 8 4;
  stroke-dashoffset: 100;
  animation: dataFlow 2s ease-in-out infinite;
}

/* ── Counter ── */
.counter-done { animation: counterPop 0.3s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes counterPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* ── Hero Parallax ── */
.hero-parallax { will-change: transform; }

/* ── Card Hover Shine ── */
.solution-card::after {
  content: '';
  position: absolute;
  top: -100%; left: -60%;
  width: 60%; height: 300%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255,255,255,0.04) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.solution-card:hover::after { left: 150%; }

/* ── Typewriter ── */
@keyframes typeIn {
  from { width: 0; }
  to   { width: 100%; }
}

/* ── Loading bar gradient animation ── */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── Neon text ── */
.neon-cyan {
  text-shadow:
    0 0 10px rgba(0,180,216,0.5),
    0 0 20px rgba(0,180,216,0.3),
    0 0 40px rgba(0,180,216,0.1);
}
.neon-gold {
  text-shadow:
    0 0 10px rgba(201,162,39,0.5),
    0 0 20px rgba(201,162,39,0.3),
    0 0 40px rgba(201,162,39,0.1);
}
.neon-olive {
  text-shadow:
    0 0 10px rgba(107,158,72,0.5),
    0 0 20px rgba(107,158,72,0.3);
}

/* ── Particle micro animation ── */
@keyframes particleFade {
  0%   { opacity:0; transform:scale(0) translateY(0); }
  50%  { opacity:1; transform:scale(1) translateY(-20px); }
  100% { opacity:0; transform:scale(0.5) translateY(-40px); }
}
.particle-micro {
  animation: particleFade 3s ease-in-out infinite;
}

/* ── Section transition overlay ── */
.section-enter {
  animation: sectionFadeIn 0.6s ease forwards;
}
@keyframes sectionFadeIn {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Dashboard animate in ── */
@keyframes dashCardIn {
  from { opacity:0; transform:scale(0.96) translateY(16px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
.dash-card-animate {
  animation: dashCardIn 0.6s cubic-bezier(0.34,1.2,0.64,1) forwards;
}

/* ── Stagger children ── */
.stagger > *:nth-child(1) { animation-delay: 0s; }
.stagger > *:nth-child(2) { animation-delay: 0.1s; }
.stagger > *:nth-child(3) { animation-delay: 0.2s; }
.stagger > *:nth-child(4) { animation-delay: 0.3s; }
.stagger > *:nth-child(5) { animation-delay: 0.4s; }
.stagger > *:nth-child(6) { animation-delay: 0.5s; }

/* ── Scan effect for OleoVision ── */
@keyframes radarScan {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.radar-sweep {
  position: absolute;
  width: 100%; height: 100%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(0,180,216,0.1) 30deg,
    transparent 60deg
  );
  animation: radarScan 3s linear infinite;
  pointer-events: none;
}

/* ── Tech circuit lines ── */
.circuit-line {
  position: absolute;
  background: linear-gradient(90deg,
    transparent,
    rgba(0,180,216,0.4),
    transparent
  );
  height: 1px;
  animation: circuitFlow 4s ease-in-out infinite;
}
@keyframes circuitFlow {
  0%,100% { opacity:0; transform:scaleX(0); transform-origin:left; }
  25%,75%  { opacity:1; transform:scaleX(1); }
}

/* ── Nexus node connection lines ── */
@keyframes lineGrow {
  0%   { stroke-dashoffset: 200; opacity: 0.3; }
  50%  { opacity: 0.8; }
  100% { stroke-dashoffset: 0; opacity: 0.3; }
}
.nexus-line-animated {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: lineGrow 2s ease-in-out infinite;
}

/* ── Morph gradient background ── */
@keyframes morphBg {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}
.morph-bg {
  background-size: 400% 400%;
  animation: morphBg 12s ease infinite;
}

/* ── Focus ring for accessibility ── */
:focus-visible {
  outline: 2px solid rgba(107,158,72,0.8);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Hover border glow ── */
.hover-glow-cyan:hover { box-shadow: 0 0 0 1px rgba(0,180,216,0.4), 0 8px 32px rgba(0,180,216,0.15); }
.hover-glow-gold:hover { box-shadow: 0 0 0 1px rgba(201,162,39,0.4), 0 8px 32px rgba(201,162,39,0.15); }

/* ── Olive branch decorative ── */
@keyframes leafSway {
  0%,100% { transform: rotate(-3deg); }
  50%     { transform: rotate(3deg); }
}
.leaf-sway { animation: leafSway 4s ease-in-out infinite; transform-origin: bottom center; }