/* Talenta Pros — motion polish (Oct 2026)
   Hero entrance, soft hero gradient, consistent card lift, Zena signature motion,
   workflow step feedback and pricing feedback. Restrained by design; all of it
   switches off under "reduce motion". Prices are never hidden by animation. */

:root{
  --mp-ease: cubic-bezier(.16,1,.3,1);
  --mp-lift: 0 14px 34px -14px rgba(18,32,64,.22), 0 2px 6px -2px rgba(18,32,64,.08);
  --mp-emerald: 18,184,134;
}

/* 1 ─ Hero entrance: headline → copy → buttons → trust line → practice card */
@keyframes mp-fade-up{ from{ opacity:0; transform:translate3d(0,18px,0); } to{ opacity:1; transform:none; } }
@keyframes mp-scale-in{ from{ opacity:0; transform:translate3d(0,10px,0) scale(.96); } to{ opacity:1; transform:none; } }

html body main .hero .wrap > div:first-child > h1{ animation:mp-fade-up 650ms var(--mp-ease) both; }
html body main .hero .wrap > div:first-child > .lede{ animation:mp-fade-up 650ms var(--mp-ease) 120ms both; }
html body main .hero .hero-ctas .btn{ animation:mp-scale-in 600ms var(--mp-ease) 240ms both; }
html body main .hero .hero-ctas .btn + .btn{ animation-delay:320ms; }
html body main .hero .hero-trust{ animation:mp-fade-up 600ms var(--mp-ease) 380ms both; }
html body main .hero .tp-script{ animation:mp-fade-up 600ms var(--mp-ease) 460ms both; }
html body main .hero .ledger-stage{ animation:mp-fade-up 800ms var(--mp-ease) 300ms both; }

/* CTA arrow nudges on hover */
html body main .hero .hero-cta .arr,
#pricing .ticket .btn-plan .arr{ display:inline-block; transition:transform 220ms var(--mp-ease); }
html body main .hero .hero-cta:hover .arr,
#pricing .ticket .btn-plan:hover .arr{ transform:translateX(4px); }

/* 2 ─ Soft drifting gradient behind the hero (navy + emerald, very low contrast) */
html body main .hero{ isolation:isolate; }
html body main .hero::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(closest-side, rgba(var(--mp-emerald),.14), transparent) no-repeat,
    radial-gradient(closest-side, rgba(36,62,140,.09), transparent) no-repeat;
  background-size:60% 80%, 55% 75%;
  background-position:95% 10%, 0% 95%;
  animation:mp-drift 24s ease-in-out infinite alternate;
}
@keyframes mp-drift{
  0%  { background-position:95% 10%, 0% 95%; }
  50% { background-position:80% 30%, 12% 80%; }
  100%{ background-position:100% 0%, 5% 100%; }
}
:root[data-theme="dark"] body main .hero::before{ opacity:.7; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) body main .hero::before{ opacity:.7; } }

/* 3 ─ One consistent lift for cards across the site (pointer devices only) */
.mp-card{ transition:transform 220ms var(--mp-ease), box-shadow 220ms var(--mp-ease), border-color 220ms ease; }
@media (hover:hover) and (pointer:fine){
  .mp-card:hover{ transform:translateY(-5px); box-shadow:var(--mp-lift); }
  .mp-row{ transition:background-color 180ms ease, transform 180ms var(--mp-ease); }
  .mp-row:hover{ background-color:rgba(var(--mp-emerald),.06); transform:translateX(3px); }
}

/* 4 ─ QuickBooks workflow: active step feedback */
.qbw-tab{ transition:background-color 200ms ease, color 200ms ease, box-shadow 200ms ease, transform 200ms var(--mp-ease); }
.qbw-tab[aria-selected="true"]{ box-shadow:0 0 0 3px rgba(var(--mp-emerald),.18); }
@keyframes mp-count-pop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.12); color:rgb(var(--mp-emerald)); } 100%{ transform:scale(1); } }
.qbw-count{ display:inline-block; }
.qbw-count.mp-pop{ animation:mp-count-pop 420ms var(--mp-ease); }
@keyframes mp-cap-in{ from{ opacity:0; transform:translate3d(0,6px,0); } to{ opacity:1; transform:none; } }
.qbw-mcap.mp-swap{ animation:mp-cap-in 360ms var(--mp-ease); }

