/* =====================================================================
   Katarina Royce — post-clone enhancements
   Loaded last, after the ported theme CSS, so these rules win.
   All reveal/fade rules are gated behind html.mw-enhance, which is added
   by clone-loader.js. Without JS the site renders exactly as before.
   ===================================================================== */

/* 1. Mobile home hero legibility -------------------------------------
   On phones the wordmark + tagline + button stack on top of the photo.
   A soft cream veil over the lower half lifts the text off the busy
   image without changing the look on desktop (split layout). */
@media only screen and (max-width: 890px) {
  body.home .mw24__featured-image--mobile::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgba(245, 240, 230, 0) 26%,
      rgba(245, 240, 230, 0.5) 50%,
      rgba(245, 240, 230, 0.88) 100%
    );
  }

  body.home .mw24__content .mw24__tagline {
    color: var(--brown, #4b290b);
    text-shadow: 0 1px 3px rgba(245, 240, 230, 0.7);
  }
}

/* 2. Gentle fade-in as lazy images stream in (all viewports) --------- */
html.mw-enhance img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.7s ease;
}
html.mw-enhance img[loading="lazy"].mw-loaded {
  opacity: 1;
}

/* 3. Mobile scroll-reveal (desktop already has GSAP reveals) --------- */
@media only screen and (max-width: 890px) {
  html.mw-enhance .mw-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    will-change: opacity, transform;
  }
  html.mw-enhance .mw-reveal.mw-revealed {
    opacity: 1;
    transform: none;
  }
}

/* Respect reduced-motion: no transforms/fades, just show content. */
@media (prefers-reduced-motion: reduce) {
  html.mw-enhance img[loading="lazy"],
  html.mw-enhance .mw-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}