/* ==========================================
   BASIC TRANSITIONS & DRIVES
   ========================================== */
.fade-in {
  animation: fadeIn 0.8s ease forwards;
}

.fade-in-up {
  animation: fadeInUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

/* ==========================================
   SCROLL REVEALS (INTERSECTION OBSERVER FALLBACKS BY DEFAULT)
   ========================================== */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-on-scroll.active {
  opacity: 1;
  transform: translateY(0);
}

/* Delay modifiers for sequenced reveals */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }
.delay-600 { transition-delay: 600ms; }

/* Cinematic Text Mask Reveal */
.text-mask-wrapper {
  overflow: hidden;
  display: block;
}

.text-mask-word {
  display: inline-block;
  transform: translateY(115%) rotate(5deg);
  transform-origin: left top;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.9s ease;
  opacity: 0;
  will-change: transform, opacity;
}

.text-mask-wrapper.active .text-mask-word {
  transform: translateY(0) rotate(0deg);
  opacity: 1;
}

/* Staggered grid/item reveals */
.stagger-parent .stagger-item {
  opacity: 0;
  transform: translateY(35px);
  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;
}

.stagger-parent.active .stagger-item {
  opacity: 1;
  transform: translateY(0);
}

.stagger-parent.active .stagger-item:nth-child(1) { transition-delay: 100ms; }
.stagger-parent.active .stagger-item:nth-child(2) { transition-delay: 200ms; }
.stagger-parent.active .stagger-item:nth-child(3) { transition-delay: 300ms; }
.stagger-parent.active .stagger-item:nth-child(4) { transition-delay: 400ms; }
.stagger-parent.active .stagger-item:nth-child(5) { transition-delay: 500ms; }
.stagger-parent.active .stagger-item:nth-child(6) { transition-delay: 600ms; }

/* Magnetic CTA button support */
.magnetic-wrap {
  display: inline-block;
  position: relative;
}

.magnetic-btn {
  display: inline-flex;
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

/* ==========================================
   NATIVE CSS SCROLL-DRIVEN ANIMATIONS (PROGRESSIVE ENHANCEMENT)
   ========================================== */
@supports ((animation-timeline: scroll()) and (animation-range: 0% 100%)) {
  
  /* Timeline Scope for page timeline binding */
  html {
    timeline-scope: --hero-timeline, --proof-timeline, --services-timeline, --branding-timeline, --avatar-timeline, --work-timeline, --process-timeline;
  }
  
  /* Define timelines */
  .hero {
    view-timeline-name: --hero-timeline;
    view-timeline-axis: block;
  }
  
  .social-proof {
    view-timeline-name: --proof-timeline;
    view-timeline-axis: block;
  }
  
  #what-we-build {
    view-timeline-name: --services-timeline;
    view-timeline-axis: block;
  }
  
  #online-offline {
    view-timeline-name: --branding-timeline;
    view-timeline-axis: block;
  }
  
  #ai-avatar {
    view-timeline-name: --avatar-timeline;
    view-timeline-axis: block;
  }
  
  #featured-work {
    view-timeline-name: --work-timeline;
    view-timeline-axis: block;
  }
  
  #growth-process {
    view-timeline-name: --process-timeline;
    view-timeline-axis: block;
  }

  /* Parallax scrolling for backgrounds / showcasers */
  .cinematic-slider {
    animation: zoomOutScroll auto linear both;
    animation-timeline: --hero-timeline;
    animation-range: exit 0% exit 100%;
  }

  @keyframes zoomOutScroll {
    from {
      transform: scale(1);
      opacity: 1;
    }
    to {
      transform: scale(0.9) translateY(40px);
      opacity: 0.6;
    }
  }

  /* Header Shrinking on scroll */
  header {
    animation: headerShrink auto linear both;
    animation-timeline: scroll(y);
    animation-range: 0px 150px;
  }

  @keyframes headerShrink {
    to {
      background: rgba(9, 9, 11, 0.85);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--glass-border);
      height: 70px;
    }
  }

  /* Parallax layers */
  .branding-card-layered.digital {
    animation: digitalParallax auto linear both;
    animation-timeline: --branding-timeline;
    animation-range: entry 10% cover 60%;
  }

  .branding-card-layered.physical {
    animation: physicalParallax auto linear both;
    animation-timeline: --branding-timeline;
    animation-range: entry 10% cover 60%;
  }

  @keyframes digitalParallax {
    from {
      transform: translateY(50px) rotate(-6deg);
    }
    to {
      transform: translateY(-20px) rotate(-1deg);
    }
  }

  @keyframes physicalParallax {
    from {
      transform: translateY(100px) rotate(6deg);
    }
    to {
      transform: translateY(-10px) rotate(2deg);
    }
  }

  /* AI Avatar Floating phone zoom */
  .phone-mockup-wrapper {
    animation: phoneReveal auto linear both;
    animation-timeline: --avatar-timeline;
    animation-range: entry 20% cover 60%;
  }

  @keyframes phoneReveal {
    from {
      transform: scale(0.9) translateY(60px);
      opacity: 0.8;
      box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    }
    to {
      transform: scale(1) translateY(0px);
      opacity: 1;
      box-shadow: 0 30px 60px rgba(0,0,0,0.8), 0 0 35px rgba(124, 58, 237, 0.35);
    }
  }

  /* Process steps dynamic dot trail */
  .process-timeline::before {
    animation: timelineLineGrow auto linear both;
    animation-timeline: --process-timeline;
    animation-range: entry 30% exit 80%;
    transform-origin: top;
    transform: scaleY(0);
  }

  @keyframes timelineLineGrow {
    to {
      transform: scaleY(1);
    }
  }
  
  .process-number {
    animation: stepNumberReveal auto linear both;
    animation-timeline: view();
    animation-range: entry 20% cover 50%;
  }
  
  @keyframes stepNumberReveal {
    from {
      background: var(--color-bg);
      border-color: var(--glass-border);
      color: var(--color-text-muted);
    }
    to {
      background: var(--color-primary);
      border-color: var(--color-accent);
      color: white;
      box-shadow: 0 0 15px var(--color-primary-glow);
    }
  }
}

/* ==========================================
   MICRO-INTERACTIONS & MOTION EFFORTS
   ========================================== */

/* Magnetic glow button animation */
.btn-primary::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0px;
  height: 0px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s;
}

.btn-primary:hover::after {
  width: 250px;
  height: 250px;
}

/* Subtle continuous drift */
.floating-element-drift {
  animation: elementDrift 6s infinite alternate ease-in-out;
}

@keyframes elementDrift {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

/* ==========================================
   ACCESSIBILITY: RESPECT REDUCED MOTION
   ========================================== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-delay: 0s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0s !important;
    scroll-behavior: auto !important;
  }
  
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
  }
  
  .branding-card-layered,
  .phone-mockup-wrapper,
  .cinematic-slider,
  .process-timeline::before,
  .process-number {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}