/* ════════════════════════════════════════════════
   AXVELO — Animations
   All @keyframes and animation utility classes
════════════════════════════════════════════════ */

/* ── Mesh gradient blob drifts ── */
@keyframes mesh-drift-1 {
  0%   { opacity: .8; transform: translate(0,    0)   scale(1); }
  50%  { opacity: 1;  transform: translate(40px, 30px) scale(1.1); }
  100% { opacity: .7; transform: translate(-20px,50px) scale(.95); }
}
@keyframes mesh-drift-2 {
  0%   { opacity: .7; transform: translate(0,    0)    scale(1); }
  50%  { opacity: .9; transform: translate(-30px,40px) scale(1.05); }
  100% { opacity: .6; transform: translate(50px,-30px) scale(1.1); }
}
@keyframes mesh-drift-3 {
  0%   { opacity: .6; transform: translate(0,    0)    scale(1); }
  50%  { opacity: .8; transform: translate(30px,-40px) scale(1.08); }
  100% { opacity: .7; transform: translate(-40px,20px) scale(.97); }
}
@keyframes mesh-drift-4 {
  0%   { opacity: .5; transform: translate(0,0)   scale(1); }
  100% { opacity: .7; transform: translate(-20px,30px) scale(1.1); }
}
@keyframes mesh-drift-5 {
  0%   { opacity: .4; transform: translate(0,0)   scale(1); }
  100% { opacity: .6; transform: translate(25px,-20px) scale(1.05); }
}

/* ── Logo float (navbar + hero watermark) ── */
@keyframes logo-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

/* ── Floating particles ── */
@keyframes particle-float {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: .6; }
  100% { transform: translate(var(--px, 30px), var(--py, -45px)) scale(.6); opacity: 0; }
}

/* ── Tools marquee ── */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-marquee { animation: marquee 28s linear infinite; }

/* ── Floating action buttons ── */
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
.animate-float-y { animation: float-y 3.5s ease-in-out infinite; }

/* ── Pulse dot (hero badge) ── */
@keyframes pulse-dot {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%       { transform: scale(1.5); opacity: .6; }
}
.pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }

/* ── Scroll line (hero) ── */
@keyframes scroll-line {
  0%, 100% { transform: scaleY(1);   opacity: 1; }
  50%       { transform: scaleY(.4); opacity: .4; }
}
.scroll-line { animation: scroll-line 2s ease-in-out infinite; }

/* ── Orb float ── */
@keyframes orb-float-1 {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-18px); }
}
@keyframes orb-float-2 {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(20px); }
}
@keyframes orb-float-3 {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-14px); }
}
@keyframes founder-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-14px); }
}

/* ── Reveal (scroll-triggered via IntersectionObserver in main.js) ── */
.reveal,
.reveal-left,
.reveal-right {
  opacity: 0;
  transition: opacity .7s ease, transform .7s ease, filter .7s ease;
}
.reveal       { transform: translateY(30px); filter: blur(4px); }
.reveal-left  { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }

.revealed {
  opacity: 1 !important;
  transform: translate(0) !important;
  filter: blur(0) !important;
}

/* ── Stagger helpers (used on child elements) ── */
.stagger-1  { transition-delay: .1s !important; }
.stagger-2  { transition-delay: .2s !important; }
.stagger-3  { transition-delay: .3s !important; }
.stagger-4  { transition-delay: .4s !important; }
.stagger-5  { transition-delay: .5s !important; }
.stagger-6  { transition-delay: .6s !important; }

/* ── Hero badge entrance ── */
@keyframes hero-badge-in {
  from { opacity:0; transform: translateY(20px); filter: blur(6px); }
  to   { opacity:1; transform: translateY(0);    filter: blur(0); }
}
@keyframes hero-title-in {
  from { opacity:0; transform: scale(.92); }
  to   { opacity:1; transform: scale(1); }
}
@keyframes hero-sub-in {
  from { opacity:0; transform: translateY(20px); }
  to   { opacity:1; transform: translateY(0); }
}
@keyframes hero-ctas-in {
  from { opacity:0; transform: translateY(20px); }
  to   { opacity:1; transform: translateY(0); }
}

/* ── Glow logo pulse ── */
@keyframes logo-glow {
  0%,100% { text-shadow: 0 0 8px  rgba(255,107,0,.3); }
  50%      { text-shadow: 0 0 20px rgba(255,107,0,.6); }
}

/* ── Shine sweep on portfolio cards ── */
.shine-sweep {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.06) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: none;
}
.portfolio-card:hover .shine-sweep {
  transform: translateX(100%);
  transition: transform .7s ease;
}

/* ── Conic rays rotation (hero) ── */
@keyframes rotate-rays {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}