/* ==========================================================================
   Animations — scroll reveal + hero entrance (driven by js/animations.js)
   Hidden states only apply when JS has added html.lk-motion, so content is
   always visible without JS or with "reduce motion" turned on.
   ========================================================================== */

:root {
  --lk-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --lk-rise: 28px;
}

/* ---------- Scroll reveal: fade + rise ---------- */

html.lk-motion .lk-reveal {
  opacity: 0;
  transform: translate3d(0, var(--lk-rise), 0);
  transition:
    opacity 0.8s var(--lk-ease) var(--lk-delay, 0s),
    transform 0.9s var(--lk-ease) var(--lk-delay, 0s);
}

html.lk-motion .lk-reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Images settle from a slight zoom as they appear */
html.lk-motion .lk-zoom img {
  transform: scale(1.08);
  transition: transform 1.6s var(--lk-ease) var(--lk-delay, 0s);
}

html.lk-motion .lk-zoom.is-in img {
  transform: scale(1);
}

/* ---------- Hero entrance (on page load) ---------- */

@keyframes lkHeroIn {
  from {
    opacity: 0;
    transform: translate3d(0, 24px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* "backwards" (not "both"): once finished, no transform is left on the
   element — a lingering transform would re-anchor absolutely positioned
   children such as the hero room carousel. */
html.lk-motion .lk-hero-in {
  animation: lkHeroIn 1s var(--lk-ease) backwards;
  animation-delay: var(--lk-delay, 0s);
}

/* Fade only (no transform) for wrappers of absolutely positioned content */
@keyframes lkFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

html.lk-motion .lk-hero-fade {
  animation: lkFadeIn 1.1s var(--lk-ease) backwards;
  animation-delay: var(--lk-delay, 0s);
}

/* Soft breathing glow on the primary hero button */
@keyframes lkPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(224, 83, 60, 0.45); }
  50%      { box-shadow: 0 0 0 10px rgba(224, 83, 60, 0); }
}

html.lk-motion .hero-actions .btn--primary a {
  animation: lkPulse 2.8s ease-in-out 1.8s infinite;
}

/* ---------- Smaller, quicker motion on phones / tablets ---------- */

@media (max-width: 991px) {
  :root {
    --lk-rise: 18px;
  }

  html.lk-motion .lk-reveal {
    transition-duration: 0.65s, 0.7s;
  }
}

/* ---------- Respect "reduce motion" ---------- */

@media (prefers-reduced-motion: reduce) {
  html.lk-motion .lk-reveal,
  html.lk-motion .lk-zoom img,
  html.lk-motion .lk-hero-in,
  html.lk-motion .lk-hero-fade,
  html.lk-motion .hero-actions .btn--primary a {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}