/* Hover-only brand posters. The original logos remain the centre of the scene. */
.brand-logo-visual{--fx-color:#f2e30c;--fx-ink:#111110;--fx-shadow:#111110;--tilt-x:0deg;--tilt-y:0deg;--drift-x:0px;--drift-y:0px;isolation:isolate;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .25s,border-color .25s;transform:rotate(2deg)}
.page-bros-basic .brand-logo-visual{--fx-color:#f53695;--fx-shadow:#f2e30c}
.page-impasto .brand-logo-visual{--fx-color:#ff792c;--fx-shadow:#ff792c}
.page-piacere-toto .brand-logo-visual{--fx-color:#fff5e8;--fx-ink:#a60d1a;--fx-shadow:#276143}
.brand-logo-visual::before,.brand-logo-visual::after{content:'';position:absolute;pointer-events:none;opacity:0;transition:transform .4s cubic-bezier(.2,.8,.2,1),opacity .18s;z-index:-1}
.brand-logo-visual::before{inset:-13px;background:var(--fx-shadow);transform:rotate(0deg) scale(.94)}
.brand-logo-visual::after{inset:-22px;border:3px solid var(--fx-color);transform:rotate(0deg) scale(.94)}
.brand-logo-visual>img{position:relative;z-index:1;transform-origin:center;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.brand-logo-visual .photo-caption{position:relative;z-index:4}
/* The mascot always sits in front of the logo, the hover frame and the stamp. */
.brand-logo-visual .brand-character{z-index:6;pointer-events:none}
.logo-fx{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:visible}
.logo-stamp{position:absolute;right:12px;bottom:75px;max-width:85%;padding:12px 18px;background:var(--fx-color);color:var(--fx-ink);border:3px solid var(--fx-ink);box-shadow:5px 5px 0 var(--fx-ink);font-family:var(--heading-font),Impact,sans-serif;font-weight:var(--heading-weight);font-size:clamp(25px,2.8vw,42px);line-height:1;opacity:0;transform:translateY(35px) rotate(-12deg) scale(.5);transition:transform .32s cubic-bezier(.16,1.5,.4,1),opacity .12s;transform-origin:85% 80%}
.logo-speed{position:absolute;inset:0;opacity:0;transition:opacity .2s}
.logo-speed::before,.logo-speed::after{content:'';position:absolute;background:var(--fx-color);height:10px;width:95px;left:-30px;top:25%;transform:rotate(-10deg);box-shadow:0 21px 0 var(--fx-color)}
.logo-speed::after{left:auto;right:-24px;top:65%;width:70px;transform:rotate(170deg)}
.page-bros .brand-logo-visual::before{background:#111110;clip-path:polygon(0 7%,21% 0,32% 6%,52% 0,64% 5%,88% 0,100% 12%,95% 31%,100% 54%,94% 73%,100% 95%,77% 100%,60% 95%,38% 100%,21% 95%,0 100%,5% 77%,0 55%,5% 29%)}
.page-bros .logo-speed::before,.page-bros .logo-speed::after{height:17px;transform:rotate(-28deg)}
.page-bros-basic .brand-logo-visual::before{background:conic-gradient(#f2e30c 25%,#111110 0 50%,#f2e30c 0 75%,#111110 0);background-size:30px 30px}
.page-bros-basic .brand-logo-visual::after{border-color:#f53695;border-width:5px}
.page-bros-basic .logo-stamp{background:#f2e30c;bottom:65px;right:-8px;transform:translateX(80px) rotate(12deg) scale(.6)}
.page-impasto .brand-logo-visual::before{background:conic-gradient(#ff792c 25%,#111110 0 50%,#ff792c 0 75%,#111110 0);background-size:32px 32px}
.page-impasto .logo-stamp{font-size:clamp(24px,2.6vw,36px);bottom:62px;right:0}
.page-impasto .logo-speed::before{width:100px;height:100px;border:9px solid #ff792c;border-radius:50%;background:transparent;box-shadow:none;left:-30px;top:10%}
.page-impasto .logo-speed::after{width:70px;height:70px;border:7px solid #ff792c;border-radius:50%;background:transparent;box-shadow:none;top:58%;right:-20px}
.page-piacere-toto .brand-logo-visual::before{background:repeating-linear-gradient(90deg,#276143 0 22px,#fff5e8 22px 44px,#a60d1a 44px 66px);inset:-15px}
.page-piacere-toto .brand-logo-visual::after{border:5px double #fff5e8;inset:-24px;border-radius:8px}
.page-piacere-toto .logo-stamp{font-style:italic;font-size:clamp(24px,2.5vw,36px);border:5px double #a60d1a;border-radius:50%;padding:18px 24px;max-width:75%;text-align:center;box-shadow:6px 6px 0 #276143;bottom:65px;right:-10px}
.page-piacere-toto .logo-speed::before,.page-piacere-toto .logo-speed::after{height:38px;width:38px;background:#fff5e8;box-shadow:none;clip-path:polygon(50% 0,61% 35%,100% 50%,61% 65%,50% 100%,39% 65%,0 50%,39% 35%);left:-10px;top:20%}
.page-piacere-toto .logo-speed::after{left:auto;right:-14px;top:52%;width:52px;height:52px}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .brand-logo-visual.logo-active{z-index:5;transform:perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) rotate(-2deg) translateY(-10px) scale(1.035);border-color:var(--fx-color);box-shadow:15px 20px 0 var(--fx-shadow)}
 .brand-logo-visual.logo-active::before{opacity:1;transform:rotate(-4deg) scale(1.035)}
 .brand-logo-visual.logo-active::after{opacity:1;transform:rotate(3deg) scale(1.03)}
 .brand-logo-visual.logo-active .logo-speed{opacity:1;transform:translate(var(--drift-x),var(--drift-y))}
 .brand-logo-visual.logo-active .logo-stamp{opacity:1;transform:translate(0,0) rotate(-8deg) scale(1);transition-delay:.12s}
 .page-bros .brand-logo-visual.logo-active>img{animation:brosHit .65s cubic-bezier(.2,.8,.2,1) both}
 .page-bros-basic .brand-logo-visual.logo-active{transform:perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) rotate(3deg) translateY(-12px) scale(1.035);box-shadow:-14px 18px 0 #111110}
 .page-bros-basic .brand-logo-visual.logo-active>img{animation:basicRip .6s cubic-bezier(.2,.8,.2,1) both}
 .page-bros-basic .brand-logo-visual.logo-active .logo-stamp{transform:rotate(8deg) scale(1)}
 .page-impasto .brand-logo-visual.logo-active>img{animation:impastoLaunch .8s cubic-bezier(.2,.8,.2,1) both}
 .page-impasto .brand-logo-visual.logo-active::before{transform:rotate(7deg) scale(1.04)}
 .page-impasto .brand-logo-visual.logo-active .logo-speed{animation:impastoOrbit 5s ease-in-out infinite}
 .page-piacere-toto .brand-logo-visual.logo-active{transform:perspective(1100px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) rotate(-3deg) translateY(-10px) scale(1.025);box-shadow:14px 18px 0 #276143}
 .page-piacere-toto .brand-logo-visual.logo-active>img{animation:totoSign .85s cubic-bezier(.2,.8,.2,1) both}
 .page-piacere-toto .brand-logo-visual.logo-active .logo-speed{animation:totoStars 2.5s ease-in-out infinite}
}
@keyframes brosHit{0%{transform:scale(1)}25%{transform:translateY(-24px) scale(.94,1.05)}44%{transform:translateY(12px) scale(1.16,.76)}62%{transform:translateY(-7px) scale(1.04,1.1)}80%{transform:translateX(-5px) scale(1.07)}100%{transform:translateY(-8px) scale(1.07)}}
@keyframes basicRip{0%{transform:translateX(0)}22%{transform:translateX(-24px) rotate(-9deg) scale(.9)}48%{transform:translateX(20px) rotate(7deg) scale(1.04)}65%{transform:translateX(-8px) rotate(-4deg)}100%{transform:translateY(-8px) rotate(-3deg) scale(1.04)}}
@keyframes impastoLaunch{0%{transform:scale(1)}30%{transform:translateY(-25px) rotate(-14deg) scale(.86)}65%{transform:translateY(6px) rotate(9deg) scale(1.04)}100%{transform:translateY(-10px) rotate(-4deg) scale(1.04)}}
@keyframes totoSign{0%{transform:rotate(0)}28%{transform:rotate(-8deg) scale(.96)}57%{transform:rotate(5deg) scale(1.04)}80%{transform:rotate(-3deg)}100%{transform:translateY(-9px) scale(1.045)}}
@keyframes impastoOrbit{0%,100%{transform:rotate(-5deg) scale(1)}50%{transform:rotate(7deg) scale(1.08)}}
@keyframes totoStars{0%,100%{transform:rotate(-8deg) scale(.85)}50%{transform:rotate(8deg) scale(1.12)}}
@media(max-width:760px){.logo-fx{display:none}.brand-logo-visual::before,.brand-logo-visual::after{display:none}}
@media(prefers-reduced-motion:reduce){.brand-logo-visual,.brand-logo-visual>img{animation:none!important;transition:none!important}.logo-fx,.brand-logo-visual::before,.brand-logo-visual::after{display:none}}