/* The same rainbow sweep used by the beta button, on separate depth layers. */
.highway-services > .service-card{position:relative}
.section-rainbow-edge{position:absolute;inset:0;z-index:9;display:block;pointer-events:none;border-radius:inherit;padding:2px;opacity:0;background:linear-gradient(110deg,#a77aff,#66e8ff,#baff82,#ffc16f,#ff70c5,#a77aff,#66e8ff);background-size:300% 100%;background-position:0 50%;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:opacity .2s ease}
.highway-services > .service-card:is(:hover,:focus-within) > .section-rainbow-edge,
.price-card:is(:hover,:focus-within) > .section-rainbow-edge,
.creative-art:hover > .section-rainbow-edge,
.closing-team-art:hover > .section-rainbow-edge,
.requirements-chip:hover .requirements-chip-face > .section-rainbow-edge{opacity:1}
.highway-services > .service-card:is(:hover,:focus-within),.price-card:is(:hover,:focus-within){box-shadow:0 0 16px #aa77ff50,0 0 28px #64dfff25,0 15px 35px #0006}
.requirements-chip:hover .requirements-chip-face{box-shadow:0 0 18px #a77aff77,0 0 34px #66e8ff55,0 6px 0 #776b85,0 14px 30px #0008}
.section-rainbow-aura{position:absolute;inset:8% 2%;border-radius:50%;z-index:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse,#a77aff55 0%,#66e8ff25 36%,#ff70c525 52%,transparent 72%);filter:blur(24px);transition:opacity .25s ease}
.closing-team-art:hover .section-rainbow-aura{opacity:1}
.closing > h2:hover .gradient{background-image:linear-gradient(110deg,#a77aff,#66e8ff,#baff82,#ffc16f,#ff70c5,#a77aff);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
@media(prefers-reduced-motion:no-preference){
 html.motion-enabled .highway-services > .service-card:is(:hover,:focus-within) > .section-rainbow-edge,
 html.motion-enabled .price-card:is(:hover,:focus-within) > .section-rainbow-edge,
 html.motion-enabled .creative-art:hover > .section-rainbow-edge,
 html.motion-enabled .closing-team-art:hover > .section-rainbow-edge,
 html.motion-enabled .requirements-chip:hover .requirements-chip-face > .section-rainbow-edge,
 html.motion-enabled .closing > h2:hover .gradient{animation:section-rainbow-sweep 2.2s linear infinite}
 html.motion-enabled .closing-team-art:hover .section-rainbow-aura{animation:section-rainbow-pulse 2.2s ease-in-out infinite}
 @keyframes section-rainbow-sweep{to{background-position:300% 50%}}
 @keyframes section-rainbow-pulse{50%{opacity:.55}}
}
@media(prefers-reduced-motion:reduce){.section-rainbow-edge,.section-rainbow-aura{transition:none}}

.creative-art:hover{box-shadow:0 0 18px #aa77ff60,0 0 32px #64dfff25,0 20px 45px #0006}
.closing-team-art > .section-rainbow-edge{border-radius:18px}

/* Preserve the panels' own 3D and shine layers while adding the same edge. */
.program-card{position:relative}
.panel-rainbow-edge{position:absolute;inset:0;z-index:20;display:block;pointer-events:none;border-radius:inherit;padding:2px;opacity:0;background:linear-gradient(110deg,#a77aff,#66e8ff,#baff82,#ffc16f,#ff70c5,#a77aff,#66e8ff);background-size:300% 100%;background-position:0 50%;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:opacity .2s ease}
:is(.learning-poster,.flow-poster,.enterprise-poster,.program-card,.creator-wordmark):is(:hover,:focus-within) > .panel-rainbow-edge{opacity:1}
:is(.learning-poster,.flow-poster,.enterprise-poster,.program-card,.creator-wordmark):is(:hover,:focus-within){box-shadow:0 0 18px #aa77ff60,0 0 32px #64dfff25,0 20px 50px #0006}
@media(prefers-reduced-motion:no-preference){html.motion-enabled :is(.learning-poster,.flow-poster,.enterprise-poster,.program-card,.creator-wordmark):is(:hover,:focus-within) > .panel-rainbow-edge{animation:section-rainbow-sweep 2.2s linear infinite}}
@media(prefers-reduced-motion:reduce){.panel-rainbow-edge{transition:none}}

/* Keep the opening image's rainbow on its background plane so the floating
   creator, chair, and tools can continue to move in front of it. */
.hero-art.hero-depth > picture::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;padding:2px;opacity:0;background:linear-gradient(110deg,#a77aff,#66e8ff,#baff82,#ffc16f,#ff70c5,#a77aff,#66e8ff);background-size:300% 100%;background-position:0 50%;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:opacity .2s ease}
.hero-art.hero-depth:hover > picture::after{opacity:1}
.hero-art.hero-depth:hover{box-shadow:0 0 18px #aa77ff60,0 0 32px #64dfff25,0 24px 90px #6922a524}
.hero-intro h1:hover .gradient{background-image:linear-gradient(110deg,#a77aff,#66e8ff,#baff82,#ffc16f,#ff70c5,#a77aff);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 9px #ab83ff85)}
@media(prefers-reduced-motion:no-preference){
  html.motion-enabled .hero-art.hero-depth:hover > picture::after,
  html.motion-enabled .hero-intro h1:hover .gradient{animation:section-rainbow-sweep 2.2s linear infinite}
}
@media(prefers-reduced-motion:reduce){.hero-art.hero-depth > picture::after{transition:none}}

/* Guided practice cards use the same rainbow edge as the other site panels. */
.practice-grid > .lesson-card{position:relative}
.practice-grid > .lesson-card::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;padding:2px;opacity:0;background:linear-gradient(110deg,#a77aff,#66e8ff,#baff82,#ffc16f,#ff70c5,#a77aff,#66e8ff);background-size:300% 100%;background-position:0 50%;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;transition:opacity .2s ease}
.practice-grid > .lesson-card:is(:hover,:focus-visible)::after{opacity:1}
.practice-grid > .lesson-card:is(:hover,:focus-visible){box-shadow:0 0 16px #aa77ff50,0 0 28px #64dfff25,0 15px 35px #0006}
@media(prefers-reduced-motion:no-preference){html.motion-enabled .practice-grid > .lesson-card:is(:hover,:focus-visible)::after{animation:section-rainbow-sweep 2.2s linear infinite}}
@media(prefers-reduced-motion:reduce){.practice-grid > .lesson-card::after{transition:none}}