/* ==========================================================================
   Site-wide animation layer
   Reveal classes are applied by assets/js/animations.js. Everything is
   disabled under prefers-reduced-motion.
   ========================================================================== */

/* ---- Page enter (runs on load and after soft navigation) ---- */
.page-enter > * {
  animation: pageEnter .6s cubic-bezier(.22, 1, .36, 1) both;
}
.page-enter > *:nth-child(2) { animation-delay: .06s; }
.page-enter > *:nth-child(3) { animation-delay: .12s; }
.page-enter > *:nth-child(4) { animation-delay: .18s; }
.page-enter > *:nth-child(5) { animation-delay: .24s; }
.page-enter > *:nth-child(n+6) { animation-delay: .3s; }

@keyframes pageEnter {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* ---- Scroll reveal base ---- */
.anim {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity .6s cubic-bezier(.22, 1, .36, 1),
    transform .6s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--anim-delay, 0ms);
  will-change: opacity, transform;
}
.anim.is-inview {
  opacity: 1;
  transform: none;
}

/* Horizontal variants for grids (cards slide in from the side) */
.anim-left  { transform: translateX(-28px); }
.anim-right { transform: translateX(28px); }
.anim-zoom  { transform: scale(.92); }

/* Soft-navigation view transition polish (progressive enhancement) */
::view-transition-old(root) {
  animation: vtOut .18s ease both;
}
::view-transition-new(root) {
  animation: vtIn .35s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes vtOut { to { opacity: 0; } }
@keyframes vtIn  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---- Micro-interactions ---- */
.card,
.panel,
.trade-card,
.plan-card {
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), box-shadow .3s ease, border-color .3s ease;
}
.card:hover,
.trade-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0, 18, 52, .12);
}

.btn {
  transition: transform .2s cubic-bezier(.22, 1, .36, 1), background-color .2s ease, filter .2s ease, box-shadow .3s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary:hover { box-shadow: 0 12px 26px rgba(0, 27, 73, .3); }

/* Footer links gentle underline slide */
.site-footer a:not(.brand) {
  position: relative;
  transition: color .2s ease;
}
.site-footer a:not(.brand)::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
}
.site-footer a:not(.brand):hover::after { transform: scaleX(1); }

/* WhatsApp FAB gentle float + press */
.fab-wa {
  animation: fabFloat 3.4s ease-in-out infinite;
  transition: transform .2s cubic-bezier(.22, 1, .36, 1);
}
.fab-wa:hover { animation-play-state: paused; transform: scale(1.06); }
@keyframes fabFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Feature strip icons pop on reveal */
.feature-item.is-inview .icon-circle {
  animation: iconPop .5s cubic-bezier(.34, 1.56, .64, 1) both;
  animation-delay: var(--anim-delay, 0ms);
}
@keyframes iconPop {
  from { transform: scale(.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* Respect users who prefer no motion */
@media (prefers-reduced-motion: reduce) {
  .page-enter > *,
  .anim,
  .anim.is-inview,
  ::view-transition-old(root),
  ::view-transition-new(root),
  .fab-wa,
  .feature-item.is-inview .icon-circle {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}