/* Плавный первый экран. Все эффекты отключаются при reduced motion. */
:root { --ease-out: cubic-bezier(.22, 1, .36, 1); }

@keyframes hero-enter {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes photo-enter {
  from { opacity: 0; transform: scale(1.045); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes section-enter {
  from { opacity: 0; transform: translateY(36px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes device-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@keyframes background-drift {
  from { transform: translateY(-18px) scale(1.065); }
  to { transform: translateY(18px) scale(1.065); }
}

.hero .brand { animation: hero-enter .75s var(--ease-out) .06s both; }
.hero .hero-eyebrow { animation: hero-enter .8s var(--ease-out) .16s both; }
.hero h1 > span { animation: hero-enter .85s var(--ease-out) both; }
.hero h1 > span:nth-child(1) { animation-delay: .22s; }
.hero h1 > span:nth-child(2) { animation-delay: .30s; }
.hero h1 > span:nth-child(3) { animation-delay: .38s; }
.hero-lead { animation: hero-enter .8s var(--ease-out) .46s both; }
.hero-message .button { animation: hero-enter .8s var(--ease-out) .54s both; }
.hero-stages { animation: hero-enter .8s var(--ease-out) .63s both; }
.hero-media img { animation: photo-enter 1.25s var(--ease-out) both; transform-origin: 50% 15%; }
.service-strip a { animation: hero-enter .7s var(--ease-out) .66s both; }
.service-strip a:nth-child(2) { animation-delay: .71s; }
.service-strip a:nth-child(3) { animation-delay: .76s; }
.service-strip a:nth-child(4) { animation-delay: .81s; }
.service-strip a:nth-child(5) { animation-delay: .86s; }
.service-strip a:nth-child(6) { animation-delay: .91s; }
.hero .brand, .hero .hero-eyebrow, .hero h1 > span, .hero-lead,
.hero-message .button, .hero-stages, .hero-media img, .service-strip a {
  animation-fill-mode: backwards;
}

.hero-media picture { display: block; transition: transform 1.15s var(--ease-out); transform-origin: 50% 15%; }
.services-photo img { transition: transform 1.15s var(--ease-out); }
.service-strip .icon { transition: transform .45s var(--ease-out); }
.services-list .service-icon { transition: transform .35s var(--ease-out); }
.services-list a, .project-list a { transition: color .25s, background .25s, padding .35s var(--ease-out); }
.dispatch-art img { animation: device-float 6s ease-in-out infinite; }
.button { position: relative; overflow: hidden; isolation: isolate; }
.button::before { content: ""; position: absolute; z-index: -1; top: -50%; left: -60px; width: 50px; height: 200%; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .18), transparent); transform: skewX(-22deg); transition: transform .7s var(--ease-out); pointer-events: none; }
.text-link .arrow { transition: transform .3s var(--ease-out); }
.next-section .icon, .back-to-top .icon { transition: transform .3s var(--ease-out); }

@media (hover: hover) {
  .hero-media:hover picture { transform: scale(1.022); }
  .services-photo:hover img { transform: scale(1.035); }
  .service-strip a:hover .icon { transform: translateY(-4px); }
  .service-strip a:nth-child(2):hover .icon { transform: rotate(120deg); }
  .services-list a:hover .service-icon { transform: translateX(3px); }
  .services-list a:hover { padding-left: 8px; }
  .project-list a:hover { background: #f3f8ff; }
  .button:hover::before { transform: translateX(450px) skewX(-22deg); }
  .button:hover { transform: translateY(-2px); }
  .button:hover:active { transform: scale(.98); }
  .text-link:hover .arrow { transform: translateX(4px); }
  .next-section:hover .icon { transform: translateY(4px); }
  .back-to-top:hover .icon { transform: rotate(-90deg) translateX(4px); }
}

/* Progressive enhancement: без scroll timelines блоки сразу видны. */
@supports (animation-timeline: view()) {
  .services-photo, .services-copy, .dispatch-copy, .dispatch-art,
  .projects-heading, .project-list a, .project-card, .contact-copy, .contact-stages,
  .equipment-copy, .equipment-list, .equipment-benefits {
    animation: section-enter 1s linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
  }
  .services-photo, .dispatch-art { animation-range: entry 0% entry 40%; }
  .project-list a:nth-child(2) { animation-range: entry 3% entry 35%; }
  .project-list a:nth-child(3) { animation-range: entry 6% entry 40%; }
  .project-list a:nth-child(4) { animation-range: entry 9% entry 45%; }
  .contact-background {
    animation: background-drift 1s linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
}

@media (max-width: 760px) {
  .hero h1 { animation: hero-enter .9s var(--ease-out) .24s backwards; }
  .hero h1 > span { animation: none; }
  .dispatch-art img { animation-duration: 7s; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}