/* 5 ─ Zena signature motion */
/* Launcher: a soft glow that breathes a few times after load, then rests */
@keyframes mp-zena-glow{
  0%,100%{ box-shadow:0 14px 34px -10px rgba(19,23,34,.55), 0 0 0 0 rgba(var(--mp-emerald),0); }
  50%    { box-shadow:0 14px 34px -10px rgba(19,23,34,.55), 0 0 0 8px rgba(var(--mp-emerald),.18); }
}
.zn-fab{ animation:mp-zena-glow 2.6s ease-in-out 1.2s 3; }
.zn-fab img{ transition:transform 300ms var(--mp-ease); }
.zn-fab:hover img{ transform:rotate(-8deg) scale(1.06); }
/* Ready dot in the panel header */
@keyframes mp-ready{ 0%,100%{ box-shadow:0 0 0 0 rgba(var(--mp-emerald),.45); } 60%{ box-shadow:0 0 0 6px rgba(var(--mp-emerald),0); } }
.zn-head small i{ animation:mp-ready 2.4s ease-out 3; border-radius:50%; }
/* Send pulse */
@keyframes mp-send{ 0%{ transform:scale(1); } 35%{ transform:scale(.88); } 70%{ transform:scale(1.08); } 100%{ transform:scale(1); } }
.zn-send.mp-sent{ animation:mp-send 420ms var(--mp-ease); }
/* Newest message slides in; Zena's avatar gives a small nod when an answer lands */
@keyframes mp-msg-in{ from{ opacity:0; transform:translate3d(0,8px,0); } to{ opacity:1; transform:none; } }
@keyframes mp-nod{ 0%,100%{ transform:none; } 40%{ transform:translateY(-3px) rotate(-6deg); } }
.zn-list > .zn-msg:last-child{ animation:mp-msg-in 320ms var(--mp-ease) both; }
.zn-list > .zn-msg.ai:last-child:not(:has(.zn-typing)) > img{ animation:mp-nod 600ms var(--mp-ease) 200ms; }

/* Homepage Zena demo: the conversation plays once when scrolled into view */
html.mp-on #zena-intro .zx-chat.mp-armed .zx-msg{ opacity:0; transform:translate3d(0,10px,0); }
html.mp-on #zena-intro .zx-chat .zx-msg{ transition:opacity 420ms ease, transform 520ms var(--mp-ease); }
html.mp-on #zena-intro .zx-chat .zx-msg.mp-show{ opacity:1; transform:none; }
html.mp-on #zena-intro .zx-chat{ position:relative; }
.zx-typing[hidden]{ display:none !important; }
.zx-typing{ position:absolute; display:inline-flex; gap:5px; align-items:center; padding:12px 16px; margin:0; border-radius:16px; background:rgba(255,255,255,.08); width:max-content; }
.zx-typing i{ width:7px; height:7px; border-radius:50%; background:rgb(var(--mp-emerald)); animation:zn-dot 1.1s infinite ease-in-out; }
.zx-typing i:nth-child(2){ animation-delay:.15s; } .zx-typing i:nth-child(3){ animation-delay:.3s; }
@keyframes zn-dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

/* 6 ─ Pricing: button feedback (prices never animate) */
#pricing .ticket .btn-plan{ transition:transform 200ms var(--mp-ease), box-shadow 200ms ease, background-color 200ms ease; }
#pricing .ticket .btn-plan:active{ transform:translateY(1px) scale(.985); }

/* Buttons: small press feedback everywhere */
html body .btn:active{ transform:translateY(1px) scale(.985); }

/* Reduced motion: everything static and fully visible */
@media (prefers-reduced-motion: reduce){
  html body main .hero .wrap > div:first-child > *,
  html body main .hero .hero-ctas .btn,
  html body main .hero .ledger-stage,
  html body main .hero::before,
  .zn-fab, .zn-head small i, .zn-send.mp-sent, .zn-list > .zn-msg, .zn-list > .zn-msg > img,
  .qbw-count.mp-pop, .qbw-mcap.mp-swap { animation:none !important; }
  .mp-card, .mp-row, .qbw-tab, #pricing .ticket .btn-plan{ transition:none !important; }
  .mp-card:hover, .mp-row:hover, html body .btn:active{ transform:none !important; }
  html.mp-on #zena-intro .zx-chat .zx-msg{ opacity:1 !important; transform:none !important; }
  .zx-typing{ display:none !important; }
}

/* ── Additions (23 Oct 2026): course module cards, learning dashboard, pricing cards ── */

