/* Євген Чикаленко — онлайн-курс перед мюзиклом «Грай, [Марку]» — стилі сторінки (специфічне; спільне в common.css) */
@font-face{font-family:'HRAI MARKU';src:url(../assets/fonts/HRAIMARKU-Regular.otf) format('opentype');font-display:swap}
body{margin:0;background:#1E1D21}
a{color:#F5F3EE}a:hover{color:#F7A23B}
.fh{font-family:'NAMU 1990','NAMU','NAMU Modernism 1990',Geist,'Helvetica Neue',Arial,sans-serif;font-synthesis:none}
.fa{font-family:'HRAI MARKU',Geist,sans-serif;font-weight:400;font-synthesis:none}
.btn{transition:background .25s,color .25s}
.btn:hover{background:#F7A23B !important;color:#141416 !important}
.pier:hover .pt{color:#F7A23B}
.arc{stroke-dasharray:552;animation:drawRing 1.6s cubic-bezier(.6,0,.2,1) both}
.portrait{display:block;height:auto;max-width:none;flex-shrink:0}
.print{margin:0;box-sizing:border-box;padding:12px 12px 16px;background:#E8E3D7;border-radius:4px;box-shadow:0 30px 70px rgba(0,0,0,.5)}
.print img{display:block;width:100%;height:auto}
@keyframes drop{from{opacity:0;transform:translateY(50px) rotate(calc(var(--r) * 2))}to{opacity:1;transform:rotate(var(--r))}}

.heroPhoto{background:url(../assets/img/hero-chykalenko-painting.jpg) center top/100% 100% no-repeat;-webkit-mask-image:radial-gradient(ellipse 50% 58% at 50% 42%,#000 52%,transparent 100%);mask-image:radial-gradient(ellipse 50% 58% at 50% 42%,#000 52%,transparent 100%);animation:kb 30s ease-in-out infinite alternate;transform-origin:50% 30%}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.04)}}
@keyframes wxr{from{background-position-x:-720px}to{background-position-x:0}}
.w1{background-image:url(../assets/svg/wave-row-1.svg);background-size:720px 20px;background-repeat:repeat-x;animation:wx 52s linear infinite}
.w2{background-image:url(../assets/svg/wave-row-2.svg);background-size:720px 20px;background-repeat:repeat-x;animation:wx 40s linear infinite}
.w3{background-image:url(../assets/svg/wave-row-3.svg);background-size:720px 20px;background-repeat:repeat-x;animation:wx 32s linear infinite}
.w4{background-image:url(../assets/svg/wave-front.svg);background-size:720px 120px;background-repeat:repeat-x;animation:wx 24s linear infinite}
html{scroll-behavior:smooth}
a:focus-visible,button:focus-visible{outline:2px solid #F7A23B;outline-offset:3px}
section[id]{scroll-margin-top:80px}
.flip{transition:transform .25s}
.flip:hover .face{border-color:rgba(247,162,59,.6) !important}
.mp:hover{color:#F7A23B !important}
.pier.off,.rowoff{pointer-events:none;opacity:.5}
@supports (text-box: trim-both cap alphabetic){.nm{text-box:trim-both cap alphabetic;line-height:1 !important}.nm2{margin-top:18px}}
@keyframes wx{from{background-position-x:0}to{background-position-x:-720px}}
@keyframes rock{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(7px) rotate(3deg)}}
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
@keyframes drawRing{from{stroke-dashoffset:552}to{stroke-dashoffset:0}}
@keyframes rv{from{opacity:0;translate:0 50px}to{opacity:1;translate:0 0}}
@supports (animation-timeline: view()){
.rv{animation:rv linear both;animation-timeline:view(block 0px 120px);animation-range:entry 0% entry 100%}
.rv1{animation:rv linear both;animation-timeline:view(block 0px 120px);animation-range:entry 20% entry 100%}
.rv2{animation:rv linear both;animation-timeline:view(block 0px 120px);animation-range:entry 40% entry 100%}
.wp{animation:wipe linear both;animation-timeline:view(block 0px 80px);animation-range:entry 10% entry 100%}
}
.ros{position:absolute;pointer-events:none;display:block;height:auto;z-index:0}
.spin{animation:spin 140s linear infinite}
.spot{position:absolute;pointer-events:none;border-radius:50%;z-index:0;background:radial-gradient(closest-side,rgba(247,162,59,.14),rgba(247,162,59,.05) 55%,rgba(247,162,59,0))}
@keyframes spin{to{rotate:360deg}}
@keyframes wipe{from{clip-path:inset(0 -10% 100% -10%);translate:0 .3em}to{clip-path:inset(-20% -10% -25% -10%);translate:0 0}}
.show-m{display:none}
@media (max-width: 900px){.hide-m{display:none !important}.show-m{display:flex}}
@media (prefers-reduced-motion: reduce){*{animation:none !important;transition:none !important}}