/* ============================================================
   BLUE BRIDGE — V1 AI-FIRST
   animations.css — Keyframes, reveal states, parallax, micro-interactions
   GSAP enhances these; all degrade gracefully without JS.
   ============================================================ */

/* ---------- KEYFRAMES ---------- */
@keyframes bb-fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes bb-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bb-scale-in { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes bb-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes bb-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); opacity: 0.5; } }
@keyframes bb-halo { 0% { transform: scale(0.8); opacity: 0.6; } 70% { transform: scale(2.4); opacity: 0; } 100% { opacity: 0; } }
@keyframes bb-dash { to { stroke-dashoffset: -24; } }
@keyframes bb-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes bb-float-slow { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-22px) rotate(2deg); } }
@keyframes bb-typing { 0%,60%,100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-6px); opacity: 1; } }
@keyframes bb-spin { to { transform: rotate(360deg); } }
@keyframes bb-shimmer { to { background-position: 200% 0; } }
@keyframes bb-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes bb-orbit { from { transform: rotate(0) translateX(var(--orbit-r,120px)) rotate(0); } to { transform: rotate(360deg) translateX(var(--orbit-r,120px)) rotate(-360deg); } }
@keyframes bb-ticker { 0% { opacity: 0; transform: translateY(8px); } 12%,88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-8px); } }

/* ---------- REVEAL ON SCROLL (IntersectionObserver / GSAP) ---------- */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); will-change: opacity, transform; }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="scale"] { transform: scale(0.92); }
[data-reveal="left"].is-visible,
[data-reveal="right"].is-visible,
[data-reveal="scale"].is-visible { transform: none; }
[data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal-delay="3"] { transition-delay: 0.24s; }
[data-reveal-delay="4"] { transition-delay: 0.32s; }
[data-reveal-delay="5"] { transition-delay: 0.40s; }
[data-reveal-delay="6"] { transition-delay: 0.48s; }

/* Stagger groups */
[data-stagger] > * { opacity: 0; transform: translateY(24px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
[data-stagger].is-visible > * { opacity: 1; transform: none; }
[data-stagger].is-visible > *:nth-child(1){transition-delay:.05s}
[data-stagger].is-visible > *:nth-child(2){transition-delay:.12s}
[data-stagger].is-visible > *:nth-child(3){transition-delay:.19s}
[data-stagger].is-visible > *:nth-child(4){transition-delay:.26s}
[data-stagger].is-visible > *:nth-child(5){transition-delay:.33s}
[data-stagger].is-visible > *:nth-child(6){transition-delay:.40s}
[data-stagger].is-visible > *:nth-child(7){transition-delay:.47s}
[data-stagger].is-visible > *:nth-child(8){transition-delay:.54s}

/* ---------- PARALLAX ---------- */
[data-parallax] { will-change: transform; }

/* ---------- FLOATING DECOR ---------- */
.float { animation: bb-float 6s ease-in-out infinite; }
.float-slow { animation: bb-float-slow 9s ease-in-out infinite; }
.spin-slow { animation: bb-spin 28s linear infinite; }

/* Animated halo on map pins */
.map-node .halo { animation: bb-halo 2.6s ease-out infinite; }
.map-node:nth-child(2) .halo { animation-delay: 0.5s; }
.map-node:nth-child(3) .halo { animation-delay: 1s; }
.map-node:nth-child(4) .halo { animation-delay: 1.5s; }
.map-node:nth-child(5) .halo { animation-delay: 2s; }

/* ---------- COUNTER (numbers animate via JS, this is the visual cue) ---------- */
.counter { font-variant-numeric: tabular-nums; }

/* ---------- SHIMMER SKELETON (used for live dashboard load) ---------- */
.shimmer { background: linear-gradient(90deg, rgba(89,153,255,0.06) 25%, rgba(89,153,255,0.18) 37%, rgba(89,153,255,0.06) 63%); background-size: 200% 100%; animation: bb-shimmer 1.4s infinite; }

/* ---------- HOVER MICRO-INTERACTIONS ---------- */
.hover-lift { transition: transform 0.3s var(--ease), box-shadow 0.3s; }
.hover-lift:hover { transform: translateY(-4px); }
.hover-glow { transition: box-shadow 0.35s; }
.hover-glow:hover { box-shadow: var(--glow); }
.underline-grow { position: relative; }
.underline-grow::after { content: ""; position: absolute; left: 0; bottom: -3px; width: 0; height: 2px; background: var(--bb-accent); transition: width 0.3s var(--ease); }
.underline-grow:hover::after { width: 100%; }

/* Magnetic button base (JS adds transform) */
.magnetic { transition: transform 0.2s var(--ease); }

/* Ticker rotating words */
.ticker { display: inline-grid; }
.ticker > span { grid-area: 1/1; animation: bb-ticker 9s infinite; opacity: 0; color: var(--bb-accent); }
.ticker > span:nth-child(2){animation-delay:3s}
.ticker > span:nth-child(3){animation-delay:6s}

/* Progress bar grow (timelines / skill bars) */
.bar { height: 8px; border-radius: 6px; background: rgba(89,153,255,0.14); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--bb-primary), var(--bb-accent)); width: 0; transition: width 1.2s var(--ease); }
.bar.is-visible > i { width: var(--val, 60%); }

/* Gradient animated border */
.grad-border { position: relative; }
.grad-border::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(120deg, var(--bb-primary), var(--bb-accent), transparent); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0.6; }

/* Reduced motion: kill decorative loops */
@media (prefers-reduced-motion: reduce) {
  .float, .float-slow, .spin-slow, .marquee__track, .map-node .halo,
  .ticker > span, .shimmer, .bb-chat__launch .badge-dot { animation: none !important; }
  [data-reveal], [data-stagger] > * { opacity: 1 !important; transform: none !important; }
}