/* Isolated motion layer. ?effects=off restores the static behavior. */
html[data-effects="on"]{scroll-behavior:auto}
html[data-effects="on"] [data-reveal]{transition:opacity .65s ease,translate .75s cubic-bezier(.22,1,.36,1);transition-delay:var(--reveal-delay,0ms)}
html[data-effects="on"] [data-reveal="waiting"]{opacity:0;translate:0 14px}
html[data-effects="on"] [data-reveal="visible"]{opacity:1;translate:0 0}
html[data-effects="on"] dialog[open]{animation:dialog-arrive .28s cubic-bezier(.22,1,.36,1)}
html[data-effects="on"] dialog[open]::backdrop{animation:backdrop-arrive .25s ease}
@keyframes dialog-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes backdrop-arrive{from{opacity:0}to{opacity:1}}
@keyframes eye-blink{0%,100%{transform:scaleY(1)}45%{transform:scaleY(.12)}}
@media(hover:hover) and (pointer:fine){
 html[data-effects="on"] .project-card{transition:opacity .65s ease,translate .75s cubic-bezier(.22,1,.36,1),transform .35s cubic-bezier(.22,1,.36,1)}
 html[data-effects="on"] .project-card:hover{transform:translateY(-5px)}
 html[data-effects="on"] .solid-link .ui-arrow{transition:translate .3s ease}
 html[data-effects="on"] .solid-link:hover .ui-arrow{translate:2px -2px}
 html[data-effects="on"] .eye-link:hover img{animation:eye-blink .32s ease}
 html[data-effects="on"] .method-step .step-number{transition:opacity .3s ease,transform .35s ease}
 html[data-effects="on"] .method-step:hover .step-number{opacity:.6;transform:translateX(4px)}
 html[data-effects="on"] .text-link{transition:text-underline-offset .25s ease}
 html[data-effects="on"] .text-link:hover{text-underline-offset:8px}
}
@media(prefers-reduced-motion:reduce){
 html[data-effects="on"] [data-reveal]{opacity:1!important;translate:none!important}
 html[data-effects="on"]{scroll-behavior:auto}
}

/* A light veil bridges real document loading. */
html::after{content:'';position:fixed;inset:0;z-index:1000;background:#fff;opacity:0;pointer-events:none;transition:opacity .32s ease;}
html.page-cover-visible::after{opacity:1;pointer-events:auto}
html.page-cover-arrival::after{transition:none}
@media(prefers-reduced-motion:reduce){html::after{display:none}}

/* Touch cards use the same emphasis as desktop hover when centred on screen. */
html[data-effects="on"] .project-card.is-in-view{transform:translateY(-5px)}
html[data-effects="on"] .project-card.is-in-view .project-cover{filter:brightness(.97)}
html[data-effects="on"] .project-card.is-in-view .client span{transform:translate(3px,-3px)}
@media(max-width:700px),(hover:none){html[data-effects="on"] .project-card{transition:opacity .65s ease,translate .75s cubic-bezier(.22,1,.36,1),transform .35s cubic-bezier(.22,1,.36,1)}}

/* A gentle greeting from the wrist, triggered by the social links. */
@keyframes hand-greeting{0%,100%{transform:rotate(0)}20%{transform:rotate(-4deg)}45%{transform:rotate(4deg)}70%{transform:rotate(-3deg)}}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 html[data-effects="on"] .blog:has(.blog-bottom a[href="https://www.instagram.com/osmelitsya/"]:is(:hover,:focus-visible)) .stone-hand,
 html[data-effects="on"] body:has(.contact-links>a[href="https://t.me/osmelitsya"]:hover) .stone-hand{transform-origin:50% 90%;animation:hand-greeting 2.2s ease-in-out infinite}
}