/* FixAm website animations. Light, CSS-only motion. Turned off for "reduce motion" users. */

/* Hover lift on cards and service bubbles */
.card, .service, .split-card, .btn, .cat, .offer { transition: transform .25s ease, box-shadow .25s ease, background-color .2s ease, border-color .2s ease; }
@media (hover: hover) {
  .card:hover, .split-card:hover { transform: translateY(-4px); box-shadow: 0 14px 30px rgba(15, 42, 120, .10); }
  .service:hover { transform: translateY(-3px); border-color: var(--blue); box-shadow: 0 8px 20px rgba(30, 79, 216, .12); }
  .service:hover svg { transform: rotate(-8deg) scale(1.12); }
  .btn:hover { transform: translateY(-2px); }
}
.service svg { transition: transform .25s ease; }

@media (prefers-reduced-motion: no-preference) {
  /* Logo drops in */
  .site-header .logo-full { animation: fx-logo .7s cubic-bezier(.2, .8, .2, 1.2) both; }

  /* Hero text slides up, one line after another */
  .hero .wrap > div:first-child > * { animation: fx-up .7s ease both; }
  .hero .wrap > div:first-child > *:nth-child(2) { animation-delay: .08s; }
  .hero .wrap > div:first-child > *:nth-child(3) { animation-delay: .16s; }
  .hero .wrap > div:first-child > *:nth-child(4) { animation-delay: .24s; }
  .hero .wrap > div:first-child > *:nth-child(5) { animation-delay: .32s; }

  /* Phone floats gently; quotes pop in */
  .phone { animation: fx-up .8s .2s ease both, fx-float 6s 1s ease-in-out infinite; }
  .phone .cat, .phone .offer, .phone .escrow { animation: fx-pop .5s ease both; }
  .phone .cat:nth-child(1) { animation-delay: .6s; }
  .phone .cat:nth-child(2) { animation-delay: .68s; }
  .phone .cat:nth-child(3) { animation-delay: .76s; }
  .phone .cat:nth-child(4) { animation-delay: .84s; }
  .phone .offer { animation-delay: 1.0s; }
  .phone .offer + .offer { animation-delay: 1.15s; }
  .phone .escrow { animation-delay: 1.35s; }
  .escrow .ic { animation: fx-lock 2.4s 2s ease-in-out infinite; transform-origin: 50% 70%; }

  /* Scroll reveal (only when the script is running) */
  .fx-on .fx { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; transition-delay: var(--fx-d, 0s); }
  .fx-on .fx.fx-in { opacity: 1; transform: none; }
}

@keyframes fx-up { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes fx-pop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes fx-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes fx-logo { from { opacity: 0; transform: translateY(-10px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes fx-lock { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-12deg); } 90% { transform: rotate(10deg); } 95% { transform: rotate(-6deg); } }