/* ==========================================================================
   Popup People Agency — motion layer (popup-v3)
   Loaded after the Webflow CSS. Everything here is additive: without
   js/motion.js (or when the failsafe in <head> fires), the page renders
   exactly as before.

   Thesis: the hand-made marks come alive. Display type rises out of a mask,
   the blue brush strokes paint in, the spark lines burst, the stickers slap
   on. Lists arrive as lists, key numbers roll like an odometer.
   ========================================================================== */

:root {
  --pu-ease-out: cubic-bezier(.16, 1, .3, 1);     /* confident arrivals */
  --pu-ease-in-out: cubic-bezier(.65, 0, .35, 1); /* marker strokes */
  --pu-ease-in: cubic-bezier(.4, 0, 1, 1);        /* exits */
  --pu-blue: #0031ff;
  --pu-perfume: #dbcdf8;
}

::selection {
  background-color: var(--pu-blue);
  color: #fff;
}

/* --------------------------------------------------------------------------
   1. Hidden until revealed (only while html.pu-motion is set)
   -------------------------------------------------------------------------- */

.pu-motion :is(
  /* hero: headline, intro, buttons, home logo */
  .section_header1 h1,
  .section_header62 h1,
  .section_header1 .header1_content-left > p,
  .section_header1 .button-group,
  .section_header1 .header1_image,
  .section_header62 .text-size-medium,
  .section_header62 .button-group,
  ._404_component > :not(.text-style-tagline),
  /* stickers */
  .text-style-tagline[class*="tag-"],
  /* lists, revealed item by item */
  .layout364_card,
  .layout298_item,
  .layout381_card-large,
  .layout381_card-medium,
  .layout381_card-small,
  .stats8_item,
  .stats13_item,
  .layout396_card,
  .layout392_card-small,
  .layout392_card-large-horizontal,
  .layout392_card-large-vertical,
  .layout400_card,
  .contact6_item,
  .faq10_accordion,
  .faq2_accordion
):not(.pu-in) {
  opacity: 0;
}

/* Spark marks burst out of the point their lines radiate from */
.pu-motion img[src$="Spark.svg"] {
  clip-path: circle(0% at 93% 97%);
}
.pu-motion img[src$="Spark.svg"].pu-in {
  clip-path: circle(150% at 93% 97%);
  transition: clip-path .6s var(--pu-ease-out) var(--pu-d, 0ms);
}

/* The blue brush stroke moves to a pseudo-element so it can be painted
   left to right behind the words. */
html.pu-motion :is(.has-scrap, [class*="custom-scrap"]) {
  position: relative;
  isolation: isolate;
  background-image: none;
}
html.pu-motion :is(.has-scrap, [class*="custom-scrap"])::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("../images/Scrap.svg");
  background-position: inherit;
  background-size: inherit;
  background-repeat: inherit;
  clip-path: inset(0 100% 0 0);
}
html.pu-motion :is(.has-scrap, [class*="custom-scrap"]).pu-painted::before {
  clip-path: inset(0 0 0 0);
  transition: clip-path .8s var(--pu-ease-in-out) var(--pu-paint-d, 0ms);
}

/* The hand-drawn arrow is drawn downward */
.pu-motion .layout350_arrow {
  clip-path: inset(0 0 100% 0);
}
.pu-motion .layout350_arrow.pu-in {
  clip-path: inset(0 0 -2px 0);
  transition: clip-path .9s var(--pu-ease-in-out) var(--pu-d, 0ms);
}

/* Large standalone photos rise from their bottom edge */
.pu-motion :is(.contact15_image, .layout486_image, .layout192_image, .layout350_mobile-image) {
  clip-path: inset(100% 0 0 0);
}
.pu-motion :is(.contact15_image, .layout486_image, .layout192_image, .layout350_mobile-image).pu-in {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.1s var(--pu-ease-out) var(--pu-d, 0ms);
}

