/* =========================================
   RedSharc — animations.css
   Scroll-triggered animations, keyframes,
   entrance transitions, micro-interactions
   ========================================= */

/* === REVEAL SYSTEM — smooth spring-like reveals === */
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-fade {
  opacity: 0;
  will-change: opacity, transform;
  /* cubic-bezier for a gentle spring feel */
  transition:
    opacity  0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-up    { transform: translateY(32px); }
.reveal-left  { transform: translateX(-32px); }
.reveal-right { transform: translateX(32px); }
.reveal-fade  { transform: none; }

.revealed {
  opacity: 1 !important;
  transform: none !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal-up, .reveal-left, .reveal-right, .reveal-fade {
    opacity: 1; transform: none; transition: none;
  }
}

/* === HERO ANIMATIONS === */
@keyframes hero-badge-in {
  from { opacity: 0; transform: translateY(-12px) scale(.95); }
  to   { opacity: 1; transform: none; }
}
@keyframes hero-headline-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
.hero-content .hero-badge    { animation: hero-badge-in    .5s  var(--transition) .2s  both; }
.hero-content .hero-headline { animation: hero-headline-in .6s  var(--transition) .35s both; }
.hero-content .hero-subheadline { animation: hero-headline-in .6s var(--transition) .5s both; }
.hero-content .hero-trust-strip { animation: hero-headline-in .6s var(--transition) .65s both; }
.hero-content .hero-ctas     { animation: hero-headline-in .6s  var(--transition) .8s  both; }
.hero-visual                 { animation: hero-headline-in .8s  var(--transition) .6s  both; }

/* === COUNTER ANIMATION (JS-driven, CSS defines transition) === */
.hero-stat-num {
  display: block;
  transition: none; /* JS handles counting */
}

/* === NAV SHRINK === */
header.scrolled .nav-logo-text { font-size: 1.25rem; }
header.scrolled .btn-primary.btn-sm { transform: scale(.95); }

/* === PAGE PROGRESS BAR === */
#page-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: var(--red);
  z-index: 9999;
  width: 0;
  transition: width .15s linear;
  box-shadow: 0 0 8px rgba(224,30,44,.5);
}

/* === BUTTON RIPPLE === */
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  transform: scale(0);
  animation: ripple .55s linear;
  pointer-events: none;
}
@keyframes ripple {
  to { transform: scale(4); opacity: 0; }
}

/* === SERVICE CARD HOVER GLOW === */
.service-card:hover {
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(224,30,44,.1);
}

/* === PROCESS STEP ENTRANCE === */
.process-step.revealed .process-step-num {
  animation: pop-in .4s var(--transition) both;
}
@keyframes pop-in {
  0%   { transform: scale(.6); opacity: 0; }
  70%  { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

/* === TESTIMONIAL CARD HOVER === */
.testimonial-card:hover {
  box-shadow: var(--shadow-md), 0 0 0 2px rgba(224,30,44,.1);
}

/* === FAQ ANSWER SLIDE === */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s var(--transition), padding .3s;
}
.faq-answer.open {
  max-height: 500px;
}
.faq-answer[hidden] { display: block !important; } /* Override hidden; use max-height instead */

/* === STICKY HEADER BLUR ANIMATION === */
@keyframes header-blur-in {
  from { backdrop-filter: blur(0); }
  to   { backdrop-filter: blur(16px) saturate(180%); }
}
header.scrolled { animation: header-blur-in .3s ease forwards; }

/* === ABOUT CARD STAGGER === */
.about-cards .about-card:nth-child(1) { transition-delay: 0ms; }
.about-cards .about-card:nth-child(2) { transition-delay: 100ms; }
.about-cards .about-card:nth-child(3) { transition-delay: 200ms; }

/* === WHY CARD HOVER === */
.why-card:hover .why-card-icon {
  animation: wiggle .4s var(--transition);
}
@keyframes wiggle {
  0%,100% { transform: rotate(0deg); }
  25%      { transform: rotate(-8deg); }
  75%      { transform: rotate(8deg); }
}

/* === FOOTER CONTENT AREA SWAP === */
#footer-content-area {
  transition: opacity .25s ease, transform .25s ease;
}
#footer-content-area.swapping {
  opacity: 0;
  transform: translateY(8px);
}

