/* colasoftware video spotlight: animated border lines and inner effects.
   Pure CSS. Uses @property for the rotating border; browsers without it
   show a static red border instead. Motion stops under prefers-reduced-motion. */

@property --cm-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

:root{
  --cm-red:#ff1a35;
  --cm-red-soft:rgba(255,26,53,.18);
  --cm-line-speed:7s;      /* outer box: one lap */
  --cm-card-speed:5s;      /* video card: one lap, runs the other way */
}

/* ---------- shared: a light that travels around the border ---------- */
.cm-border{position:relative;isolation:isolate;border:1px solid var(--cm-red-soft)}
.cm-border::before,
.cm-border::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:2;
  padding:1.5px;
  background:conic-gradient(from var(--cm-angle),
    transparent 0deg 250deg,
    rgba(255,26,53,.25) 290deg,
    #ff2a45 330deg,
    #fff 342deg,
    #ff2a45 352deg,
    transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:cm-spin var(--speed,var(--cm-line-speed)) linear infinite;
}
/* the blurred copy is the glow */
.cm-border::after{filter:blur(8px);opacity:.75;padding:3px}
.cm-border--reverse::before,.cm-border--reverse::after{animation-direction:reverse}
@keyframes cm-spin{to{--cm-angle:360deg}}

/* ---------- outer box ---------- */
.cm-spotlight{
  --speed:var(--cm-line-speed);
  display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:center;
  padding:28px 28px 28px 36px;border-radius:22px;
  background:
    radial-gradient(600px 300px at 15% 40%,rgba(255,26,53,.10),transparent 60%),
    linear-gradient(135deg,#1a0c10,#0e0709 60%,#140a0d);
  box-shadow:0 0 0 1px rgba(255,26,53,.06),0 30px 80px rgba(0,0,0,.5);
}
/* a faint second line that drifts along the inner edge */
.cm-spotlight__trace{position:absolute;inset:10px;border-radius:16px;pointer-events:none;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(255,26,53,.5),transparent) top/40% 1px no-repeat,
             linear-gradient(90deg,transparent,rgba(255,26,53,.35),transparent) bottom/40% 1px no-repeat;
  animation:cm-trace 9s ease-in-out infinite}
@keyframes cm-trace{
  0%  {background-position:-40% 0,140% 100%}
  50% {background-position:140% 0,-40% 100%}
  100%{background-position:-40% 0,140% 100%}}

/* ---------- copy side ---------- */
.cm-eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 18px;color:#ff4d63;
  font:800 .78rem/1 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.cm-eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--cm-red);
  box-shadow:0 0 0 0 rgba(255,26,53,.7);animation:cm-ping 2s ease-out infinite}
