/* ProTrade motion layer (21st.dev version). Pairs with assets/js/motion.js.
   Every rule below is scoped to html.mo, which the script sets only when the visitor allows motion,
   so with no script or reduced motion the site renders exactly as the base stylesheet draws it. */

:root { --mo-ease: cubic-bezier(.2, .7, .2, 1); }

/* Text Effect (Motion Primitives), per word, fade-in-blur preset: opacity 0, y 20px, blur 12px, 50ms stagger */
.mo .hero-mq h1 { position: relative; }
.mo .hero-mq h1 .mo-w { display: inline-block; opacity: 0; filter: blur(12px); transform: translateY(20px);
  transition: opacity .6s var(--mo-ease), filter .6s var(--mo-ease), transform .6s var(--mo-ease);
  transition-delay: calc(var(--i) * 50ms + 80ms);
  /* the headline's gradient is painted per word, spread across the whole line so it still reads as one sweep */
  background: inherit; -webkit-background-clip: text; background-clip: text; }
.mo .hero-mq h1.mo-in .mo-w { opacity: 1; filter: none; transform: none; }
.mo .hero-mq .hq, .mo .hero-mq .hq__alt, .mo .hero-mq .eyebrow { animation: mo-rise .7s var(--mo-ease) both; }
.mo .hero-mq .eyebrow { animation-delay: 0ms; }
.mo .hero-mq .hq { animation-delay: .55s; }
.mo .hero-mq .hq__alt { animation-delay: .7s; }
.mo .hero-mq .nemap { animation: mo-fade 1.2s ease .2s both; }
@keyframes mo-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes mo-fade { from { opacity: 0; } to { opacity: 1; } }

/* Animated Group + In View: short rise, no scale, no bounce */
.mo .mo-rv { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--mo-ease), transform .6s var(--mo-ease); transition-delay: var(--d, 0ms); }
.mo .mo-rv.mo-on { opacity: 1; transform: none; }
/* cards keep their own hover transitions once they are in */
.mo .trow__card.mo-rv.mo-on { transition: background-color .2s, color .2s, border-color .2s, opacity .6s var(--mo-ease) var(--d), transform .6s var(--mo-ease) var(--d); }

/* Animated Background: one ink pill slides between the Find work filters */
.mo .mo-bar { position: relative; }
.mo .mo-pill { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 999px; background: var(--ink); pointer-events: none;
  transition: transform .32s var(--mo-ease), width .32s var(--mo-ease); }
.mo .mo-bar .jf { position: relative; z-index: 1; transition: color .2s, border-color .2s; }
.mo .mo-bar .jf.is-on { background: transparent; }

/* Accordion: the plus turns into a minus as the answer opens (height is animated in JS) */
.acc summary::before, .acc summary::after { transition: transform .24s var(--mo-ease), opacity .24s; }
.acc details[open] summary::after { opacity: 0; }

/* Select: listbox for the hero sentence */
.hqs { position: relative; display: inline-flex; }
.hqs__native { position: absolute !important; inset: 0; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; }
.hqs__btn { font: inherit; color: #fff; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23A4ADF5' stroke-width='1.5'/%3E%3C/svg%3E") right 4px center / 10px 6px no-repeat;
  border: 0; border-bottom: 1px solid rgba(164,173,245,.5); border-radius: 0; padding: 4px 22px 4px 2px; cursor: pointer; transition: border-color .2s; }
.hqs__btn:hover, .hqs.open .hqs__btn { border-bottom-color: var(--peri); }
.hqs__btn:focus-visible { outline: 2px solid var(--peri); outline-offset: 3px; }
/* Sizes, spacing, check position and open animation follow Origin UI's Select on 21st (id 268):
   popper content at trigger width, p-1, rounded-lg, items py-1.5 ps-8 rounded-md, check at the start,
   fade + zoom-in-95 + slide-in-from-top-2 */
.hqs__list { position: absolute; left: 0; top: calc(100% + 4px); z-index: 30; min-width: max(100%, 8rem); max-height: min(24rem, 320px); overflow-y: auto;
  margin: 0; padding: 4px; list-style: none; text-align: left; white-space: nowrap; font-size: .82em;
  background: #0A0C2E; border: 1px solid rgba(164,173,245,.28); border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.45);
  opacity: 0; visibility: hidden; transform-origin: top left; transform: translateY(-8px) scale(.95);
  transition: opacity .15s, transform .15s var(--mo-ease), visibility 0s .15s; }
.hqs.open .hqs__list { opacity: 1; visibility: visible; transform: none; transition: opacity .15s, transform .15s var(--mo-ease); }
.hqs__list:focus { outline: none; }
.hqs__list li { position: relative; padding: 6px 12px 6px 32px; border-radius: 6px; color: rgba(242,243,250,.82); cursor: default; user-select: none; }
.hqs__list li.is-hi { background: rgba(164,173,245,.14); color: #fff; }
.hqs__list li[aria-selected="true"] { color: #fff; }
.hqs__list li[aria-selected="true"]::before { content: ""; position: absolute; left: 11px; top: 50%; width: 9px; height: 5px; margin-top: -4px;
  border-left: 1.5px solid var(--peri); border-bottom: 1.5px solid var(--peri); transform: rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
  .hqs__list, .hqs.open .hqs__list { transition: none; }
}

/* the open listbox sits above the "See open jobs" line and the map */
.hero-mq .hq { position: relative; z-index: 10; }  /* above .hq__alt (z 5) so open pickers cover the link below */
.hqs__list li { text-wrap: nowrap; white-space: nowrap; }