/* Logo intro (home, first visit only). Positions are fractions of the logo image (2573 × 717). */
@property --cp-wipe{syntax:'<percentage>';inherits:false;initial-value:108%}
@property --cp-glint{syntax:'<percentage>';inherits:false;initial-value:-20%}

.cp-logo-anim{display:none}
.cp-brand{position:relative}
html.cp-logo-intro .cp-brand>img:not([class*="cp-logo"]){opacity:0}
html.cp-logo-intro .cp-logo-anim{display:block;position:absolute;inset:0;pointer-events:none}
html.cp-logo-intro .cp-logo-anim img{position:absolute;inset:0;width:100%;height:100%;max-width:none}

/* The four squares: top-left → bottom-left → bottom-right → top-right (counter-clockwise). */
.cp-logo-sq--tl{clip-path:inset(28.03% 87.84% 50.63% 6.26%);transform-origin:9.21% 38.70%}
.cp-logo-sq--bl{clip-path:inset(50.63% 87.84% 28.03% 6.26%);transform-origin:9.21% 61.30%}
.cp-logo-sq--br{clip-path:inset(50.63% 81.54% 28.03% 12.55%);transform-origin:15.51% 61.30%}
.cp-logo-sq--tr{clip-path:inset(28.03% 81.54% 50.63% 12.55%);transform-origin:15.51% 38.70%}
@keyframes cp-sq-in{0%{opacity:0;transform:scale(.25) rotate(-90deg)}60%{opacity:1;transform:scale(1.12) rotate(6deg)}100%{opacity:1;transform:none}}
html.cp-logo-intro .cp-logo-sq{animation:cp-sq-in 560ms cubic-bezier(.2,.9,.25,1.1) both}
html.cp-logo-intro .cp-logo-sq--tl{animation-delay:200ms}
html.cp-logo-intro .cp-logo-sq--bl{animation-delay:340ms}
html.cp-logo-intro .cp-logo-sq--br{animation-delay:480ms}
html.cp-logo-intro .cp-logo-sq--tr{animation-delay:620ms}

/* „Clean Pavings”: written in from left to right with a soft edge, arriving slightly from the left. */
.cp-logo-txt{clip-path:inset(24% 3% 16% 19.5%)}
@keyframes cp-txt-wipe{0%{--cp-wipe:18%;transform:translateX(-2.5%);filter:blur(3px)}70%{filter:blur(0)}100%{--cp-wipe:108%;transform:none;filter:none}}
html.cp-logo-intro .cp-logo-txt{-webkit-mask-image:linear-gradient(90deg,#000 calc(var(--cp-wipe) - 10%),transparent var(--cp-wipe));mask-image:linear-gradient(90deg,#000 calc(var(--cp-wipe) - 10%),transparent var(--cp-wipe));animation:cp-txt-wipe 1100ms cubic-bezier(.22,1,.36,1) 950ms both}

/* A warm orange glint travels over the letters once they are written. */
.cp-logo-shine{clip-path:inset(24% 3% 16% 19.5%);filter:invert(62%) sepia(88%) saturate(1200%) hue-rotate(345deg) brightness(104%);opacity:0}
@keyframes cp-glint{0%{--cp-glint:-15%;opacity:1}100%{--cp-glint:125%;opacity:1}}
html.cp-logo-intro .cp-logo-shine{-webkit-mask-image:linear-gradient(100deg,transparent calc(var(--cp-glint) - 12%),#000 var(--cp-glint),transparent calc(var(--cp-glint) + 12%));mask-image:linear-gradient(100deg,transparent calc(var(--cp-glint) - 12%),#000 var(--cp-glint),transparent calc(var(--cp-glint) + 12%));animation:cp-glint 950ms ease-in-out 2050ms both}

@media(prefers-reduced-motion:reduce){html.cp-logo-intro .cp-brand>img:not([class*="cp-logo"]){opacity:1}html.cp-logo-intro .cp-logo-anim{display:none}}