/* Video-hero (CSS-driven photo loop) */

.cb-hero-video {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: var(--cb-onyx);
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
}

.cb-hero-video__frame {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out), transform 4s linear;
  transform: scale(1.08);
}
.cb-hero-video__frame.is-active {
  opacity: 1;
  transform: scale(1);
  animation: cb-hv-ken 4s ease-out forwards;
}
@keyframes cb-hv-ken {
  from { transform: scale(1.1); }
  to   { transform: scale(1); }
}

.cb-hero-video::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(11,11,15,.7));
  pointer-events: none;
}

/* Beat pulse — magenta circle that pumps */
.cb-hero-video__pulse {
  position: absolute;
  top: 28%; left: 22%;
  width: 60%; height: 60%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251,77,10,.5) 0%, rgba(251,77,10,0) 60%);
  mix-blend-mode: screen;
  filter: blur(20px);
  animation: cb-hv-beat 1.8s ease-in-out infinite;
  pointer-events: none;
}
.cb-hero-video__pulse--2 {
  top: auto; bottom: 18%; left: auto; right: 12%;
  width: 45%; height: 45%;
  background: radial-gradient(circle, rgba(216,255,61,.4) 0%, rgba(216,255,61,0) 60%);
  animation: cb-hv-beat 1.8s ease-in-out -0.6s infinite;
}
@keyframes cb-hv-beat {
  0%, 100% { transform: scale(0.9); opacity: .35; }
  50%      { transform: scale(1.1); opacity: .8; }
}

/* Scanning light beam */
.cb-hero-video__beam {
  position: absolute;
  top: -20%; left: -20%;
  width: 40%; height: 140%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: rotate(18deg);
  animation: cb-hv-beam 4s linear infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}
@keyframes cb-hv-beam {
  from { transform: translateX(-30%) rotate(18deg); }
  to   { transform: translateX(280%) rotate(18deg); }
}

/* Confetti */
.cb-hero-video__confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.cb-hero-video__confetti span {
  position: absolute; top: -10%;
  width: 6px; height: 10px; border-radius: 1px;
  animation: cb-hv-conf linear infinite;
}
@keyframes cb-hv-conf {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(110vh) rotate(540deg); opacity: 0; }
}

/* HUD top-left REC tag */
.cb-hero-video__tag {
  position: absolute; top: 16px; left: 16px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: rgba(11,11,15,.65); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 4px;
  color: white; font-family: var(--font-body); font-size: 11px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  z-index: 3;
}
.cb-hero-video__rec {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cb-magenta);
  animation: cb-hv-rec 1.4s ease-in-out infinite;
}
@keyframes cb-hv-rec { 50% { opacity: .3; } }

/* Caption / dots */
.cb-hero-video__caption {
  position: absolute;
  bottom: 16px; left: 16px; right: 16px;
  display: flex; justify-content: space-between; align-items: flex-end;
  z-index: 3;
}
.cb-hero-video__caption__text {
  font-family: var(--font-display);
  text-transform: uppercase; letter-spacing: 0;
  font-size: 28px; line-height: 1;
  color: white;
  text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.cb-hero-video__caption__dots { display: flex; gap: 6px; }
.cb-hero-video__caption__dots span {
  width: 24px; height: 3px; border-radius: 999px;
  background: rgba(255,255,255,.3);
  transition: background .3s;
}
.cb-hero-video__caption__dots span.is-active { background: var(--cb-acid); }

@media (prefers-reduced-motion: reduce) {
  .cb-hero-video__pulse, .cb-hero-video__pulse--2,
  .cb-hero-video__beam, .cb-hero-video__rec,
  .cb-hero-video__confetti span { animation: none; }
  .cb-hero-video__frame.is-active { animation: none; transform: scale(1); }
}