/* =============================================================
   Make My Mortgage — Animations V3
   All @keyframes, entrance animations, micro-interactions
   Premium motion with orbs, ticker, carousel, lender scroll,
   word reveal, mesh blobs, wave effects
   ============================================================= */

/* === @keyframes =========================================== */

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

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeRight {
  from { opacity: 0; transform: translateX(32px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes heroFloat {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-14px); }
  100% { transform: translateY(0px); }
}

@keyframes heroPillBob {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-7px); }
  100% { transform: translateY(0px); }
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%, 100% 50%, 0% 0%; }
  50%  { background-position: 100% 50%, 0% 50%, 0% 0%; }
  100% { background-position: 0% 50%, 100% 50%, 0% 0%; }
}

@keyframes shimmerText {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

@keyframes orbPulse {
  0%   { transform: scale(1);    opacity: 0.6; }
  50%  { transform: scale(1.18); opacity: 0.9; }
  100% { transform: scale(1);    opacity: 0.6; }
}

@keyframes rippleExpand {
  0%   { transform: scale(0);   opacity: 0.4; }
  100% { transform: scale(4);   opacity: 0; }
}

@keyframes statPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.14); }
  100% { transform: scale(1); }
}

@keyframes suffixPop {
  0%   { transform: scale(1) translateY(0); }
  40%  { transform: scale(1.3) translateY(-4px); }
  70%  { transform: scale(0.95) translateY(2px); }
  100% { transform: scale(1) translateY(0); }
}

