/* Original logo geometry with the paper removed locally into a PNG alpha channel. */
.official-logo{display:block;object-fit:contain;width:100%;height:auto;aspect-ratio:1;max-width:none;border-radius:0}
header .brand{display:block;width:76px;flex:0 0 76px;transform:rotate(-3deg);box-shadow:none;border-radius:0}
footer .brand{display:block;width:92px;flex:0 0 92px;transform:none}
.paper-brand{align-items:center;flex-shrink:0}
.paper-brand .official-logo{width:178px;box-shadow:none;transform:rotate(-3deg)}
.paper-brand small{text-align:center;line-height:1.5;max-width:210px}
@media(max-width:760px){header .brand{width:61px;flex-basis:61px}footer .brand{width:78px;flex-basis:78px}.paper-brand .official-logo{width:135px}.paper-brand small{max-width:145px;font-size:6px}.sheet-heading .sheet-face{display:none}.sheet-heading{gap:18px}}
@media(max-width:360px){.paper-brand .official-logo{width:119px}.paper-brand small{max-width:130px;font-size:5px}}

/* The supplied brand replaces the placeholder taco in both animated placements. */
.brand-mascot{object-fit:contain;aspect-ratio:1;filter:none}
.hero-art .brand-mascot{filter:drop-shadow(2px 4px 0 #30201518)}
.poster-mascot .brand-mascot{filter:brightness(1.65);object-fit:contain}
/* Clip the original PNG into moving head and stationary lettering, without redrawing it. */
.hero-art .brand-mascot,.poster-mascot .brand-mascot{position:relative;animation:none!important;overflow:visible}
.brand-face,.brand-wordmark{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.brand-face{clip-path:inset(0 0 23% 0);transform-origin:50% 70%;animation:brand-nod 5.6s ease-in-out infinite}
.brand-face>img{display:block;width:100%;height:100%;object-fit:contain}
.brand-wordmark{clip-path:inset(77% 0 0 0)}
.brand-glints{position:absolute;inset:0;width:100%;height:100%;fill:#fff6cf;overflow:visible;pointer-events:none}
.brand-glints path{opacity:0;transform-box:fill-box;transform-origin:center;animation:brand-glasses-shine 5.6s ease-in-out infinite}
.brand-glints .glint-two{animation-delay:.23s}
.hero-art.dancing .brand-face{animation:brand-hello 1.2s ease-in-out both}
.hero-art.dancing .brand-glints path{animation:brand-glasses-shine 1.2s ease-in-out both}
.brand-greeting{position:absolute;top:5%;right:-4%;z-index:6;padding:15px 20px;border:2px solid var(--ink);border-radius:50% 50% 50% 7%;background:var(--paper);color:var(--ink);font:800 21px 'Barlow Condensed',Impact,sans-serif;box-shadow:3px 4px 0 #0002;opacity:0;transform:translateY(12px) scale(.7) rotate(8deg);pointer-events:none}
.hero-art.dancing .brand-greeting{animation:brand-speech 1.9s both}
.poster-mascot .brand-mascot{height:100%;width:auto;max-width:100%;aspect-ratio:1;margin:auto}
@keyframes brand-nod{0%,35%,100%{transform:translateY(0) rotate(-2deg)}45%{transform:translateY(-7px) rotate(6deg)}55%{transform:translateY(1px) rotate(-4deg)}65%,80%{transform:translateY(-4px) rotate(2deg)}}
@keyframes brand-hello{0%,100%{transform:translateY(0) rotate(0)}22%{transform:translateY(-15px) rotate(-11deg) scale(1.04)}45%{transform:translateY(-4px) rotate(10deg)}65%{transform:translateY(-10px) rotate(-6deg)}85%{transform:translateY(-2px) rotate(3deg)}}
@keyframes brand-glasses-shine{0%,32%,75%,100%{opacity:0;scale:.2;rotate:-30deg}43%,55%{opacity:1;scale:1;rotate:0deg}65%{opacity:0;scale:1.3;rotate:30deg}}
@keyframes brand-speech{0%,100%{opacity:0;transform:translateY(12px) scale(.7) rotate(8deg)}15%,83%{opacity:1;transform:translateY(0) scale(1) rotate(8deg)}}
@media(max-width:760px){.brand-greeting{font-size:17px;padding:11px 15px;right:-1%;top:4%}}
body.paused .brand-greeting{display:none}
@media(prefers-reduced-motion:reduce){.brand-greeting{display:none}.brand-face{transform:none}}
/* Give the thin original strokes enough contrast against the animated scenery. */
.hero-art:has(.brand-mascot) .sunburst{background:var(--paper);opacity:1}
.hero-art .brand-mascot{filter:brightness(.6)}
body:is([data-theme=movida],[data-theme=cantina],[data-theme=roja]) .hero-art:has(.brand-mascot) .sunburst{background:var(--ink);opacity:.94}
body:is([data-theme=movida],[data-theme=cantina],[data-theme=roja]) .hero-art .brand-mascot{filter:brightness(1.8)}
/* The hero already names the brand in its backdrop; show only the feline here. */
.hero-art .brand-wordmark{display:none}
/* Vector contours stay sharp at device resolution; no raster brightness filter. */
.hero-art .brand-mascot,.poster-mascot .brand-mascot,body:is([data-theme=movida],[data-theme=cantina],[data-theme=roja]) .hero-art .brand-mascot{filter:none}
.brand-face{--feline-ink:#65501b;clip-path:none;transform-origin:50% 64%;animation:brand-curious 5.4s ease-in-out infinite;rotate:calc(var(--look-x,0)*6deg);translate:calc(var(--look-x,0)*4px) calc(var(--look-y,0)*3px)}
.brand-face>img{opacity:0}
.brand-face:before{content:'';position:absolute;inset:0;background:var(--feline-ink);-webkit-mask:url('assets/michi-felino-vector.svg') center/contain no-repeat;mask:url('assets/michi-felino-vector.svg') center/contain no-repeat}
body:is([data-theme=movida],[data-theme=cantina],[data-theme=roja]) .brand-face,.poster-mascot .brand-face{--feline-ink:#f3cf7a}
.brand-emote{position:absolute;right:12%;top:18%;font:900 40px 'Barlow Condensed',Impact,sans-serif;color:var(--yellow);-webkit-text-stroke:1px var(--ink);opacity:0;pointer-events:none;transform:rotate(15deg)}
.hero-art.dancing .brand-emote{animation:brand-exclaim 1.7s both}
.hero-art.dancing[data-reaction=saludo] .brand-face{animation:brand-greet-big 1.7s ease-in-out both}
.hero-art.dancing[data-reaction=picaro] .brand-face{animation:brand-cheeky 1.7s ease-in-out both}
.hero-art.dancing[data-reaction=fiesta] .brand-face{animation:brand-party 1.7s ease-in-out both}
@keyframes brand-curious{0%,25%,100%{transform:rotate(-3deg) translateY(0)}38%{transform:rotate(8deg) translateY(-8px)}48%{transform:rotate(8deg) translateY(-8px)}61%{transform:rotate(-5deg) translateY(0)}75%,86%{transform:rotate(2deg) translateY(-4px)}}
@keyframes brand-greet-big{0%,100%{transform:none}20%{transform:translateY(-18px) rotate(-12deg) scale(1.05)}43%{transform:translateY(-4px) rotate(13deg)}63%{transform:translateY(-10px) rotate(-8deg)}83%{transform:rotate(4deg)}}
@keyframes brand-cheeky{0%,100%{transform:none}25%,45%{transform:translate(8px,-5px) rotate(15deg) scale(1.03)}57%{transform:translate(8px,-9px) rotate(18deg)}75%{transform:translate(-3px,0) rotate(-5deg)}}
@keyframes brand-party{0%,100%{transform:none}18%{transform:translateY(-23px) rotate(-10deg)}35%{transform:translateY(2px) rotate(9deg) scale(1.02,.98)}53%{transform:translateY(-19px) rotate(-8deg)}70%{transform:translateY(2px) rotate(7deg)}85%{transform:translateY(-8px)}}
@keyframes brand-exclaim{0%,100%{opacity:0;translate:0 10px;scale:.7}20%,75%{opacity:1;translate:0 -5px;scale:1}45%{rotate:-12deg}}
body.paused .brand-face{rotate:0deg;translate:0 0}body.paused .brand-emote{display:none}
@media(prefers-reduced-motion:reduce){.brand-face{rotate:0deg;translate:0 0}.brand-emote{display:none}}
/* External SVG images also render when opening the menu directly from disk. */
.brand-face:before{display:none}
.brand-face>img{opacity:1}
.brand-face>.brand-face-light{display:none;position:absolute;inset:0}
body:is([data-theme=movida],[data-theme=cantina],[data-theme=roja]) .brand-face>img:first-child,.poster-mascot .brand-face>img:first-child{opacity:0}
body:is([data-theme=movida],[data-theme=cantina],[data-theme=roja]) .brand-face>.brand-face-light,.poster-mascot .brand-face>.brand-face-light{display:block}

/* Proposal 03 uses an unfilled avatar; the other proposals retain white fill. */
.brand-face>.brand-face-outline{display:none;position:absolute;inset:0}
body[data-theme=cantina] .brand-face>.brand-face-light{display:none}
body[data-theme=cantina] .brand-face>.brand-face-outline{display:block}