/* Adapted from Eldora UI AnimatedShinyButton (MIT).
   Copyright (c) Mudunuri Bhaskara Karthikeya Varma.
   Full license: /assets/eldora-ui-LICENSE.txt */
@property --dx-shiny-angle{syntax:"<angle>";initial-value:0deg;inherits:false}
@property --dx-shiny-offset{syntax:"<angle>";initial-value:0deg;inherits:false}
@property --dx-shiny-percent{syntax:"<percentage>";initial-value:5%;inherits:false}
@property --dx-shiny-flare{syntax:"<color>";initial-value:#fff4ff;inherits:false}
.button.dx-shiny{
 --dx-shiny-bg:#1b1225;--dx-shiny-highlight:#c599ff;--dx-shiny-warm:#ffac79;
 --dx-shiny-duration:4s;isolation:isolate;position:relative;overflow:hidden;
 border:1px solid transparent;color:#fff8ff;
 background:linear-gradient(125deg,#291b32,var(--dx-shiny-bg) 62%) padding-box,
 conic-gradient(from calc(var(--dx-shiny-angle) - var(--dx-shiny-offset)),
 transparent,var(--dx-shiny-warm) var(--dx-shiny-percent),
 var(--dx-shiny-flare) calc(var(--dx-shiny-percent)*2),
 var(--dx-shiny-highlight) calc(var(--dx-shiny-percent)*3),
 transparent calc(var(--dx-shiny-percent)*4)) border-box;
 box-shadow:inset 0 0 0 1px #b48ac126,0 5px 24px #0003;
 animation:dx-shiny-orbit var(--dx-shiny-duration) linear infinite;
 transition:--dx-shiny-offset .8s cubic-bezier(.25,1,.5,1),--dx-shiny-percent .8s cubic-bezier(.25,1,.5,1),--dx-shiny-flare .8s,box-shadow .3s,transform .2s;
}
.button.dx-shiny::before,.button.dx-shiny::after{
 content:"";position:absolute;pointer-events:none;z-index:-1;left:50%;top:50%;translate:-50% -50%;border-radius:inherit;
}
.button.dx-shiny::before{
 width:calc(100% - 6px);height:calc(100% - 6px);
 background:radial-gradient(circle at 2px 2px,#fff .5px,transparent .8px);background-size:4px 4px;
 mask-image:conic-gradient(from calc(var(--dx-shiny-angle) + 45deg),#000,transparent 10% 90%,#000);
 -webkit-mask-image:conic-gradient(from calc(var(--dx-shiny-angle) + 45deg),#000,transparent 10% 90%,#000);
 opacity:.28;animation:dx-shiny-orbit var(--dx-shiny-duration) linear infinite;
}
.button.dx-shiny::after{
 width:100%;aspect-ratio:1;
 background:linear-gradient(-50deg,transparent 30%,#ca9fff66 48%,#ffb08233 53%,transparent 70%);
 mask-image:radial-gradient(circle at bottom,transparent 40%,#000);
 -webkit-mask-image:radial-gradient(circle at bottom,transparent 40%,#000);
 opacity:.6;animation:dx-shiny-sweep 6s linear infinite,dx-shiny-breathe 6s ease-in-out infinite;
}
.button.dx-shiny:is(:hover,:focus-visible){
 --dx-shiny-percent:20%;--dx-shiny-offset:95deg;--dx-shiny-flare:#ffbf96;
 color:#fff8ff;box-shadow:inset 0 0 0 1px #e1b1ff38,0 8px 30px #b676ff26;
}
.button.dx-shiny:focus-visible{outline:2px solid #e5bbff;outline-offset:5px}
@keyframes dx-shiny-orbit{to{--dx-shiny-angle:360deg}}
@keyframes dx-shiny-sweep{to{rotate:360deg}}
@keyframes dx-shiny-breathe{0%,100%{scale:1;opacity:.4}50%{scale:1.18;opacity:.7}}
@media(prefers-reduced-motion:reduce){
 .button.dx-shiny,.button.dx-shiny::before,.button.dx-shiny::after{animation:none!important;transition:none!important;--dx-shiny-angle:75deg}
 .button.dx-shiny:hover{transform:none}
 .button.dx-shiny::after{opacity:.25}
}

/* A slower version of the CTA shine, contained in the header's own layers.
   Keep header overflow visible so the expanded navigation can extend below it. */
header.dx-shiny-header{isolation:isolate}
header.dx-shiny-header::before{
 content:"";position:absolute;inset:-1px;padding:1px;border-radius:inherit;
 pointer-events:none;z-index:-1;
 background:conic-gradient(from var(--dx-shiny-angle),transparent 0% 65%,#ffac7966 73%,#fff4ffc9 78%,#c599ff99 83%,transparent 91%);
 mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
 -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
 mask-composite:exclude;-webkit-mask-composite:xor;
 animation:dx-shiny-orbit 16s linear infinite;
}
header.dx-shiny-header::after{
 content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
 background:linear-gradient(110deg,transparent 35%,#c599ff0b 44%,#fff4ff13 49%,#ffac790d 54%,transparent 63%);
 background-size:300% 100%;background-repeat:no-repeat;
 animation:dx-header-shine 24s linear infinite;
}
@keyframes dx-header-shine{from{background-position:150% 0}to{background-position:-150% 0}}
@media(prefers-reduced-motion:reduce){
 header.dx-shiny-header::before,header.dx-shiny-header::after{animation:none!important}
 header.dx-shiny-header::before{--dx-shiny-angle:75deg;opacity:.4}
 header.dx-shiny-header::after{opacity:.3}
}
