.hero-art{--pointer-x:50%;--pointer-y:40%;--tilt-x:0deg;--tilt-y:0deg;perspective:1100px;isolation:isolate}
.hero-art .art-panel{position:relative;isolation:isolate;transform:rotateY(-12deg) rotateZ(4deg);transition:transform .65s cubic-bezier(.2,.7,.2,1),box-shadow .5s,border-color .5s;box-shadow:0 25px 100px #0008,inset 0 1px #ffffff26;outline:none}
.hero-art .art-panel::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;background:radial-gradient(260px circle at var(--pointer-x) var(--pointer-y),#6eeeff26,transparent 65%),linear-gradient(125deg,transparent 25%,#ac88ff0d,transparent 75%);opacity:0;transition:opacity .5s}
.hero-art .art-panel::after{content:"";position:absolute;inset:-50% -100%;z-index:3;pointer-events:none;background:linear-gradient(110deg,transparent 40%,#9ef0ff08 46%,#ffffff26 50%,#d3a6ff0c 54%,transparent 60%);transform:translateX(-38%);opacity:0}
.hero-art .monogram{overflow:visible;isolation:isolate;transform:translate(0,0) scale(1);transition:transform .6s cubic-bezier(.2,.7,.2,1),filter .6s;filter:drop-shadow(0 5px 12px #0004)}
.hero-art .monogram::before{transition:filter .6s;pointer-events:none}
.hero-art .panel-top,.hero-art .art-bottom{position:relative;z-index:4;transition:transform .5s,color .5s}.hero-art .panel-top>span:last-child{display:inline-block;transition:transform .5s,color .5s}.hero-art .art-bottom a{color:#b4bed9;text-decoration:underline;text-underline-offset:4px;min-height:28px;display:inline-flex;align-items:center}
.hero-art .floating{transition:transform .65s cubic-bezier(.2,.7,.2,1),box-shadow .5s,border-color .5s;background:linear-gradient(120deg,#1d2440f0,#231635f0);z-index:5}
.hero-art .orbit{transition:transform .8s,border-color .6s,box-shadow .6s;pointer-events:none}
.hero-art:is(:hover,:focus-within) .art-panel{transform:rotateZ(0deg) rotateX(calc(var(--tilt-x)*3)) rotateY(calc(var(--tilt-y)*3)) translateY(-8px);border-color:#8bdcfb99;box-shadow:0 30px 80px #0009,-12px 10px 60px #27d9e520,15px -5px 65px #b044fa25,inset 0 1px #bfefff88}
.hero-art:is(:hover,:focus-within) .art-panel::before{opacity:1}
.hero-art:is(:hover,:focus-within) .art-panel::after{opacity:1;animation:hero-light-scan 1.5s cubic-bezier(.2,.6,.2,1) 1 forwards}
.hero-art:is(:hover,:focus-within) .monogram{transform:translate(0,-6px) scale(1.055);filter:drop-shadow(-8px 16px 20px #0dd8e225) drop-shadow(12px 6px 25px #ae30fb30)}
.hero-art:is(:hover,:focus-within) .monogram::before{filter:saturate(1.16) brightness(1.07)}
.hero-art:is(:hover,:focus-within) .panel-top{color:#d5f6ff;transform:translateY(-2px)}
.hero-art:is(:hover,:focus-within) .panel-top>span:last-child{transform:translate(3px,-3px) scale(1.3);color:#7eeeff}
.hero-art:is(:hover,:focus-within) .floating{transform:translate(8px,10px) rotate(-3deg);border-color:#b79aff88;box-shadow:0 12px 35px #0007,0 0 25px #9a65ff28}
.hero-art:is(:hover,:focus-within) .orbit{transform:rotateX(55deg) rotateZ(-12deg) scale(1.25);border-color:#79c6f766;box-shadow:0 0 35px #6687e51a}
.hero-art .art-bottom a:is(:hover,:focus-visible){color:#8ef3ff}
@keyframes hero-light-scan{from{transform:translateX(-38%)}to{transform:translateX(38%)}}
.a11y-motion .hero-art .art-panel,.a11y-motion .hero-art .monogram,.a11y-motion .hero-art .floating,.a11y-motion .hero-art .panel-top,.a11y-motion .hero-art .panel-top>span:last-child{transform:none!important}.a11y-motion .hero-art .art-panel::after{display:none}.a11y-motion .hero-art .orbit{transform:rotateX(50deg) rotateZ(-30deg) scale(1.3)!important}
.a11y-contrast .hero-art .art-panel::before,.a11y-contrast .hero-art .art-panel::after,.a11y-contrast .hero-art .orbit{display:none}.a11y-contrast .hero-art .art-panel{border-color:#fff}.a11y-contrast .hero-art .panel-top,.a11y-contrast .hero-art .art-bottom{color:#fff}
@media(hover:none){.hero-art .art-panel{transform:rotateY(-6deg) rotateZ(2deg)}.hero-art:is(:hover,:focus-within) .art-panel{transform:none}.hero-art:is(:hover,:focus-within) .monogram{transform:scale(1.02)}.hero-art:is(:hover,:focus-within) .floating{transform:translateY(4px)}}
@media(prefers-reduced-motion:reduce){.hero-art *,.hero-art *::before,.hero-art *::after{transition:none!important;animation:none!important}.hero-art .art-panel,.hero-art .monogram,.hero-art .floating,.hero-art .panel-top,.hero-art .panel-top>span:last-child{transform:none!important}.hero-art .art-panel::after{display:none}.hero-art .orbit{transform:rotateX(50deg) rotateZ(-30deg) scale(1.3)!important}}
.hero-art .art-panel{overflow:clip}.hero-art .monogram{flex-shrink:0}.hero-art .art-bottom{flex-shrink:0}

/* Give the RS mark breathing room inside the glass card. */
.hero-art .monogram::before{inset:10px 12% 12px}
@media(max-width:600px){.hero-art .orbit{display:none}}