/* Stratum landing — motion layer.
   Everything is gated on .motion-on, which js/motion.js adds only when the
   visitor hasn't asked for reduced motion. Without it the page is static. */

.motion-on { --ease-out: cubic-bezier(.16, 1, .3, 1); }

/* ---------- Hero: headline words rise out of a blur ---------- */
.motion-on .hero h1 .w { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(8px); }
.motion-on .hero h1.words-in .w {
  animation: word-in .9s var(--ease-out) forwards;
  animation-delay: calc(120ms + var(--wi) * 75ms);
}
@keyframes word-in { to { opacity: 1; transform: none; filter: blur(0); } }

.motion-on .hero .lead,
.motion-on .hero .hero-actions { animation: rise-in .9s var(--ease-out) both; }
.motion-on .hero .lead { animation-delay: .55s; }
.motion-on .hero .hero-actions { animation-delay: .7s; }
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } }

/* ---------- Hero: passport builds in from a ghost state ---------- */
.motion-on .hero-visual { transform: translateY(var(--py, 0)); will-change: transform; }
.motion-on .passport { animation: ghost-in 1.1s .35s var(--ease-out) both; }
@keyframes ghost-in {
  0% { opacity: 0; transform: translateY(28px) scale(.97); filter: saturate(0); }
  55% { opacity: .55; filter: saturate(.2); }
  100% { opacity: 1; transform: none; filter: none; }
}
.motion-on .passport-head,
.motion-on .score > div:last-child { animation: rise-in .7s var(--ease-out) both; }
.motion-on .passport-head { animation-delay: .8s; }
.motion-on .score > div:last-child { animation-delay: 1.1s; }
.motion-on .req-list li { animation: row-in .6s var(--ease-out) both; }
.motion-on .req-list li:nth-child(1) { animation-delay: 1.25s; }
.motion-on .req-list li:nth-child(2) { animation-delay: 1.37s; }
.motion-on .req-list li:nth-child(3) { animation-delay: 1.49s; }
@keyframes row-in { from { opacity: 0; transform: translateX(-12px); } }
.motion-on .req-list .tag { animation: pop .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.motion-on .req-list li:nth-child(1) .tag { animation-delay: 1.5s; }
.motion-on .req-list li:nth-child(2) .tag { animation-delay: 1.62s; }
@keyframes pop { from { opacity: 0; transform: scale(.5); } }

.motion-on .insights { animation: fact-in 1s 1.55s var(--ease-out) both, float 7s 2.6s ease-in-out infinite; }
@keyframes fact-in { from { opacity: 0; transform: translate(-24px, 24px) rotate(-3deg); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---------- Headings "ink in" word by word as you scroll ---------- */
.motion-on .ink .w { color: #C5CBDB; transition: color .5s ease; transition-delay: calc(var(--wi) * 70ms); }
.motion-on .ink.lit .w { color: inherit; }
.motion-on .ink.lit-now .w { transition: none; }
.motion-on .signup h2.ink .w { color: rgba(255, 255, 255, .35); }
.motion-on .signup h2.ink.lit .w { color: #fff; }

/* ---------- Generic staggered reveal ---------- */
.motion-on [data-m] {
  opacity: 0; transform: translateY(22px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 90ms);
}
.motion-on [data-m].m-in { opacity: 1; transform: none; }
/* cards keep their own hover lift after revealing */
.motion-on .card[data-m].m-in:hover { transform: translateY(-3px); transition-delay: 0s; }

/* Showcase checklist: rows slide in, then the status pills pop */
.motion-on .checklist li[data-m] { transform: translateX(18px); }
.motion-on .checklist li[data-m].m-in { transform: none; }
.motion-on .checklist .status { transform: scale(.4); opacity: 0; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1), opacity .3s; }
.motion-on .checklist li.m-in .status { transform: none; opacity: 1; transition-delay: calc(var(--d, 0) * 90ms + .35s); }

/* ---------- Gradient signup block widens into place (triggered once) ---------- */
.motion-on .signup[data-m] {
  clip-path: inset(0 7% round 28px); transform: translateY(24px); opacity: 1;
  transition: clip-path 1s var(--ease-out), transform 1s var(--ease-out);
}
.motion-on .signup[data-m].m-in { clip-path: inset(0 0 round 28px); transform: none; }

/* ---------- Header shadow on scroll ---------- */
.site-header { transition: box-shadow .3s ease, background-color .3s ease; }
.motion-on .site-header.is-scrolled { box-shadow: 0 8px 24px -16px rgba(22, 32, 79, .35); background: rgba(243, 245, 250, .96); }

/* ---------- StratAI chat: bubbles appear like a conversation ---------- */
.motion-on .chat[data-m] .bubble { opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.motion-on .chat[data-m].m-in .bubble.me { opacity: 1; transform: none; transition-delay: .35s; }
.motion-on .chat[data-m].m-in .bubble.bot { opacity: 1; transform: none; transition-delay: 1.05s; }
.motion-on .chat[data-m] .bot-list { opacity: 0; transition: opacity .4s ease; }
.motion-on .chat[data-m].m-in .bot-list { opacity: 1; }
.motion-on .chat[data-m].m-in .bot-list:nth-of-type(2) { transition-delay: 1.45s; }
.motion-on .chat[data-m].m-in .bot-list:nth-of-type(3) { transition-delay: 1.65s; }
.motion-on .chat[data-m].m-in .bot-list:nth-of-type(4) { transition-delay: 1.85s; }

/* ---------- Deck cards slide up into their stack ---------- */
.motion-on .deck-card[data-m] { transform: translateY(34px); }
.motion-on .deck-card[data-m].m-in { transform: none; }

/* ---------- Buttons: subtle shine on the primary CTA ---------- */
.motion-on .btn-primary { position: relative; overflow: hidden; }
.motion-on .btn-primary::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%);
}
.motion-on .btn-primary:hover::after { transform: translateX(120%); transition: transform .8s var(--ease-out); }