/* ==========================================================================
   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); }
}

/* WhatsApp popup — spring pop from the FAB corner, staggered content */
.wa-popup {
  opacity: 0;
  transform: translateY(18px) scale(.85);
  transform-origin: calc(100% - 28px) calc(100% + 60px);
  transition:
    opacity .22s ease,
    transform .38s cubic-bezier(.34, 1.45, .64, 1);
}
.wa-popup.open {
  opacity: 1;
  transform: none;
}
.wa-popup.closing {
  transition:
    opacity .18s ease,
    transform .2s cubic-bezier(.4, 0, 1, 1);
  opacity: 0;
  transform: translateY(10px) scale(.9);
}
.wa-overlay {
  opacity: 0;
  transition: opacity .25s ease;
}
.wa-overlay.open { opacity: 1; }
.wa-msg {
  animation: waMsgIn .32s cubic-bezier(.22, 1, .36, 1) .1s both;
}
@keyframes waMsgIn {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
.wa-chip {
  animation: waChipIn .3s cubic-bezier(.22, 1, .36, 1) both;
}
.wa-chip:nth-child(1) { animation-delay: .16s; }
.wa-chip:nth-child(2) { animation-delay: .24s; }
.wa-chip:nth-child(3) { animation-delay: .32s; }
@keyframes waChipIn {
  from { opacity: 0; transform: translateX(12px); }
  to   { opacity: 1; transform: none; }
}
.wa-dot {
  animation: waPulse 2s ease-in-out infinite;
}
@keyframes waPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(123, 241, 168, .55); }
  50%      { box-shadow: 0 0 0 5px rgba(123, 241, 168, 0); }
}

/* SEO intro cards stagger */
.seo-card.anim-left,
.seo-card.anim-right { transform: translateY(22px); }
.seo-card.is-inview .seo-card-ico {
  animation: iconPop .5s cubic-bezier(.34, 1.56, .64, 1) both;
  animation-delay: var(--anim-delay, 0ms);
}

/* 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; }
}

/* ---- Pocket / Home Health scroll choreography ---- */
.pocket-section .pocket-reveal {
  opacity: 0;
  transform: translateX(-28px);
  transition:
    opacity .65s cubic-bezier(.22, 1, .36, 1),
    transform .65s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--pocket-delay, 0ms);
  will-change: opacity, transform;
}
.pocket-section.is-inview .pocket-reveal {
  opacity: 1;
  transform: none;
}
.pocket-section .pocket-feature .pocket-ico {
  transform: scale(.72);
  opacity: 0;
  transition:
    transform .5s cubic-bezier(.34, 1.56, .64, 1),
    opacity .45s ease,
    background .25s ease,
    box-shadow .25s ease;
  transition-delay: calc(var(--pocket-delay, 0ms) + 80ms);
}
.pocket-section.is-inview .pocket-feature .pocket-ico {
  transform: scale(1);
  opacity: 1;
}
.pocket-section.is-inview .pocket-feature:hover .pocket-ico {
  transform: scale(1.08);
  background: rgba(242,183,43,.2);
  box-shadow: 0 6px 16px rgba(242,183,43,.22);
}

.pocket-section .pocket-phone {
  opacity: 0;
  transform: translateY(64px) scale(.88) rotateX(12deg);
  transform-origin: center bottom;
  transition:
    opacity .85s cubic-bezier(.22, 1, .36, 1) .12s,
    transform .95s cubic-bezier(.22, 1, .36, 1) .12s;
  will-change: opacity, transform;
  perspective: 900px;
}
.pocket-section.is-inview .pocket-phone {
  opacity: 1;
  transform: none;
  animation: phoneFloat 4.8s ease-in-out 1.35s infinite;
}
.pocket-section .phone-frame {
  transform: rotateY(-18deg) scale(.92);
  filter: brightness(.72) saturate(.85);
  box-shadow: 0 8px 20px rgba(0,27,73,.12);
  transition:
    transform .9s cubic-bezier(.22, 1, .36, 1) .2s,
    filter .8s ease .25s,
    box-shadow .8s ease .25s;
  transform-style: preserve-3d;
}
.pocket-section.is-inview .phone-frame {
  transform: none;
  filter: none;
  box-shadow:
    0 28px 60px rgba(0,27,73,.28),
    0 2px 0 rgba(255,255,255,.08) inset;
  animation: phoneOpenPop .75s cubic-bezier(.34, 1.45, .64, 1) .18s both;
}
.pocket-section .phone-screen {
  opacity: 0;
  transform: scale(.96);
  filter: brightness(.4);
  transition:
    opacity .55s ease .38s,
    transform .65s cubic-bezier(.22, 1, .36, 1) .38s,
    filter .7s ease .42s;
}
.pocket-section.is-inview .phone-screen {
  opacity: 1;
  transform: none;
  filter: none;
}

.pocket-section .phone-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity .55s cubic-bezier(.22, 1, .36, 1),
    transform .55s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--phone-delay, 0ms);
}
.pocket-section.is-inview .phone-reveal {
  opacity: 1;
  transform: none;
}

.pocket-section .phone-row {
  opacity: 0;
  transform: translateX(16px);
  transition:
    opacity .45s cubic-bezier(.22, 1, .36, 1),
    transform .45s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--row-delay, 0ms);
}
.pocket-section.is-inview .phone-row {
  opacity: 1;
  transform: none;
}
.pocket-section.is-inview .phone-row.due > span:last-child {
  animation: dueGlow 1.6s ease-in-out 1.6s 2;
}
.pocket-section.is-inview .phone-ent-bar > span {
  animation: entFill .9s cubic-bezier(.22, 1, .36, 1) 1.35s both;
}

@keyframes phoneOpenPop {
  0% { transform: rotateY(-12deg) scale(.94); }
  60% { transform: rotateY(3deg) scale(1.03); }
  100% { transform: none; }
}
@keyframes phoneFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@keyframes dueGlow {
  0%, 100% { opacity: 1; text-shadow: none; }
  50% { opacity: 1; text-shadow: 0 0 12px rgba(242,183,43,.55); }
}
@keyframes entFill {
  from { transform: scaleX(0); transform-origin: left center; }
  to { transform: scaleX(1); transform-origin: left center; }
}

/* 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,
  .wa-popup,
  .wa-popup.open,
  .wa-popup.closing,
  .wa-overlay,
  .wa-msg,
  .wa-chip,
  .wa-dot,
  .feature-item.is-inview .icon-circle,
  .seo-card.is-inview .seo-card-ico,
  .pocket-section .pocket-reveal,
  .pocket-section .pocket-feature .pocket-ico,
  .pocket-section .pocket-phone,
  .pocket-section .phone-frame,
  .pocket-section .phone-screen,
  .pocket-section .phone-reveal,
  .pocket-section .phone-row,
  .pocket-section.is-inview .phone-frame,
  .pocket-section.is-inview .phone-row.due > span:last-child,
  .pocket-section.is-inview .phone-ent-bar > span,
  .nav-desktop > a,
  .nav-desktop .nav-drop > button,
  .mobile-drawer,
  .mobile-drawer .panel,
  .mobile-drawer a,
  .mobile-bottom a {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    filter: none !important;
  }
  /* Keep dropdown closed unless hovered/focused — do not force it open */
  .nav-drop-menu {
    animation: none !important;
    transition: none !important;
  }
  .nav-drop:not(:hover):not(:focus-within) .nav-drop-menu {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: none !important;
  }
  .nav-drop:hover .nav-drop-menu,
  .nav-drop:focus-within .nav-drop-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
  }
  .mobile-drawer:not(.open) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}