/* =====================================================================
   MOTION
   The site's animations, rebuilt so they work by TYPE of thing rather
   than by the hidden per-page IDs Webflow used. That matters in a CMS:
   Webflow's engine only knew the pages it was built with, so a new page
   or a new portfolio piece added in Craft would never animate, and some
   would load invisible. These rules apply to every card, every FAQ and
   every page, including ones that do not exist yet.

   Timings are copied from Webflow's own data so it moves the same way.

   If JavaScript fails to load, nothing here hides any content: every
   "start hidden" rule only applies once motion.js has added .m-js to the
   page. Pair with assets/js/motion.js.
   ===================================================================== */

:root {
  /* Webflow's "outQuart" easing */
  --m-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* ---- The whole page fades in on arrival -------------------------------
   Webflow: opacity 0 to 1, starting after 0.2s, over 0.8s.
   Pure CSS, so it happens even without JavaScript. */
@keyframes m-page-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.page-wrapper {
  animation: m-page-in 800ms ease 200ms both;
}

/* ---- Things slide in as you scroll to them ---------------------------
   Webflow: start 100px away and invisible, then glide into place over
   one second. The class name says the direction and the delay. */
.m-js .slide-in-bottom,
.m-js .slide-in-bottom-200,
.m-js .slide-in-bottom-400ms,
.m-js .slide-in-bottom-600ms {
  opacity: 0;
  transform: translate3d(0, 100px, 0);
}
.m-js .slide-in-left  { opacity: 0; transform: translate3d(-100px, 0, 0); }
.m-js .slide-in-right { opacity: 0; transform: translate3d(100px, 0, 0); }

/* The sections that slide in from the side start 100px off to one side. On
   the home and Derby pages that pushed the page 20px (desktop) to 80px
   (phone) wider than the screen, so it wobbled sideways. Anything poking
   past the edge is now simply cut off. "clip" rather than "hidden", so the
   sticky menu keeps working. Found 13 Sep. */
.page-wrapper { overflow-x: clip; }

.m-js .slide-in-bottom,
.m-js .slide-in-bottom-200,
.m-js .slide-in-bottom-400ms,
.m-js .slide-in-bottom-600ms,
.m-js .slide-in-left,
.m-js .slide-in-right {
  transition:
    opacity 1000ms var(--m-out-quart),
    transform 1000ms var(--m-out-quart);
}
.m-js .slide-in-bottom-200   { transition-delay: 200ms; }
.m-js .slide-in-bottom-400ms { transition-delay: 400ms; }
.m-js .slide-in-bottom-600ms { transition-delay: 600ms; }

/* A handful of elements used a gentler rise in Webflow: 10% of their own
   height over half a second. */
.m-js .m-rise {
  opacity: 0;
  transform: translate3d(0, 10%, 0);
  transition: opacity 500ms ease, transform 500ms ease;
}

.m-js .m-in {
  opacity: 1 !important;
  transform: none !important;
}

/* ---- The sticker badges on the Derby page spin in ---------------------
   Webflow: two and a half turns, one each way, over one second. */
.m-js .header_badge-2 {
  opacity: 0;
  transform: rotate(-900deg);
  transition: opacity 1000ms var(--m-out-quart), transform 1000ms var(--m-out-quart);
}
.m-js .header_badge-3 {
  opacity: 0;
  transform: rotate(900deg);
  transition: opacity 1000ms var(--m-out-quart), transform 1000ms var(--m-out-quart);
}

/* ---- Portfolio cards lift when you point at them ----------------------
   Webflow: on desktop only, the card rises 5% while a dark panel grows up
   from its bottom edge. Pure CSS, so any card added later gets it too. */
@media (min-width: 992px) {
  .card_scroll {
    transition: transform 500ms var(--m-out-quart);
  }
  .card_scroll .grow-background {
    transition: height 400ms var(--m-out-quart);
  }
  .card_scroll:hover {
    transform: translate3d(0, -5%, 0);
  }
  .card_scroll:hover .grow-background {
    height: 100%;
  }
}

/* ---- FAQ answers open and close --------------------------------------
   Webflow: the answer opens over 0.4s and the plus turns 45 degrees into
   a cross over 0.2s. Answers only start closed once motion.js is running,
   so without JavaScript they are simply all shown. */
.m-js .faq_answer {
  height: 0;
  overflow: hidden;
  transition: height 400ms ease;
}
.faq_question { cursor: pointer; }
.faq_icon svg { transition: transform 200ms ease; }
.faq_accordion.m-open .faq_icon svg { transform: rotate(45deg); }
.faq_question:focus-visible { outline: 2px solid #4a9d68; outline-offset: 3px; }

/* ---- The phone menu ---------------------------------------------------
   The stylesheet already swaps the menu for a hamburger below 992px.
   This is what it looks like once the hamburger is tapped. */
@media (max-width: 991px) {
  .navbar_component.m-menu-open .w-nav-menu {
    display: block !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #26282c;
    padding: 0.5rem 0 1rem;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
    z-index: 900;
  }
  .navbar_component.m-menu-open .w-nav-menu .w-nav-link,
  .navbar_component.m-menu-open .w-nav-menu .button {
    display: block;
    width: auto;
    margin: 0 1.25rem;
  }
}

/* ---- People who have asked their device to cut down on motion ---------
   Everything still appears, it just does not move to get there. */
@media (prefers-reduced-motion: reduce) {
  .page-wrapper { animation: none; }
  .m-js .slide-in-bottom, .m-js .slide-in-bottom-200,
  .m-js .slide-in-bottom-400ms, .m-js .slide-in-bottom-600ms,
  .m-js .slide-in-left, .m-js .slide-in-right, .m-js .m-rise,
  .m-js .header_badge-2, .m-js .header_badge-3 {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .m-js .faq_answer, .faq_icon svg, .card_scroll, .card_scroll .grow-background {
    transition: none;
  }
}