/* ==========================================================================
   PAIRING WORKS - ANIMATIONS & PARALLAX TRANSITIONS (WHITE/BLUE OPTIMIZED)
   Smooth 60fps GPU acceleration with zero jitter
   ========================================================================== */

/* ----------------- Reveal Utility Classes ----------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(30px) translateZ(0);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
  backface-visibility: hidden;
}

[data-reveal="fade-in"] {
  transform: translateY(0) translateZ(0);
}

[data-reveal="scale-up"] {
  transform: scale(0.94) translateZ(0);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1) translateZ(0);
}

/* Delay helpers */
[data-delay="0.1"] { transition-delay: 0.1s; }
[data-delay="0.2"] { transition-delay: 0.2s; }
[data-delay="0.3"] { transition-delay: 0.3s; }
[data-delay="0.4"] { transition-delay: 0.4s; }
[data-delay="0.5"] { transition-delay: 0.5s; }

/* ----------------- Floating & Ambient Keyframes ----------------- */
@keyframes floatSlow {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(0.4deg);
  }
}

.hero-floating-card {
  animation: floatSlow 6s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% {
    opacity: 0.35;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.06);
  }
}

.mockup-glow-ambient {
  animation: glowPulse 5s ease-in-out infinite;
}

/* ----------------- Parallax Showcase Items (Jitter Free) ----------------- */
.work-showcase-item {
  position: relative;
}

.work-visual-col {
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.device-mockup-wrapper {
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

/* ----------------- Hover Magnetic Light Effect ----------------- */
.magnetic-glow {
  position: relative;
  overflow: hidden;
}

.magnetic-glow::before {
  content: '';
  position: absolute;
  top: var(--mouse-y, 50%);
  left: var(--mouse-x, 50%);
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.12), transparent 70%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.magnetic-glow:hover::before {
  opacity: 1;
}

/* Stagger item appearance */
.hero-title .title-line {
  display: block;
  overflow: hidden;
}