/* Love Me Lovely — small additions on top of the original theme CSS.
   Keep edits here so theme files stay clean. */

/* Contact form status message */
.form-status {
  margin: 1rem 0 0;
  font-size: 0.95rem;
  line-height: 1.4;
  text-align: center;
}
.form-status.is-success { color: #2e7d32; }
.form-status.is-error   { color: #c62828; }

/* Prevent background scroll when the side menu is open on mobile */
body.menu-open { overflow: hidden; }

/* Ensure the side navigation actually slides in when opened.
   (Guarantees the open state regardless of theme selector specificity.) */
.raven-nav-menu-side.raven-nav-menu-active {
  transform: translate(0) !important;
  visibility: visible !important;
}

/* Optional dark backdrop behind the open menu.
   Must sit BELOW the side menu (theme gives it z-index:1000). If the
   backdrop is >= the menu's z-index it paints on top and silently eats
   every click on the sidebar links, so keep it at 999 and force the menu
   above it (the !important beats the theme's more-specific selector). */
body.menu-open::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 999;
}
.raven-nav-menu-side { z-index: 1001 !important; }

/* ---------------------------------------------------------------
   Subtle motion pass. Everything here is gated on
   prefers-reduced-motion so it fully disables for users who
   ask for less motion. Scroll-reveal is driven by app.js, which
   only tags elements that start BELOW the fold (no flash).
   --------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }

  /* Scroll reveal — .reveal added by app.js only to off-screen blocks */
  .reveal { opacity: 0; transform: translateY(22px); }
  .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: opacity .85s ease, transform .85s cubic-bezier(.22, .61, .36, 1);
  }

  /* Portfolio images: gentle zoom to match the service cards' hover feel.
     (Keeps the theme's grayscale->color hover working too.) */
  .grid-card img {
    transition: filter .6s ease, transform .8s cubic-bezier(.22, .61, .36, 1);
  }
  .grid-card:hover img { transform: scale(1.05); }

  /* Hero: slow ken-burns on the active slide (theme already crossfades). */
  .slide-bg, .slide-img { transition: transform 7s ease-out; }
  .slide.active .slide-bg,
  .slide.active .slide-img { transform: scale(1.06); }
}