/* ==========================================================================
   CraftEgon CCS — Home Animations CSS (separate file, no conflict)
   ========================================================================== */

/* ==========================================================================
   SCROLL REVEAL ANIMATIONS
   ========================================================================== */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-on-scroll { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   MOBILE RESPONSIVE IMPROVEMENTS
   ========================================================================== */
/* Trust bar: 2x2 grid on mobile */
@media (max-width: 640px) {
  .trust-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
  .metric-text-val {
    font-size: 1.5rem;
  }
}

/* Bento grid: single column on mobile */
@media (max-width: 640px) {
  .pillars-bento-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  .bento-tile { padding: 1.5rem; }
}

/* Stage tabs: scrollable on mobile */
@media (max-width: 640px) {
  .stages-tabs-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.5rem;
    justify-content: flex-start;
  }
  .stages-tabs-nav::-webkit-scrollbar { display: none; }
  .stage-tab-btn {
    white-space: nowrap;
    flex-shrink: 0;
  }
}

/* Fee estimator: stack on mobile */
@media (max-width: 768px) {
  .estimator-3d-card {
    flex-direction: column;
  }
  .estimator-controls,
  .estimator-output-box {
    width: 100%;
  }
}

/* Process grid: 2 columns on tablet, 1 on mobile */
@media (max-width: 640px) {
  .process-grid {
    grid-template-columns: 1fr;
  }
}
@media (min-width: 641px) and (max-width: 1023px) {
  .process-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Why cards: stack on mobile */
@media (max-width: 640px) {
  .why-grid {
    grid-template-columns: 1fr;
  }
}

/* Hero cockpit: hide on very small screens */
@media (max-width: 480px) {
  .hero-cockpit-stage {
    display: none;
  }
}

/* Final CTA buttons: stack on mobile */
@media (max-width: 480px) {
  .final-cta-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  .final-cta-buttons a {
    width: 100%;
    text-align: center;
  }
  .final-cta-contact-info {
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
  }
}

/* Stage service cards: 1 col on mobile */
@media (max-width: 640px) {
  .stage-services-grid {
    grid-template-columns: 1fr;
  }
}