/* ==========================================================================
   BDG — animations.css
   Keyframes + reveal-on-scroll utility classes (paired with animations.js)
   ========================================================================== */

/* ---------------- Reveal base ---------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1), filter .9s ease;
}
[data-reveal].in-view {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal="scale"].in-view { transform: scale(1); }
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="left"].in-view { transform: translateX(0); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="right"].in-view { transform: translateX(0); }

/* stagger via inline --d custom property, set by animations.js or inline style */
[data-reveal] { transition-delay: var(--d, 0s); }

/* ---------------- Loading screen ---------------- */
.loader {
  position: fixed; inset: 0; z-index: 10000;
  background: var(--bg-0);
  display: flex; align-items: center; justify-content: center;
  transition: opacity .6s ease, visibility .6s ease;
}
.loader.hidden { opacity: 0; visibility: hidden; }
.loader-mark {
  font-family: var(--font-display); font-size: 15px; letter-spacing: .3em;
  color: var(--gray); position: relative;
}
.loader-mark::after {
  content: ''; position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%);
  width: 40px; height: 2px; background: var(--border);
  overflow: hidden;
}
.loader-bar {
  position: fixed; bottom: 0; left: 0; height: 2px; background: var(--accent);
  width: 0%; z-index: 10001; transition: width .3s ease;
}

/* ---------------- Blink / breathing ---------------- */
@keyframes pulse-glow {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}
.pulse { animation: pulse-glow 2.4s ease-in-out infinite; }

@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.float { animation: float-y 5s ease-in-out infinite; }

@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spin-slow { animation: spin-slow 40s linear infinite; }

/* ---------------- Typing dots ---------------- */
@keyframes blink-dot {
  0%, 80%, 100% { opacity: .3; transform: scale(.85); }
  40% { opacity: 1; transform: scale(1); }
}
.typing span { animation: blink-dot 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: .2s; }
.typing span:nth-child(3) { animation-delay: .4s; }

/* ---------------- Marquee (testimonials / logos) ---------------- */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-track {
  display: flex; width: max-content;
  animation: marquee-scroll 34s linear infinite;
}
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }

/* ---------------- Gradient text sweep ---------------- */
@keyframes gradient-sweep {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.grad-text {
  background: linear-gradient(90deg, var(--glow), var(--accent), var(--glow));
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradient-sweep 6s linear infinite;
}

/* ---------------- Magnetic buttons (JS-driven transform, CSS eases it) ---------------- */
.magnetic { transition: transform .25s cubic-bezier(.16,1,.3,1); }

/* ---------------- Counter number pop ---------------- */
.stat-num { display: inline-block; }

/* ---------------- Card lift on scroll-in ---------------- */
.card-tilt { transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .35s ease; transform-style: preserve-3d; }

/* ---------------- Fade line divider draw ---------------- */
@keyframes draw-line {
  from { width: 0; }
  to { width: 100%; }
}
.draw-line { height: 1px; background: var(--border-strong); width: 0; }
.draw-line.in-view { animation: draw-line 1.2s cubic-bezier(.16,1,.3,1) forwards; }

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
}