/* Section entrances use existing lines and type. They never change layout. */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  .section-motion-ready #usluge .section-head .eyebrow,
  .section-motion-ready #usluge .section-head h2,
  .section-motion-ready #usluge .section-intro,
  .section-motion-ready #iskustvo .experience-copy .eyebrow,
  .section-motion-ready #iskustvo .experience-copy h2,
  .section-motion-ready #iskustvo .experience-copy > p:last-of-type {
    opacity: 0;
    transform: translateY(14px);
  }

  .section-motion-ready #usluge.is-motion-visible .section-head .eyebrow,
  .section-motion-ready #usluge.is-motion-visible .section-head h2,
  .section-motion-ready #usluge.is-motion-visible .section-intro,
  .section-motion-ready #iskustvo.is-motion-visible .experience-copy .eyebrow,
  .section-motion-ready #iskustvo.is-motion-visible .experience-copy h2,
  .section-motion-ready #iskustvo.is-motion-visible .experience-copy > p:last-of-type {
    animation: section-copy-in .56s cubic-bezier(.2,.75,.3,1) both;
  }
  #usluge.is-motion-visible .section-head h2,
  #iskustvo.is-motion-visible .experience-copy h2 { animation-delay: .12s; }
  #usluge.is-motion-visible .section-intro,
  #iskustvo.is-motion-visible .experience-copy > p:last-of-type { animation-delay: .26s; }

  .section-motion-ready .service-row,
  .section-motion-ready .experience-list article,
  .section-motion-ready .process-list li {
    position: relative;
    border-top-color: transparent;
  }
  .section-motion-ready .service-row::before,
  .section-motion-ready .experience-list article::before,
  .section-motion-ready .process-list li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: left;
  }
  .section-motion-ready .experience-list article::before { background: #66541c99; }
  .section-motion-ready .process-list li::before { background: var(--ink); }

  .section-motion-ready .service-row > *,
  .section-motion-ready .experience-list article > *,
  .section-motion-ready .process-list li > * {
    opacity: 0;
    transform: translateY(9px);
  }
  .section-motion-ready .service-row:last-child,
  .section-motion-ready .experience-list article:last-child { border-bottom-color: transparent; }
  .section-motion-ready .service-row:last-child::after,
  .section-motion-ready .experience-list article:last-child::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: left;
  }
  .section-motion-ready .experience-list article:last-child::after { background: #66541c99; }

  .section-motion-ready .is-motion-visible .service-row::before,
  .section-motion-ready .is-motion-visible .experience-list article::before,
  .section-motion-ready .is-motion-visible .process-list li::before,
  .section-motion-ready .is-motion-visible .service-row:last-child::after,
  .section-motion-ready .is-motion-visible .experience-list article:last-child::after {
    animation: section-line-in .64s cubic-bezier(.2,.75,.3,1) both;
    animation-delay: var(--line-delay);
  }
  .section-motion-ready .is-motion-visible .service-row > *,
  .section-motion-ready .is-motion-visible .experience-list article > *,
  .section-motion-ready .is-motion-visible .process-list li > * {
    animation: section-copy-in .52s cubic-bezier(.2,.75,.3,1) both;
    animation-delay: calc(var(--line-delay) + .24s);
  }

  .service-row:nth-child(1),
  .experience-list article:nth-child(1),
  .process-list li:nth-child(1) { --line-delay: .2s; }
  .service-row:nth-child(2),
  .experience-list article:nth-child(2),
  .process-list li:nth-child(2) { --line-delay: .65s; }
  .service-row:nth-child(3),
  .experience-list article:nth-child(3),
  .process-list li:nth-child(3) { --line-delay: 1.1s; }
  .service-row:nth-child(4),
  .experience-list article:nth-child(4) { --line-delay: 1.55s; }
  .experience-list article:nth-child(5) { --line-delay: 2s; }
  .experience-list article:nth-child(6) { --line-delay: 2.45s; }

  .section-motion-ready #proces .process-heading .eyebrow,
  .section-motion-ready #proces .process-heading h2 {
    opacity: 0;
    transform: translateY(14px);
  }
  .section-motion-ready #proces.is-motion-visible .process-heading .eyebrow,
  .section-motion-ready #proces.is-motion-visible .process-heading h2 {
    animation: section-copy-in .56s cubic-bezier(.2,.75,.3,1) both;
  }
  .section-motion-ready #proces.is-motion-visible .process-heading h2 { animation-delay: .12s; }
}

/* The heart is the only looping motion inside the Kodalium reasons grid. */
@media (prefers-reduced-motion: no-preference) {
  .why-item:last-child .why-icon {
    transform-origin: center;
    animation: pixel-heartbeat 1.7s steps(2, end) infinite;
  }
}

@keyframes section-line-in { to { transform: scaleX(1); } }
@keyframes section-copy-in { to { opacity: 1; transform: none; } }
@keyframes pixel-heartbeat {
  0%, 54%, 72%, 100% { transform: scale(1); }
  60%, 78% { transform: scale(1.14); }
  66%, 84% { transform: scale(.98); }
}

/* Phones use ordinary native scrolling, without snapping or smooth travel. */
@media (max-width: 767px) {
  html { scroll-behavior: auto !important; scroll-snap-type: none !important; scroll-padding-top: 0 !important; }
  .site-header,
  main > section { scroll-snap-align: none !important; scroll-snap-stop: normal !important; }
}