@keyframes glowPulse {
  0%   { transform: scale(1);    opacity: 0.7; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* Hero orb float animations */
@keyframes orbFloat1 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(-40px, 30px) scale(1.1); }
  66%  { transform: translate(30px, -20px) scale(0.95); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes orbFloat2 {
  0%   { transform: translate(0, 0) scale(1); }
  33%  { transform: translate(50px, -30px) scale(1.05); }
  66%  { transform: translate(-30px, 40px) scale(1.12); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes orbFloat3 {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(40px, 40px) scale(1.15); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes orbFloat4 {
  0%   { transform: translate(0, 0) scale(1); }
  40%  { transform: translate(-50px, 20px) scale(1.08); }
  80%  { transform: translate(20px, -30px) scale(0.92); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Trust ticker scroll */
@keyframes tickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Reverse ticker scroll (left-to-right) */
@keyframes tickerScrollReverse {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* === Lender carousel infinite scroll ====================== */
/* Row 1 scrolls forward (right → left) */
@keyframes lenderScrollFwd {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Row 2 scrolls reverse (left → right) */
@keyframes lenderScrollRev {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* Logo hover */
@keyframes logoHoverPulse {
  0%   { transform: scale(1) rotate(0deg); }
  30%  { transform: scale(1.1) rotate(-3deg); }
  60%  { transform: scale(1.05) rotate(2deg); }
  100% { transform: scale(1) rotate(0deg); }
}

/* Process node pop-in (fast, springy) */
@keyframes nodePop {
  0%   { transform: scale(0.4) translateY(10px); opacity: 0; }
  55%  { transform: scale(1.28) translateY(-4px); opacity: 1; }
  75%  { transform: scale(0.93) translateY(1px); }
  90%  { transform: scale(1.06) translateY(0); }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* Emoji bounce inside active node */
@keyframes emojiBounce {
  0%   { transform: scale(0.5) rotate(-15deg); opacity: 0; }
  60%  { transform: scale(1.3) rotate(8deg); opacity: 1; }
  80%  { transform: scale(0.9) rotate(-3deg); }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* Process completion pulse — fast and punchy */
@keyframes processPulse {
  0%   { box-shadow: 0 8px 32px rgba(21,205,141,0.40), 0 0 0 0 rgba(21,205,141,0.6); }
  50%  { box-shadow: 0 8px 32px rgba(21,205,141,0.40), 0 0 0 16px rgba(21,205,141,0); }
  100% { box-shadow: 0 8px 32px rgba(21,205,141,0.40), 0 0 0 0 rgba(21,205,141,0); }
}

/* CTA background */
@keyframes ctaBg {
  0%   { background-position: 0% 50%, 0% 0%; }
  100% { background-position: 100% 50%, 0% 0%; }
}

/* === CTA gradient mesh blob floats ======================= */
@keyframes meshFloat1 {
  0%   { transform: translate(0, 0) scale(1); }
  25%  { transform: translate(-30px, 25px) scale(1.06); }
  50%  { transform: translate(-50px, -15px) scale(1.0); }
  75%  { transform: translate(20px, 30px) scale(0.96); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes meshFloat2 {
  0%   { transform: translate(0, 0) scale(1); }
  30%  { transform: translate(40px, -30px) scale(1.08); }
  60%  { transform: translate(-25px, 20px) scale(0.93); }
  100% { transform: translate(0, 0) scale(1); }
}

@keyframes meshFloat3 {
  0%   { transform: translate(0, 0) scale(1); }
  40%  { transform: translate(-35px, 40px) scale(1.1); }
  80%  { transform: translate(25px, -20px) scale(0.97); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Section heading glow */
@keyframes headingGlow {
  0%   { text-shadow: 0 0 40px rgba(21,205,141,0), 0 0 80px rgba(21,205,141,0); }
  100% { text-shadow: 0 0 40px rgba(21,205,141,0.15), 0 0 80px rgba(21,205,141,0.08); }
}

/* Section heading slide-in */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); clip-path: inset(0 100% 0 0); }
  to   { opacity: 1; transform: translateX(0); clip-path: inset(0 0 0 0); }
}

/* === Hero word-by-word reveal ============================ */
/* Each .hero__word gets animation-delay set via JS */
@keyframes wordReveal {
  from {
    opacity: 0;
    transform: translateY(28px) rotateX(-20deg);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
    filter: blur(0px);
  }
}

/* === Hero entrance animations ============================= */
.hero__word {
  display: inline-block;
  opacity: 0;
  animation: wordReveal 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
  /* animation-delay is set per-word by JS */
}

.hero__sub {
  animation: fadeUp 0.7s ease both;
  animation-delay: 0.55s;
}
.hero__actions {
  animation: fadeUp 0.7s ease both;
  animation-delay: 0.68s;
}
.hero__trust {
  animation: fadeUp 0.7s ease both;
  animation-delay: 0.80s;
}
.hero__visual {
  animation: fadeLeft 0.9s ease both;
  animation-delay: 0.30s;
}

/* Lender carousel entrance */
.lender-carousel {
  animation: fadeUp 0.8s ease both;
  animation-delay: 0.95s;
}

/* Hero chip staggered entrance + float */
.hero__chip--approved {
  opacity: 0;
  animation: fadeUp 0.5s ease 0.8s both, heroFloat 5s ease-in-out 1.5s infinite;
}
.hero__chip--rated {
  opacity: 0;
  animation: fadeUp 0.5s ease 1.1s both, heroFloat 5.5s ease-in-out 1.8s infinite;
}

/* Header entrance */
.header__inner {
  animation: fadeDown 0.6s ease both;
  animation-delay: 0.1s;
}

/* === Button focus ring ==================================== */
.btn:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

/* === Nav link active underline ============================ */
.nav__link {
  position: relative;
}
.nav__link::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 12px;
  right: 12px;
  height: 2px;
  background: linear-gradient(90deg, var(--green), var(--green-light));
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav__link.active::after {
  transform: scaleX(1);
}

/* === Stat pop ============================================= */
.stat-card__number.pop {
  animation: statPop 0.38s ease;
}

/* Suffix pop when counter completes */
.stat-card__suffix.suffix-pop {
  animation: suffixPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* === Process step stagger — driven by JS .node-active class ============ */
/* (CSS stagger fallback, JS overrides with --node-delay) */
.process-step__title,
.process-step__sub {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.28s ease, transform 0.28s ease;
}
/* Text reveals driven by JS .node-active — inline transition-delay set via style attr */
.process-step__node.node-active ~ .process-step__title,
.process-step__node.node-active ~ .process-step__sub {
  opacity: 1;
  transform: none;
}

/* === Section reveal animations ============================ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s cubic-bezier(0.4,0,0.2,1),
              transform 0.6s cubic-bezier(0.4,0,0.2,1);
  transition-delay: calc(var(--d, 0) * 0.14s);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
.reveal--left  { transform: translateX(-28px); }
.reveal--right { transform: translateX(28px); }
.reveal--left.visible,
.reveal--right.visible { transform: none; }
.reveal--scale {
  transform: scale(0.94);
}
.reveal--scale.visible { transform: none; }

/* Zoom reveal variant */
.reveal--zoom {
  transform: scale(0.85);
  opacity: 0;
}
.reveal--zoom.visible {
  transform: none;
  opacity: 1;
}

/* Section heading fade+slide upward drift on reveal */
.section__header.reveal.visible .section__title {
  animation: fadeUp 0.65s cubic-bezier(0.4,0,0.2,1) 0.1s both;
}
.section__header.reveal.visible .section__label {
  animation: fadeUp 0.5s ease 0.05s both;
}

/* About heading reveal */
.about__heading {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1) 0.15s,
              transform 0.65s cubic-bezier(0.4,0,0.2,1) 0.15s;
}
.about__content.visible .about__heading { opacity: 1; transform: none; }

/* Hero card green shadow pulse */
@keyframes cardShadowPulse {
  0%, 100% { box-shadow: 0 24px 60px rgba(21,205,141,0.10), 0 8px 24px rgba(0,0,0,0.18); }
  50%       { box-shadow: 0 32px 80px rgba(21,205,141,0.28), 0 12px 36px rgba(0,0,0,0.22); }
}
#hero-card { animation: cardShadowPulse 3.5s ease-in-out infinite; }

/* Process step bounce */
@keyframes stepBounceIn {
  0%   { opacity: 0; transform: scale(0.7) translateY(12px); }
  60%  { transform: scale(1.15) translateY(-4px); }
  80%  { transform: scale(0.96); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.process-step.step-animate .process-step__node {
  animation: stepBounceIn 0.55s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* === About features alternating slide ==================== */
.about__feature:nth-child(odd)  { --anim: fadeRight; }
.about__feature:nth-child(even) { --anim: fadeLeft; }

/* === Magnetic button active state ========================= */
.btn--magnetic {
  transition: transform 0.15s ease, box-shadow 0.25s ease,
              background 0.25s ease, border-color 0.25s ease;
}

/* === CTA section background animation ==================== */
.cta-section {
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(21,205,141,0.10) 0%, transparent 65%),
    #141A3E;
  background-size: 200% 200%, 100% 100%;
  animation: ctaBg 12s ease infinite alternate;
}

/* === Card GPU hints ======================================= */
.mortgage-card,
.review-card,
.hero__card {
  will-change: transform;
}

/* === Accessibility: 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;
  }
  .hero__word,
  .hero__sub,
  .hero__actions,
  .hero__trust,
  .hero__visual,
  .header__inner {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .hero__orb { display: none; }
  .ticker__track { animation: none; }
  .lender-track { animation: none; }
  .reveal { opacity: 1; transform: none; }
  .process-step__title,
  .process-step__sub { opacity: 1; transform: none; }
  .carousel__track { transition: none; }
  .cta-mesh__blob { animation: none; }
}