#projekty{overflow:hidden}

/* Hovering reveals the biography without changing click and touch controls. */
.about-more summary span{transition:transform .32s cubic-bezier(.22,1,.36,1)}
.about-more summary:hover{color:var(--primary-strong)}
.about-more summary:focus-visible{outline:2px solid var(--primary-strong);outline-offset:5px;border-radius:3px}

/* Give the film its full frame after the pointer has rested. */
.video-card-wrap.hover-idle:not(:focus-within) .card-hover,.video-card-wrap.hover-idle:not(:focus-within) .card-restart,.video-card-wrap.hover-idle:not(:focus-within) .card-mute{opacity:0;transform:translateY(15px);pointer-events:none}

/* The film sleeve is the small icon beside the music-video link. */
.music-format .film-sleeve{background:var(--accent);transition:transform .35s cubic-bezier(.22,1,.36,1),background .25s}
.music-format:hover .film-sleeve,.music-format:focus-visible .film-sleeve{transform:rotate(-5deg) translateY(-5px)}

/* Contact section: a warm moving backdrop and staggered entrance. */
.contact-section{position:relative;isolation:isolate;overflow:hidden}
.contact-section::before,.contact-section::after{content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(2px)}
.contact-section::before{width:min(58vw,740px);aspect-ratio:1;top:-60%;left:-18%;background:radial-gradient(circle,#ffffff36 0%,#ffffff13 38%,transparent 72%)}
.contact-section::after{width:min(46vw,600px);aspect-ratio:1;right:-15%;bottom:-75%;background:radial-gradient(circle,#58339f26 0%,transparent 72%)}
.contact-layout{position:relative;z-index:1}
.contact-motion-ready:not(.contact-visible) .contact-copy h2,.contact-motion-ready:not(.contact-visible) .contact-chat,.contact-motion-ready:not(.contact-visible) .contact-direct,.contact-motion-ready:not(.contact-visible) .contact-form{opacity:0;transform:translateY(24px)}
.contact-visible .contact-copy h2,.contact-visible .contact-chat,.contact-visible .contact-direct,.contact-visible .contact-form{animation:contact-enter .7s cubic-bezier(.22,1,.36,1) both}
.contact-visible .contact-chat{animation-delay:.13s}
.contact-visible .contact-chat{animation-name:contact-chat-enter}
.contact-visible .contact-direct{animation-delay:.25s}
.contact-visible .contact-form{animation-delay:.2s}
@keyframes contact-enter{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes contact-chat-enter{from{opacity:0;transform:translateY(24px) rotate(-3deg)}to{opacity:1;transform:rotate(-3deg)}}
.contact-visible::before{animation:contact-orbit 10s ease-in-out infinite alternate}
.contact-visible::after{animation:contact-orbit 13s ease-in-out infinite alternate-reverse}
@keyframes contact-orbit{to{transform:translate(8%,10%) scale(1.12)}}
.contact-visible .contact-typing i{animation:contact-typing 1.25s ease-in-out infinite}
.contact-visible .contact-typing i:nth-child(2){animation-delay:.18s}
.contact-visible .contact-typing i:nth-child(3){animation-delay:.36s}
@keyframes contact-typing{0%,60%,100%{transform:translateY(0);opacity:.65}30%{transform:translateY(-5px);opacity:1}}
.contact-chat-bubble{transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s}
.contact-chat:hover .contact-chat-bubble{transform:translateY(-5px) rotate(2deg);box-shadow:0 12px 0 #67479720}
.contact-send-icon{transition:transform .35s cubic-bezier(.22,1,.36,1),background .25s}
.contact-form:hover .contact-send-icon,.contact-form:focus-within .contact-send-icon{transform:translate(3px,-4px) rotate(17deg);background:#e7d8f7}
.contact-form input,.contact-form select,.contact-form textarea{transition:border-color .2s,box-shadow .2s,background .2s}
.contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{border-color:var(--primary-strong);box-shadow:0 0 0 4px #9471d22b;background:#fff}
.contact-form .form-bottom .button svg{transition:transform .25s}
.contact-form .form-bottom .button:hover svg,.contact-form .form-bottom .button:focus-visible svg{transform:translate(4px,-4px)}
.contact-copy .email-link svg{transition:transform .25s}
.contact-copy .email-link:hover svg,.contact-copy .email-link:focus-visible svg{transform:translate(3px,-3px)}
.contact-socials a{transition:background .2s,transform .2s}
.contact-socials a:hover,.contact-socials a:focus-visible{transform:translateY(-3px)}
@media(prefers-reduced-motion:reduce){.contact-visible .contact-copy h2,.contact-visible .contact-chat,.contact-visible .contact-direct,.contact-visible .contact-form,.contact-visible::before,.contact-visible::after,.contact-visible .contact-typing i{animation:none!important}.contact-motion-ready:not(.contact-visible) .contact-copy h2,.contact-motion-ready:not(.contact-visible) .contact-chat,.contact-motion-ready:not(.contact-visible) .contact-direct,.contact-motion-ready:not(.contact-visible) .contact-form{opacity:1;transform:none}}