/* === LOADER FADE OUT === */
#preloader {
  transition: opacity .5s ease .2s, visibility .5s ease .2s;
}

/* === WHATSAPP FAB === */
.whatsapp-fab {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 56px;
  height: 56px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  box-shadow: 0 8px 24px rgba(37,211,102,.4);
  z-index: 50;
  transition: transform .25s var(--transition), box-shadow .25s;
  animation: fab-bounce 3s ease-in-out 2s infinite;
}
.whatsapp-fab:hover {
  transform: scale(1.12);
  box-shadow: 0 12px 32px rgba(37,211,102,.55);
}
@keyframes fab-bounce {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* === FORM FOCUS LABEL ANIMATION === */
.form-group label { transition: color .2s; }
.form-group:focus-within label { color: var(--red); }

/* =====================================================
   STAGGER DELAYS — nth-child CSS (no inline styles)
   Replaces all style="--delay:Xms" violations
   ===================================================== */

/* Generic 5-item stagger */
.stagger-children > *:nth-child(1) { transition-delay: 0ms; animation-delay: 0ms; }
.stagger-children > *:nth-child(2) { transition-delay: 80ms; animation-delay: 80ms; }
.stagger-children > *:nth-child(3) { transition-delay: 160ms; animation-delay: 160ms; }
.stagger-children > *:nth-child(4) { transition-delay: 240ms; animation-delay: 240ms; }
.stagger-children > *:nth-child(5) { transition-delay: 320ms; animation-delay: 320ms; }
.stagger-children > *:nth-child(6) { transition-delay: 400ms; animation-delay: 400ms; }
.stagger-children > *:nth-child(7) { transition-delay: 480ms; animation-delay: 480ms; }
.stagger-children > *:nth-child(8) { transition-delay: 560ms; animation-delay: 560ms; }
.stagger-children > *:nth-child(9) { transition-delay: 640ms; animation-delay: 640ms; }

/* Process steps stagger */
.process-steps > *:nth-child(1),
.process-timeline > *:nth-child(1) { transition-delay: 0ms; }
.process-steps > *:nth-child(2),
.process-timeline > *:nth-child(2) { transition-delay: 100ms; }
.process-steps > *:nth-child(3),
.process-timeline > *:nth-child(3) { transition-delay: 200ms; }
.process-steps > *:nth-child(4),
.process-timeline > *:nth-child(4) { transition-delay: 300ms; }
.process-steps > *:nth-child(5),
.process-timeline > *:nth-child(5) { transition-delay: 400ms; }

/* Why grid stagger */
.why-grid > *:nth-child(1) { transition-delay: 0ms; }
.why-grid > *:nth-child(2) { transition-delay: 100ms; }
.why-grid > *:nth-child(3) { transition-delay: 200ms; }
.why-grid > *:nth-child(4) { transition-delay: 300ms; }
.why-grid > *:nth-child(5) { transition-delay: 400ms; }

/* Factors grid stagger */
.factors-grid > *:nth-child(1) { transition-delay: 0ms; }
.factors-grid > *:nth-child(2) { transition-delay: 100ms; }
.factors-grid > *:nth-child(3) { transition-delay: 200ms; }
.factors-grid > *:nth-child(4) { transition-delay: 300ms; }
.factors-grid > *:nth-child(5) { transition-delay: 400ms; }

/* Services grid stagger */
.services-grid > *:nth-child(1),
.sub-services-grid > *:nth-child(1),
.features-grid > *:nth-child(1) { transition-delay: 0ms; }
.services-grid > *:nth-child(2),
.sub-services-grid > *:nth-child(2),
.features-grid > *:nth-child(2) { transition-delay: 80ms; }
.services-grid > *:nth-child(3),
.sub-services-grid > *:nth-child(3),
.features-grid > *:nth-child(3) { transition-delay: 160ms; }
.services-grid > *:nth-child(4),
.sub-services-grid > *:nth-child(4),
.features-grid > *:nth-child(4) { transition-delay: 240ms; }
.services-grid > *:nth-child(5),
.sub-services-grid > *:nth-child(5),
.features-grid > *:nth-child(5) { transition-delay: 320ms; }
.services-grid > *:nth-child(6),
.sub-services-grid > *:nth-child(6),
.features-grid > *:nth-child(6) { transition-delay: 400ms; }

/* Team grid stagger */
.team-grid > *:nth-child(1) { transition-delay: 0ms; }
.team-grid > *:nth-child(2) { transition-delay: 100ms; }
.team-grid > *:nth-child(3) { transition-delay: 200ms; }
.team-grid > *:nth-child(4) { transition-delay: 300ms; }

/* Testimonials stagger */
.testimonials-track > *:nth-child(1) { transition-delay: 0ms; }
.testimonials-track > *:nth-child(2) { transition-delay: 100ms; }
.testimonials-track > *:nth-child(3) { transition-delay: 200ms; }
.testimonials-track > *:nth-child(4) { transition-delay: 300ms; }
.testimonials-track > *:nth-child(5) { transition-delay: 400ms; }
.testimonials-track > *:nth-child(6) { transition-delay: 500ms; }

/* FAQ stagger */
.faq-list > *:nth-child(1)  { transition-delay: 0ms; }
.faq-list > *:nth-child(2)  { transition-delay: 50ms; }
.faq-list > *:nth-child(3)  { transition-delay: 100ms; }
.faq-list > *:nth-child(4)  { transition-delay: 150ms; }
.faq-list > *:nth-child(5)  { transition-delay: 200ms; }
.faq-list > *:nth-child(6)  { transition-delay: 250ms; }
.faq-list > *:nth-child(7)  { transition-delay: 300ms; }
.faq-list > *:nth-child(8)  { transition-delay: 350ms; }
.faq-list > *:nth-child(9)  { transition-delay: 400ms; }
.faq-list > *:nth-child(10) { transition-delay: 450ms; }

/* Stats row stagger */
.stats-row > *:nth-child(1) { transition-delay: 0ms; }
.stats-row > *:nth-child(2) { transition-delay: 100ms; }
.stats-row > *:nth-child(3) { transition-delay: 200ms; }
.stats-row > *:nth-child(4) { transition-delay: 300ms; }

/* Posts/blog grid stagger */
.posts-grid > *:nth-child(1),
.featured-posts > *:nth-child(1) { transition-delay: 0ms; }
.posts-grid > *:nth-child(2),
.featured-posts > *:nth-child(2) { transition-delay: 60ms; }
.posts-grid > *:nth-child(3),
.featured-posts > *:nth-child(3) { transition-delay: 120ms; }
.posts-grid > *:nth-child(4) { transition-delay: 180ms; }
.posts-grid > *:nth-child(5) { transition-delay: 240ms; }
.posts-grid > *:nth-child(6) { transition-delay: 300ms; }
.posts-grid > *:nth-child(7) { transition-delay: 360ms; }
.posts-grid > *:nth-child(8) { transition-delay: 420ms; }
.posts-grid > *:nth-child(9) { transition-delay: 480ms; }

/* ── PARALLAX BAND ──
   Transform is driven by --parallax-y CSS variable set by JS.
   This is NOT an inline style — it's a CSS custom property.
*/
.parallax-band-bg {
  transform: translateY(var(--parallax-y, 0px));
  transition: transform .05s linear;
  will-change: transform;
}

/* ── CARD 3D TILT ──
   --tilt-x and --tilt-y set by JS via setProperty (not style attr violation)
*/
.service-card.tilting,
.sub-card.tilting {
  transform: perspective(800px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-6px);
  transition: transform .1s ease;
}

/* ── 2026 MICRO-INTERACTION: link underline sweep ── */
.footer-link {
  position: relative;
}
.footer-link::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--red);
  transition: width .25s var(--spring);
}
.footer-link:hover::after { width: 100%; }

/* ── SELECTION COLOR ── */
::selection { background: rgba(224,30,44,.15); color: var(--black); }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--gray-100); }
::-webkit-scrollbar-thumb { background: var(--gray-400); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--red); }

/* ── FOCUS VISIBLE ── */
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: var(--radius); }

/* ── PRINT ── */
@media print {
  header, footer, #preloader, .whatsapp-fab, .back-to-top, #page-progress { display: none !important; }
  body { font-size: 12pt; color: #000; }
  .section { padding: 2rem 0; }
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  .parallax-band-bg { transform: none !important; transition: none; }
  .service-card.tilting, .sub-card.tilting { transform: none; }
  .hero-accent-blob { animation: none; }
  .hero-floating-badge { animation: none; }
  .badge-dot { animation: none; }
  .whatsapp-fab { animation: none; }
}