/* Images arrive instead of popping in once they have loaded */
.pu-motion .pu-img {
  opacity: 0;
}
.pu-motion .pu-img.pu-img-in {
  opacity: 1;
  transition: opacity .5s ease;
}

/* --------------------------------------------------------------------------
   2. Split headline (built by motion.js, unwrapped once it has landed)
   -------------------------------------------------------------------------- */

.pu-w {
  display: inline-block;
  clip-path: inset(-.5em -.5em -.14em -.5em);
}
.pu-w__i {
  display: inline-block;
  transform-origin: 0 100%;
}

/* --------------------------------------------------------------------------
   3. Odometer numbers
   -------------------------------------------------------------------------- */

.pu-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.pu-odo {
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
}
.pu-odo__c {
  display: inline-block;
  vertical-align: top;
  height: var(--pu-lh);
  line-height: var(--pu-lh);
  text-align: left;
  clip-path: inset(0 -.6em);
}
.pu-odo__s,
.pu-odo__s > span {
  display: block;
}
.pu-odo__s > span {
  height: var(--pu-lh);
}

/* --------------------------------------------------------------------------
   4. Process steps connector (home, "From brief to execution")
   -------------------------------------------------------------------------- */

.pu-seg {
  position: absolute;
  height: 0;
  border-top: 2px dashed var(--pu-perfume);
  pointer-events: none;
  opacity: .55;
  clip-path: inset(0 100% 0 0);
}
.pu-seg.pu-in {
  clip-path: inset(0 0 0 0);
  transition: clip-path .5s var(--pu-ease-in-out) var(--pu-d, 0ms);
}
/* Vertical run of the same connector, when the steps are stacked */
.pu-seg.is-vertical {
  height: auto;
  width: 0;
  border-top: 0;
  border-left: 2px dashed var(--pu-perfume);
  clip-path: inset(0 0 100% 0);
}
.pu-seg.is-vertical.pu-in {
  clip-path: inset(0 0 0 0);
}

/* --------------------------------------------------------------------------
   4b. The menu follows the reader on long pages
   -------------------------------------------------------------------------- */

.pu-sticky-nav {
  position: sticky;
  top: 0;
  transition: transform .4s var(--pu-ease-out);
}
.pu-sticky-nav.is-tucked {
  transform: translateY(-100%);
}
/* Anchors and script-driven scrolls stop below the menu */
.main-wrapper [id],
.page-wrapper [id] {
  scroll-margin-top: 6rem;
}

/* --------------------------------------------------------------------------
   4c. Stacked cards: the one underneath steps back
   -------------------------------------------------------------------------- */

.pu-stack {
  transform: scale(calc(1 - .05 * var(--pu-stack, 0)));
}
.pu-stack::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: var(--_primitives---colors--neutral-darkest, #03020d);
  opacity: calc(.6 * var(--pu-stack, 0));
}

/* --------------------------------------------------------------------------
   5. Feedback: buttons, links, navigation, footer, fields
   -------------------------------------------------------------------------- */

.button {
  transition:
    background-color .25s ease,
    color .25s ease,
    border-color .25s ease,
    transform .2s var(--pu-ease-out);
}
.button:active {
  transform: scale(.96);
  transition-duration: .25s, .25s, .25s, .08s;
}

/* Label roll: the label slides up and its twin arrives from below */
.pu-roll {
  display: inline-block;
  position: relative;
  clip-path: inset(0 -.6em);
}
.pu-roll__t {
  display: block;
  transition: transform .5s var(--pu-ease-out);
}
.pu-roll__t + .pu-roll__t {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
}

/* Text links with a chevron: underline draws in, chevron nudges forward */
.button.is-link:hover {
  text-decoration: none;
}
.button.is-link.is-icon > div:first-child {
  background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 1px;
  transition: background-size .45s var(--pu-ease-out);
}
.button.is-icon .icon-embed-xxsmall {
  transition: transform .35s var(--pu-ease-out);
}

