/* Motion. Everything here applies only under html.motion, which the page sets itself when scripts run and the
   visitor has not asked for reduced motion (see base.html). Without that class the site is shown as it is.
   Rules that need js/motion.js to finish what they start sit under html.motion-on, which that script sets.
   One language everywhere: the amber rule is drawn, the heading rises from behind an edge, the rest follows.
   The scroll part lives in js/motion.js. */
:root {
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
}

/* ---------- Between pages: the old page fades, the new one comes through ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out .22s ease both; }
  ::view-transition-new(root) { animation: vt-in .42s var(--ease-out) both; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* ---------- Shared pieces ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@keyframes fade { from { opacity: 0; } }
@keyframes rule { from { transform: scaleX(0); } }
/* The block moves up exactly as fast as its bottom edge is uncovered, so the text comes out of a fixed line. */
@keyframes unmask {
  from { transform: translateY(100%); clip-path: inset(-.2em 0 100% 0); }
  to { transform: none; clip-path: inset(-.2em 0 -.2em 0); }
}

/* The amber rule of a section label is drawn from the left when the section comes into view. */
.motion .kicker::before { transform-origin: 0 50%; transition: transform .8s var(--ease-out); }
.motion .kicker.is-out::before { transform: scaleX(0); }

/* «С нами удобно» and other ruled lists: the rule is drawn from the top, the text comes after it. */
.motion .terms li,
.motion .points li { position: relative; border-left-color: transparent; transition: color .7s ease calc(var(--d, 0ms) + .25s); }
.motion .terms b,
.motion .points b { transition: color .7s ease calc(var(--d, 0ms) + .25s); }
.motion .terms li::before,
.motion .points li::before {
  content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background: var(--amber);
  transform-origin: 50% 0; transition: transform .9s var(--ease-out) var(--d, 0ms);
}
.motion .terms li.is-out,
.motion .terms li.is-out b,
.motion .points li.is-out,
.motion .points li.is-out b { color: transparent; }
.motion .terms li.is-out::before,
.motion .points li.is-out::before { transform: scaleY(0); }

/* ---------- Main page, first screen ---------- */
.motion .temp { animation: fade 1.6s ease .15s both; }
.motion .hero h1 { animation: unmask 1s var(--ease-out) .1s both; }
.motion .temp-label,
.motion .hero__bottom p,
.motion .hero__bottom .btn,
.motion .facts li { animation: rise .9s var(--ease-out) both; }
.motion .temp-label { animation-delay: .05s; }
.motion .hero__bottom p { animation-delay: .28s; }
.motion .hero__bottom .btn { animation-delay: .4s; }
.motion .facts li:nth-child(1) { animation-delay: .7s; }
.motion .facts li:nth-child(2) { animation-delay: .82s; }
.motion .facts li:nth-child(3) { animation-delay: .94s; }
/* The headlights come on out of the dark, then go on breathing as before. */
.motion .glow { animation: lights-on 1.8s ease-out .45s both, breathe 5.5s ease-in-out 2.25s infinite alternate; }
.motion .glow--flare { animation-duration: 1.8s, 7s; }
.motion .glow--streak { animation-duration: 1.8s, 3.8s; }
@keyframes lights-on {
  0% { opacity: 0; }
  10% { opacity: 1; }
  19% { opacity: .2; }
  32% { opacity: 1; }
  100% { opacity: .35; }
}
.motion .scene { will-change: transform, opacity; }

/* ---------- Inner pages, first screen: the photo drifts closer, the words rise ---------- */
.motion .page-hero__bg { animation: drift 18s cubic-bezier(.2, .6, .3, 1) both; }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.08); } }
.motion .page-hero .kicker { animation: fade .8s ease .05s both; }
.motion .page-hero .kicker::before { animation: rule .9s var(--ease-out) .1s both; }
.motion .page-hero h1 { animation: unmask 1s var(--ease-out) .12s both; }
.motion .page-hero .lead { animation: rise .9s var(--ease-out) .3s both; }

