/* ============================================================
   AQOON TECH  —  Animations & Utilities  (css/animations.css)
   Keyframes, scroll reveal, float, hero entry, skeletons,
   and all utility/helper classes
   ============================================================ */

/* ════════════════════════════
   KEYFRAMES
════════════════════════════ */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(22px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes fadeDown {
  from { opacity:0; transform:translateY(-12px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes scaleIn {
  from { opacity:0; transform:scale(.94); }
  to   { opacity:1; transform:scale(1); }
}
@keyframes slideLeft {
  from { opacity:0; transform:translateX(20px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes float {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-12px); }
}
@keyframes floatB {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-8px); }
}
@keyframes pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%     { opacity:.55; transform:scale(.82); }
}
@keyframes spin {
  to { transform:rotate(360deg); }
}
@keyframes shimmer {
  0%   { background-position:-800px 0; }
  100% { background-position: 800px 0; }
}
@keyframes slideDown {
  from { opacity:0; transform:translateY(-10px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes gradientFlow {
  0%,100% { background-position:0% 50%; }
  50%     { background-position:100% 50%; }
}

/* ════════════════════════════
   SCROLL REVEAL
════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-left {
  opacity: 0;
  transform: translateX(-22px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.reveal-left.visible { opacity:1; transform:translateX(0); }

.reveal-right {
  opacity: 0;
  transform: translateX(22px);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.reveal-right.visible { opacity:1; transform:translateX(0); }

/* ════════════════════════════
   HERO STAGGER ANIMATION
════════════════════════════ */
.ha-1 { animation: fadeUp .65s  0s      var(--ease-out) both; }
.ha-2 { animation: fadeUp .65s  .08s    var(--ease-out) both; }
.ha-3 { animation: fadeUp .65s  .16s    var(--ease-out) both; }
.ha-4 { animation: fadeUp .65s  .24s    var(--ease-out) both; }
.ha-5 { animation: fadeUp .65s  .32s    var(--ease-out) both; }
.ha-6 { animation: fadeUp .65s  .40s    var(--ease-out) both; }
.ha-visual { animation: scaleIn .75s .1s var(--ease-out) both; }

/* ════════════════════════════
   FLOATING BADGE ANIMATION
════════════════════════════ */
.float-1 { animation: float  5s   ease-in-out infinite; }
.float-2 { animation: floatB 4.5s 1.5s ease-in-out infinite; }
.float-3 { animation: float  6s   3s   ease-in-out infinite; }

/* ════════════════════════════
   PULSING DOT
════════════════════════════ */
.pulse-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--blue);
  animation: pulse 2.2s ease-in-out infinite;
  flex-shrink: 0;
}

/* ════════════════════════════
   SKELETON LOADER
════════════════════════════ */
.skeleton {
  background: linear-gradient(90deg, var(--bg-alt) 25%, var(--bg-3) 50%, var(--bg-alt) 75%);
  background-size: 800px 100%;
  animation: shimmer 1.6s infinite;
  border-radius: var(--r-sm);
}

/* ════════════════════════════
   LOAD MORE WRAPPER
════════════════════════════ */
.load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: var(--s10);
}

/* ════════════════════════════
   HERO EYEBROW PILL
════════════════════════════ */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  background: var(--blue-light);
  color: var(--blue-dark);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--r-full);
  border: 1px solid var(--blue-mid);
  letter-spacing: .5px;
  margin-bottom: var(--s5);
}
[data-theme="dark"] .hero-eyebrow {
  background: rgba(74,144,217,.10);
  color: var(--blue);
  border-color: rgba(74,144,217,.30);
}

/* ════════════════════════════
   HERO FLOAT BADGE
════════════════════════════ */
.hero-badge {
  position: absolute;
  background: var(--surface);
  border-radius: var(--r);
  padding: 10px 14px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.hero-badge-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: var(--blue-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.hero-badge-label { font-family: var(--font-ui); font-size: 10px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .5px; }
.hero-badge-value { font-family: var(--font-brand); font-size: 15px; color: var(--text); line-height: 1.2; }

/* ════════════════════════════
   UTILITY CLASSES
════════════════════════════ */

/* Display */
.flex          { display: flex; }
.flex-col      { flex-direction: column; }
.inline-flex   { display: inline-flex; }
.block         { display: block; }
.hidden        { display: none; }

/* Flex helpers */
.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.flex-wrap       { flex-wrap: wrap; }
.flex-shrink-0   { flex-shrink: 0; }
.flex-1          { flex: 1; }
.gap-1 { gap: var(--s1); }
.gap-2 { gap: var(--s2); }
.gap-3 { gap: var(--s3); }
.gap-4 { gap: var(--s4); }
.gap-5 { gap: var(--s5); }
.gap-6 { gap: var(--s6); }
.gap-8 { gap: var(--s8); }

/* Sizing */
.w-full  { width: 100%; }
.h-full  { height: 100%; }

/* Spacing */
.mt-2  { margin-top: var(--s2); }
.mt-4  { margin-top: var(--s4); }
.mt-6  { margin-top: var(--s6); }
.mt-8  { margin-top: var(--s8); }
.mt-10 { margin-top: var(--s10); }
.mt-12 { margin-top: var(--s12); }
.mb-2  { margin-bottom: var(--s2); }
.mb-4  { margin-bottom: var(--s4); }
.mb-6  { margin-bottom: var(--s6); }
.mb-8  { margin-bottom: var(--s8); }
.mb-10 { margin-bottom: var(--s10); }
.mx-auto { margin-inline: auto; }
.p-4   { padding: var(--s4); }
.p-5   { padding: var(--s5); }
.p-6   { padding: var(--s6); }
.p-8   { padding: var(--s8); }
.px-5  { padding-inline: var(--s5); }
.py-4  { padding-block: var(--s4); }
.pt-6  { padding-top: var(--s6); }
.pb-6  { padding-bottom: var(--s6); }

/* Borders & backgrounds */
.border    { border: 1px solid var(--border); }
.rounded   { border-radius: var(--r); }
.rounded-lg { border-radius: var(--r-lg); }
.rounded-full { border-radius: var(--r-full); }
.overflow-hidden { overflow: hidden; }
.relative  { position: relative; }
.absolute  { position: absolute; }
.inset-0   { inset: 0; }
.z-1       { z-index: 1; }
.bg-surface { background: var(--surface); }
.bg-alt     { background: var(--bg-alt); }
.bg-3       { background: var(--bg-3); }

/* Text alignment */
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

/* Cursor */
.cursor-pointer { cursor: pointer; }