.navbar1_logo {
  transition: transform .5s var(--pu-ease-out);
}

.footer3_social-link {
  transition: transform .3s var(--pu-ease-out), color .2s ease;
}
.footer3_link {
  background: linear-gradient(currentColor, currentColor) no-repeat 0 calc(100% - .4rem) / 0 1px;
  transition: background-size .4s var(--pu-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .button:hover .pu-roll__t {
    transform: translateY(-100%);
  }
  .button.is-link.is-icon:hover > div:first-child {
    background-size: 100% 1px;
  }
  .button.is-icon:hover .icon-embed-xxsmall {
    transform: translateX(4px);
  }
  .navbar1_logo-link:hover .navbar1_logo {
    transform: rotate(-8deg) scale(1.06);
  }
  .footer3_social-link:hover {
    transform: translateY(-3px);
    color: var(--pu-perfume);
  }
  .footer3_link:hover {
    background-size: 100% 1px;
  }
}

@media (min-width: 992px) {
  .navbar1_link::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: .3rem;
    height: 1px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform .45s var(--pu-ease-out);
  }
}
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .navbar1_link:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
  }
}

/* Mobile menu: links cascade in each time the menu opens */
@media (max-width: 991px) {
  .w-nav-overlay [data-nav-menu-open] .navbar1_menu-links > :is(a, div) {
    animation: pu-menu-in .55s var(--pu-ease-out) both;
  }
  .w-nav-overlay [data-nav-menu-open] .navbar1_menu-links > :nth-child(3) { animation-delay: 50ms; }
  .w-nav-overlay [data-nav-menu-open] .navbar1_menu-links > :nth-child(5) { animation-delay: 100ms; }
  .w-nav-overlay [data-nav-menu-open] .navbar1_menu-links > :nth-child(7) { animation-delay: 150ms; }
}
@keyframes pu-menu-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.form_input {
  transition: border-color .2s ease, box-shadow .25s ease;
}
.w-form-done,
.w-form-fail {
  animation: pu-message-in .5s var(--pu-ease-out) both;
}
@keyframes pu-message-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* Quote form: the steps slide the way the visitor is going */
html #popup-agency-staffing-form .pu-wizard {
  overflow-x: clip;
}
html #popup-agency-staffing-form .step.is-active {
  animation: pu-step-next .45s var(--pu-ease-out) both;
}
html #popup-agency-staffing-form[data-pu-dir="back"] .step.is-active {
  animation-name: pu-step-back;
}
@keyframes pu-step-next {
  from {
    opacity: 0;
    transform: translateX(28px);
  }
}
@keyframes pu-step-back {
  from {
    opacity: 0;
    transform: translateX(-28px);
  }
}

/* Submit buttons say they are working */
.pu-busy::after {
  content: "";
  display: inline-block;
  width: .85em;
  height: .85em;
  margin-left: .6em;
  vertical-align: -.1em;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: pu-spin .7s linear infinite;
}
@keyframes pu-spin {
  to { transform: rotate(360deg); }
}

/* Confirmations and errors arrive rather than appear */
.pu-message-in {
  animation: pu-message-in .55s var(--pu-ease-out) both;
}
html #popup-agency-staffing-form .alert.success.is-visible {
  animation: pu-message-in .55s var(--pu-ease-out) both;
}

/* Error text on the pale error panel: the exported red only reached 4.0:1,
   so it borrows the darker red already used by the form messages (6.2:1). */
.error-text {
  color: #b42318;
}

/* --------------------------------------------------------------------------
   6. Page-to-page continuity (Chrome, Edge, Safari 18.2+; ignored elsewhere)
   -------------------------------------------------------------------------- */

