/* ==========================================================================
   Motion layer
   The Figma file specifies no animation, so this is an addition. Rules:
   - Only opacity and transform animate, so nothing ever reflows.
   - Nothing is hidden unless JS is running (html.js) — with JS off, or if the
     script fails, every element renders in its final state.
   - prefers-reduced-motion disables movement entirely, at the end of the file.
   Intensity comes from the preset on <html data-motion>, set in the admin.
   ========================================================================== */

:root {
    --mo-rise: 1.5rem;      /* travel distance   */
    --mo-dur: 620ms;        /* reveal duration   */
    --mo-stagger: 80ms;     /* delay per sibling */
    --mo-scale: 1;          /* media reveal zoom */
    --mo-ease: cubic-bezier(.22, .61, .36, 1);
}

html[data-motion="subtle"]     { --mo-rise: .75rem; --mo-dur: 420ms; --mo-stagger: 45ms; --mo-scale: 1; }
html[data-motion="standard"]   { --mo-rise: 1.5rem; --mo-dur: 620ms; --mo-stagger: 80ms; --mo-scale: 1; }
html[data-motion="expressive"] { --mo-rise: 2.5rem; --mo-dur: 820ms; --mo-stagger: 110ms; --mo-scale: .965; }

/* --------------------------------------------------------------------------
   Scroll reveal
   -------------------------------------------------------------------------- */

html.js[data-motion]:not([data-motion="off"]) [data-mo] {
    opacity: 0;
    transform: translate3d(0, var(--mo-rise), 0);
    transition: opacity var(--mo-dur) var(--mo-ease),
                transform var(--mo-dur) var(--mo-ease);
    transition-delay: calc(var(--mo-i, 0) * var(--mo-stagger));
    will-change: opacity, transform;
}

/* Media reveals with a slight zoom on the expressive preset. */
html.js[data-motion]:not([data-motion="off"]) [data-mo="media"] {
    transform: translate3d(0, var(--mo-rise), 0) scale(var(--mo-scale));
}

/* Must repeat the full prefix of the hiding rule above — a shorter selector
   loses on specificity and the element never becomes visible. */
html.js[data-motion]:not([data-motion="off"]) [data-mo].is-in,
html.js[data-motion]:not([data-motion="off"]) [data-mo="media"].is-in {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* --------------------------------------------------------------------------
   Hero — runs on load rather than on scroll
   -------------------------------------------------------------------------- */

html.js[data-motion]:not([data-motion="off"]) .hero__eyebrow,
html.js[data-motion]:not([data-motion="off"]) .hero__title {
    opacity: 0;
    transform: translate3d(0, var(--mo-rise), 0);
    transition: opacity var(--mo-dur) var(--mo-ease),
                transform var(--mo-dur) var(--mo-ease);
}
html.js[data-motion]:not([data-motion="off"]) .hero__title { transition-delay: 120ms; }
html.js[data-motion]:not([data-motion="off"]) .hero.is-in .hero__eyebrow,
html.js[data-motion]:not([data-motion="off"]) .hero.is-in .hero__title { opacity: 1; transform: none; }

/* A very slow drift on the hero photo — expressive only, and only the image
   moves, so the headline stays pinned. */
html.js[data-motion="expressive"] .hero__media img {
    transform: translate3d(0, var(--mo-parallax, 0), 0) scale(1.06);
    transition: transform 120ms linear;
}

/* --------------------------------------------------------------------------
   Micro-interactions — these apply on every preset except "off"
   -------------------------------------------------------------------------- */

html[data-motion]:not([data-motion="off"]) .product-card,
html[data-motion]:not([data-motion="off"]) .estate-card,
html[data-motion]:not([data-motion="off"]) .news-card__art,
html[data-motion]:not([data-motion="off"]) .tenant-card {
    transition: transform .35s var(--mo-ease), box-shadow .35s var(--mo-ease);
}
html[data-motion]:not([data-motion="off"]) .product-card:hover,
html[data-motion]:not([data-motion="off"]) .estate-card:hover,
html[data-motion]:not([data-motion="off"]) .tenant-card:hover {
    transform: translateY(-.5rem);
    box-shadow: 0 1.25rem 2rem rgba(0, 0, 0, .12);
}
html[data-motion]:not([data-motion="off"]) .news-card a:hover .news-card__art {
    transform: scale(1.03);
}

html[data-motion]:not([data-motion="off"]) .learn-more svg,
html[data-motion]:not([data-motion="off"]) .btn-chip svg,
html[data-motion]:not([data-motion="off"]) .btn-explore svg {
    transition: transform .3s var(--mo-ease);
}
html[data-motion]:not([data-motion="off"]) .learn-more:hover svg,
html[data-motion]:not([data-motion="off"]) .btn-chip:hover svg,
html[data-motion]:not([data-motion="off"]) .btn-explore:hover svg {
    transform: translateX(.25rem);
}

html[data-motion]:not([data-motion="off"]) .btn-cta,
html[data-motion]:not([data-motion="off"]) .btn-pill,
html[data-motion]:not([data-motion="off"]) .btn-submit {
    transition: transform .25s var(--mo-ease), background .18s, filter .18s;
}
html[data-motion]:not([data-motion="off"]) .btn-cta:hover,
html[data-motion]:not([data-motion="off"]) .btn-pill:hover,
html[data-motion]:not([data-motion="off"]) .btn-submit:hover {
    transform: translateY(-.125rem);
}

/* Entry modal */
html.js[data-motion]:not([data-motion="off"]) .entry-modal { animation: mo-fade 260ms var(--mo-ease) both; }
html.js[data-motion]:not([data-motion="off"]) .entry-modal__dialog { animation: mo-pop 340ms var(--mo-ease) both; }
@keyframes mo-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mo-pop  { from { opacity: 0; transform: translateY(1rem) scale(.97); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------------------
   Reduced motion wins over everything above.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    html.js [data-mo],
    html.js [data-mo="media"],
    html.js .hero__eyebrow,
    html.js .hero__title {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    html.js .hero__media img { transform: none !important; }
    html .entry-modal,
    html .entry-modal__dialog { animation: none !important; }
    html *,
    html *::before,
    html *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}