/* ============================================
   AICPA CFO 2026 — Animations & Overrides
   Techfino Design System
   External file: hubfs/events/aicpa-lp-animations.css
   ============================================ */

/* --- Design Tokens --- */
:root {
  --tf-navy-deep: #000042;
  --tf-navy: #23237B;
  --tf-teal: #53E0DC;
  --tf-teal-hover: #45c9c5;
  --tf-teal-dim: rgba(83,224,220,0.15);
  --tf-orange: #F55B3D;
  --tf-purple: #4040B2;
  --tf-white: #fff;
  --tf-off-white: #F5F6FA;
  --tf-gray-border: #D0D0E0;
  --tf-gray-text: #53535F;
  --tf-gray-muted: #6D6D70;
  --tf-shadow-md: 0 4px 16px rgba(35,35,123,0.1);
  --tf-shadow-lg: 0 12px 40px rgba(35,35,123,0.14);
  --tf-shadow-hero: 0 20px 60px rgba(35,35,123,0.18);
  --tf-transition: all 0.25s ease;
}

/* ============================================
   1. SCROLL-REVEAL (Fade-Up)
   ============================================ */

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

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

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes growBar {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

.reveal {
  opacity: 0;
  will-change: transform, opacity;
}

.reveal.visible {
  animation: fadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Stagger delays for sequential elements */
.reveal.delay-1 { animation-delay: 0.08s; }
.reveal.delay-2 { animation-delay: 0.15s; }
.reveal.delay-3 { animation-delay: 0.22s; }
.reveal.delay-4 { animation-delay: 0.30s; }
.reveal.delay-5 { animation-delay: 0.38s; }

/* Cards use scale-in for variety */
.reveal-card {
  opacity: 0;
  will-change: transform, opacity;
}
.reveal-card.visible {
  animation: scaleIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ============================================
   2. CARD HOVER EFFECTS
   ============================================ */

.aicpa-cards-sec__card,
.aicpa-compliance__card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  cursor: default;
}

.aicpa-cards-sec__card:hover,
.aicpa-compliance__card:hover {
  transform: translateY(-4px);
  box-shadow: var(--tf-shadow-lg);
}

/* Team member cards */
.aicpa-team__member {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.aicpa-team__member:hover {
  transform: translateY(-4px);
}

/* Benchmark table rows */
.aicpa-bench__row {
  transition: background-color 0.25s ease, transform 0.15s ease;
}
.aicpa-bench__row:hover {
  background-color: rgba(83, 224, 220, 0.06);
}

/* Case study highlight card */
.aicpa-case-sec__highlight {
  transition: box-shadow 0.3s ease;
}
.aicpa-case-sec__highlight:hover {
  box-shadow: var(--tf-shadow-lg);
}

/* ============================================
   3. CTA & INTERACTIVE TRANSITIONS
   ============================================ */

a,
button,
[role="button"] {
  transition: var(--tf-transition);
}

/* Primary CTA hover */
.aicpa-hero3__cta:hover,
.aicpa-bench__cta:hover,
.aicpa-conv__cta:hover {
  filter: brightness(1.08);
  box-shadow: 0 4px 20px rgba(83, 224, 220, 0.3);
}

/* Ghost/outline links */
.aicpa-hero3__link:hover {
  color: var(--tf-teal);
}

/* FAQ accordion smooth open */
.aicpa-faq__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1), padding 0.3s ease;
}
.aicpa-faq__item.active .aicpa-faq__answer {
  max-height: 500px;
}

/* ============================================
   4. TL;DR MESH BACKGROUND + GRADIENT BAR
   ============================================ */

/* Mesh background on TL;DR section — Purple → Navy Deep */
.aicpa-tldr {
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #4040B2, #000042) !important;
  border: none !important;
  border-radius: 3px;
}

/* Mesh floating layers */
.aicpa-tldr__mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.aicpa-tldr__mesh-layer {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.4;
}
.aicpa-tldr__mesh-layer--1 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, #4040B2, transparent 70%);
  top: -80px;
  left: -60px;
  animation: meshFloat1 8s ease-in-out infinite alternate;
}
.aicpa-tldr__mesh-layer--2 {
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, #53E0DC, transparent 70%);
  bottom: -60px;
  right: -40px;
  opacity: 0.2;
  animation: meshFloat2 10s ease-in-out infinite alternate;
}
.aicpa-tldr__mesh-layer--3 {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, #4040B2, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: meshFloat3 12s ease-in-out infinite alternate;
}

@keyframes meshFloat1 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(40px, 30px) scale(1.15); }
}
@keyframes meshFloat2 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-30px, -40px) scale(1.1); }
}
@keyframes meshFloat3 {
  from { transform: translate(-50%, -50%) scale(1); }
  to   { transform: translate(-40%, -60%) scale(1.2); }
}

/* TL;DR content above mesh */
.aicpa-tldr__inner {
  position: relative;
  z-index: 1;
}

