/* =============================================================
   AdBiz Communications — Animations & keyframes
   ============================================================= */

/* Scroll reveal base states (toggled by IntersectionObserver in animations.js) */
[data-reveal] { opacity: 0; transform: translateY(38px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); will-change: opacity, transform; }
[data-reveal="left"] { transform: translateX(-46px); }
[data-reveal="right"] { transform: translateX(46px); }
[data-reveal="scale"] { transform: scale(0.92); }
[data-reveal].in-view { opacity: 1; transform: none; }

/* Stagger children */
[data-stagger] > * { opacity: 0; transform: translateY(30px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
[data-stagger].in-view > * { opacity: 1; transform: none; }
[data-stagger].in-view > *:nth-child(1) { transition-delay: 0.05s; }
[data-stagger].in-view > *:nth-child(2) { transition-delay: 0.13s; }
[data-stagger].in-view > *:nth-child(3) { transition-delay: 0.21s; }
[data-stagger].in-view > *:nth-child(4) { transition-delay: 0.29s; }
[data-stagger].in-view > *:nth-child(5) { transition-delay: 0.37s; }
[data-stagger].in-view > *:nth-child(6) { transition-delay: 0.45s; }

/* Hero line reveal (played on load / preloader end) */
.reveal-lines .line > span { transition: transform 1s var(--ease); }
.reveal-lines.play .line > span { transform: translateY(0); }
.reveal-lines.play .line:nth-child(1) > span { transition-delay: 0.05s; }
.reveal-lines.play .line:nth-child(2) > span { transition-delay: 0.16s; }
.reveal-lines.play .line:nth-child(3) > span { transition-delay: 0.27s; }
.reveal-lines.play .line:nth-child(4) > span { transition-delay: 0.38s; }

/* Fade up utility with delays */
.fade-up { animation: fadeUp 0.9s var(--ease) both; }

/* Floating elements */
.float { animation: float 6s var(--ease-in-out) infinite; }
.float.d1 { animation-delay: 0.6s; }
.float.d2 { animation-delay: 1.2s; }
.float.d3 { animation-delay: 1.8s; }

/* Progress bars */
.progress { height: 8px; border-radius: 8px; background: var(--paper-3); overflow: hidden; }
.dark .progress { background: rgba(255,255,255,0.1); }
.progress i { display: block; height: 100%; width: 0; border-radius: 8px; background: linear-gradient(90deg, var(--blue), var(--orange)); transition: width 1.4s var(--ease); }
.progress.in-view i { width: var(--val, 80%); }
.skill-row { margin-bottom: 24px; }
.skill-row .skill-top { display: flex; justify-content: space-between; margin-bottom: 10px; font-weight: 600; }
.skill-row .skill-top span:last-child { color: var(--blue); }

/* Typing */
.typing::after { content: "|"; color: var(--orange); animation: caret 1s steps(1) infinite; }

/* Text reveal (mask) */
.text-mask { display: inline-block; overflow: hidden; }
.text-mask > span { display: inline-block; transform: translateY(105%); transition: transform 0.9s var(--ease); }
.text-mask.in-view > span { transform: translateY(0); }

/* ---------- Keyframes ---------- */
@keyframes fadeUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes blobFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(4%, 6%) scale(1.08); } 66% { transform: translate(-3%, -4%) scale(0.96); } }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes gradShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes btnGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(37,99,235,0.45); } 50% { box-shadow: 0 0 0 16px rgba(37,99,235,0); } }
@keyframes rippleAnim { to { transform: scale(3.4); opacity: 0; } }
@keyframes caret { 50% { opacity: 0; } }
@keyframes plRise { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes plLoad { from { width: 0; } to { width: 100%; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  [data-reveal], [data-stagger] > *, .text-mask > span, .hero-copy .line > span { opacity: 1 !important; transform: none !important; }
}