/* Landing page — entrance animations */

:root {
  --enter-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes loginPageFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes loginFadeDown {
  from {
    opacity: 0;
    transform: translateY(-14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes loginFadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes loginFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes loginSlideUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes loginVisualIn {
  from {
    opacity: 0;
    transform: translateX(20px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

body.role-guest.mho-landing {
  opacity: 0;
  animation: loginPageFade 800ms var(--enter-ease) forwards;
}

.mho-landing .landing-nav {
  animation: loginFadeDown 700ms var(--enter-ease) 60ms both;
}

.mho-landing .landing-hero__badge {
  animation: loginFadeIn 600ms var(--enter-ease) 140ms both;
}

.mho-landing .landing-hero__title {
  animation: loginFadeUp 750ms var(--enter-ease) 200ms both;
}

.mho-landing .landing-hero__subtitle {
  animation: loginFadeIn 650ms var(--enter-ease) 280ms both;
}

.mho-landing .landing-hero__actions {
  animation: loginFadeUp 700ms var(--enter-ease) 360ms both;
}

.mho-landing .landing-hero__visual {
  animation: loginVisualIn 900ms var(--enter-ease) 220ms both;
}

body.login-skip-entrance.mho-landing {
  opacity: 1;
  animation: none;
}

body.login-skip-entrance .landing-nav,
body.login-skip-entrance .landing-hero__badge,
body.login-skip-entrance .landing-hero__title,
body.login-skip-entrance .landing-hero__subtitle,
body.login-skip-entrance .landing-hero__actions,
body.login-skip-entrance .landing-hero__visual {
  animation: none;
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  body.role-guest.mho-landing {
    opacity: 1;
    animation: none;
  }

  .mho-landing .landing-nav,
  .mho-landing .landing-hero__badge,
  .mho-landing .landing-hero__title,
  .mho-landing .landing-hero__subtitle,
  .mho-landing .landing-hero__actions,
  .mho-landing .landing-hero__visual {
    animation: none;
    opacity: 1;
    transform: none;
  }
}