/* Page settle + row lean. Rewritten from the Sundaze Webflow template (IX2 a-9 "Page FadeIn" on PAGE_START, and
   the .job-listing / .secondary-button hovers in its stylesheet). CSS only.

   1. Page settle   <main class="ps-page"> ... </main>
      Every page opens at opacity .4, sitting 20px HIGH, and drops into place at full strength over 500ms, linear.
      It starts at .4, not 0: the page is readable from the very first frame and never blinks; it just settles.
      A plain CSS animation, so it plays at first paint with no script and no flash (the source shipped the start
      state inline). Re-run it by removing .ps-page, forcing a reflow and adding it back.

   2. Row lean      <a class="ps-row"> ... <span class="ps-pill">... arrow ...</span> </a>
      Hovering a list row lifts its background to white in .2s while its right padding grows 10 -> 20px over .4s,
      so the row's contents give way to the left and the row seems to lean into the pointer. The arrow pill inside
      shifts its padding (30/30 -> 50 left / 20 right, .4s) so the arrow slides right inside a pill that stays put.
      .is-lean / .is-nudge do the same as :hover, for touch or scripted demos. */
.ps-page {
  --ps-from: .4;       /* starting opacity */
  --ps-y: -20px;       /* starting offset (negative = starts above and drops down, as the source) */
  --ps-dur: 500ms;     /* settle duration (linear) */
  --ps-delay: 0ms;
  animation: ps-settle var(--ps-dur) linear var(--ps-delay) both;
}
@keyframes ps-settle {
  from { opacity: var(--ps-from); translate: 0 var(--ps-y); }
  to { opacity: 1; translate: none; }
}

.ps-row {
  --ps-pad-y: 20px;         /* row padding top/bottom */
  --ps-pad-x: 10px;         /* row padding left, and right at rest */
  --ps-lean: 20px;          /* right padding on hover */
  --ps-lean-dur: .4s;       /* padding change (CSS default ease) */
  --ps-bg: transparent;     /* row background at rest */
  --ps-bg-on: #fff;         /* row background on hover */
  --ps-bg-dur: .2s;
  display: block;
  padding: var(--ps-pad-y) var(--ps-pad-x);
  background: var(--ps-bg);
  color: inherit; text-decoration: none;
  transition: padding var(--ps-lean-dur), background-color var(--ps-bg-dur);
}
.ps-row:hover, .ps-row.is-lean { padding-right: var(--ps-lean); background-color: var(--ps-bg-on); }

.ps-pill {
  --ps-pill-pad: 30px;      /* left and right padding at rest */
  --ps-pill-in: 50px;       /* left padding on hover */
  --ps-pill-out: 20px;      /* right padding on hover */
  --ps-pill-dur: .4s;
  display: inline-flex; align-items: center;
  padding: 10px var(--ps-pill-pad);
  border-radius: 10em;
  transition: padding var(--ps-pill-dur);
}
.ps-pill:hover, .ps-pill.is-nudge { padding-left: var(--ps-pill-in); padding-right: var(--ps-pill-out); }

@media (prefers-reduced-motion: reduce) {
  .ps-page { animation: none; }
  .ps-row, .ps-pill { transition-duration: 0s; }
}