@view-transition {
  navigation: auto;
}
.navbar1_component {
  view-transition-name: pu-nav;
}
::view-transition-old(root) {
  animation: pu-fade-out .18s var(--pu-ease-in) both;
}
::view-transition-new(root) {
  animation: pu-fade-in .4s var(--pu-ease-out) both;
}
@keyframes pu-fade-out {
  to { opacity: 0; }
}
@keyframes pu-fade-in {
  from { opacity: 0; }
}

/* --------------------------------------------------------------------------
   7. Reduced motion: no travel, no loops. Things still appear, gently.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  /* Webflow marquees stand still */
  .cta67_image-list-top,
  .cta67_image-list-bottom,
  .logo3_component,
  .logo3_component-top,
  .logo3_component_bottom {
    transform: none !important;
  }

  .pu-motion img[src$="Spark.svg"],
  .pu-motion .layout350_arrow,
  .pu-motion :is(.contact15_image, .layout486_image, .layout192_image, .layout350_mobile-image),
  html.pu-motion :is(.has-scrap, [class*="custom-scrap"])::before,
  .pu-seg {
    clip-path: none;
    opacity: 0;
  }
  .pu-motion img[src$="Spark.svg"].pu-in,
  .pu-motion .layout350_arrow.pu-in,
  .pu-motion :is(.contact15_image, .layout486_image, .layout192_image, .layout350_mobile-image).pu-in,
  html.pu-motion :is(.has-scrap, [class*="custom-scrap"]).pu-painted::before {
    clip-path: none;
    opacity: 1;
    transition: opacity .4s ease;
  }
  .pu-seg.pu-in {
    clip-path: none;
    opacity: .55;
    transition: opacity .4s ease;
  }

  .button:active,
  .button:hover .pu-roll__t,
  .button.is-icon:hover .icon-embed-xxsmall,
  .navbar1_logo-link:hover .navbar1_logo,
  .footer3_social-link:hover {
    transform: none;
  }
  .w-nav-overlay [data-nav-menu-open] .navbar1_menu-links > :is(a, div),
  .w-form-done,
  .w-form-fail,
  .pu-message-in,
  html #popup-agency-staffing-form .step.is-active,
  html #popup-agency-staffing-form[data-pu-dir="back"] .step.is-active,
  html #popup-agency-staffing-form .alert.success.is-visible {
    animation-name: pu-fade-in;
  }

  /* The menu stays put rather than sliding in and out */
  .pu-sticky-nav {
    transition: none;
  }
  .pu-sticky-nav.is-tucked {
    transform: none;
  }

  /* Stacked cards keep their size */
  .pu-stack {
    transform: none;
  }
  .pu-stack::after {
    opacity: 0;
  }

  .pu-busy::after {
    animation-duration: 2s;
  }
}

/* --------------------------------------------------------------------------
   8. Print always shows everything
   -------------------------------------------------------------------------- */

@media print {
  .pu-motion :is(
    .section_header1 h1, .section_header62 h1,
    .section_header1 .header1_content-left > p, .section_header1 .button-group,
    .section_header1 .header1_image, .section_header62 .text-size-medium,
    .section_header62 .button-group, ._404_component > *,
    .text-style-tagline, .layout364_card, .layout298_item,
    .layout381_card-large, .layout381_card-medium, .layout381_card-small,
    .stats8_item, .stats13_item, .layout396_card, .layout392_card-small,
    .layout392_card-large-horizontal, .layout392_card-large-vertical,
    .layout400_card, .contact6_item, .faq10_accordion, .faq2_accordion
  ) {
    opacity: 1 !important;
  }
  .pu-motion :is(img, .pu-seg),
  html.pu-motion :is(.has-scrap, [class*="custom-scrap"])::before {
    clip-path: none !important;
  }
  .pu-motion .pu-img {
    opacity: 1 !important;
  }
  .pu-stack::after {
    display: none;
  }
  .pu-sticky-nav {
    position: static;
    transform: none;
  }
  .pu-roll__t + .pu-roll__t {
    display: none;
  }
}