@keyframes cm-ping{0%{box-shadow:0 0 0 0 rgba(255,26,53,.7)}100%{box-shadow:0 0 0 10px rgba(255,26,53,0)}}
.cm-title{margin:0 0 16px;color:#fff;font:900 clamp(2.2rem,4.6vw,3.4rem)/1 system-ui,sans-serif;letter-spacing:-.03em}
.cm-title em{font-style:normal;color:#ff3352;text-shadow:0 0 28px rgba(255,26,53,.45)}
.cm-lede{margin:0 0 24px;max-width:46ch;color:#c9c2c5;line-height:1.65}
.cm-chips{display:flex;flex-wrap:wrap;gap:10px}
/* chips get a smaller travelling border on hover and keyboard focus */
.cm-chip{--speed:2.4s;position:relative;isolation:isolate;padding:10px 14px;border-radius:999px;border:1px solid #3a2a2f;
  background:rgba(255,255,255,.03);color:#f1eef0;font:700 .85rem/1 system-ui,sans-serif;text-decoration:none;cursor:pointer;transition:border-color .2s}
.cm-chip:hover,.cm-chip:focus-visible{border-color:transparent;outline:none}
.cm-chip::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;opacity:0;transition:opacity .2s;
  background:conic-gradient(from var(--cm-angle),#ff1a35,#ff8a9a,#ff1a35,transparent 60%,#ff1a35);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:cm-spin var(--speed) linear infinite}
.cm-chip:hover::before,.cm-chip:focus-visible::before{opacity:1}

/* ---------- video card ---------- */
.cm-video{--speed:var(--cm-card-speed);position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#0b0507}
.cm-video__media{position:absolute;inset:0;z-index:0}
.cm-video__media img,.cm-video__media video{width:100%;height:100%;object-fit:cover;display:block}
/* placeholder art when no image is set */
.cm-video__media--placeholder{background:
  radial-gradient(circle at 70% 30%,rgba(255,40,70,.45),transparent 50%),
  repeating-linear-gradient(120deg,rgba(255,26,53,.10) 0 2px,transparent 2px 26px),
  linear-gradient(160deg,#3a0811,#0a0305 70%)}
/* darken the bottom so the caption reads */
.cm-video::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,transparent 45%,rgba(5,3,4,.9))}

/* inner grid that slowly drifts */
.cm-video__grid{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.22;
  background-image:linear-gradient(rgba(255,26,53,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,26,53,.5) 1px,transparent 1px);
  background-size:44px 44px;-webkit-mask:radial-gradient(circle at 50% 45%,#000 30%,transparent 75%);mask:radial-gradient(circle at 50% 45%,#000 30%,transparent 75%);
  animation:cm-grid 12s linear infinite}
@keyframes cm-grid{to{background-position:44px 44px,44px 44px}}

/* scanning line that sweeps down the card */
.cm-video__scan{position:absolute;left:0;right:0;top:-20%;height:20%;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(255,26,53,.16) 70%,rgba(255,120,140,.75) 98%,transparent);
  animation:cm-scan 4.5s cubic-bezier(.45,.05,.55,.95) infinite}
@keyframes cm-scan{0%{transform:translateY(0)}100%{transform:translateY(600%)}}

/* corner brackets */
.cm-video__corner{position:absolute;z-index:3;width:22px;height:22px;pointer-events:none;
  border-color:#ff2a45;border-style:solid;border-width:0;filter:drop-shadow(0 0 6px rgba(255,26,53,.8));
  animation:cm-corner 2.8s ease-in-out infinite}
.cm-video__corner.tl{top:12px;left:12px;border-top-width:2px;border-left-width:2px}
.cm-video__corner.tr{top:12px;right:12px;border-top-width:2px;border-right-width:2px;animation-delay:.7s}
.cm-video__corner.br{bottom:12px;right:12px;border-bottom-width:2px;border-right-width:2px;animation-delay:1.4s}
.cm-video__corner.bl{bottom:12px;left:12px;border-bottom-width:2px;border-left-width:2px;animation-delay:2.1s}
@keyframes cm-corner{0%,100%{opacity:.35;transform:scale(.92)}50%{opacity:1;transform:scale(1)}}

/* play button with pulsing rings */
.cm-play{position:absolute;left:50%;top:45%;z-index:4;width:66px;height:66px;margin:-33px 0 0 -33px;border:0;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;color:#fff;background:linear-gradient(180deg,#ff3150,#d1001f);
  box-shadow:0 0 30px rgba(255,26,53,.6);transition:transform .2s}
.cm-play:hover,.cm-play:focus-visible{transform:scale(1.07);outline:none}
.cm-play svg{width:24px;height:24px;margin-left:3px}
.cm-play::before,.cm-play::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,26,53,.7);animation:cm-ring 2.4s ease-out infinite}
.cm-play::after{animation-delay:1.2s}
@keyframes cm-ring{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.9);opacity:0}}

/* caption */
.cm-video__cap{position:absolute;left:20px;right:20px;bottom:18px;z-index:4}
.cm-video__cap small{display:block;color:#ff6b80;font:800 .7rem/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}
.cm-video__cap strong{display:block;color:#fff;font:800 1.15rem/1.2 system-ui,sans-serif}
.cm-video__cap span{display:block;color:#d6d0d3;font-size:.82rem;margin-top:6px}

/* ---------- responsive ---------- */
@media (max-width:860px){.cm-spotlight{grid-template-columns:1fr;padding:24px}}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .cm-border::before,.cm-border::after,.cm-chip::before,.cm-spotlight__trace,
  .cm-eyebrow i,.cm-video__grid,.cm-video__scan,.cm-video__corner,.cm-play::before,.cm-play::after{animation:none!important}
  .cm-video__scan{display:none}
  .cm-border::before{background:linear-gradient(135deg,rgba(255,26,53,.6),rgba(255,26,53,.15))}
  .cm-border::after{display:none}
}