/* ==========================================================================
   KANVAST 2026 — ULTRA-SMOOTH SCROLL-DRIVEN MOTION & INTERACTION SYSTEM
   Silky, GPU-Accelerated, High-Performance Micro-Motions (60fps)
   ========================================================================== */

/* ==========================================================================
   1. CORE SCROLL REVEAL BASE CLASSES
   ========================================================================== */
.scroll-reveal,
[data-scroll] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
  filter: blur(4px);
}

.scroll-reveal.is-visible,
[data-scroll].is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Directional Motion Reveals */
.scroll-reveal-left {
  opacity: 0;
  transform: translateX(-35px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
  filter: blur(4px);
}

.scroll-reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
}

.scroll-reveal-right {
  opacity: 0;
  transform: translateX(35px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
  filter: blur(4px);
}

.scroll-reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
  filter: blur(0);
}

.scroll-reveal-scale {
  opacity: 0;
  transform: scale(0.92) translateY(20px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
  filter: blur(4px);
}

.scroll-reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1) translateY(0);
  filter: blur(0);
}

/* ==========================================================================
   2. STAGGERED REVEALS FOR CARDS & LISTS
   ========================================================================== */
.scroll-stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.scroll-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; opacity: 1; transform: translateY(0); }
.scroll-stagger.is-visible > *:nth-child(2) { transition-delay: 0.12s; opacity: 1; transform: translateY(0); }
.scroll-stagger.is-visible > *:nth-child(3) { transition-delay: 0.19s; opacity: 1; transform: translateY(0); }
.scroll-stagger.is-visible > *:nth-child(4) { transition-delay: 0.26s; opacity: 1; transform: translateY(0); }
.scroll-stagger.is-visible > *:nth-child(5) { transition-delay: 0.33s; opacity: 1; transform: translateY(0); }
.scroll-stagger.is-visible > *:nth-child(6) { transition-delay: 0.40s; opacity: 1; transform: translateY(0); }
.scroll-stagger.is-visible > *:nth-child(7) { transition-delay: 0.47s; opacity: 1; transform: translateY(0); }
.scroll-stagger.is-visible > *:nth-child(8) { transition-delay: 0.54s; opacity: 1; transform: translateY(0); }

/* ==========================================================================
   3. SUBTLE FLOATING & AMBIENT MOTIONS (REFINED & NATURAL)
   ========================================================================== */
.anim-float-subtle {
  animation: floatSubtle 6s ease-in-out infinite;
  will-change: transform;
}

@keyframes floatSubtle {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

.anim-float-hero {
  animation: floatHeroMascot 7s ease-in-out infinite;
  will-change: transform;
}

@keyframes floatHeroMascot {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-10px) rotate(0.8deg);
  }
}

/* ==========================================================================
   4. INTERACTIVE HOVER MOTION (SILKY LIFT & INERTIA BUFFER)
   ========================================================================== */
.hover-lift {
  /* Gradual resting deceleration buffer when cursor leaves */
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.6s ease;
  will-change: transform, box-shadow;
}

.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 42px -4px rgba(6, 28, 56, 0.14);
  /* Smooth, buoyant in-transition */
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease;
}

/* ==========================================================================
   5. VIEW & TAB TRANSITIONS
   ========================================================================== */
.view-section {
  animation: fadeInSmooth 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInSmooth {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   6. ACCESSIBILITY (PREFERS-REDUCED-MOTION)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
    scroll-behavior: auto !important;
  }
  .scroll-reveal, .scroll-reveal-left, .scroll-reveal-right, .scroll-reveal-scale, .scroll-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ==========================================================================
   7. MOBILE SCROLL PERFORMANCE OPTIMIZATIONS (ZERO BLUR REPAINT ON SCROLL)
   Desktop continues to display silky 4px blur transitions!
   ========================================================================== */
@media (max-width: 768px) {
  .scroll-reveal,
  .scroll-reveal-left,
  .scroll-reveal-right,
  .scroll-reveal-scale,
  [data-scroll] {
    filter: none !important;
    will-change: opacity, transform !important;
    transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.45s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .scroll-reveal.is-visible,
  .scroll-reveal-left.is-visible,
  .scroll-reveal-right.is-visible,
  .scroll-reveal-scale.is-visible,
  [data-scroll].is-visible {
    filter: none !important;
  }

  .anim-float-hero {
    animation: floatHeroMobile 6s ease-in-out infinite !important;
    will-change: transform !important;
  }

  @keyframes floatHeroMobile {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }
}