/* ALL·DECORS · motion layer: переходы между страницами, появление блоков, живые карточки.
   Подключается после style.css на всех страницах. Уважает prefers-reduced-motion. */

/* ---------- переходы между страницами (View Transitions, Chrome/Safari/Edge) ---------- */
@view-transition { navigation: auto; }
.dcrt-header { view-transition-name: site-header; }
::view-transition-group(site-header) { animation-duration: 0s; }
@keyframes mo-out { to { opacity: 0; transform: translateY(-10px); filter: blur(4px); } }
@keyframes mo-in  { from { opacity: 0; transform: translateY(18px); filter: blur(10px); } to { opacity: 1; transform: none; filter: blur(0); } }
::view-transition-old(root) { animation: mo-out .32s cubic-bezier(.4,0,.6,1) both; }
::view-transition-new(root) { animation: mo-in .62s cubic-bezier(.2,.7,.2,1) both; }

/* ---------- появление при прокрутке ---------- */
.mo { opacity: 0; transform: translateY(22px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 70ms); will-change: opacity, transform; }
.mo.in { opacity: 1; transform: none; }
.mo-soft { opacity: 0; transition: opacity 1s ease; transition-delay: calc(var(--i, 0) * 60ms); }
.mo-soft.in { opacity: 1; }

/* ---------- картинки: мягкая проявка ---------- */
img.mo-img { opacity: 0; transition: opacity .7s ease, transform .9s cubic-bezier(.2,.7,.2,1); }
img.mo-img.ld { opacity: 1; }

/* ---------- живые карточки и ссылки ---------- */
.dcard, .ccard, .pcard, .ctx, .surf, .room, .eff, .mat, .syscard, .entry, .brand, .acard, .mcard {
  transition: transform .55s cubic-bezier(.2,.7,.2,1), box-shadow .55s ease, border-color .3s ease;
}
.dcard:hover, .ccard:hover, .pcard:hover, .ctx:hover, .syscard:hover, .acard:hover, .mcard:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -22px rgba(22,21,19,.35); }
.dcard img, .ccard img, .pcard img, .ctx img, .acard img, .mcard img { transition: transform 1.1s cubic-bezier(.2,.7,.2,1), filter .6s ease; }
.dcard:hover img, .ccard:hover img, .pcard:hover img, .ctx:hover img, .acard:hover img, .mcard:hover img { transform: scale(1.045); }
.surf:hover img, .room:hover img { transform: scale(1.06); }
.surf img, .room img { transition: transform 1s cubic-bezier(.2,.7,.2,1); }

nav.main a { position: relative; border-bottom: 0 !important; }
nav.main a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 1px; background: currentColor; transition: right .35s cubic-bezier(.2,.7,.2,1); }
nav.main a:hover::after { right: 0; }
.btn, .btnd, .sbtn { transition: background .3s ease, color .3s ease, border-color .3s ease, transform .35s cubic-bezier(.2,.7,.2,1), letter-spacing .35s ease; }
.btn:hover, .btnd:hover, .sbtn:hover { transform: translateY(-1px); }
.btn.solid:hover, .btnd.black:hover { letter-spacing: .14em; }
.entry .cta { transition: gap .35s cubic-bezier(.2,.7,.2,1); }
.entry:hover .cta { gap: 18px; }

/* ---------- шапка: липкая, с размытием после прокрутки ---------- */



/* ---------- hero: медленный наезд + параллакс ---------- */
@keyframes mo-kb { from { transform: scale(1.0); } to { transform: scale(1.06); } }
.hero { overflow: hidden; }
.hero img.bg { animation: mo-kb 26s ease-out both; will-change: transform; }
.hero .ov h1, .hero .ov .lead { animation: mo-in .9s cubic-bezier(.2,.7,.2,1) both; }
.hero .ov .lead { animation-delay: .15s; }

/* ---------- заголовки страниц ---------- */
main > .wrap > h1, main.wrap > h1, .vhead h1, .ehead h1, .dhead h1, .phead h1, .chead h1 { animation: mo-in .8s cubic-bezier(.2,.7,.2,1) both; }
main > .wrap > .lead, .vhead p, .ehead p, .dhead p { animation: mo-in .8s cubic-bezier(.2,.7,.2,1) .12s both; }

/* ---------- модалка заявки ---------- */
.admodal, .modal { animation: mo-in .35s cubic-bezier(.2,.7,.2,1) both; }

/* ---------- доступность ---------- */
@media (prefers-reduced-motion: reduce) {
  .mo, .mo-soft, img.mo-img { opacity: 1 !important; transform: none !important; transition: none !important; }
  ::view-transition-old(root), ::view-transition-new(root), .hero img.bg, .hero .ov h1, .hero .ov .lead { animation: none !important; }
  * { transition-duration: .01ms !important; }
}