/* ==========================================================================
   CURVE DIGITAL SOLUTIONS — ANIMATIONS STYLESHEET
   Scroll-reveal utility classes + keyframes, driven by js/animations.js
   ========================================================================== */

/* -------- Base reveal state -------- */
[data-reveal] {
  opacity: 0;
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  will-change: transform, opacity;
}
[data-reveal].in-view { opacity: 1; }

[data-reveal="fade-up"] { transform: translateY(36px); }
[data-reveal="fade-up"].in-view { transform: translateY(0); }

[data-reveal="fade-left"] { transform: translateX(-46px); }
[data-reveal="fade-left"].in-view { transform: translateX(0); }

[data-reveal="fade-right"] { transform: translateX(46px); }
[data-reveal="fade-right"].in-view { transform: translateX(0); }

[data-reveal="zoom-in"] { transform: scale(.9); }
[data-reveal="zoom-in"].in-view { transform: scale(1); }

/* Staggering via inline custom property --d (delay in ms), set by JS or inline style */
[data-reveal] { transition-delay: var(--reveal-delay, 0ms); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* -------- Typing animation (hero eyebrow / rotating word) -------- */
.type-target::after {
  content: '';
  display: inline-block;
  width: 2px;
  height: 1em;
  background: currentColor;
  margin-left: 3px;
  vertical-align: -2px;
  animation: caretBlink 1s step-end infinite;
}
@keyframes caretBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* -------- Gradient movement -------- */
.grad-animate {
  background-size: 200% 200%;
  animation: gradShift 8s ease infinite;
}
@keyframes gradShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* -------- Progress bars (skill / stat bars) -------- */
.progress-track {
  height: 6px;
  border-radius: 4px;
  background: var(--c-bg-soft-2);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--grad-primary);
  width: 0%;
  transition: width 1.4s var(--ease-out);
}

/* -------- Marquee drift (trust logos, optional continuous motion) -------- */
@keyframes driftX {
  from { background-position-x: 0; }
  to { background-position-x: 200px; }
}

/* -------- Pulse for live badge dot -------- */
@keyframes pulseDot {
  0% { box-shadow: 0 0 0 0 rgba(222,43,43,.45); }
  70% { box-shadow: 0 0 0 10px rgba(222,43,43,0); }
  100% { box-shadow: 0 0 0 0 rgba(222,43,43,0); }
}
.dot-live { animation: pulseDot 2.2s infinite; }

/* -------- Card hover tilt (used on service/portfolio cards via JS-set custom props) -------- */
.tilt-target {
  transform: perspective(900px) rotateX(var(--tiltX, 0deg)) rotateY(var(--tiltY, 0deg));
  transition: transform .35s var(--ease-out);
}

/* -------- Loading bar inside preloader mark (rotation already defined in style.css) -------- */

/* -------- Fade-in for page after preload -------- */
body.is-loading { overflow: hidden; }

/* -------- Custom cursor only on devices with a real pointer -------- */
@media (hover: none), (pointer: coarse) {
  .custom-cursor { display: none !important; }
}

/* -------- Blur-in reveal (used for lightbox/media reveal) -------- */
.blur-reveal {
  filter: blur(14px);
  opacity: 0;
  transition: filter .7s var(--ease-out), opacity .7s var(--ease-out);
}
.blur-reveal.in-view { filter: blur(0); opacity: 1; }