/* Шар сторінок дизайну (дизайн сайтів, дизайн застосунків, графічний дизайн) — з макета без змін,
   id артборда замінено на .kove-turn. */
.wlink>div:first-child{transition:transform .35s cubic-bezier(.2,.75,.2,1)}
.wlink:hover>div:first-child{transform:translateY(-4px)}
.wlink:hover .cmeta>span:first-child{color:#FF813A}
.wlink .cmeta>span:first-child{transition:color .25s}
@media (prefers-reduced-motion:reduce){.wlink>div:first-child,.wlink:hover>div:first-child{transition:none;transform:none}}
/* Анімація малюнків іде за законом процесу: один прогін при вході + повтор на hover. Без hover (тач, <1024) — статика після прогону.
   Реалізація на переходах, не на keyframes: стан спокою = видимий. Якщо логіка не піднялась або кадри придушені, малюнок просто стоїть на місці, а не зникає */
.dl-art svg *{transform-box:fill-box;transform-origin:center}
.dl-paper,.dl-mark,.dl-act,.dl-fan,.dl-sweep,.dl-tick{transition:opacity .5s cubic-bezier(.2,.75,.2,1),transform .6s cubic-bezier(.25,.85,.25,1);transition-delay:calc(var(--dbase,0s) + var(--d,0s))}
/* черга артбордів зліва направо тримається в CSS, а не в setTimeout: клас вішається
   синхронно, інакше він через 360 мс лягає на вузли, яких ре-рендер уже підмінив */
.dl-grid4>.dl-item:nth-child(2){--dbase:.12s}
.dl-grid4>.dl-item:nth-child(3){--dbase:.24s}
.dl-grid4>.dl-item:nth-child(4){--dbase:.36s}
.dl-grid3>.dl-item:nth-child(2){--dbase:.1s}
.dl-grid3>.dl-item:nth-child(3){--dbase:.2s}
.dl-grid3>.dl-item:nth-child(4){--dbase:.3s}
.dl-grid3>.dl-item:nth-child(5){--dbase:.4s}
.dl-grid3>.dl-item:nth-child(6){--dbase:.5s}
.dl-grid4>.dl-item:nth-child(2){--dbase:.12s}
.dl-grid4>.dl-item:nth-child(3){--dbase:.24s}
.dl-grid4>.dl-item:nth-child(4){--dbase:.36s}
.dl-act{transition-timing-function:cubic-bezier(.34,1.5,.64,1)}
.dl-sweep{transform-origin:left center}
.dl-anim .dl-item:not(.dl-run) .dl-paper{opacity:0;transform:translateY(7px) scale(.985)}
.dl-anim .dl-item:not(.dl-run) .dl-mark{opacity:0;transform:translateY(5px)}
.dl-anim .dl-item:not(.dl-run) .dl-act{opacity:0;transform:scale(.8)}
.dl-anim .dl-item:not(.dl-run) .dl-fan{opacity:0;transform:translate(-16px,13px)}
.dl-anim .dl-item:not(.dl-run) .dl-sweep{transform:scaleX(0)}
.dl-anim .dl-item:not(.dl-run) .dl-tick{opacity:0}
.dl-nt .dl-paper,.dl-nt .dl-mark,.dl-nt .dl-act,.dl-nt .dl-fan,.dl-nt .dl-sweep,.dl-nt .dl-tick{transition:none!important}
/* кінець прогону прибивається класом: зняти гейт недостатньо — повернення до видимого
   стану саме є переходом, і без кадрів малюнок лишався б прихованим назавжди */
/* transition:none тут обов'язковий: активний перехід повертає своє анімоване значення
   навіть проти !important, тож без гасіння переходу прибити кінцевий стан неможливо.
   Повтор на hover спершу знімає dl-done — переходи вертаються разом із ним */
.dl-done .dl-paper,.dl-done .dl-mark,.dl-done .dl-act,.dl-done .dl-fan,.dl-done .dl-tick,.dl-done .dl-sweep{transition:none!important;opacity:1!important;transform:none!important}
.dl-art{transition:border-color .25s cubic-bezier(.2,.7,.2,1),background .25s cubic-bezier(.2,.7,.2,1)}
.dl-item:hover .dl-art{border-color:rgba(253,250,246,.4);background:rgba(253,250,246,.055)}
.dl-item:hover .dl-h{background:#FF511A;border-color:#FF511A}
.dl-h{transition:background .25s,border-color .25s}
@media (prefers-reduced-motion:reduce){
.dl-paper,.dl-mark,.dl-act,.dl-fan,.dl-sweep,.dl-tick,.dl-art,.dl-h{transition:none!important;transform:none!important;opacity:1!important}
}
/* 07 ПРИНЦИПИ — кожен принцип показує себе: у спокої екран «з принципом», наведення
   або тап перемикає той самий екран у «без принципу». Спокій = принцип дотримано, тож
   без логіки й без ховера секція стоїть завершеною. Перемикання — стан, що читається,
   тому перехід короткий і гаситься при reduced-motion */
.pr-b,.plab-b{opacity:0}
.pr-g,.pr-b,.plab{transition:opacity .3s}
.plab{position:absolute;top:0;right:0;font:400 clamp(10px,.694cqw,12px)/1 ui-monospace,Menlo,monospace;letter-spacing:.08em;color:rgba(253,250,246,.55)}
.plab-b{color:#FF813A}
@media (hover:hover){
.pcard:hover .pr-g,.pcard:hover .plab-g{opacity:0}
.pcard:hover .pr-b,.pcard:hover .plab-b{opacity:1}
}
.pcard.pbad .pr-g,.pcard.pbad .plab-g{opacity:0}
.pcard.pbad .pr-b,.pcard.pbad .plab-b{opacity:1}
.pcard{transition:border-color .25s,background .25s}
.pcard:hover{border-color:rgba(253,250,246,.4)!important;background:rgba(253,250,246,.055)!important}
.pcard:focus-visible{outline:2px dashed #FF813A;outline-offset:3px}
@container (max-width:1023.98px){.kove-turn .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@container (max-width:559.98px){.kove-turn .pgrid{grid-template-columns:1fr!important}}
@media (prefers-reduced-motion:reduce){.pr-g,.pr-b,.plab,.pcard{transition:none!important}}

@container (max-width:1023.98px){
.kove-turn .dgrid4{grid-template-columns:1fr 1fr!important}
.kove-turn .dcard:nth-child(2){border-right:none!important}
.kove-turn .dcard:nth-child(3),.kove-turn .dcard:nth-child(4){border-top:none!important}
.kove-turn .wgrid2{gap:44px 28px!important}
.kove-turn .kc3{align-items:flex-start!important}
.kove-turn .dl-grid3{grid-template-columns:1fr 1fr!important;gap:40px 28px!important}
}
@container (max-width:559.98px){
.kove-turn .dgrid4{grid-template-columns:1fr!important}
.kove-turn .dcard{border-right:none!important;border-top:none!important;padding:22px 0!important}
.kove-turn .dcard:first-child{border-top:1px solid rgba(253,250,246,.15)!important}
.kove-turn .wgrid2{grid-template-columns:1fr!important}
.kove-turn .dl-grid3{grid-template-columns:1fr!important}
}