/* =====================================================================
   EXTRAS
   Changes Jag has asked for beyond the original Webflow design, at every
   screen size. Kept in their own file so each one is easy to find, and
   easy to undo by deleting its rule. Pairs with extras.js.

   Nothing here hides any content until extras.js has marked the page with
   .x-js, and a small script in the page head takes that mark off again if
   extras.js has not arrived within three seconds. So a failed script can
   never leave anything invisible.
   ===================================================================== */

:root {
  --x-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --x-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---- Pricing boxes ---------------------------------------------------
   The price also sits at the top, under the plan name, so it is the first
   thing read, and the button sits in the middle. Jag, 11 Sep. */
.pricing-card .price-top {
  margin-top: 12px;
  margin-bottom: 4px;
}
.pricing-card > .button-2 { align-self: center; }


/* =====================================================================
   ANIMATIONS. Jag, 11 Sep, from the SVGator examples he sent.
   ===================================================================== */

/* ---- 1. The hero rings draw themselves, then drift -------------------
   extras.js swaps the rings picture for a live copy of the same drawing,
   which it can animate. Until then the picture shows as it always has. */
.section_header.x-rings {
  background-image: none;
  isolation: isolate;
}
.x-rings-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  overflow: visible;
}
.x-rings-art path {
  stroke-dasharray: var(--len);
  stroke-dashoffset: var(--len);
}
/* .x-go goes on once the page itself is actually visible (extras.js
   waits for the page fade-in), so nothing plays out behind it unseen. */
.x-go .x-rings-art path { animation: x-draw 2400ms var(--x-out-quart) forwards; }
.x-go .x-rings-art path:nth-child(2) { animation-delay: 250ms; }
.x-go .x-rings-art path:nth-child(3) { animation-delay: 500ms; }
@keyframes x-draw { to { stroke-dashoffset: 0; } }

/* Once drawn, a slow sway so the hero never looks quite still.
   It turns the whole drawing as one flat layer, which the graphics chip
   handles on its own. Turning the shapes inside the drawing instead made
   the browser recalculate the page every frame, and on phones that made
   carousels snap back mid-swipe. Found by testing, 11 Sep. */
.x-rings-art {
  transform-origin: 50% 48%;
  will-change: transform;
}
.x-go .x-rings-art { animation: x-drift 26s ease-in-out 2.6s infinite alternate; }
/* and while a finger is on the screen, the rings hold still */
.x-touching .x-rings-art,
.x-touching .x-rings-art path { animation-play-state: paused; }
@keyframes x-drift {
  from { transform: rotate(0deg) scale(1); }
  to   { transform: rotate(-3deg) scale(1.04); }
}

/* ---- 2. The big headline rises in, word by word --------------------- */
.x-js .x-words { visibility: hidden; }
.x-words.x-split { visibility: visible; }
.x-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* room for letters that dip below the line, without extra spacing */
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;
}
.x-word > span {
  display: inline-block;
  transform: translate3d(0, 110%, 0);
}
.x-go .x-word > span {
  animation: x-rise 900ms var(--x-out-quart) forwards;
  animation-delay: calc(120ms + var(--i) * 75ms);
}
@keyframes x-rise { to { transform: none; } }

/* ---- 3. Portfolio screenshots scroll through the whole site ----------
   The screenshots are full-page captures cropped to the top. Point at a
   card and it glides down to the bottom of the site, then back up when you
   move away. Pure CSS, so every card, including ones added later, does it. */
.card_scroll .image_full {
  transition: object-position 1400ms ease;
}
@media (hover: hover) and (pointer: fine) {
  .card_scroll:hover .image_full {
    object-position: 0% 100%;
    transition: object-position 7s cubic-bezier(0.45, 0, 0.55, 1);
  }
}
/* On a phone there is no pointing, so the recent projects card drifts on
   its own while it is in view. Only that one: inside the work page
   carousel a moving screenshot fought the swipe, snapping it back. */
@media (hover: none) {
  .section_work .card_scroll.x-inview .image_full {
    animation: x-browse 14s ease-in-out 800ms infinite alternate;
  }
}
@keyframes x-browse {
  0%, 12%   { object-position: 0% 0%; }
  88%, 100% { object-position: 0% 100%; }
}

/* ---- 4. Button arrows nudge the way they point ---------------------- */
.button-2 .icon-1x1-small-2,
.button .icon-embed-xxsmall {
  transition: transform 260ms var(--x-out-quart);
}
.button-2:hover .icon-1x1-small-2,
.button:hover .icon-embed-xxsmall {
  transform: translate3d(4px, 0, 0);
}
/* the "Recent work" button points down, so its arrow drops instead */
.button-2[href$="#work"]:hover .icon-1x1-small-2 {
  transform: translate3d(0, 3px, 0);
}

/* ---- 5. The process icons pop in, one after another ----------------- */
.x-js .capability_icon-image {
  opacity: 0;
  transform: scale(0.55) rotate(-10deg);
}
.x-js .capability_icon-image.x-pop {
  opacity: 1;
  transform: none;
  transition:
    opacity 400ms ease,
    transform 700ms var(--x-spring);
  transition-delay: calc(var(--i, 0) * 140ms);
}
.features_item:hover .capability_icon-image.x-pop {
  transform: rotate(-6deg) scale(1.08);
  transition-delay: 0ms;
}


/* ---- People who have asked their phone or computer to cut down motion.
   Everything still appears, it just does not move to get there. ------- */
@media (prefers-reduced-motion: reduce) {
  .x-rings-art path, .x-go .x-rings-art path { animation: none; stroke-dashoffset: 0; }
  .x-rings-art, .x-go .x-rings-art { animation: none; }
  .x-word > span, .x-go .x-word > span { animation: none; transform: none; }
  .card_scroll .image_full,
  .card_scroll:hover .image_full { transition: none; object-position: 0% 0%; }
  .section_work .card_scroll.x-inview .image_full { animation: none; }
  .button-2 .icon-1x1-small-2, .button .icon-embed-xxsmall { transition: none; }
  .x-js .capability_icon-image { opacity: 1; transform: none; }
  .x-js .capability_icon-image.x-pop { transition: none; }
}