/* ==========================================================================
   Animations – CredSync
   ========================================================================== */

:root {
  --anim-duration: 0.8s;
  --anim-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --anim-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

html {
  scroll-behavior: smooth;
}

/* Base Animation Classes */
.animate-hidden {
  opacity: 0;
  transition: opacity var(--anim-duration) var(--anim-ease),
              transform var(--anim-duration) var(--anim-ease);
}

/* Fallback: If JS is not enabled */
@media (scripting: none) {
  .animate-hidden {
    opacity: 1 !important;
    transform: none !important;
  }
}

.animate-visible {
  opacity: 1 !important;
  transform: translate(0, 0) scale(1) !important;
}

/* Animation Types */
.fade-up { transform: translateY(30px); }
.fade-down { transform: translateY(-30px); }
.fade-left { transform: translateX(-30px); }
.fade-right { transform: translateX(30px); }
.zoom-in { transform: scale(0.95); }
.zoom-out { transform: scale(1.05); }

/* Delays */
.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; }
.delay-800 { transition-delay: 800ms; }
.delay-1000 { transition-delay: 1000ms; }

/* Micro-interactions */
.hover-lift {
  transition: transform 0.3s var(--anim-ease), box-shadow 0.3s var(--anim-ease);
}

.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.hover-scale {
  transition: transform 0.3s var(--anim-ease);
}

.hover-scale:hover {
  transform: scale(1.05);
}

/* ==========================================================================
   Deck of Cards Animation (Sua Marca Section)
   ========================================================================== */

/* Z-Index Hierarchy (Always active) */
.bf-card:nth-child(1) { z-index: 4; }
.bf-card:nth-child(2) { z-index: 3; }
.bf-card:nth-child(3) { z-index: 2; }
.bf-card:nth-child(4) { z-index: 1; }

/* Desktop Animation (Stack behind first card) */
@media (min-width: 1201px) {
  .bf-card {
    transition: 
      transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), /* Smooth ease-out */
      opacity 0.6s ease,
      box-shadow 0.3s ease;
    /* Initial opacity 0 to prevent glitching before JS loads */
    opacity: 0;
  }

  /* Initial Positions (Stacked behind Card 1) 
     Calculated based on gap: 24px 
     Card 2 moves left by 100% + 24px
     Card 3 moves left by 200% + 48px
     Card 4 moves left by 300% + 72px
  */
  .bf-card:nth-child(1) { transform: translateX(0); }
  .bf-card:nth-child(2) { transform: translateX(calc(-100% - 24px)); }
  .bf-card:nth-child(3) { transform: translateX(calc(-200% - 48px)); }
  .bf-card:nth-child(4) { transform: translateX(calc(-300% - 72px)); }

  /* Final State (Side by Side) */
  .stagger-visible .bf-card.stagger-item {
    transform: translateX(0);
    opacity: 1 !important;
  }

  /* Hover Effect (Desktop) */
  .stagger-visible .bf-card.stagger-item:hover {
    transform: translateY(-10px) scale(1.02);
    z-index: 10; /* Bring to front on hover */
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
  }
}

/* Mobile/Tablet Animation (Simple Fade Up) */
@media (max-width: 1200px) {
  .bf-card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    transition-delay: var(--delay, 0ms);
  }

  .stagger-visible .bf-card.stagger-item {
    opacity: 1 !important;
    transform: translateY(0);
  }
}

/* ==========================================================================
   General Stagger Items (Other Sections)
   ========================================================================== */

.stagger-item:not(.bf-card) {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  transition-delay: var(--delay, 0ms);
}

.stagger-visible .stagger-item:not(.bf-card) {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Card Hover Effects */
.notCiaDefault, .hiw-card, .contact-card {
  transition: transform 0.4s var(--anim-ease), box-shadow 0.4s var(--anim-ease);
}

.notCiaDefault:hover, .hiw-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
  z-index: 1;
}

/* Button Interactions */
.cs-btn, .btn-partner-primary, .btn-partner-secondary, .btn-submit, .cs-banner__btn {
  position: relative;
  overflow: hidden;
}

.cs-btn::after, .btn-partner-primary::after, .btn-partner-secondary::after, .btn-submit::after, .cs-banner__btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease-out, height 0.6s ease-out;
}

.cs-btn:active::after, .btn-partner-primary:active::after, .btn-partner-secondary:active::after, .btn-submit:active::after, .cs-banner__btn:active::after {
  width: 200%;
  height: 200%;
  transition: 0s;
}

/* Scroll Progress Bar */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--Brand-Primary, #fad3a6);
  z-index: 1000;
  transition: width 0.1s;
}