/* Copper surfaces sit inside the existing orange, tilted announcement band. */
@property --ribbon-border-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
.ribbon-block{--ribbon-panel-animation:none;--ribbon-button-animation:none}
.ribbon-block{display:inline-flex;align-items:center;min-width:0;max-width:100%}
.ribbon-block .ribbon-surface{
 --ribbon-surface-end:color-mix(in srgb,var(--ribbon-color-two,#a9440b) var(--ribbon-color-amount,75%),var(--ribbon-color-one,#171317));
 position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;
 min-height:44px;padding:6px 14px;border:var(--ribbon-neon-width,1.25px) solid color-mix(in srgb,var(--ribbon-neon-color,#ffd08a) 45%,transparent);
 border-radius:12px;color:#fff5e5;text-align:center;text-decoration:none;
 background-color:var(--ribbon-color-one,#171317);
 background-image:linear-gradient(var(--ribbon-gradient-angle,115deg),var(--ribbon-color-one,#171317),var(--ribbon-surface-end),var(--ribbon-color-one,#171317));
 background-size:260% 220%;background-position:0% 50%;
 text-shadow:0 1px 5px #0008;box-shadow:inset 0 1px 0 #fff1cc12,0 3px 12px #2910002e;
 animation-name:var(--ribbon-panel-animation),var(--ribbon-button-animation);
 animation-duration:var(--ribbon-panel-seconds,8s),var(--motion-button-seconds,4.5s);
 animation-direction:var(--ribbon-panel-direction,alternate),normal;
 animation-timing-function:ease-in-out,cubic-bezier(.37,0,.63,1);
 animation-iteration-count:infinite,infinite;transform-origin:center;
}
.release-platform-ribbon .ribbon-kicker.ribbon-surface,.motion-preview-ribbon [data-ribbon-block=label] .ribbon-surface{
 --ribbon-surface-end:color-mix(in srgb,var(--ribbon-color-two,#a9440b) calc(var(--ribbon-color-amount,75%)*.6),var(--ribbon-color-one,#171317));
}
.release-platform-ribbon .release-ribbon-title.ribbon-surface{letter-spacing:-.025em}
.release-platform-ribbon a.ribbon-surface:hover{text-decoration:none;filter:brightness(1.08)}
.release-platform-ribbon a.ribbon-surface:focus-visible{outline:3px solid #fff0cc;outline-offset:4px}
.ribbon-block[data-motion-panels=none] .ribbon-surface{background-size:100% 100%}
.ribbon-block[data-motion-panels=flow]{--ribbon-panel-animation:ribbon-gradient-flow}
.ribbon-block[data-motion-panels=diagonal]{--ribbon-panel-animation:ribbon-gradient-diagonal}
.ribbon-block[data-motion-panels=aurora]{--ribbon-panel-animation:ribbon-gradient-aurora}
.ribbon-block[data-motion-panels=aurora] .ribbon-surface{
 background-image:radial-gradient(ellipse at 15% 30%,var(--ribbon-surface-end),transparent 58%),radial-gradient(ellipse at 85% 70%,var(--ribbon-surface-end),var(--ribbon-color-one,#171317) 65%);
 background-size:180% 220%,200% 180%;
}
.ribbon-block[data-motion-panels=wave]{--ribbon-panel-animation:ribbon-gradient-wave}
.ribbon-block[data-motion-panels=wave] .ribbon-surface{
 background-image:repeating-linear-gradient(var(--ribbon-gradient-angle,115deg),var(--ribbon-color-one,#171317) 0%,var(--ribbon-surface-end) 20%,var(--ribbon-color-one,#171317) 40%);
 background-size:240% 240%;
}
.ribbon-block[data-motion-panels=spotlight]{--ribbon-panel-animation:ribbon-gradient-spotlight}
.ribbon-block[data-motion-panels=spotlight] .ribbon-surface{
 background-image:radial-gradient(ellipse at center,var(--ribbon-surface-end),var(--ribbon-color-one,#171317) 65%);background-size:220% 220%;
}
.ribbon-block[data-motion-panels=shimmer]{--ribbon-panel-animation:ribbon-gradient-flow}
.ribbon-block[data-motion-panels=shimmer] .ribbon-surface{
 background-image:linear-gradient(var(--ribbon-gradient-angle,115deg),var(--ribbon-color-one,#171317) 20%,var(--ribbon-surface-end) 45%,color-mix(in srgb,var(--ribbon-surface-end) 82%,#fff1ca) 50%,var(--ribbon-surface-end) 55%,var(--ribbon-color-one,#171317) 80%);
 background-size:320% 220%;
}
.ribbon-block[data-motion-panels=ember]{--ribbon-panel-animation:ribbon-gradient-ember}
.ribbon-block[data-motion-panels=ember] .ribbon-surface{
 background-image:linear-gradient(#17090588,#17090588),radial-gradient(ellipse at 15% 20%,color-mix(in srgb,var(--ribbon-surface-end) 60%,#ffe0a3),transparent 62%),linear-gradient(var(--ribbon-gradient-angle,120deg),var(--ribbon-color-one) 6%,var(--ribbon-surface-end) 35%,#ffcc7d 49%,var(--ribbon-surface-end) 64%,var(--ribbon-color-one) 94%);
 background-size:100% 100%,230% 180%,300% 220%;text-shadow:0 1px 5px #000b;
}
@keyframes ribbon-gradient-ember{0%{background-position:0 0,0% 25%,0% 50%}50%{background-position:0 0,80% 75%,55% 80%}100%{background-position:0 0,100% 20%,100% 40%}}
.ribbon-block[data-motion-buttons=breathe]{--ribbon-button-animation:motion-button-breathe}
.ribbon-block[data-motion-buttons=float]{--ribbon-button-animation:motion-button-float}
.ribbon-block[data-motion-buttons=glow]{--ribbon-button-animation:motion-button-glow}
.ribbon-block[data-motion-buttons=tilt]{--ribbon-button-animation:motion-button-tilt}
@keyframes ribbon-gradient-flow{from{background-position:0% 50%}to{background-position:100% 50%}}
@keyframes ribbon-gradient-diagonal{from{background-position:0% 0%}to{background-position:100% 100%}}
@keyframes ribbon-gradient-aurora{0%{background-position:0% 15%,100% 80%}50%{background-position:70% 90%,20% 10%}100%{background-position:100% 20%,0% 80%}}
@keyframes ribbon-gradient-wave{0%{background-position:0% 20%}50%{background-position:60% 80%}100%{background-position:100% 20%}}
@keyframes ribbon-gradient-spotlight{0%{background-position:0% 35%}50%{background-position:50% 80%}100%{background-position:100% 35%}}

/* Neon is on a separate decorative layer, so its speed never changes the gradient. */
.ribbon-block .ribbon-surface::before{
 content:'';position:absolute;inset:calc(-1*var(--ribbon-neon-width,1.25px));border-radius:inherit;pointer-events:none;
 border:var(--ribbon-neon-width,1.25px) solid var(--ribbon-neon-color,#ffd08a);
 box-shadow:0 0 calc(var(--ribbon-neon-glow,20px)*.35) var(--ribbon-neon-color,#ffd08a),0 0 var(--ribbon-neon-glow,20px) color-mix(in srgb,var(--ribbon-neon-color,#ffd08a) 65%,transparent);
 opacity:var(--ribbon-neon-opacity,.65);animation-duration:var(--ribbon-neon-seconds,5s);animation-timing-function:ease-in-out;animation-iteration-count:infinite;
}
.ribbon-block[data-motion-neon=none] .ribbon-surface::before{display:none}
.ribbon-block[data-motion-neon=breathe] .ribbon-surface::before{animation-name:ribbon-neon-breathe}
.ribbon-block[data-motion-neon=sweep] .ribbon-surface::before{animation-name:ribbon-neon-sweep}
.ribbon-block[data-motion-neon=radiant] .ribbon-surface::before{animation-name:ribbon-neon-radiant;box-shadow:0 0 calc(var(--ribbon-neon-glow,20px)*.35) var(--ribbon-neon-color,#ffd08a),0 0 var(--ribbon-neon-glow,20px) color-mix(in srgb,var(--ribbon-neon-color,#ffd08a) 75%,transparent),inset 0 0 calc(var(--ribbon-neon-glow,20px)*.3) color-mix(in srgb,var(--ribbon-neon-color,#ffd08a) 35%,transparent)}
:is(.ribbon-block[data-motion-neon=orbit],.ribbon-block[data-motion-neon=comet]) .ribbon-surface::before{
 border:0;padding:var(--ribbon-neon-width,1.25px);
 background:conic-gradient(from var(--ribbon-border-angle),transparent 30%,var(--ribbon-neon-color,#ffd08a) 65%,#fff1ce 73%,transparent 83%);
 -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;
 mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;
 box-shadow:none;filter:drop-shadow(0 0 4px var(--ribbon-neon-color,#ffd08a));animation-name:ribbon-neon-orbit;animation-timing-function:linear;
}
.ribbon-block[data-motion-neon=comet] .ribbon-surface::before{
 background:conic-gradient(from var(--ribbon-border-angle),transparent 0% 15%,var(--ribbon-neon-color,#ffd08a) 35%,#fff1ce 40%,transparent 45% 65%,var(--ribbon-neon-color,#ffd08a) 85%,#fff1ce 90%,transparent 95%);
}
@keyframes ribbon-neon-breathe{0%,100%{opacity:calc(var(--ribbon-neon-opacity,.65)*.45)}50%{opacity:var(--ribbon-neon-opacity,.65)}}
@keyframes ribbon-neon-sweep{0%,20%,80%,100%{opacity:calc(var(--ribbon-neon-opacity,.65)*.2)}50%{opacity:var(--ribbon-neon-opacity,.65)}}
@keyframes ribbon-neon-radiant{0%,100%{opacity:calc(var(--ribbon-neon-opacity,.96)*.78)}50%{opacity:var(--ribbon-neon-opacity,.96)}}
@keyframes ribbon-neon-orbit{from{--ribbon-border-angle:0deg}to{--ribbon-border-angle:360deg}}
.release-platform-ribbon.motion-offscreen .ribbon-surface,.release-platform-ribbon.motion-offscreen .ribbon-surface::before,
.release-platform-ribbon.motion-offscreen .ribbon-scroll,body.motion-page-hidden .ribbon-surface,body.motion-page-hidden .ribbon-surface::before,
body.motion-page-hidden .release-platform-ribbon .ribbon-scroll,.ribbon-surface:focus-visible,.ribbon-surface:focus-visible::before{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
 .ribbon-surface,.ribbon-surface::before{animation:none!important;scale:1!important;translate:0 0!important;rotate:0deg!important;background-position:50% 50%}
}