/* 3b ─ Course cards (#curriculum phases) lift with an emerald edge; module rows highlight */
html body main #curriculum .rm-phase{
  transition:transform 300ms var(--mp-ease), box-shadow 300ms var(--mp-ease), border-color 220ms ease, opacity .7s ease !important;
}
html body main #curriculum .rm-row{ transition:background-color 200ms ease; }
@media (hover:hover) and (pointer:fine){
  html.pv-on body main #curriculum .rm-phase:hover,
  html body main #curriculum .rm-phase:hover{
    transform:translateY(-5px) !important;
    border-color:rgb(var(--mp-emerald)) !important;
    box-shadow:0 30px 50px -26px rgba(0,0,0,.6), 0 0 0 1px rgba(var(--mp-emerald),.4) !important;
  }
  html body main #curriculum .rm-row:hover{ background-color:rgba(var(--mp-emerald),.06); }
}

/* 4 ─ Learning dashboard: cards arrive in reading order when the dashboard is first shown */
@keyframes mp-card-in{ from{ opacity:0; transform:translate3d(0,16px,0) scale(.985); } to{ opacity:1; transform:none; } }
@keyframes mp-row-in{ from{ opacity:0; transform:translate3d(-10px,0,0); } to{ opacity:1; transform:none; } }
html body main #app-view .dash3.mp-seq .card{ animation:mp-card-in 600ms var(--mp-ease) both; }
html body main #app-view .dash3.mp-seq > .card{ animation-delay:40ms; }
html body main #app-view .dash3.mp-seq > .col:nth-of-type(1) > .card:nth-child(1){ animation-delay:180ms; }
html body main #app-view .dash3.mp-seq > .col:nth-of-type(1) > .card:nth-child(2){ animation-delay:300ms; }
html body main #app-view .dash3.mp-seq > .col:nth-of-type(1) > .card:nth-child(3){ animation-delay:420ms; }
html body main #app-view .dash3.mp-seq > .col:nth-of-type(2) > .card:nth-child(1){ animation-delay:540ms; }
html body main #app-view .dash3.mp-seq > .col:nth-of-type(2) > .card:nth-child(2){ animation-delay:660ms; }
html body main #app-view .dash3.mp-seq > .col:nth-of-type(2) > .card:nth-child(3){ animation-delay:780ms; }
html body main #app-view .dash3.mp-seq .j-list > li{ animation:mp-row-in 450ms var(--mp-ease) both; animation-delay:calc(300ms + var(--mp-i,0) * 60ms); }
html body main #app-view .dash3.mp-seq .tasks > li{ animation:mp-row-in 450ms var(--mp-ease) both; animation-delay:calc(500ms + var(--mp-i,0) * 80ms); }
html body main #student-app .ring .fg{ transition:stroke-dashoffset 1.2s var(--mp-ease) .4s; }

/* 7b ─ Pricing cards: smooth lift on hover (beats the scroll-reveal transform) */
html body main #pricing .ticket{
  transition:transform 380ms var(--mp-ease), box-shadow 380ms var(--mp-ease), border-color 220ms ease !important;
}
@media (hover:hover) and (pointer:fine){
  html.pv-on body main #pricing .ticket:hover,
  html body main #pricing .ticket:hover{
    transform:translateY(-8px) !important;
    border-color:rgb(var(--mp-emerald)) !important;
    box-shadow:0 32px 54px -28px rgba(14,27,61,.45) !important;
  }
  html.pv-on body main #pricing .ticket.pop:hover,
  html body main #pricing .ticket.pop:hover{
    transform:translateY(-10px) !important;
    box-shadow:0 36px 60px -26px rgba(var(--mp-emerald),.6) !important;
  }
  #pricing .ticket .btn-plan:hover{ transform:translateY(-2px); box-shadow:0 12px 24px -12px rgba(var(--mp-emerald),.75); }
}

@media (prefers-reduced-motion: reduce){
  html body main #app-view .dash3.mp-seq .card,
  html body main #app-view .dash3.mp-seq li{ animation:none !important; }
  html body main #curriculum .rm-phase, html body main #curriculum .rm-row, html body main #pricing .ticket{ transition:none !important; }
  html.pv-on body main #curriculum .rm-phase:hover, html body main #curriculum .rm-phase:hover, html.pv-on body main #pricing .ticket:hover, html body main #pricing .ticket:hover{ transform:none !important; }
}