/* ===== FixTax.ca — Micro-Animations ===== */

/* --- Floating Particles (Hero) --- */
@keyframes float-up {
  0%   { transform: translateY(100vh) scale(0); opacity: 0; }
  10%  { opacity: 0.12; }
  90%  { opacity: 0.12; }
  100% { transform: translateY(-10vh) scale(1); opacity: 0; }
}

@keyframes float-drift {
  0%, 100% { transform: translateX(0) translateY(0); }
  25%      { transform: translateX(30px) translateY(-20px); }
  50%      { transform: translateX(-20px) translateY(-40px); }
  75%      { transform: translateX(15px) translateY(-15px); }
}

/* Vertical particle motion is intentionally disabled.
@keyframes particle-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-80px); }
}
*/

@keyframes particle-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.16); }
}

@keyframes cloud-float {
  0%, 100% { transform: translateY(var(--cloud-low, 0px)); }
  50%      { transform: translateY(var(--cloud-high, -6px)); }
}

.upload-zone .upload-icon {
  animation: cloud-float var(--cloud-duration, 10s) ease-in-out infinite var(--cloud-delay, 0s);
  will-change: transform;
}

@keyframes bubble-highlight {
  0%, 15%, 100% { opacity: 0.78; filter: blur(0.5px) brightness(1); }
  7% { opacity: 1; filter: blur(0) brightness(1.18); }
}

.particle {
  --particle-duration: 5s;
  --particle-delay: 0s;
  --particle-highlight-delay: 0s;
  animation: particle-breathe var(--particle-duration) ease-in-out infinite var(--particle-delay), bubble-highlight 18s ease-in-out infinite var(--particle-highlight-delay);
}

.particle:nth-child(1) { width: 72px; height: 72px; top: 36%; left: 12%; --particle-highlight-delay: 0s; }
.particle:nth-child(2) { width: 134px; height: 134px; top: 58%; left: 78%; --particle-highlight-delay: 3s; }
.particle:nth-child(3) { width: 46px; height: 46px; top: 42%; left: 52%; --particle-highlight-delay: 6s; }
.particle:nth-child(4) { width: 98px; height: 98px; top: 74%; left: 22%; --particle-highlight-delay: 9s; }
.particle:nth-child(5) { width: 58px; height: 58px; top: 40%; left: 68%; --particle-highlight-delay: 12s; }
.particle:nth-child(6) { width: 110px; height: 110px; top: 46%; left: 88%; --particle-highlight-delay: 15s; }
.particle-center { width: 150px; height: 150px; top: 64%; left: calc(50% + 45px); --particle-duration: 10s; --particle-highlight-delay: 1s; }

/* --- Pulse Dot (Hero badge) --- */
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.8); opacity: 0.3; }
}

.pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }

/* --- Button Pulse Glow --- */
@keyframes btn-glow {
  0%, 100% { box-shadow: 0 8px 32px rgba(168,224,99,0.3); }
  50%      { box-shadow: 0 8px 48px rgba(168,224,99,0.55), 0 0 0 8px rgba(168,224,99,0.08); }
}

.hero .btn-primary { animation: btn-glow 3s ease-in-out infinite; }
.hero .upload-send { animation: none; }

