/* ============================================
   BOLDBLACK DESIGNS — ANIMATIONS
   Inspired by nimbusmedia.io
   ============================================ */

/* ---- Custom cursor ---- */
.cursor-dot {
  position: fixed;
  width: 8px; height: 8px;
  background: #0a0a0a;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: transform 0.1s, opacity 0.3s;
  mix-blend-mode: difference;
}
.cursor-ring {
  position: fixed;
  width: 36px; height: 36px;
  border: 1.5px solid rgba(10,10,10,0.35);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition: width 0.35s, height 0.35s, border-color 0.35s, transform 0.12s;
  mix-blend-mode: difference;
}
.cursor-ring.hovering {
  width: 56px; height: 56px;
  border-color: rgba(10,10,10,0.6);
}
@media (hover: none) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* ---- Gradient mesh blobs (hero background) ---- */
.blob-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0;
  animation: blobFloat linear infinite;
}
.blob-1 {
  width: 560px; height: 560px;
  background: radial-gradient(circle, #f5e5c0 0%, transparent 70%);
  top: -120px; right: -80px;
  animation-duration: 18s;
  animation-delay: 0s;
}
.blob-2 {
  width: 440px; height: 440px;
  background: radial-gradient(circle, #dce8ff 0%, transparent 70%);
  bottom: -100px; left: -60px;
  animation-duration: 22s;
  animation-delay: -6s;
}
.blob-3 {
  width: 320px; height: 320px;
  background: radial-gradient(circle, #e8f5e9 0%, transparent 70%);
  top: 40%; left: 45%;
  animation-duration: 26s;
  animation-delay: -12s;
}
@keyframes blobFloat {
  0%   { opacity: 0;    transform: translate(0, 0)    scale(1);    }
  10%  { opacity: 0.55; }
  50%  { opacity: 0.45; transform: translate(30px, -40px) scale(1.08); }
  90%  { opacity: 0.55; }
  100% { opacity: 0;    transform: translate(0, 0)    scale(1);    }
}

/* ---- Scrolling skill ticker (Nimbus style) ---- */
.skills-ticker {
  overflow: hidden;
  padding: 18px 0;
  background: var(--white);
  border-bottom: 1px solid var(--gray-border);
  position: relative;
}
.skills-ticker::before,
.skills-ticker::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.skills-ticker::before { left: 0;  background: linear-gradient(to right, #fff, transparent); }
.skills-ticker::after  { right: 0; background: linear-gradient(to left,  #fff, transparent); }

.ticker-track {
  display: flex;
  white-space: nowrap;
  gap: 0;
  animation: tickerScroll 30s linear infinite;
}
.ticker-track:hover { animation-play-state: paused; }

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 28px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-dark);
  flex-shrink: 0;
}
.ticker-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent-2);
  flex-shrink: 0;
}

@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- Word-split heading animation ---- */
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  margin-right: 0.25em;
}
.split-word-inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}
.split-word.visible .split-word-inner {
  transform: translateY(0);
}

/* ---- Char-by-char eyebrow animation ---- */
.split-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.4s, transform 0.4s;
}
.split-char.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Magnetic button effect ---- */
.magnetic {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ---- Counter animation ---- */
.count-up { display: inline; }

/* ---- Floating stat boxes ---- */
.stat-box {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s !important;
}
.stat-box:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.1) !important;
}

/* ---- Staggered card pop-in ---- */
.card-pop {
  opacity: 0;
  transform: translateY(32px) scale(0.97);
  transition: opacity 0.6s cubic-bezier(0.16,1,0.3,1),
              transform 0.6s cubic-bezier(0.16,1,0.3,1);
}
.card-pop.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ---- Process step slide-in ---- */
.process-step {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1),
              transform 0.7s cubic-bezier(0.16,1,0.3,1) !important;
}
.process-step.visible {
  opacity: 1;
  transform: translateX(0) !important;
}

/* ---- Service card tilt ---- */
.service-card {
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1),
              background 0.3s,
              box-shadow 0.4s !important;
  transform-style: preserve-3d;
  will-change: transform;
}
.service-card:hover {
  box-shadow: 0 20px 48px rgba(0,0,0,0.1) !important;
}

/* ---- Pricing card lift ---- */
.pricing-card {
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1),
              border-color 0.3s,
              box-shadow 0.4s !important;
}
.pricing-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 24px 56px rgba(0,0,0,0.12) !important;
}
.featured-pricing:hover {
  transform: translateY(-8px) scale(1.02) !important;
}

/* ---- Line draw underline on section titles ---- */
.line-draw {
  position: relative;
  display: inline-block;
}
.line-draw::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 3px;
  background: var(--accent-2);
  transition: width 1.2s cubic-bezier(0.16,1,0.3,1);
}
.line-draw.visible::after { width: 100%; }

/* ---- Scroll progress bar ---- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: var(--accent-2);
  z-index: 9999;
  width: 0%;
  transition: width 0.1s linear;
}

/* ---- Floating badge pulse ---- */
.visual-badge {
  animation: badgeFloat 3s ease-in-out infinite !important;
}
.badge-mobile {
  animation-delay: -1.5s !important;
}
@keyframes badgeFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

/* ---- Browser mock shimmer on load ---- */
.browser-mock {
  animation: mockSlideIn 1s cubic-bezier(0.16,1,0.3,1) 0.6s both;
}
@keyframes mockSlideIn {
  from { opacity: 0; transform: translateY(30px) rotate(1deg); }
  to   { opacity: 1; transform: translateY(0) rotate(0deg); }
}

/* ---- Hero badge slide ---- */
.hero-badge {
  animation: slideRight 0.8s cubic-bezier(0.16,1,0.3,1) 0.2s both !important;
}
@keyframes slideRight {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ---- Testimonial card hover ---- */
.testimonial-card {
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1),
              border-color 0.3s,
              box-shadow 0.4s !important;
}
.testimonial-card:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 20px 48px rgba(0,0,0,0.1) !important;
}

/* ---- Glowing CTA button ---- */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s, opacity 0.6s;
  opacity: 0;
}
.btn-primary:hover::before {
  width: 300px; height: 300px;
  opacity: 1;
}

/* ---- Nav link active state ---- */
.nav-links a.active-section {
  color: var(--black) !important;
}
.nav-links a.active-section::after {
  width: 100% !important;
}

/* ---- Smooth page entrance ---- */
body {
  animation: pageIn 0.5s ease both;
}
@keyframes pageIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- Reduced motion fallback ---- */
@media (prefers-reduced-motion: reduce) {
  .blob, .ticker-track, .visual-badge,
  .browser-mock, .hero-badge,
  .split-word-inner, .split-char,
  .card-pop, .process-step { animation: none !important; transition: none !important; }
  .split-word-inner { transform: none !important; }
  .split-char { opacity: 1 !important; transform: none !important; }
}