:root {
  --motion-ease-out: cubic-bezier(.23, 1, .32, 1);
  --motion-ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --motion-micro: 240ms;
  --motion-page-out: 220ms;
  --motion-page-in: 480ms;
  --motion-reveal: 620ms;
  --motion-media-reveal: 820ms;
  --motion-distance: 20px;
}

html,
body {
  overflow-x: clip;
  scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: no-preference) {
  /* The synchronous bootstrap attribute prevents a first-paint flash. */
  html[data-motion-boot]:not([data-route-arrival]) [data-motion-header],
  html[data-motion-boot] [data-motion-hero-title],
  html[data-motion-boot] [data-motion-hero-copy],
  html[data-motion-boot] [data-motion-hero-cta],
  html[data-motion-boot] [data-motion-hero-visual],
  html[data-motion-boot] [data-motion-hero-card] {
    opacity: 0 !important;
  }

  html[data-motion-boot]:not([data-route-arrival]) [data-motion-header] {
    transform: translateY(10px);
  }

  html[data-motion-boot] [data-motion-hero-title] {
    transform: translateY(24px);
  }

  html[data-motion-boot] [data-motion-hero-copy] {
    transform: translateY(16px);
  }

  html[data-motion-boot] [data-motion-hero-cta] {
    transform: translateY(12px);
  }

  html[data-motion-boot] [data-motion-hero-visual],
  html[data-motion-boot] [data-motion-hero-card] {
    transform: translateY(20px) scale(.985);
  }

  html[data-motion-ready] [data-motion-state="pending"] {
    opacity: 0;
    transform: translateY(var(--motion-distance));
  }

  html[data-motion-ready] [data-motion-entry][data-motion-state="pending"] {
    opacity: 0 !important;
  }

  html[data-motion-ready] [data-motion-entry="header"][data-motion-state="pending"] {
    transform: translateY(10px);
  }

  html[data-motion-ready] [data-motion-entry="title"][data-motion-state="pending"] {
    transform: translateY(24px);
  }

  html[data-motion-ready] [data-motion-entry="copy"][data-motion-state="pending"] {
    transform: translateY(16px);
  }

  html[data-motion-ready] [data-motion-entry="cta"][data-motion-state="pending"] {
    transform: translateY(12px);
  }

  html[data-motion-ready] [data-motion-entry="visual"][data-motion-state="pending"],
  html[data-motion-ready] [data-motion-entry="card"][data-motion-state="pending"] {
    transform: translateY(20px) scale(.985);
  }

  html[data-motion-ready] [data-motion-media="pending"] {
    opacity: 0;
    transform: scale(1.025);
  }

  [data-motion-state]:not([data-motion-entry]) {
    transition:
      opacity var(--motion-reveal) var(--motion-ease-out) var(--motion-delay, 0ms),
      transform var(--motion-reveal) var(--motion-ease-out) var(--motion-delay, 0ms);
  }

  [data-motion-entry] {
    transition:
      opacity var(--motion-entry-duration, 600ms) var(--motion-ease-out) var(--motion-delay, 0ms),
      transform var(--motion-entry-duration, 600ms) var(--motion-ease-out) var(--motion-delay, 0ms) !important;
  }

  [data-motion-entry="header"] { --motion-entry-duration: 250ms; }
  [data-motion-entry="title"] { --motion-entry-duration: 620ms; }
  [data-motion-entry="copy"] { --motion-entry-duration: 580ms; }
  [data-motion-entry="cta"] { --motion-entry-duration: 520ms; }
  [data-motion-entry="visual"] { --motion-entry-duration: 700ms; }
  [data-motion-entry="card"] { --motion-entry-duration: 600ms; }

  [data-motion-media] {
    transition:
      opacity var(--motion-media-reveal) var(--motion-ease-out) var(--motion-delay, 0ms),
      transform var(--motion-media-reveal) var(--motion-ease-out) var(--motion-delay, 0ms);
  }

  [data-motion-media-clip] { overflow: hidden; }

  [data-motion-state="shown"],
  [data-motion-media="shown"] {
    opacity: 1;
    transform: none;
  }

  [data-motion-entry][data-motion-state="shown"] {
    opacity: 1 !important;
  }

  html[data-route-arrival] main,
  html[data-route-arrival] .ar-light > section,
  html[data-route-arrival] main.page {
    opacity: 0;
    transform: translateY(16px);
  }

  main,
  .ar-light > section,
  main.page {
    transition: opacity var(--motion-page-in) var(--motion-ease-out), transform var(--motion-page-in) var(--motion-ease-out);
  }

  html[data-page-leaving] [data-page-transition] {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity var(--motion-page-out) var(--motion-ease-out), transform var(--motion-page-out) var(--motion-ease-out);
  }

  [data-motion-hover] {
    transition: transform var(--motion-micro) var(--motion-ease-out);
  }

  .portfolio-card[data-motion-hover] .portfolio-preview {
    transform: none;
  }

  [data-motion-hover] img,
  .portfolio-card[data-motion-hover] .portfolio-preview img {
    transition: transform var(--motion-micro) var(--motion-ease-out);
  }

  .portfolio-card__link {
    transition: color var(--motion-micro) var(--motion-ease-out), transform var(--motion-micro) var(--motion-ease-out);
  }

  @media (hover: hover) and (pointer: fine) {
    [data-motion-state="shown"][data-motion-hover]:hover {
      transform: translateY(-3px) scale(1.01);
    }

    [data-motion-hover]:hover img,
    .portfolio-card[data-motion-hover]:hover .portfolio-preview img {
      transform: scale(1.02);
    }

    .portfolio-card:hover .portfolio-card__link {
      transform: translateX(4px);
    }
  }
}

@media (max-width: 760px) {
  :root {
    --motion-reveal: 560ms;
    --motion-media-reveal: 720ms;
    --motion-distance: 12px;
  }

  @media (prefers-reduced-motion: no-preference) {
    html[data-motion-boot] [data-motion-hero-title],
    html[data-motion-ready] [data-motion-entry="title"][data-motion-state="pending"] {
      transform: translateY(14px);
    }

    html[data-motion-boot] [data-motion-hero-copy],
    html[data-motion-boot] [data-motion-hero-cta],
    html[data-motion-ready] [data-motion-entry="copy"][data-motion-state="pending"],
    html[data-motion-ready] [data-motion-entry="cta"][data-motion-state="pending"] {
      transform: translateY(10px);
    }

    html[data-motion-boot] [data-motion-hero-visual],
    html[data-motion-boot] [data-motion-hero-card],
    html[data-motion-ready] [data-motion-entry="visual"][data-motion-state="pending"],
    html[data-motion-ready] [data-motion-entry="card"][data-motion-state="pending"] {
      transform: translateY(12px) scale(.99);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-motion-state],
  [data-motion-media],
  [data-page-transition],
  [data-motion-header],
  [data-motion-hero-title],
  [data-motion-hero-copy],
  [data-motion-hero-cta],
  [data-motion-hero-visual],
  [data-motion-hero-card] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}