/* Adapted from Hyperiux Vault BeamBorder, colorful rotate recipe. */
@property --solaro-rim-angle{syntax:"<angle>";initial-value:0deg;inherits:true}
.solaro-beam{position:relative;isolation:isolate;overflow:hidden;border-radius:999px;--beam-duration:3.3s;--beam-width:2px;--beam-strength:1}
.solaro-beam>.beam-fx{position:absolute;inset:0;border-radius:inherit;pointer-events:none;animation:solaro-rim-spin var(--beam-duration) linear infinite}
.beam-fx::after,.beam-fx::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.beam-fx::after{padding:var(--beam-width);background:conic-gradient(from var(--solaro-rim-angle),transparent 0% 54%,rgba(255,255,255,.1) 57%,rgba(255,255,255,.3) 60%,rgba(255,255,255,.6) 63%,rgba(255,255,255,.75) 66%,rgba(255,255,255,.6) 69%,rgba(255,255,255,.3) 72%,rgba(255,255,255,.1) 75%,transparent 78% 100%),radial-gradient(ellipse 130px 65px at 12% 1%,rgb(40,140,255),transparent),radial-gradient(ellipse 150px 75px at 33% 0%,rgb(255,50,100),transparent),radial-gradient(ellipse 46px 130px at 2.1% 68.3%,rgb(50,200,80),transparent),radial-gradient(ellipse 24px 68px at 2.1% 68.3%,rgb(30,185,170),transparent),radial-gradient(ellipse 280px 56px at 74.4% 100%,rgb(100,70,255),transparent),radial-gradient(ellipse 150px 50px at 55% 100%,rgb(40,140,255),transparent),radial-gradient(ellipse 150px 82px at 93.9% 1%,rgb(255,120,40),transparent),radial-gradient(ellipse 30px 80px at 100% 27.1%,rgb(240,50,180),transparent),radial-gradient(ellipse 56px 92px at 100% 27.1%,rgb(180,40,240),transparent);-webkit-mask:conic-gradient(from var(--solaro-rim-angle),transparent 0% 30%,rgba(255,255,255,.1) 36%,rgba(255,255,255,.35) 44%,white 52% 80%,rgba(255,255,255,.35) 86%,rgba(255,255,255,.1) 92%,transparent 95% 100%),linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:source-in,xor;mask:conic-gradient(from var(--solaro-rim-angle),transparent 0% 30%,rgba(255,255,255,.1) 36%,rgba(255,255,255,.35) 44%,white 52% 80%,rgba(255,255,255,.35) 86%,rgba(255,255,255,.1) 92%,transparent 95% 100%),linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:intersect,exclude;opacity:var(--beam-strength);animation:solaro-rim-hue 12s ease-in-out infinite;z-index:2}
.beam-fx::before{background:radial-gradient(ellipse 117px 58px at 12% 1%,rgba(40,140,255,.45),transparent),radial-gradient(ellipse 135px 68px at 33% 0%,rgba(255,50,100,.45),transparent),radial-gradient(ellipse 41px 117px at 2.1% 68.3%,rgba(50,200,80,.45),transparent),radial-gradient(ellipse 22px 61px at 2.1% 68.3%,rgba(30,185,170,.45),transparent),radial-gradient(ellipse 252px 50px at 74.4% 100%,rgba(100,70,255,.45),transparent),radial-gradient(ellipse 135px 45px at 55% 100%,rgba(40,140,255,.45),transparent),radial-gradient(ellipse 135px 74px at 93.9% 1%,rgba(255,120,40,.45),transparent),radial-gradient(ellipse 27px 72px at 100% 27.1%,rgba(240,50,180,.45),transparent),radial-gradient(ellipse 50px 83px at 100% 27.1%,rgba(180,40,240,.45),transparent);mask-image:conic-gradient(from var(--solaro-rim-angle),transparent 0% 30%,rgba(255,255,255,.1) 36%,rgba(255,255,255,.35) 44%,white 52% 80%,rgba(255,255,255,.35) 86%,rgba(255,255,255,.1) 92%,transparent 95% 100%);opacity:calc(.42 * var(--beam-strength));animation:solaro-rim-hue 12s ease-in-out infinite;z-index:1}
.beam-fx>.beam-glow{position:absolute;inset:0;border-radius:inherit;padding:var(--beam-width);background:conic-gradient(from var(--solaro-rim-angle),transparent 0% 54%,rgba(255,255,255,.1) 57%,rgba(255,255,255,.3) 60%,rgba(255,255,255,.6) 63%,rgba(255,255,255,.75) 66%,rgba(255,255,255,.6) 69%,rgba(255,255,255,.3) 72%,rgba(255,255,255,.1) 75%,transparent 78% 100%);-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;filter:blur(8px);opacity:.38;pointer-events:none}
.solaro-beam>.beam-label{position:relative;z-index:3}
.hero-slide .hero-copy a.hero-beam{background:#212121;color:white;border:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);text-decoration:none}
.hero-slide .hero-copy a.hero-beam:hover{background:#292929;color:#fff}
.hero-slide .hero-copy a.hero-beam:focus-visible{outline:2px solid white;outline-offset:5px}
@keyframes solaro-rim-spin{to{--solaro-rim-angle:360deg}}
@keyframes solaro-rim-hue{0%,100%{filter:hue-rotate(-30deg) brightness(1.3) saturate(1.2)}50%{filter:hue-rotate(30deg) brightness(1.3) saturate(1.2)}}
.solaro-beam[data-paused] .beam-fx,.solaro-beam[data-paused] .beam-fx::before,.solaro-beam[data-paused] .beam-fx::after{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.solaro-beam .beam-fx,.solaro-beam .beam-fx::before,.solaro-beam .beam-fx::after{animation:none}}

:is(#find-your-frame,#find-your-frame-halftone) .frame-help button.quiz-beam{position:relative;isolation:isolate;overflow:hidden;background:#212121;color:#fff;border-radius:50px;padding:14px 24px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
:is(#find-your-frame,#find-your-frame-halftone) .frame-help button.quiz-beam:hover{background:#292929;text-decoration:none}
:is(#find-your-frame,#find-your-frame-halftone) .frame-help button.quiz-beam>.beam-label{display:inline-flex;align-items:center;gap:10px;position:relative;z-index:3;margin:0}
:is(#find-your-frame,#find-your-frame-halftone) .frame-help button.quiz-beam>.beam-fx{display:block;position:absolute;inset:0;margin:0;border-radius:inherit;pointer-events:none}
:is(#find-your-frame,#find-your-frame-halftone) .frame-help button.quiz-beam .beam-glow{display:block;margin:0}
:is(#find-your-frame,#find-your-frame-halftone) .frame-help button.quiz-beam:focus-visible{outline:2px solid #111;outline-offset:5px}