/* Text white on dark bg */
.aicpa-tldr__text,
.aicpa-tldr__text p,
.aicpa-tldr__text strong {
  color: rgba(255, 255, 255, 0.92) !important;
}
.aicpa-tldr__text strong {
  color: var(--tf-teal) !important;
}

/* Gradient bar on dark bg */
.aicpa-tldr__bar {
  height: 3px;
  width: 80px;
  background: linear-gradient(90deg, var(--tf-purple), var(--tf-teal));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}
.aicpa-tldr__bar.visible {
  transform: scaleX(1);
}

/* ============================================
   5. STATS COUNTER ANIMATION SUPPORT
   ============================================ */

.counter-animate {
  display: inline-block;
  min-width: 1ch;
}

/* ============================================
   6. EXISTING OVERRIDES (moved from inline)
   ============================================ */

/* Emoji icons override — Day 6 comparison */
.aicpa-compare__icon {
  font-size: 0 !important;
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin-right: 8px;
  border-radius: 50%;
  text-align: center;
  line-height: 18px;
}
.aicpa-compare__old .aicpa-compare__icon {
  background: rgba(220,53,69,0.12);
}
.aicpa-compare__old .aicpa-compare__icon::before {
  content: '\2715';
  font-size: 11px;
  color: #dc3545;
}
.aicpa-compare__new .aicpa-compare__icon {
  background: var(--tf-teal-dim);
}
.aicpa-compare__new .aicpa-compare__icon::before {
  content: '\2713';
  font-size: 11px;
  color: var(--tf-teal);
  font-weight: 700;
}

/* Security badge lock emoji override */
.aicpa-compliance__badge {
  font-size: 0;
}
.aicpa-compliance__badge::after {
  content: 'Your data never leaves your ERP environment. AI workflows run inside your existing security perimeter.';
  font-size: 13px;
}

/* Awards inline section */
.aicpa-awards-inline {
  text-align: center;
  padding: 40px 20px;
  background: var(--tf-off-white);
}
.aicpa-awards-inline__inner {
  max-width: 800px;
  margin: 0 auto;
}
.aicpa-awards-inline__label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--tf-gray-muted);
  margin-bottom: 20px;
}
.aicpa-awards-inline__badges {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}
.aicpa-awards-inline__badges img {
  height: 80px;
  width: auto;
  opacity: 0.9;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.aicpa-awards-inline__badges img:hover {
  opacity: 1;
  transform: scale(1.05);
}
.aicpa-awards-inline__text {
  margin-top: 16px;
  font-size: 13px;
  color: var(--tf-gray-muted);
}

/* Conv form title fix */
.aicpa-conv__meeting-card {
  flex-direction: column !important;
  align-items: stretch !important;
}
.aicpa-conv__form-title {
  text-align: center !important;
  margin-bottom: 16px !important;
  width: 100% !important;
}

/* ============================================
   7. HERO MESH BACKGROUND (Phase B)
   ============================================ */

.aicpa-hero3__mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.aicpa-hero3__mesh-layer {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
}
.aicpa-hero3__mesh-layer--1 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, #4040B2, transparent 70%);
  top: -100px;
  left: -80px;
  opacity: 0.3;
  animation: meshFloat1 8s ease-in-out infinite alternate;
}
.aicpa-hero3__mesh-layer--2 {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(83,224,220,0.3), transparent 70%);
  bottom: -80px;
  right: -60px;
  opacity: 0.2;
  animation: meshFloat2 10s ease-in-out infinite alternate;
}

/* ============================================
   8. CONVERSION MESH BACKGROUND (Phase B)
   ============================================ */

.aicpa-conv {
  position: relative;
}
.aicpa-conv__mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.aicpa-conv__mesh-layer {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
}
.aicpa-conv__mesh-layer--1 {
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, #4040B2, transparent 70%);
  top: -80px;
  left: -60px;
  opacity: 0.35;
  animation: meshFloat1 8s ease-in-out infinite alternate;
}
.aicpa-conv__mesh-layer--2 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(83,224,220,0.3), transparent 70%);
  bottom: -60px;
  right: -40px;
  opacity: 0.2;
  animation: meshFloat2 10s ease-in-out infinite alternate;
}
.aicpa-conv__mesh-layer--3 {
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, #4040B2, transparent 70%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.25;
  animation: meshFloat3 12s ease-in-out infinite alternate;
}
.aicpa-conv__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.aicpa-conv__inner {
  position: relative;
  z-index: 2;
}

/* ============================================
   9. PARALLAX SUPPORT (Phase B)
   ============================================ */

.parallax-target {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ============================================
   10. PREFERS-REDUCED-MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal,
  .reveal-card {
    opacity: 1 !important;
    transform: none !important;
  }
  .aicpa-tldr__bar {
    transform: scaleX(1) !important;
  }
}