/* Entrance, scroll and hover motion. Skipped when html has no .sh-motion
   (prefers-reduced-motion, or the script did not run).
   Nothing is hidden by default: only units of a block that is still below the
   fold (data-sh-wait) start transparent, and every entrance takes its start
   state from the keyframes, so a finished or skipped animation leaves the
   content in its normal, visible state. */

html.sh-motion [data-sh-wait] .sh-reveal {
  opacity: 0;
}

html.sh-motion .sh-reveal.is-in {
  animation: sh-rise 680ms cubic-bezier(0.16, 0.84, 0.32, 1) both;
  animation-delay: var(--sh-d, 0ms);
}

html.sh-motion .sh-reveal.sh-fade.is-in {
  animation-name: sh-fade;
}

/* In view on load: a gentle settle that never starts from invisible. */
html.sh-motion .sh-reveal.sh-soft.is-in {
  animation-name: sh-soft;
  animation-duration: 560ms;
}

html.sh-motion .sh-reveal.sh-fade.sh-soft.is-in {
  animation-name: sh-fade-soft;
}

html.sh-motion .is-in .sh-row {
  animation: sh-fade 520ms ease both;
  animation-delay: calc(var(--sh-d, 0ms) + 90ms);
}

html.sh-motion .sh-soft.is-in .sh-row {
  animation-name: sh-fade-soft;
}

html.sh-motion .sh-reveal.is-in.sh-done {
  animation: none;
}

html.sh-motion .sh-reveal.sh-done.sh-float {
  animation: sh-float 8s ease-in-out infinite;
}

@keyframes sh-rise {
  from {
    opacity: 0;
    translate: 0 22px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes sh-soft {
  from {
    opacity: 0.4;
    translate: 0 10px;
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes sh-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes sh-fade-soft {
  from { opacity: 0.4; }
  to { opacity: 1; }
}

@keyframes sh-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

/* Hero and 404 sprout: leaves open once */
html.sh-motion [data-screen-label="Hero"] > svg > path[fill]:not([fill="none"]),
html.sh-motion [data-screen-label="404"] > svg > path[fill]:not([fill="none"]) {
  transform-box: fill-box;
  transform-origin: center;
  animation: sh-leaf 980ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

html.sh-motion [data-screen-label="Hero"] > svg > path[fill]:not([fill="none"]):nth-child(2),
html.sh-motion [data-screen-label="404"] > svg > path[fill]:not([fill="none"]):nth-child(2) {
  animation-delay: 140ms;
}

@keyframes sh-leaf {
  from {
    opacity: 0;
    scale: 0.55;
    rotate: -8deg;
  }
  to {
    opacity: 1;
    scale: 1;
    rotate: 0deg;
  }
}

/* Emissions bar grows from the left once its block is in view */
html.sh-motion .sh-bar {
  transform-origin: left center;
}

html.sh-motion .is-in .sh-bar {
  animation: sh-bar 780ms cubic-bezier(0.16, 0.84, 0.32, 1) both;
  animation-delay: calc(var(--sh-d, 0ms) + var(--sh-bar, 0ms) + 120ms);
}

@keyframes sh-bar {
  from { scale: 0 1; }
  to { scale: 1 1; }
}

html.sh-motion .is-in .sh-photo,
html.sh-motion img.sh-photo.is-in {
  animation: sh-photo 1100ms cubic-bezier(0.16, 0.84, 0.32, 1) both;
  animation-delay: var(--sh-d, 0ms);
}

html.sh-motion img.sh-photo.sh-done {
  animation: none;
}

@keyframes sh-photo {
  from { scale: 1.035; }
  to { scale: 1; }
}

/* Hover: colour and shadow already change via style-hover; ease them,
   and lift cards and buttons with transform so it composes with translate. */
html.sh-motion a,
html.sh-motion button {
  transition:
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    box-shadow 280ms ease;
}

html.sh-motion .sh-btn,
html.sh-motion .sh-card {
  transition:
    background-color 180ms ease,
    color 180ms ease,
    border-color 180ms ease,
    box-shadow 280ms ease,
    transform 240ms cubic-bezier(0.16, 0.84, 0.32, 1);
}

html.sh-motion .sh-btn:hover,
html.sh-motion .sh-btn:focus-visible {
  transform: translateY(-2px);
}

html.sh-motion .sh-btn-fill:hover,
html.sh-motion .sh-btn-fill:focus-visible {
  box-shadow: 0 8px 20px rgba(20, 61, 48, 0.16);
}

html.sh-motion .sh-card:hover,
html.sh-motion .sh-card:focus-visible {
  transform: translateY(-4px);
}

html.sh-motion .sh-arrow {
  transition: transform 220ms cubic-bezier(0.16, 0.84, 0.32, 1);
}

html.sh-motion a:hover .sh-arrow,
html.sh-motion a:focus-visible .sh-arrow {
  transform: translateX(4px);
}

html.sh-motion #nav-solutions {
  animation: sh-drop 200ms cubic-bezier(0.16, 0.84, 0.32, 1) both;
}

html.sh-motion [role="listbox"] {
  transform-origin: top right;
  animation: sh-drop 160ms ease both;
}

html.sh-motion [data-nav-id] > div[style*="100vh"] {
  animation: sh-nudge 220ms ease both;
}

html.sh-motion [data-nav-id] > div[style*="100vh"] nav > * {
  animation: sh-rise 420ms cubic-bezier(0.16, 0.84, 0.32, 1) both;
}

html.sh-motion [data-nav-id] > div[style*="100vh"] nav > *:nth-child(2) { animation-delay: 40ms; }
html.sh-motion [data-nav-id] > div[style*="100vh"] nav > *:nth-child(3) { animation-delay: 70ms; }
html.sh-motion [data-nav-id] > div[style*="100vh"] nav > *:nth-child(4) { animation-delay: 100ms; }
html.sh-motion [data-nav-id] > div[style*="100vh"] nav > *:nth-child(5) { animation-delay: 130ms; }
html.sh-motion [data-nav-id] > div[style*="100vh"] nav > *:nth-child(6) { animation-delay: 160ms; }
html.sh-motion [data-nav-id] > div[style*="100vh"] nav > *:nth-child(7) { animation-delay: 190ms; }

@keyframes sh-drop {
  from { translate: 0 -8px; }
  to { translate: 0 0; }
}

@keyframes sh-nudge {
  from { translate: 0 12px; }
  to { translate: 0 0; }
}

html.sh-motion [data-nav-id] > div[style*="100vh"] nav > * {
  animation-name: sh-nudge;
}

html.sh-motion .sh-count {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  html.sh-motion .sh-reveal,
  html.sh-motion [data-sh-wait] .sh-reveal,
  html.sh-motion .sh-reveal.sh-float,
  html.sh-motion .sh-bar,
  html.sh-motion .sh-photo,
  html.sh-motion .sh-row,
  html.sh-motion [data-screen-label="Hero"] > svg > path,
  html.sh-motion [data-screen-label="404"] > svg > path,
  html.sh-motion #nav-solutions,
  html.sh-motion [role="listbox"],
  html.sh-motion [data-nav-id] > div[style*="100vh"],
  html.sh-motion [data-nav-id] > div[style*="100vh"] nav > * {
    animation: none !important;
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
    rotate: none !important;
    transform: none !important;
  }
}