/* ============================================================
   landing-motion.css — BLC landing motion layer (04/08/2026)
   Design rules:
   - Base state is ALWAYS visible. Hiding is opt-in via html.lm-on,
     which only landing-motion.js adds after proving JS runs,
     IntersectionObserver exists and reduced-motion is off.
   - Vertical-only entrance transforms: direction-neutral for RTL/LTR.
   - Theme colors come from existing tokens only.
   ============================================================ */
:root{--lm-ease:cubic-bezier(.16,1,.3,1)}

/* --- Reveal on scroll ------------------------------------- */
.lm-reveal{opacity:1;transform:none}
html.lm-on .lm-reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .5s var(--lm-ease),transform .5s var(--lm-ease);
  will-change:opacity,transform;
}
html.lm-on .lm-reveal.lm-in{opacity:1;transform:none;will-change:auto}

/* --- Ambient balloon-glow blobs (decorative only) ---------- */
html.lm-on .landing-hero{position:relative;overflow:hidden}
html.lm-on .landing-hero>.hero-copy,
html.lm-on .landing-hero>.hero-visual{position:relative;z-index:1}
.lm-blob{
  position:absolute;
  border-radius:50%;
  filter:blur(64px);
  opacity:.10;
  pointer-events:none;
  z-index:0;
  background:radial-gradient(circle at 32% 30%,#7c34eb 0%,#1fb7f0 78%);
  animation:lm-drift 22s ease-in-out infinite alternate;
}
.lm-blob:nth-child(1){width:360px;height:360px;inset-block-start:-90px;inset-inline-start:6%}
.lm-blob:nth-child(2){width:300px;height:300px;inset-block-end:-70px;inset-inline-end:10%;animation-duration:26s;animation-delay:-8s}
.lm-blob:nth-child(3){width:230px;height:230px;inset-block-start:34%;inset-inline-start:44%;animation-duration:19s;animation-delay:-14s;opacity:.07}
.dark-theme .lm-blob{opacity:.16}
.dark-theme .lm-blob:nth-child(3){opacity:.11}
@keyframes lm-drift{
  to{transform:translate3d(0,-36px,0) scale(1.14)}
}

/* --- Hero mockup: live dot + counters ---------------------- */
.lm-live-dot{
  display:inline-block;
  width:7px;height:7px;
  border-radius:50%;
  background:#22c55e;
  margin-inline-start:7px;
  vertical-align:middle;
  animation:lm-pulse 2.4s ease-in-out infinite;
}
@keyframes lm-pulse{
  0%,100%{opacity:.45;transform:scale(.8)}
  50%{opacity:1;transform:scale(1.12)}
}
.lm-count{font-variant-numeric:tabular-nums}

/* --- Micro-interactions ------------------------------------ */
html.lm-on .trust-points article,
html.lm-on .story-card,
html.lm-on .landing-product-proof-grid article,
html.lm-on .capabilities-grid article,
html.lm-on .feature-grid article{
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
html.lm-on .trust-points article:hover,
html.lm-on .trust-points article:focus-within,
html.lm-on .story-card:hover,
html.lm-on .story-card:focus-within,
html.lm-on .landing-product-proof-grid article:hover,
html.lm-on .landing-product-proof-grid article:focus-within{
  transform:translateY(-3px);
}
html.lm-on .landing-cta i{transition:transform .18s ease}
html.lm-on .landing-cta:hover i,
html.lm-on .landing-cta:focus-visible i{transform:translateX(-4px)}
html[dir="ltr"].lm-on .landing-cta:hover i,
html[dir="ltr"].lm-on .landing-cta:focus-visible i{transform:translateX(4px)}
html.lm-on .landing-cta:active{transform:scale(.98)}

/* --- Media slots: future real-photo component --------------
   Ships unused today. When event photos arrive, drop:
   <figure class="media" style="--ratio:4/3">
     <img class="media__img" src="/assets/photos/x.webp"
          alt="..." width="1200" height="900"
          loading="lazy" decoding="async">
   </figure>
   landing-motion.js wires .is-loaded automatically.
   ----------------------------------------------------------- */
.media{
  aspect-ratio:var(--ratio,4/3);
  overflow:hidden;
  border-radius:18px;
  background:linear-gradient(135deg,var(--card-muted,#f3f4f8),var(--accent-panel,#ece9ff));
  position:relative;
}
.media__img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:var(--focal,50% 50%);
  opacity:0;
  transition:opacity .5s ease;
}
.media__img.is-loaded{opacity:1}
.dark-theme .media__img{filter:brightness(.92)}
.media-gallery{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));
}

/* Mobile: keep decorative glows inside the visual contract without off-screen layers. */
@media (max-width:620px){
  html.lm-on .landing-hero .lm-blob{display:none}
  .landing-hero .visual-glow{
    width:min(360px,calc(100vw - 32px));
    height:min(360px,calc(100vw - 32px));
  }
}

/* --- Reduced motion: hard off ------------------------------ */
@media (prefers-reduced-motion:reduce){
  .lm-reveal,html.lm-on .lm-reveal{opacity:1!important;transform:none!important;transition:none!important}
  .lm-blob{display:none!important}
  .lm-live-dot{animation:none!important;opacity:1}
  .media__img{opacity:1!important;transition:none!important}
}