/* Arc light: fine illuminated edges with localized highlights. */
.os { --beam:var(--brand); --beam-core:#d8efc7; --beam-glow:.42; }

/* Opposing highlights follow the card perimeter. The masked center keeps
   the light off the artwork and reading surface; inner art frames stay quiet. */
.osc-card {
  --edge-source:18%; --edge-tail:88%;
  --edge-light:radial-gradient(ellipse at 18% 0%, var(--beam-core),
    var(--beam) 12%, color-mix(in srgb, var(--beam) 38%, transparent) 35%, transparent 62%),
    radial-gradient(ellipse at 88% 100%, color-mix(in srgb, var(--beam-core) 75%, transparent),
    color-mix(in srgb, var(--beam) 65%, transparent) 16%, transparent 53%);
}
.osc-card:nth-child(even) {
  --edge-source:78%; --edge-tail:12%;
  --edge-light:radial-gradient(ellipse at 78% 0%, var(--beam-core),
    var(--beam) 12%, color-mix(in srgb, var(--beam) 38%, transparent) 35%, transparent 62%),
    radial-gradient(ellipse at 12% 100%, color-mix(in srgb, var(--beam-core) 75%, transparent),
    color-mix(in srgb, var(--beam) 65%, transparent) 16%, transparent 53%);
}
.osc-card::before, .osc-card::after {
  content:""; position:absolute; inset:-1px; border-radius:inherit; padding:1px;
  background:var(--edge-light);
  -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;
  pointer-events:none;
}
.osc-card::before { z-index:2; }
.osc-card::after {
  inset:-3px 0; padding:0;
  background:radial-gradient(ellipse 34% 9px at var(--edge-source) 0%, var(--beam), transparent),
    radial-gradient(ellipse 26% 7px at var(--edge-tail) 100%, var(--beam), transparent);
  -webkit-mask:none; mask:none;
  filter:blur(6px); opacity:var(--beam-glow);
}

/* Moving light (after the "It's connected" pulse on the Web Design page): a short beam of light travels round each
   card's border. The static highlights above stay as the fallback for reduced motion / no @property support. */
@property --beam-a { syntax:"<angle>"; inherits:false; initial-value:0deg; }
@media (prefers-reduced-motion:no-preference) {
  .osc-card::before, .osc-card::after {
    background:conic-gradient(from var(--beam-a), transparent 0 62%,
      color-mix(in srgb, var(--beam) 35%, transparent) 78%, var(--beam) 92%, var(--beam-core) 97%, transparent 100%);
    animation:beam-run 6s linear infinite;
  }
  .osc-card::after {                              /* soft glow under the beam: the same ring, thicker and blurred */
    inset:-3px; padding:3px;
    -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(5px); opacity:calc(var(--beam-glow) * 1.8);
  }
  .osc-card { box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--beam) 14%, transparent); }   /* faint full border so the card edge stays readable */
  .osc-card:nth-child(2)::before, .osc-card:nth-child(2)::after { animation-delay:-1.2s; }
  .osc-card:nth-child(3)::before, .osc-card:nth-child(3)::after { animation-delay:-2.4s; }
  .osc-card:nth-child(4)::before, .osc-card:nth-child(4)::after { animation-delay:-3.6s; }
  .osc-card:nth-child(5)::before, .osc-card:nth-child(5)::after { animation-delay:-4.8s; }
}
@keyframes beam-run { to { --beam-a:360deg; } }

@media (forced-colors:active) {
  .osc-card::before, .osc-card::after { display:none; }
}