/* Caiku motion layer — shared across all pages.
   Principles: transform/opacity only (GPU), ease-out curves (no bounce),
   entrances 500–800ms, feedback 150–250ms, reduced-motion respected.
   Elements stay visible without JS: motion.js adds .m-init before animating. */

:root{
  --m-ease: cubic-bezier(0.22, 1, 0.36, 1);      /* ease-out-quint */
  --m-ease-expo: cubic-bezier(0.16, 1, 0.3, 1);  /* confident settle */
}

/* ── Scroll reveal (JS adds .m-init to arm, .m-in to play) ─────────────── */
.m-init{opacity:0;transform:translateY(14px);transition:opacity .65s var(--m-ease),transform .65s var(--m-ease);transition-delay:var(--m-delay,0ms)}
.m-init.m-in{opacity:1;transform:none}

/* ── Hero entrance choreography ────────────────────────────────────────── */
.m-hero-item{opacity:0;transform:translateY(18px);transition:opacity .7s var(--m-ease),transform .7s var(--m-ease);transition-delay:var(--m-delay,0ms)}
.m-hero-item.m-in{opacity:1;transform:none}
.m-hero-visual{opacity:0;transform:translateY(24px) scale(.965);transition:opacity .8s var(--m-ease-expo),transform .8s var(--m-ease-expo);transition-delay:280ms}
.m-hero-visual.m-in{opacity:1;transform:none}

/* Red pain words: underline draws itself after the headline lands */
.m-underline{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 96%;background-size:0% 2px;transition:background-size .5s var(--m-ease);transition-delay:.9s}
.m-underline.m-in{background-size:100% 2px}

/* ── Chat replay (looping conversation with typing indicator) ──────────── */
.m-turn{opacity:0;transform:translateY(10px) scale(.98);transition:opacity .42s var(--m-ease),transform .42s var(--m-ease)}
.m-turn.m-in{opacity:1;transform:none}
.m-turn.m-reset{transition-duration:.25s} /* faster fade-out between loops */

.m-typing-row{display:flex;gap:10px;align-items:center}
.m-typing{display:inline-flex;gap:4px;align-items:center;background:rgba(8,47,58,.06);border-radius:14px;padding:9px 13px}
.m-typing i{width:6px;height:6px;border-radius:50%;background:rgba(8,47,58,.45);animation:m-dot 1s infinite ease-in-out}
.m-typing i:nth-child(2){animation-delay:.15s}
.m-typing i:nth-child(3){animation-delay:.3s}
@keyframes m-dot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:.9;transform:translateY(-2px)}}

/* ── Header scroll state ───────────────────────────────────────────────── */
.m-header{transition:box-shadow .25s ease,background-color .25s ease}
.m-header.m-scrolled{box-shadow:0 6px 24px -12px rgba(8,47,58,.18)}

/* ── Micro-interactions ────────────────────────────────────────────────── */
.btn{transition:transform .15s var(--m-ease),box-shadow .2s var(--m-ease),background-color .15s ease,border-color .15s ease,color .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.97);transition-duration:.1s}
.btn:hover .btn-arrow{transform:translateX(3px)}

[class*="card"]:where(a,[class]):hover{}
.pain-card:hover,.feat-card:hover,.ag-card:hover,.ind-card:hover,.why-card:hover,.price-card:hover,.card:hover{transform:translateY(-3px);box-shadow:0 18px 36px -18px rgba(8,47,58,.16)}

details[open] .plus,.qa[open] .plus{transform:rotate(45deg)}
.qa .plus,details .plus{transition:transform .25s var(--m-ease)}

/* ── Accessibility: kill everything for reduced-motion users ───────────── */
@media (prefers-reduced-motion: reduce){
  .m-init,.m-hero-item,.m-hero-visual,.m-turn{opacity:1 !important;transform:none !important;transition:none !important}
  .m-underline{background-size:100% 2px;transition:none}
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important}
}