/* Adapted from ThreeUI Community (MIT), revision 68802d5428071ada5c20db8094b1649e6bb770ed.
   Sources: spinning-border-button.html and gradient-beam-cta.html.
   Changes: existing portal links/cards, orange palette, interaction-only motion,
   no Tailwind dependency, no demo layout scripts. See threeui-effects-sources.json. */
:is(.feature,.lab-banner){position:relative;isolation:isolate;transition:box-shadow .3s,border-color .3s,translate .3s}
.feature>.cover,.feature>.feature-body{position:relative;z-index:1}
:is(.feature,.lab-banner,#home-music,#home-music .music-track)>.oc-effect-edge{position:absolute;inset:0;z-index:2;pointer-events:none;border:1px solid transparent;border-radius:inherit;overflow:hidden;opacity:0;transition:opacity .3s;mask:linear-gradient(#fff 0 0) padding-box,linear-gradient(#fff 0 0);mask-composite:exclude}
.oc-effect-edge:before{content:"";position:absolute;inset:-100%;background:conic-gradient(from 90deg at 50% 50%,transparent 0%,transparent 75%,#f06a28 100%);animation:oc-beam-spin 3s linear infinite;animation-play-state:paused}
:is(.feature .entry,.lab-button).oc-beam-cta{position:relative;isolation:isolate;overflow:hidden;min-height:49px;padding:13px 17px;border-radius:9px;color:#f5f5ef;gap:14px;transition:box-shadow .3s,translate .3s}
.oc-beam-cta>.oc-cta-edge{position:absolute;inset:0;z-index:-2;overflow:hidden;border-radius:inherit;background:#ffffff26;pointer-events:none}
.oc-cta-edge:before{content:"";position:absolute;inset:-350%;background:conic-gradient(from 0deg,transparent 0 300deg,#f06a28 360deg);animation:oc-beam-spin 3s linear infinite;animation-play-state:paused;opacity:0;transition:opacity .3s}
.oc-beam-cta>.oc-cta-surface{position:absolute;inset:1px;z-index:-1;border-radius:8px;overflow:hidden;background:linear-gradient(#22262d,#101216);pointer-events:none}
.oc-cta-surface:before{content:"";position:absolute;inset:0;opacity:.12;background-image:radial-gradient(#ffffff99 1px,transparent 1px);background-size:12px 12px;animation:oc-dots-move 8s linear infinite;animation-play-state:paused}
.oc-cta-surface:after{content:"";position:absolute;bottom:-15px;left:17%;width:66%;height:80%;background:#f06a2812;filter:blur(18px);transition:background .3s}
.oc-beam-cta b{transition:transform .3s;color:var(--orange)}
@keyframes oc-beam-spin{to{transform:rotate(360deg)}}
@keyframes oc-dots-move{from{background-position:0 0}to{background-position:24px 24px}}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
:is(.feature,.lab-banner):hover{translate:0 -3px;border-color:#f06a2855;box-shadow:0 12px 30px #0003,0 0 24px -12px #f06a2855}
:is(.feature,.lab-banner):hover>.oc-effect-edge{opacity:.8}:is(.feature,.lab-banner):hover>.oc-effect-edge:before{animation-play-state:running}
.oc-beam-cta:hover{translate:0 -2px;box-shadow:0 0 32px -12px #f06a2880}
.oc-beam-cta:hover .oc-cta-edge:before{opacity:1;animation-play-state:running}
.oc-beam-cta:hover .oc-cta-surface:before{animation-play-state:running}
.oc-beam-cta:hover .oc-cta-surface:after{background:#f06a283d}
.oc-beam-cta:hover b{transform:translate(3px,-2px)}
}
.oc-beam-cta:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
@media(prefers-reduced-motion:reduce){:is(.feature,.lab-banner),.oc-beam-cta,.oc-beam-cta b{transition:none!important;translate:none!important}.oc-effect-edge:before,.oc-cta-edge:before,.oc-cta-surface:before{animation:none!important}}
@media(hover:none),(pointer:coarse){.oc-effect-edge:before,.oc-cta-edge:before,.oc-cta-surface:before{animation:none}.cover:hover>img,.medical-cover:hover .medical-cover-art{transform:none}}
html.oc-effects-paused .oc-effect-edge:before,html.oc-effects-paused .oc-cta-edge:before,html.oc-effects-paused .oc-cta-surface:before{animation-play-state:paused!important}

.lab-banner{border:1px solid transparent}
.lab-banner>div,.lab-banner>.lab-button{position:relative;z-index:1}
.lab-banner .lab-button.oc-beam-cta{border-radius:30px;padding:16px 23px;gap:24px;min-height:52px}
.lab-banner .oc-cta-surface{border-radius:29px}

/* Home music is a separate panel, not one of the four feature cards. */
#home-music,#home-music .music-track{position:relative;isolation:isolate}
#home-music{transition:border-color .3s,box-shadow .3s}
#home-music .music-track{transition:background .2s,border-color .2s,color .2s,box-shadow .2s}
#home-music .music-track.is-selected{border-color:#f06a2870;box-shadow:inset 3px 0 #f06a28}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
#home-music:hover{border-color:#f06a2855;box-shadow:0 12px 32px #0002,0 0 30px -12px #f06a2860}
#home-music:hover>.oc-effect-edge,#home-music .music-track:hover>.oc-effect-edge{opacity:.9}
#home-music:hover>.oc-effect-edge:before,#home-music .music-track:hover>.oc-effect-edge:before{animation-play-state:running}
#home-music .music-track:hover{background:#f06a2814;border-color:#f06a2880;box-shadow:0 0 14px -6px #f06a2860;color:#fff}
}
@media(prefers-reduced-motion:reduce){#home-music,#home-music .music-track{transition:none}}

/* Match the SES subsite border exactly: rotate the gradient angle, not its box. */
@property --oc-music-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes oc-music-orbit{to{--oc-music-angle:360deg}}
#home-music>.oc-effect-edge.oc-effect-edge,#home-music .music-track>.oc-effect-edge{border-width:2px;z-index:5;background:conic-gradient(from var(--oc-music-angle),transparent 0 65%,#ed7135 85%,transparent 100%) border-box;animation:oc-music-orbit 3s linear infinite paused}
#home-music>.oc-effect-edge:before,#home-music .music-track>.oc-effect-edge:before{content:none}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){#home-music:hover>.oc-effect-edge,#home-music .music-track:hover>.oc-effect-edge{opacity:.9;animation-play-state:running}}
html.oc-effects-paused #home-music .oc-effect-edge{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce),(hover:none),(pointer:coarse){#home-music .oc-effect-edge{animation:none}}

/* Consistent visible borders across every homepage entry and music surface. */
@property --oc-clear-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes oc-clear-orbit{to{--oc-clear-angle:360deg}}
:is(.feature,.lab-banner,#home-music,#home-music .music-track)>.oc-effect-edge{border-width:3px;background:conic-gradient(from var(--oc-clear-angle),transparent 0 65%,#ed7135 85%,transparent 100%) border-box;animation:oc-clear-orbit 3s linear infinite paused}
:is(.feature,.lab-banner,#home-music,#home-music .music-track)>.oc-effect-edge:before{content:none}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){:is(.feature,.lab-banner,#home-music,#home-music .music-track):hover>.oc-effect-edge{opacity:1;animation-play-state:running}}
html.oc-effects-paused .oc-effect-edge{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce),(hover:none),(pointer:coarse){:is(.feature,.lab-banner,#home-music,#home-music .music-track)>.oc-effect-edge{animation:none}}