/* Scroll and hover motion. Every class here is added by /js/motion.js, so
 * without JS (or under reduced motion) none of these rules apply. */

/* ---------- Fade up and stagger (0.4s, 16px) ---------- */
.mo-pre { opacity: 0; transform: translateY(16px); }
.mo-pre.mo-in {
  opacity: 1; transform: none;
  transition: opacity .4s ease-out, transform .4s ease-out;
}

/* ---------- Listing card hover: photo zooms in its frame, title turns link blue ---------- */
.mo-card .elementor-widget-image .elementor-widget-container { overflow: hidden; }
.mo-card .elementor-widget-image img { transition: transform .5s cubic-bezier(.2, 0, .2, 1); }
.mo-card .elementor-post__thumbnail img { transition: transform .5s cubic-bezier(.2, 0, .2, 1), filter .3s; }
.mo-card .elementor-widget-heading a, .mo-card .elementor-post__title a { transition: color .2s ease; }
@media (hover: hover) {
  .mo-card:hover .elementor-widget-image img, .mo-card:hover .elementor-post__thumbnail img { transform: scale(1.04); }
  /* Ratio thumbnails are centered with a translate; keep it under the zoom */
  .elementor-has-item-ratio .mo-card:hover .elementor-post__thumbnail img { transform: scale(1.04) translate(-50%, -50%); }
  /* !important: per-widget title colors in wpr-usedcss out-rank a class selector */
  .mo-card:hover .elementor-widget-heading a, .mo-card:hover .elementor-post__title a { color: #1163A4 !important; }
}

/* ---------- Service cards: icon pop on entry, trail line on hover ---------- */
.mo-jcard { position: relative; transition: border-color .25s ease; }
.mo-jcard .mo-icon-tile, .mo-jcard .mo-icon-art { transform-box: fill-box; transform-origin: center; }
/* Entry: only while the card is waiting to enter, so cards already on screen stay put */
.mo-pre .mo-icon-tile { transform: scale(.4); opacity: 0; }
.mo-pre .mo-icon-art { transform: translateY(6px); opacity: 0; }
.mo-pre.mo-in .mo-icon-tile {
  transform: none; opacity: 1;
  transition: transform .45s cubic-bezier(.3, 1.5, .5, 1) calc(var(--d, 0ms) + 120ms), opacity .2s ease calc(var(--d, 0ms) + 120ms);
}
.mo-pre.mo-in .mo-icon-art {
  transform: none; opacity: 1;
  transition: transform .4s ease-out calc(var(--d, 0ms) + 320ms), opacity .4s ease-out calc(var(--d, 0ms) + 320ms);
}
/* Hover: border darkens, a yellow trail line draws along the bottom, the art nudges up */
.mo-jcard::after {
  content: ""; position: absolute; left: -1px; right: -1px; bottom: -1px; height: 3px;
  background: #DCD85F; transform: scaleX(0); transform-origin: left; transition: transform .4s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}
@media (hover: hover) {
  .mo-jcard:hover { border-color: #2E3C50 !important; }
  .mo-jcard:hover::after { transform: scaleX(1); }
  .mo-jcard:hover .mo-icon-art { transform: translateY(-2px); transition: transform .25s ease; }
}

/* ---------- Topo background wipes ---------- */
.mo-wipe-pos { position: relative; }
.mo-has-wipe { isolation: isolate; background-image: none !important; }
.mo-wipe { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.mo-wipe--right {
  -webkit-mask-image: linear-gradient(to right, #000 0 45%, transparent 55% 100%);
  mask-image: linear-gradient(to right, #000 0 45%, transparent 55% 100%);
  -webkit-mask-size: 250% 100%; mask-size: 250% 100%;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.mo-wipe--down {
  -webkit-mask-image: linear-gradient(to bottom, #000 0 45%, transparent 55% 100%);
  mask-image: linear-gradient(to bottom, #000 0 45%, transparent 55% 100%);
  -webkit-mask-size: 100% 250%; mask-size: 100% 250%;
  -webkit-mask-position: 0 100%; mask-position: 0 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.mo-wipe { transition: -webkit-mask-position 2.4s cubic-bezier(.33, 0, .2, 1), mask-position 2.4s cubic-bezier(.33, 0, .2, 1); }
.mo-wipe.is-drawn { -webkit-mask-position: 0 0; mask-position: 0 0; }

/* ---------- Home hero background video ---------- */
/* Framed exactly like the hero's cover background, so the video matches the
   still. Set from first paint: resizing the video later would count as a
   layout shift whenever bg-video.js leaves it empty. Parallax moves the
   picture with object-position, never the box. */
.elementor-element-8a75f7e video.elementor-background-video-hosted {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-width: none;
  object-fit: cover; transform: none; /* replaces Elementor's translate(-50%,-50%) centering */
}

/* ---------- Home hero topo graphic drawing in (Mask-Group-2309) ---------- */
/* Hidden from first paint (class set in the home page <head>) so it only ever appears by drawing in */
html.mo-herotopo-pending .elementor-element-a4c6761 img { visibility: hidden; }
.mo-topo-svg { position: absolute; display: block; max-width: none; pointer-events: none; }
.mo-topo-svg.mo-setup { visibility: hidden; }
.mo-topo-svg.mo-setup * { transition: none !important; }
.mo-topo-svg .mo-mark { opacity: 0; transition: opacity .35s ease-out; }
.mo-topo-svg .mo-line { clip-path: inset(0 0 100% 0); transition-property: clip-path; transition-timing-function: linear; }
.mo-topo-svg .mo-trail { clip-path: inset(0 0 100% 0); transition: clip-path var(--draw, 9s) cubic-bezier(.45, 0, .25, 1) var(--draw-delay, 0s); }
.mo-topo-svg .mo-dot { transform: scale(0); transform-box: fill-box; transform-origin: center; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1) var(--dd, 0s); }
.mo-topo-svg.is-drawn .mo-mark { opacity: var(--o, 1); }
.mo-topo-svg.is-drawn .mo-line, .mo-topo-svg.is-drawn .mo-trail { clip-path: inset(0 0 0 0); }
.mo-topo-svg.is-drawn .mo-dot { transform: none; }
/* Trail erase: the tail pulls away from the top and runs off the bottom, dots shrink as it passes */
.mo-topo-svg.is-drawn.mo-trail-out .mo-trail { clip-path: inset(100% 0 0 0); transition: clip-path var(--erase, 3.5s) cubic-bezier(.45, 0, .55, 1); }
.mo-topo-svg.is-drawn.mo-trail-out .mo-dot { transform: scale(0); transition: transform .3s ease-in var(--ed, 0s); }
.mo-topo-svg.mo-trail-reset .mo-trail { clip-path: inset(0 0 100% 0); transition: none; }
.mo-topo-svg.mo-trail-reset .mo-dot { transform: scale(0); transition: none; }

/* ---------- Reduced motion: final state, no movement (motion.js also skips setup) ---------- */
@media (prefers-reduced-motion: reduce) {
  .mo-pre, .mo-pre.mo-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mo-wipe { -webkit-mask-image: none !important; mask-image: none !important; transition: none !important; }
  .mo-card .elementor-widget-image img, .mo-card .elementor-post__thumbnail img { transition: none !important; }
  .mo-icon-tile, .mo-icon-art { transform: none !important; opacity: 1 !important; transition: none !important; }
  .mo-jcard::after { display: none; }
  html.mo-herotopo-pending .elementor-element-a4c6761 img { visibility: visible; }
  .mo-topo-svg .mo-mark, .mo-topo-svg .mo-line, .mo-topo-svg .mo-trail, .mo-topo-svg .mo-dot { transition: none !important; }
}