/* ---------- Услуги: the route through the steps ----------
   Each step's top rule is filled with amber in turn as the page is scrolled (--p, 0…1, set by js/motion.js);
   a step's number lights up when the line reaches it. */
.motion-on .steps li { position: relative; }
.motion-on .steps li::after {
  content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 2px; background: var(--amber);
  transform: scaleX(var(--p, 0)); transform-origin: 0 50%;
}
.motion-on .steps li::before { transition: color .4s ease; }
.motion-on .steps li:not(.is-on)::before { color: rgb(28 29 32 / .32); }

/* ---------- Photos open from the bottom up, the way a dock door rises ---------- */
.motion .gate { overflow: hidden; }
.motion .gate img { will-change: transform; }

/* ---------- Склады: the box of frozen goods travels from the chamber to the truck ---------- */
.coldchain__track { display: none; }
.motion-on .coldchain { position: relative; padding-top: 46px; }
.motion-on .coldchain li + li::before { display: none; }
.motion-on .coldchain__track {
  position: absolute; left: calc((100% - 2 * clamp(16px, 2.4vw, 40px)) / 6); right: calc((100% - 2 * clamp(16px, 2.4vw, 40px)) / 6); top: 11px;
  display: block; height: 2px;
  background: repeating-linear-gradient(90deg, rgb(255 255 255 / .28) 0 6px, transparent 6px 12px);
}
.coldchain__line { position: absolute; inset: 0; background: var(--amber); transform: scaleX(0); transform-origin: 0 50%; }
.coldchain__box {
  position: absolute; left: -12px; top: -11px; display: grid; place-items: center; width: 24px; height: 24px;
  border-radius: 2px; background: var(--amber); color: var(--ink); box-shadow: 0 0 0 4px var(--sheet), 0 0 22px rgb(233 138 53 / .45);
}
.coldchain__box svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.motion-on .coldchain img { transition: opacity .6s ease, filter .6s ease; }
.motion-on .coldchain li:not(.is-on) img { opacity: .42; filter: saturate(.4); }
.motion-on .coldchain h3::before { transition: color .4s ease; }
.motion-on .coldchain li:not(.is-on) h3::before { color: rgb(255 255 255 / .4); }

/* ---------- Автопарк: the cooling unit ends up lit ---------- */
.lineup svg .unit { fill: rgb(233 138 53 / .24); }

/* ---------- Under the pointer ---------- */
.offer { transition: transform .3s var(--ease-out), border-color .3s ease, background-color .3s ease; }
.btn { transition: background-color .2s ease, transform .16s ease-out; }
.btn:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .offer:hover { transform: translateY(-6px); border-color: var(--amber); background-color: rgb(255 255 255 / .05); }
}

/* ---------- The request is sent: a tick is drawn beside the answer ---------- */
.form__note.is-ok { display: flex; align-items: center; gap: .8rem; }
.check { flex: none; width: 26px; height: 26px; fill: none; stroke: var(--amber); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.check circle { opacity: .35; }
.check path { stroke-dasharray: 1; }
@media (prefers-reduced-motion: no-preference) {
  .check { animation: check-pop .5s var(--ease-out) both; }
  .check path { animation: check-draw .45s var(--ease-out) .2s both; }
}
@keyframes check-pop { from { opacity: 0; transform: scale(.8); } }
@keyframes check-draw { from { stroke-dashoffset: 1; } }

/* ---------- Phones: the box travels down the left side of the three stages ---------- */
@media (max-width: 860px) {
  .motion-on .coldchain { padding: 0 0 0 34px; }
  .motion-on .coldchain__track {
    left: 11px; right: auto; top: 12px; bottom: 12px; width: 2px; height: auto;
    background: repeating-linear-gradient(180deg, rgb(255 255 255 / .28) 0 6px, transparent 6px 12px);
  }
  .coldchain__line { transform: scaleY(0); transform-origin: 50% 0; }
  .coldchain__box { left: -11px; top: -12px; }
}