/* Public landing page — scoped under .ema-landing so nothing leaks into the
   rest of either app. Neither app's global CSS (portal's .ema-page-enter /
   .ema-hover-lift, portal's --ema-surface-*) is available here, so this file
   is self-contained. */

/* `scroll-behavior` only affects the element that actually scrolls — for a
   full page that's `html`, not this div, so it has to live here. Scoped with
   :has() so it only applies while the landing page is mounted. */
html:has(.ema-landing) {
  scroll-behavior: smooth;
}

.ema-landing section[id] {
  /* Offsets anchor jumps by the sticky header height so the heading isn't
     hidden underneath it. Keep in sync with the header's fixed height. */
  scroll-margin-top: 72px;
}

.ema-landing .ema-landing-fade {
  animation: ema-landing-fade-up 360ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes ema-landing-fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ema-landing .ema-landing-hover {
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease;
}
.ema-landing .ema-landing-hover:hover {
  transform: translateY(-3px);
}

/* Amharic runs 20-40% longer than English and falls back to a different font
   (Inter has no Ethiopic glyphs), so it needs more vertical room. */
.ema-landing:lang(am) {
  line-height: 1.7;
}

@media (prefers-reduced-motion: reduce) {
  html:has(.ema-landing) {
    scroll-behavior: auto;
  }
  .ema-landing .ema-landing-fade,
  .ema-landing .ema-landing-hover {
    animation: none;
    transition: none;
  }
}