/* --- Scroll Reveal --- */
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes reveal-left {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes reveal-right {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes reveal-scale {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

.reveal {
  opacity: 0;
  transform: translateY(40px);
}

.reveal.visible {
  animation: reveal-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.reveal-left { opacity: 0; transform: translateX(-40px); }
.reveal-left.visible { animation: reveal-left 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

.reveal-right { opacity: 0; transform: translateX(40px); }
.reveal-right.visible { animation: reveal-right 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; }

/* Stagger delays for grid children */
.reveal-stagger .reveal:nth-child(1) { animation-delay: 0s; }
.reveal-stagger .reveal:nth-child(2) { animation-delay: 0.1s; }
.reveal-stagger .reveal:nth-child(3) { animation-delay: 0.2s; }
.reveal-stagger .reveal:nth-child(4) { animation-delay: 0.3s; }
.reveal-stagger .reveal:nth-child(5) { animation-delay: 0.35s; }
.reveal-stagger .reveal:nth-child(6) { animation-delay: 0.4s; }

/* --- Countdown Digit Flip --- */
@keyframes digit-change {
  0%   { transform: rotateX(0); }
  50%  { transform: rotateX(-90deg); opacity: 0.5; }
  100% { transform: rotateX(0); opacity: 1; }
}

.countdown-item .number.flip {
  animation: digit-change 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Card Hover Shine --- */
@keyframes card-shine {
  0%   { left: -100%; }
  100% { left: 200%; }
}

@keyframes upload-meta-shine {
  0%   { transform: translateX(-180%) skewX(-18deg); opacity: 0; }
  12%  { opacity: 1; }
  100% { transform: translateX(520%) skewX(-18deg); opacity: 0; }
}

@keyframes upload-button-shine {
  0%   { transform: translateX(-180%) skewX(var(--button-shine-angle, -18deg)); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translateX(520%) skewX(var(--button-shine-angle, -18deg)); opacity: 0; }
}

@keyframes sending-dots {
  0% { content: '.'; }
  33% { content: '..'; }
  66% { content: '...'; }
  100% { content: '.'; }
}

.btn.is-sending::before {
  content: '.';
  display: inline-block;
  width: 1.1em;
  text-align: left;
  animation: sending-dots 1.2s steps(1, end) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .btn.is-sending::before {
    content: '...';
    animation: none;
  }
}

.service-card::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(168,224,99,0.06), transparent);
  z-index: 0;
  pointer-events: none;
}

.service-card:hover::after {
  animation: card-shine 0.8s ease forwards;
}

/* --- Upload Zone Drag Feedback --- */
@keyframes border-dance {
  0%   { border-color: var(--lime); }
  50%  { border-color: var(--lime-dark); }
  100% { border-color: var(--lime); }
}

.upload-zone.dragging {
  border-style: solid;
  background: var(--lime-lightest);
  animation: border-dance 1s linear infinite;
  transform: scale(1.03);
}

/* --- Success Checkmark --- */
@keyframes check-draw {
  to { stroke-dashoffset: 0; }
}

@keyframes check-circle {
  to { stroke-dashoffset: 0; }
}

/* --- Hero Content Entrance --- */
@keyframes hero-entrance {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-badge   { animation: hero-entrance 0.6s cubic-bezier(0.16,1,0.3,1) 0.1s both; }
.hero h2      { animation: hero-entrance 0.6s cubic-bezier(0.16,1,0.3,1) 0.2s both; }
.hero-subtitle{ animation: hero-entrance 0.6s cubic-bezier(0.16,1,0.3,1) 0.35s both; }
.hero-ctas    { animation: hero-entrance 0.6s cubic-bezier(0.16,1,0.3,1) 0.45s both; }
.countdown-wrap{ animation: hero-entrance 0.6s cubic-bezier(0.16,1,0.3,1) 0.55s both; }
.hero-card    { animation: hero-entrance 0.8s cubic-bezier(0.16,1,0.3,1) 0.4s both; }

/* --- Navbar Slide Down --- */
@keyframes nav-slide {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.navbar { animation: nav-slide 0.5s ease 0.1s both; }
.deadline-banner { animation: nav-slide 0.4s ease both; }

/* --- FAQ Arrow Bounce --- */
@keyframes arrow-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}

.faq-question:hover .faq-chevron {
  animation: arrow-bounce 0.5s ease;
}

/* --- Popup Entrance --- */
@keyframes popup-in {
  from { transform: scale(0.85) translateY(20px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

.popup-overlay.show .popup {
  animation: popup-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* --- Confetti Burst (for estimator result) --- */
@keyframes confetti-fall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(120px) rotate(720deg); opacity: 0; }
}

@keyframes estimator-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-6px); }
  30% { transform: translateX(6px); }
  45% { transform: translateX(-5px); }
  60% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
  90% { transform: translateX(3px); }
}

.confetti-piece {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 2px;
  animation: confetti-fall 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  pointer-events: none;
}

.estimator-calculate.is-shaking {
  animation: estimator-shake 0.45s ease-in-out;
}

@keyframes estimator-field-prompt {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-5px); }
  30% { transform: translateX(5px); }
  45% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

.estimator-field-prompt {
  animation: estimator-field-prompt 0.45s ease-in-out;
}

@keyframes estimator-field-fill {
  0%, 100% { background-color: #FFFFFF; }
  30%, 70% { background-color: #D4F5A0; }
}

.estimator-field-prompt input {
  animation: estimator-field-fill 0.45s ease-in-out;
}

/* --- Counter Count Up --- */
@keyframes count-up-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  70%  { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

.trust-number.animate {
  animation: count-up-pop 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* --- Verification Status Animations --- */
@keyframes file-row-reveal {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes verification-sweep {
  from { transform: translateX(-180%); }
  to { transform: translateX(520%); }
}

@keyframes verification-success {
  from { opacity: 0.4; transform: translateY(2px); }
  to { opacity: 1; transform: translateY(0); }
}

.file-item-wrap {
  animation: none;
}

.file-item-wrap:nth-child(2) { animation-delay: 0.04s; }
.file-item-wrap:nth-child(3) { animation-delay: 0.08s; }
.file-item-wrap:nth-child(4) { animation-delay: 0.12s; }
.file-item-wrap:nth-child(5) { animation-delay: 0.16s; }

.file-item-wrap.upload-waiting .file-upload-status,
.file-item-wrap.upload-uploading .file-upload-status,
.uploaded-file-wrap.upload-waiting .uploaded-file-status,
.uploaded-file-wrap.upload-uploading .uploaded-file-status {
  color: #56AB2F;
  animation: verify-pulse-color 1.4s ease-in-out infinite;
}

.file-item-wrap.upload-waiting .file-upload-status::after,
.file-item-wrap.upload-uploading .file-upload-status::after,
.uploaded-file-wrap.upload-waiting .uploaded-file-status::after,
.uploaded-file-wrap.upload-uploading .uploaded-file-status::after {
  content: '.';
  display: inline-block;
  width: 1.1em;
  color: currentColor;
  text-align: left;
  animation: verify-dots 1.2s steps(1, end) infinite;
}

.file-item-wrap.upload-waiting .file-upload-progress,
.file-item-wrap.upload-uploading .file-upload-progress,
.uploaded-file-wrap.upload-waiting .uploaded-file-progress,
.uploaded-file-wrap.upload-uploading .uploaded-file-progress {
  isolation: isolate;
}

.file-item-wrap.upload-waiting .file-upload-progress::after,
.file-item-wrap.upload-uploading .file-upload-progress::after,
.uploaded-file-wrap.upload-waiting .uploaded-file-progress::after,
.uploaded-file-wrap.upload-uploading .uploaded-file-progress::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0 auto 0 -18%;
  width: 18%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.88), transparent);
  pointer-events: none;
  animation: verification-sweep 1.35s ease-in-out infinite;
}

.file-item-wrap.upload-done .file-upload-status {
  animation: verification-success 0.4s ease-out both;
}

.file-item-rejected .file-upload-status {
  color: #b53b2d;
}

.file-item-wrap.upload-error .file-upload-status,
.uploaded-file-wrap.upload-error .uploaded-file-status {
  color: #b53b2d;
  animation: verification-error-color 1.5s ease-in-out infinite;
}

@keyframes verify-pulse-color {
  0%   { color: #A8E063; }
  25%  { color: #56AB2F; }
  50%  { color: #3D8B1F; }
  75%  { color: #56AB2F; }
  100% { color: #A8E063; }
}

@keyframes verification-error-color {
  0%, 100% { color: #b53b2d; }
  50% { color: #d04a3a; }
}

@keyframes verify-dots {
  0%   { content: '.'; }
  33%  { content: '..'; }
  66%  { content: '...'; }
  100% { content: '.'; }
}

@keyframes pulse-dot {
  0%, 100% { transform: scale(0.8); opacity: 0.6; }
  33%      { transform: scale(1.0); opacity: 0.85; }
  66%      { transform: scale(1.2); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .file-item-wrap,
  .file-item-wrap.upload-waiting .file-upload-status,
  .file-item-wrap.upload-uploading .file-upload-status,
  .file-item-wrap.upload-waiting .file-upload-progress,
  .file-item-wrap.upload-uploading .file-upload-progress,
  .file-item-wrap.upload-done .file-upload-status {
    animation: none;
  }

  .file-item-wrap.upload-waiting .file-upload-progress::after,
  .file-item-wrap.upload-uploading .file-upload-progress::after {
    animation: none;
  }

  .file-item-wrap.upload-error .file-upload-status,
  .uploaded-file-wrap.upload-error .uploaded-file-status {
    animation: none;
  }

  .file-item-wrap.upload-waiting .file-upload-status::after,
  .file-item-wrap.upload-uploading .file-upload-status::after {
    content: '...';
    animation: none;
  }

  .upload-zone .upload-icon {
    --cloud-low: 0px !important;
    --cloud-high: -2px !important;
    --cloud-duration: 12s !important;
  }
}