/* The original metallic mark remains visible. Light follows its alpha mask. */
.hero-logo-motion{width:min(760px,72vw);max-width:100%;margin:0 auto 22px}
.hero-logo-motion .hero-logo{width:100%;max-width:none;margin:0;filter:drop-shadow(0 3px 8px #0009)}
.hero-logo-effects{position:relative;isolation:isolate;--logo-color-one:#9eeaff;--logo-color-two:#a58aff;--logo-seconds:6s;--logo-strength:.45;--logo-tint:.35;--logo-glow:18px;--logo-angle:115deg;--logo-direction:alternate}
.hero-logo-color{position:absolute;inset:0;pointer-events:none;opacity:var(--logo-tint);mix-blend-mode:screen;-webkit-mask-image:var(--logo-mask);mask-image:var(--logo-mask);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;background:linear-gradient(var(--logo-angle),var(--logo-color-one),var(--logo-color-two),var(--logo-color-one));background-size:260% 180%;background-position:0% 50%;animation:logo-color-flow var(--logo-seconds) ease-in-out infinite var(--logo-direction)}
.hero-logo-effects:is([data-logo-effect=none],[data-logo-effect=glow],[data-logo-effect=neon]) .hero-logo-color{display:none}
.hero-logo-effects:not([data-logo-effect=none]){filter:drop-shadow(0 0 2px color-mix(in srgb,var(--logo-color-one) calc(var(--logo-strength)*75%),transparent)) drop-shadow(0 0 var(--logo-glow) color-mix(in srgb,var(--logo-color-one) calc(var(--logo-strength)*65%),transparent))}
.hero-logo-effects[data-logo-effect=glow]{animation:logo-soft-glow var(--logo-seconds) ease-in-out infinite}
.hero-logo-effects[data-logo-effect=neon]{animation:logo-neon-glow var(--logo-seconds) ease-in-out infinite var(--logo-direction)}
.hero-logo-effects[data-logo-effect=aurora] .hero-logo-color{background-image:radial-gradient(ellipse at 20% 20%,var(--logo-color-one),transparent 60%),radial-gradient(ellipse at 80% 80%,var(--logo-color-two),transparent 60%),linear-gradient(var(--logo-angle),var(--logo-color-two),var(--logo-color-one));background-size:220% 200%,200% 220%,260% 180%;animation-name:logo-aurora-flow}
.hero-logo-effects[data-logo-effect=shimmer] .hero-logo-color{opacity:var(--logo-strength);background-image:linear-gradient(110deg,transparent 35%,color-mix(in srgb,var(--logo-color-one) 45%,transparent) 43%,#fff 49%,var(--logo-color-two) 52%,transparent 60%);background-size:300% 100%;animation-name:logo-metal-shimmer;animation-direction:normal}
@keyframes logo-color-flow{from{background-position:0% 50%}to{background-position:100% 50%}}
@keyframes logo-aurora-flow{0%{background-position:0% 20%,100% 80%,0% 50%}50%{background-position:80% 70%,20% 20%,50% 80%}100%{background-position:100% 10%,0% 90%,100% 50%}}
@keyframes logo-metal-shimmer{0%,12%{background-position:140% 50%}70%,100%{background-position:-40% 50%}}
@keyframes logo-soft-glow{0%,100%{filter:drop-shadow(0 0 2px color-mix(in srgb,var(--logo-color-one) calc(var(--logo-strength)*45%),transparent)) drop-shadow(0 0 calc(var(--logo-glow)*.55) color-mix(in srgb,var(--logo-color-one) calc(var(--logo-strength)*35%),transparent))}50%{filter:drop-shadow(0 0 3px color-mix(in srgb,var(--logo-color-one) calc(var(--logo-strength)*90%),transparent)) drop-shadow(0 0 var(--logo-glow) color-mix(in srgb,var(--logo-color-one) calc(var(--logo-strength)*80%),transparent))}}
@keyframes logo-neon-glow{from{filter:drop-shadow(0 0 2px color-mix(in srgb,var(--logo-color-one) calc(var(--logo-strength)*100%),transparent)) drop-shadow(0 0 var(--logo-glow) color-mix(in srgb,var(--logo-color-one) calc(var(--logo-strength)*90%),transparent))}to{filter:drop-shadow(0 0 2px color-mix(in srgb,var(--logo-color-two) calc(var(--logo-strength)*100%),transparent)) drop-shadow(0 0 var(--logo-glow) color-mix(in srgb,var(--logo-color-two) calc(var(--logo-strength)*90%),transparent))}}
#inicio.motion-offscreen :is(.hero-logo-effects,.hero-logo-color),body.motion-page-hidden :is(.hero-logo-effects,.hero-logo-color){animation-play-state:paused}
@media(max-width:900px){.hero-logo-motion{width:min(660px,87vw)}}
@media(max-width:600px){.hero-logo-motion{width:100%;max-width:470px;margin-bottom:18px}.promotion-active .hero-logo-motion{max-width:90%}}
@media(max-height:720px) and (min-width:601px){.hero-logo-motion{width:min(640px,68vw);margin-bottom:15px}}
@media(prefers-reduced-motion:reduce){.hero-logo-effects,.hero-logo-color{animation:none!important;background-position:50% 50%}}