/* ===================================================
   ARY Technologies — animations.css
   Keyframes, transitions, stagger utilities
   =================================================== */

/* ── Entrance Animations ───────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

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

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

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes slideInLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* ── Hero Entrance Classes ─────────────────────────── */
.anim-hero-badge {
  animation: fadeInDown 0.6s var(--ease-out) both;
  animation-delay: 0.1s;
}

.anim-hero-title {
  animation: fadeInUp 0.8s var(--ease-out) both;
  animation-delay: 0.25s;
}

.anim-hero-subtitle {
  animation: fadeInUp 0.8s var(--ease-out) both;
  animation-delay: 0.4s;
}

.anim-hero-cta {
  animation: fadeInUp 0.8s var(--ease-out) both;
  animation-delay: 0.55s;
}

/* ── Stagger Delays ────────────────────────────────── */
.stagger-1 { animation-delay: 0.05s !important; }
.stagger-2 { animation-delay: 0.1s !important; }
.stagger-3 { animation-delay: 0.15s !important; }
.stagger-4 { animation-delay: 0.2s !important; }
.stagger-5 { animation-delay: 0.25s !important; }
.stagger-6 { animation-delay: 0.3s !important; }

/* ── Shimmer Loading ───────────────────────────────── */
@keyframes shimmer {
  from { background-position: -200% center; }
  to   { background-position: 200% center; }
}

.shimmer {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.06) 50%,
    rgba(255,255,255,0) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2.5s infinite;
}

/* ── Gradient border rotate ────────────────────────── */
@keyframes rotate-grad {
  from { --angle: 0deg; }
  to   { --angle: 360deg; }
}

/* ── Glow Pulse ────────────────────────────────────── */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 20px rgba(0, 212, 255, 0.09); }
  50%       { box-shadow: 0 0 40px rgba(0, 212, 255, 0.18), 0 0 80px rgba(0, 212, 255, 0.06); }
}

.glow-pulse {
  animation: glow-pulse 3s ease-in-out infinite;
}

/* ── Text Reveal ───────────────────────────────────── */
@keyframes text-reveal {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0% 0 0);
  }
}

/* ── Floating Cards ────────────────────────────────── */
@keyframes float-card {
  0%, 100% { transform: translateY(0px) rotate(var(--rotate, 0deg)); }
  50%       { transform: translateY(-12px) rotate(var(--rotate, 0deg)); }
}

/* ── Number Counter Animation (JS-driven) ──────────── */
.counter-value {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ── Typewriter cursor ─────────────────────────────── */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.cursor {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--clr-primary);
  vertical-align: text-bottom;
  margin-left: 2px;
  animation: blink 1s step-end infinite;
}

/* ── Scroll Progress Bar ───────────────────────────── */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: var(--grad-primary);
  z-index: 9998;
  width: 0%;
  transition: width 0.1s linear;
  box-shadow: 0 0 8px rgba(0, 212, 255, 0.24);
}

/* ── Back to top ───────────────────────────────────── */
#back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--grad-primary);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: var(--shadow-md), 0 0 20px rgba(0, 212, 255, 0.12);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-med), transform var(--dur-med) var(--ease-out);
  z-index: 900;
}

#back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
}

#back-to-top:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg), 0 0 32px rgba(0, 212, 255, 0.15);
}

/* ── Canvas particle ───────────────────────────────── */
#hero-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ── Stats counter wrapper ─────────────────────────── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-xl);
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Divider with text ─────────────────────────────── */
.divider-text {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  color: var(--clr-text-3);
  font-size: 0.85rem;
}

.divider-text::before,
.divider-text::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--clr-border-2);
}

/* ── Page transition overlay ───────────────────────── */
.page-transition {
  position: fixed;
  inset: 0;
  background: var(--clr-bg);
  z-index: 99999;
  transform-origin: top;
  animation: page-leave 0.4s var(--ease-in) forwards;
}

@keyframes page-leave {
  from { transform: scaleY(1); }
  to   { transform: scaleY(0); }
}

/* ── Gradient animated border ──────────────────────── */
.grad-border {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 1px;
  background: var(--grad-primary);
}

.grad-border > * {
  border-radius: calc(var(--radius-lg) - 1px);
  background: var(--clr-surface);
}

/* ── Icon Bounce ───────────────────────────────────── */
@keyframes icon-bounce {
  0%, 100% { transform: translateY(0); }
  40%       { transform: translateY(-6px); }
  60%       { transform: translateY(-3px); }
}

.icon-bounce:hover { animation: icon-bounce 0.5s ease; }

/* ── Grid reveal (for card grids) ──────────────────── */
.card-grid-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

.card-grid-item.visible {
  opacity: 1;
  transform: translateY(0);
}