/* Scroll animations (js/pc-motion.js): the hero / banner title slides in, hero photos ease in with a slow zoom-out, section headings slide in and
 * photos are unveiled while scrolling. Everything is gated by html.pc-motion, so without JavaScript or with "reduce motion" the page renders exactly
 * as before. Only classes are added (no text is split or rewritten): the CMS keeps editing the same elements and an edited text keeps its animation. */
html.pc-motion .pcm{--pcm-d:0ms;opacity:0;transition:opacity .8s cubic-bezier(.22,.61,.36,1) var(--pcm-d),transform .8s cubic-bezier(.22,.61,.36,1) var(--pcm-d),clip-path .9s cubic-bezier(.22,.61,.36,1) var(--pcm-d),filter .8s ease var(--pcm-d)}
html.pc-motion .pcm-up{transform:translateY(34px)}
/* headings: slide in from the left, blur clearing (no clip-path: it would hide them from the observer) */
html.pc-motion .pcm-head{transform:translate(-36px,16px);filter:blur(8px)}
/* photos: unveil + slow zoom-out */
html.pc-motion .pcm-img{transform:scale(1.12);clip-path:inset(0 0 12% 0);filter:saturate(.7)}
html.pc-motion .pcm.pcm-in{opacity:1;transform:none;clip-path:inset(0 0 0 0);filter:none}
/* start state without a transition (set for one frame by js/pc-motion.js) */
html.pc-motion .pcm.pcm-nt{transition:none!important}
/* photo hover: gentle zoom inside its frame (only photos that are clipped by their parent) */
@media (hover:hover){
  html.pc-motion .pcm-img.pcm-in{transition:transform .9s cubic-bezier(.22,.61,.36,1),filter .5s ease}
  html.pc-motion .pcm-img.pcm-in.pcm-zoom:hover{transform:scale(1.05)}
}

/* ---- hero / title banner of every page: the photo eases in with a soft zoom-out, the title slides in, the rest rises ---- */
@keyframes pcm-kb{from{transform:scale(1.14)}to{transform:scale(1)}}
@keyframes pcm-slide{from{opacity:0;transform:translateX(-60px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes pcm-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
html.pc-motion .pcm-banner{overflow:hidden}
html.pc-motion .pcm-banner-on>img{animation:pcm-kb 7s cubic-bezier(.2,.6,.3,1) both}
html.pc-motion .pcm-banner-on .pcm-k{animation:pcm-rise .9s cubic-bezier(.22,.61,.36,1) .1s both}
html.pc-motion .pcm-banner-on h1{animation:pcm-slide 1s cubic-bezier(.22,.61,.36,1) .3s both}
html.pc-motion .pcm-banner-on h1 ~ *{animation:pcm-rise .9s cubic-bezier(.22,.61,.36,1) .65s both}
html.pc-motion .pcm-banner-on h1 ~ *:nth-child(n+3){animation-delay:.9s}

/* ---- first-paint hold: the hero title stays invisible until its entrance animation starts (html.pcm-pre is set in <head>, lifted by
 * js/pc-motion.js and by a timeout there as a safety net), so it never shows and then vanishes ---- */
html.pcm-pre main>:first-child h1,html.pcm-pre main>:first-child h1~*,html.pcm-pre main>:first-child :has(+h1){opacity:0}
html.pcm-pre main>:first-child>img{transform:scale(1.14)}

/* ---- CMS edit mode / any text being edited: always fully visible and still, so typing never flickers or hides.
 * (The classes stay on the elements: switching back to preview / the published page plays the same animation.) ---- */
html.pc-motion body.cms-editing .pcm,html.pc-motion .pcm[contenteditable="true"],html.pc-motion [contenteditable="true"] .pcm{opacity:1!important;transform:none!important;clip-path:none!important;filter:none!important;transition:none!important}
html.pc-motion body.cms-editing .pcm-banner-on *,html.pc-motion body.cms-editing .pcm-banner-on{animation:none!important}
body.cms-editing main>:first-child h1,body.cms-editing main>:first-child h1~*,body.cms-editing main>:first-child :has(+h1){opacity:1!important}
@media (prefers-reduced-motion:reduce){
  html.pc-motion .pcm{opacity:1!important;transform:none!important;clip-path:none!important;filter:none!important;transition:none!important}
  html.pc-motion .pcm-banner-on *,html.pc-motion .pcm-banner-on{animation:none!important}
  html.pcm-pre main>:first-child h1,html.pcm-pre main>:first-child h1~*,html.pcm-pre main>:first-child :has(+h1){opacity:1!important}
}

/* ---- cards (products, project highlights, resources): rise and settle as one piece ---- */
html.pc-motion .pcm-block{transform:translateY(42px) scale(.965)}
html.pc-motion .pcm-block.pcm-in{transform:none}