/* ════════════════════════════════════════════════════════════════════
   cRyPtO sMaRt — ANIMATIONS
   Scroll reveal · Page transitions · Micro-interactions
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   SCROLL REVEAL — applied via IntersectionObserver in JS
   Elements start hidden, then animate when entering viewport
   ════════════════════════════════════════════════════════════════════ */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 800ms cubic-bezier(.22,.61,.36,1),
    transform 800ms cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
[data-reveal].revealed {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="left"].revealed { transform: translateX(0); }

[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="right"].revealed { transform: translateX(0); }

[data-reveal="scale"] { transform: scale(.96); }
[data-reveal="scale"].revealed { transform: scale(1); }

[data-reveal="fade"] { transform: none; }

/* Staggered reveal — child elements animate in sequence */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 700ms cubic-bezier(.22,.61,.36,1),
    transform 700ms cubic-bezier(.22,.61,.36,1);
}
[data-reveal-stagger].revealed > * {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-stagger].revealed > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-stagger].revealed > *:nth-child(2) { transition-delay: 100ms; }
[data-reveal-stagger].revealed > *:nth-child(3) { transition-delay: 200ms; }
[data-reveal-stagger].revealed > *:nth-child(4) { transition-delay: 300ms; }
[data-reveal-stagger].revealed > *:nth-child(5) { transition-delay: 400ms; }
[data-reveal-stagger].revealed > *:nth-child(6) { transition-delay: 500ms; }
[data-reveal-stagger].revealed > *:nth-child(7) { transition-delay: 600ms; }
[data-reveal-stagger].revealed > *:nth-child(8) { transition-delay: 700ms; }

/* ════════════════════════════════════════════════════════════════════
   IMAGE HOVER — subtle zoom on hoverable images
   ════════════════════════════════════════════════════════════════════ */
.img-hover-zoom {
  overflow: hidden;
}
.img-hover-zoom img {
  transition: transform 700ms cubic-bezier(.22,.61,.36,1);
}
.img-hover-zoom:hover img,
.card-hover:hover .img-hover-zoom img {
  transform: scale(1.06);
}

/* ════════════════════════════════════════════════════════════════════
   LINK UNDERLINE — animated underline
   ════════════════════════════════════════════════════════════════════ */
.link-animated {
  position: relative;
  padding-bottom: 2px;
}
.link-animated::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform 400ms cubic-bezier(.22,.61,.36,1);
}
.link-animated:hover::after {
  transform-origin: left;
  transform: scaleX(1);
}

/* ════════════════════════════════════════════════════════════════════
   SHIMMER LOADING — for skeleton placeholders
   ════════════════════════════════════════════════════════════════════ */
.shimmer {
  position: relative;
  overflow: hidden;
  background: var(--bg-soft);
}
.shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  animation: shimmer-slide 1.4s infinite;
}
@keyframes shimmer-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ════════════════════════════════════════════════════════════════════
   PULSE — for live indicators
   ════════════════════════════════════════════════════════════════════ */
.pulse-dot {
  position: relative;
  width: 10px; height: 10px;
  background: var(--brand);
  border-radius: 50%;
}
.pulse-dot::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--brand);
  animation: pulse-ring 1.8s ease-out infinite;
  opacity: 0;
}
@keyframes pulse-ring {
  0%   { transform: scale(.6); opacity: .8; }
  100% { transform: scale(1.6); opacity: 0; }
}
.pulse-dot.live { background: #10b981; }
.pulse-dot.live::before { background: #10b981; }

/* ════════════════════════════════════════════════════════════════════
   ARROW SLIDE — for "learn more" links
   ════════════════════════════════════════════════════════════════════ */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--brand);
  transition: gap var(--t-base);
}
.link-arrow svg {
  width: 16px; height: 16px;
  transition: transform var(--t-base);
}
.link-arrow:hover { gap: 12px; }
.link-arrow:hover svg { transform: translateX(2px); }

/* ════════════════════════════════════════════════════════════════════
   PAGE LOADER — gentle fade in on first paint
   ════════════════════════════════════════════════════════════════════ */
body {
  animation: page-fade-in 600ms ease-out;
}
@keyframes page-fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* ════════════════════════════════════════════════════════════════════
   NUMBER COUNTUP (for stats)
   Uses CSS counter via JS, this is base styling
   ════════════════════════════════════════════════════════════════════ */
[data-countup] {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ════════════════════════════════════════════════════════════════════
   FLOATING ELEMENTS (subtle parallax)
   ════════════════════════════════════════════════════════════════════ */
.float-gentle {
  animation: float-gentle 5s ease-in-out infinite;
}
@keyframes float-gentle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* ════════════════════════════════════════════════════════════════════
   REDUCED MOTION FALLBACK
   ════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
  }
  .img-hover-zoom img,
  .float-gentle,
  .pulse-dot::before {
    animation: none !important;
    transform: none !important;
  }
}