/* Motion layer for the Lomara site. Everything here is scoped under
   html.motion, which motion.js sets only when the visitor has not asked
   for reduced motion, so the static design is the fallback. */

/* Scroll reveal */
.motion .m-reveal {
  opacity: 0;
  translate: 0 18px;
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1), translate .7s cubic-bezier(.22, 1, .36, 1);
}
.motion .m-reveal.m-in { opacity: 1; translate: 0 0; }
.motion .m-reveal.m-frame { translate: 0 28px; scale: .985; transition-property: opacity, translate, scale; transition-duration: .9s; }
.motion .m-reveal.m-frame.m-in { scale: 1; }

/* Sticky header gains a soft shadow once the page scrolls */
.motion header { transition: box-shadow .25s ease; }
.motion header.m-scrolled { box-shadow: 0 6px 24px rgba(26, 24, 22, .07); }

/* Buttons and pill links lift slightly on hover */
.motion a[style*="border-radius"] { transition: translate .18s ease, box-shadow .18s ease, opacity .18s ease; }
.motion a[style*="border-radius"]:hover { translate: 0 -1px; box-shadow: 0 6px 16px rgba(26, 24, 22, .12); }
.motion a[style*="border-radius"]:active { translate: 0 0; box-shadow: none; }

/* Mockup frames feel touchable */
.motion .m-scene { transition: box-shadow .3s ease; }

/* FAQ answers ease in when opened */
.motion details[open] > :not(summary) { animation: m-fade-down .35s cubic-bezier(.22, 1, .36, 1); }
@keyframes m-fade-down { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }

/* Simulated pointer used inside the product mockups */
.m-cursor {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 30;
  width: 20px;
  height: 20px;
  pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(26, 24, 22, .35));
  opacity: 0;
  transition: opacity .25s ease;
}
.m-cursor.m-on { opacity: 1; }
.m-cursor svg { display: block; width: 20px; height: 20px; margin: -2px 0 0 -3px; }
.m-ripple {
  position: absolute;
  z-index: 29;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: rgba(67, 97, 58, .28);
  pointer-events: none;
}

/* Text caret while a mockup "types" */
.m-caret {
  display: inline-block;
  width: 1.5px;
  height: 1.05em;
  margin-left: 1px;
  vertical-align: -.15em;
  background: #43613A;
  animation: m-blink 1s steps(1) infinite;
}
@keyframes m-blink { 50% { opacity: 0; } }

/* Slack "is typing" indicator */
.m-typing {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 0 2px 46px;
  font-size: 12px;
  color: #706960;
}
.m-dots { display: inline-flex; gap: 3px; }
.m-dots i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #A79D8E;
  animation: m-bounce 1s ease-in-out infinite;
}
.m-dots i:nth-child(2) { animation-delay: .15s; }
.m-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes m-bounce { 0%, 60%, 100% { translate: 0 0; opacity: .5; } 30% { translate: 0 -3px; opacity: 1; } }

/* Extraction queue "reading" placeholder */
.m-reading {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  color: #706960;
  padding: 3px 7px;
  border-radius: 4px;
  background: linear-gradient(90deg, #EDE8DF 0%, #F6F3EE 50%, #EDE8DF 100%);
  background-size: 200% 100%;
  animation: m-shimmer 1s linear infinite;
  white-space: nowrap;
}
@keyframes m-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* Row highlight while the pointer hovers a result */
.m-hl { background: #F6F3EE !important; transition: background .2s ease; }

@media (prefers-reduced-motion: reduce) {
  .m-cursor, .m-ripple, .m-typing, .m-reading { display: none !important; }
}