/* 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 */
body.menu-open::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 1000;
}
.raven-nav-menu-side { z-index: 1001; }

/* ---------------------------------------------------------------
   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); }
}