/* =====================================================================
   SURL Technologies - Animation Library
   Keyframes & scroll-reveal helpers (complements AOS + GSAP)
   ===================================================================== */

/* ---------- Entrance keyframes ---------- */
@keyframes fadeUp   { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-34px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn   { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn  { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
@keyframes slideLeft  { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideRight { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } }

/* ---------- Hero text stagger (no-JS friendly) ---------- */
.cxufadeUp1 { animation: fadeUp .9s cubic-bezier(.16,1,.3,1) both .1s; }
.cxufadeUp2 { animation: fadeUp .9s cubic-bezier(.16,1,.3,1) both .25s; }
.cxufadeUp3 { animation: fadeUp .9s cubic-bezier(.16,1,.3,1) both .4s; }
.cxufadeUp4 { animation: fadeUp .9s cubic-bezier(.16,1,.3,1) both .55s; }
.cxufadeUp5 { animation: fadeUp .9s cubic-bezier(.16,1,.3,1) both .7s; }

/* ---------- Animated gradient text ---------- */
.grad-anim {
  background: linear-gradient(120deg, #60A5FA, #818CF8, #22D3EE, #60A5FA);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: gradShift 6s ease infinite;
}
@keyframes gradShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* ---------- Pulse / glow ---------- */
@keyframes glowPulse { 0%,100% { box-shadow: 0 0 24px rgba(37,99,235,.4); } 50% { box-shadow: 0 0 50px rgba(37,99,235,.75); } }
.pulse-glow { animation: glowPulse 3.2s ease-in-out infinite; }

@keyframes pulseDot { 0% { transform: scale(.9); opacity: 1; } 70% { transform: scale(2.4); opacity: 0; } 100% { opacity: 0; } }
.live-dot { position: relative; width: 9px; height: 9px; border-radius: 50%; background: #34d399; display: inline-block; }
.live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #34d399; animation: pulseDot 2s ease-out infinite; }

/* ---------- Shimmer skeleton (loading states) ---------- */
@keyframes shimmer { to { background-position: 200% 0; } }
.shimmer { background: linear-gradient(90deg, rgba(255,255,255,.04) 25%, rgba(255,255,255,.12) 37%, rgba(255,255,255,.04) 63%); background-size: 400% 100%; animation: shimmer 1.4s linear infinite; }

/* ---------- Tilt / spin shapes ---------- */
@keyframes spinSlow { to { transform: rotate(360deg); } }
.spin-slow { animation: spinSlow 30s linear infinite; }

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

/* ---------- Scroll reveal (JS toggles .in) ---------- */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal--left  { transform: translateX(-40px); }
.reveal--right { transform: translateX(40px); }
.reveal--left.in, .reveal--right.in { transform: translateX(0); }

.reveal[data-delay="1"] { transition-delay: .1s; }
.reveal[data-delay="2"] { transition-delay: .2s; }
.reveal[data-delay="3"] { transition-delay: .3s; }
.reveal[data-delay="4"] { transition-delay: .4s; }

/* ---------- Underline draw on hover ---------- */
.draw-underline { position: relative; }
.draw-underline::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background: var(--grad-primary); transform: scaleX(0); transform-origin: right; transition: transform .35s ease; }
.draw-underline:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Magnetic button base (JS-driven transform) ---------- */
.magnetic { will-change: transform; }

/* ---------- Typewriter rotating word (hero) ---------- */
.type-rotate::after {
  content: ""; display: inline-block;
  width: 3px; height: 0.95em; margin-left: 5px;
  background: #7eb0ff; border-radius: 2px;
  vertical-align: -0.08em;
  animation: caretBlink 1s step-end infinite;
}
@keyframes caretBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* ---------- AOS easing tweak ---------- */
[data-aos] { pointer-events: none; }
[data-aos].aos-animate { pointer-events: auto; }