/* Native cross-document transitions keep real links, history and scroll restoration. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  :root {
    --motion-distance: clamp(36px, 5.5vw, 88px);
    --motion-sign: 1;
    --motion-y: 0px;
    --motion-scale: 1;
    --motion-ease: cubic-bezier(.21,.78,.23,1);
    --motion-entry-time: 450ms;
  }
  :root[data-travel="back"] { --motion-sign: -1; }
  :root[data-motion-page="home"] { --motion-scale: .986; --motion-y: 4px; }
  :root[data-motion-page="about"] { --motion-y: 18px; --motion-scale: .992; --motion-entry-time: 490ms; }
  :root[data-motion-page="contact"] { --motion-distance: clamp(34px, 4vw, 64px); --motion-y: 11px; }
  :root[data-travel="first"] { --motion-distance: 0px; --motion-y: 16px; }

  header { view-transition-name: devgo-header; }
  .wa-widget { view-transition-name: devgo-chat; }
  ::view-transition { pointer-events: none; }
  ::view-transition-group(root) { animation-duration: var(--motion-entry-time); overflow: clip; }
  ::view-transition-image-pair(root) { isolation: isolate; }
  ::view-transition-old(root) {
    mix-blend-mode: normal;
    animation: devgo-page-leave 260ms cubic-bezier(.45,0,.6,1) both;
  }
  ::view-transition-new(root) {
    mix-blend-mode: normal;
    animation: devgo-page-enter var(--motion-entry-time) var(--motion-ease) both;
  }
  ::view-transition-group(devgo-header), ::view-transition-group(devgo-chat) {
    animation-duration: 200ms;
    animation-timing-function: var(--motion-ease);
  }
  ::view-transition-old(devgo-header), ::view-transition-old(devgo-chat) { animation: none; opacity: 0; }
  ::view-transition-new(devgo-header), ::view-transition-new(devgo-chat) { animation: none; }

  /* The first visit and browsers without cross-document transitions get an
     entrance using the same direction and timing. */
  :root[data-navigation-motion="entry"] #main {
    animation: devgo-page-enter var(--motion-entry-time) var(--motion-ease) backwards;
  }
  @keyframes devgo-page-enter {
    from { opacity: .12; transform: translate3d(calc(var(--motion-distance) * var(--motion-sign)), var(--motion-y), 0) scale(var(--motion-scale)); }
    to { opacity: 1; transform: none; }
  }
  @keyframes devgo-page-leave {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translate3d(calc(var(--motion-distance) * var(--motion-sign) * -.62), -3px, 0); }
  }

  .motion-arrive {
    --section-x: 0px;
    --section-y: 20px;
    animation: devgo-section-arrive 490ms var(--motion-ease) backwards;
    animation-delay: var(--section-delay, 0ms);
  }
  .card:nth-child(3n + 2), .steps > :nth-child(2) { --section-delay: 55ms; }
  .card:nth-child(3n), .steps > :nth-child(3) { --section-delay: 95ms; }
  .steps > :nth-child(4) { --section-delay: 135ms; }
  .uni-list.motion-arrive, .contact-aside.motion-arrive { --section-x: 18px; --section-y: 7px; }
  .about-block.motion-arrive, .trust-box.motion-arrive { --section-x: -15px; --section-y: 10px; }
  @keyframes devgo-section-arrive {
    from { opacity: .35; translate: var(--section-x) var(--section-y); }
    to { opacity: 1; translate: 0 0; }
  }

  /* Brief feedback on the controls people use to move around each page. */
  .head nav a { position: relative; }
  .head nav a::after {
    position: absolute; content: ''; left: 0; right: 0; bottom: -4px; height: 1px;
    background: currentColor; transform: scaleX(0); transform-origin: left;
    transition: transform 180ms ease-out;
  }
  .head nav a:focus-visible::after { transform: scaleX(1); }
  .btn svg, .card-arrow svg, .text-link svg { transition: transform 200ms var(--motion-ease); }
  .tabs button, .filters button { transition: background-color 180ms, border-color 180ms, color 180ms; }
  .tool-items, .received .service-ico { animation: devgo-open 240ms var(--motion-ease); }
  @keyframes devgo-open { from { opacity: .45; translate: 0 5px; } to { opacity: 1; translate: 0 0; } }
  @media (hover: hover) {
    .head nav a:hover::after { transform: scaleX(1); }
    .btn:hover svg, .card-arrow:hover svg { transform: translate(2px,-2px); }
    .text-link:hover svg { transform: translateX(3px); }
  }
  @media (max-width: 700px) {
    :root { --motion-entry-time: 365ms; }
    .head nav a::after { display: none; }
  }
}

@media (prefers-reduced-motion: no-preference) {
  :root[data-theme="dark"] { background-color: #0d0f0e; }
  /* Each destination has one focal point with its own entrance. The enclosing
     content still follows the common forward/back slide. */
  .stage { view-transition-name: devgo-art; }
  .filters { view-transition-name: devgo-filters; }
  .years { view-transition-name: devgo-experience; }
  .contact-aside { view-transition-name: devgo-contact; }

  ::view-transition-new(devgo-art),
  :root[data-navigation-motion="entry"] .stage {
    animation: devgo-art-rise 580ms var(--motion-ease) backwards;
  }
  ::view-transition-new(devgo-filters),
  :root[data-navigation-motion="entry"] .filters {
    animation: devgo-tools-rise 400ms 65ms var(--motion-ease) backwards;
  }
  ::view-transition-new(devgo-experience),
  :root[data-navigation-motion="entry"] .years {
    animation: devgo-experience-enter 520ms 45ms var(--motion-ease) backwards;
  }
  ::view-transition-new(devgo-contact),
  :root[data-navigation-motion="entry"] .contact-aside {
    animation: devgo-aside-enter 470ms 55ms var(--motion-ease) backwards;
  }
  @keyframes devgo-art-rise {
    from { opacity: .35; transform: translateY(22px) scale(.955); }
    to { opacity: 1; transform: none; }
  }
  @keyframes devgo-tools-rise {
    from { opacity: .3; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes devgo-experience-enter {
    from { opacity: .25; transform: scale(.91); }
    to { opacity: 1; transform: none; }
  }
  @keyframes devgo-aside-enter {
    from { opacity: .3; transform: translateX(calc(29px * var(--motion-sign))); }
    to { opacity: 1; transform: none; }
  }
}