/* Aurora frame and free-flowing prism light. */
.repair-spotlight.repair-animated {
  --repair-angle: 27.5deg;
  --repair-light-width: 240px;
  --repair-light-height: 96px;
  --repair-light-inset: 20px;
  --repair-light-center-x: calc(var(--repair-light-inset) + var(--repair-light-width) / 2);
  --repair-light-center-y: calc(var(--repair-light-inset) + var(--repair-light-height) / 2);
  --repair-edge-glow: .40;
  --repair-cyan: 105 191 228;
  --repair-violet: 158 110 213;
  --repair-rose: 226 163 201;
  border: 0;
  /* Match the feature cards' material, including its actual transparency. */
  background: var(--glass);
  backdrop-filter: blur(34px) saturate(140%);
  -webkit-backdrop-filter: blur(34px) saturate(140%);
  box-shadow: inset 0 1px var(--highlight), 0 18px 45px rgba(0,0,0,.09);
}
/* Keep Aurora in the outline: painting it behind a translucent fill makes
   the whole card opaque and prevents the wallpaper from showing through. */
.repair-spotlight.repair-animated::before { display: none; }
.repair-spotlight.repair-animated::after {
  content: ""; position: absolute; inset: 0; padding: 1.5px;
  border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(240px 110px at calc(100% - var(--repair-light-center-x)) var(--repair-light-center-y),
      rgb(225 235 255 / var(--repair-edge-glow)),transparent 85%),
    conic-gradient(from var(--repair-angle),rgb(var(--repair-cyan)),#437fec,rgb(var(--repair-violet)),rgb(var(--repair-rose)),rgb(var(--repair-cyan)));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.repair-animated .repair-intro {
  display: flex; align-items: center; min-height: 48px;
  padding-right: 220px; margin: 0 0 1.25rem;
}
.repair-animated .repair-eyebrow { margin: 0; flex-wrap: wrap; gap: .65rem; }
/* A transparent horizontal light field, with its colour spilling into Aurora. */
.repair-light-corner {
  position: absolute; top: var(--repair-light-inset); right: var(--repair-light-inset);
  width: var(--repair-light-width); height: var(--repair-light-height); pointer-events: none;
}
.repair-light-corner::before {
  content: ""; position: absolute; width: 340px; height: 180px;
  left: 50%; top: 50%; pointer-events: none;
  background:
    radial-gradient(ellipse 34% 40% at 38% 48%,rgb(var(--repair-cyan) / .17),transparent 100%),
    radial-gradient(ellipse 30% 38% at 65% 54%,rgb(var(--repair-violet) / .12),transparent 100%),
    radial-gradient(ellipse 32% 35% at 48% 60%,rgb(var(--repair-rose) / .07),transparent 100%);
  /* Each colour fades inside the layer. The outer mask also guarantees a
     fully transparent perimeter, so no rectangular surface can show. */
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%,#000 35%,transparent 95%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%,#000 35%,transparent 95%);
  transform: translate(-50%,-50%);
}
:root[data-theme="light"] .repair-light-corner::before {
  --repair-cyan: 228 249 255;
  --repair-violet: 247 239 255;
  --repair-rose: 255 242 249;
  opacity: .85;
}
.repair-light { position: relative; width: var(--repair-light-width); height: var(--repair-light-height); flex: none; }
.repair-light > img,.repair-light > canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.repair-light > .repair-light-light { display: none; }
:root[data-theme="light"] .repair-light > .repair-light-dark { display: none; }
:root[data-theme="light"] .repair-light > .repair-light-light { display: block; }
.repair-light[data-rendered="true"] > img { visibility: hidden; }
.repair-animated [hidden] { display: none !important; }
@media (max-width:900px) {
  .repair-animated .repair-intro { min-height: 80px; }
}
@media (max-width:600px) {
  .repair-spotlight.repair-animated { --repair-light-width: 168px; --repair-light-height: 67.2px; --repair-light-inset: 12px; }
  .repair-animated .repair-intro { min-height: 0; padding: 52px 0 0; }
  .repair-light-corner::before { width: 240px; height: 140px; }
  .repair-animated .repair-eyebrow { gap: .6rem; }
  .repair-animated .repair-eyebrow .kicker { font-size: .69rem; }
}
@media (prefers-reduced-motion:reduce) {
  .repair-animated { scroll-behavior: auto; }
}