.top-ba-wrap{
  position:relative;
  display:block;
  width:100%;
  height:auto;
  min-height:120px;
  --top-ba-ratio-percent:66.6667%;
}
.top-ba-wrap::before{
  content:"";
  display:block;
  width:100%;
  padding-top:var(--top-ba-ratio-percent);
}
.top-ba-frame{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:24px;
  overflow:hidden;
  background:#0f1319;
  box-shadow:0 24px 60px rgba(0,0,0,.28);
  isolation:isolate;
}
.top-ba-before-wrap,
.top-ba-after{position:absolute; inset:0;}
.top-ba-before,
.top-ba-after img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.top-ba-before{
  filter:none;
  transform:scale(1.02);
}
.top-ba-after img{
  filter:brightness(.78) contrast(.90) saturate(.30) grayscale(.40);
  transform:scale(1.02);
}
.top-ba-before-overlay{
  display:none;
}
.top-ba-after::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(210,215,223,.16) 0%, rgba(180,186,196,.08) 35%, rgba(58,64,74,.18) 100%),
    linear-gradient(180deg, rgba(10,12,16,.18) 0%, rgba(10,12,16,.08) 28%, rgba(10,12,16,.24) 100%),
    radial-gradient(circle at 22% 18%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 30%);
  pointer-events:none;
}
.top-ba-spotlight{
  display:none;
}
.top-ba-after::after{
  content:"";
  position:absolute; top:-8%; left:12%; width:85%; height:130%;
  pointer-events:none;
  background:radial-gradient(ellipse at top left, rgba(255,255,255,.18) 0%, rgba(255,255,255,.10) 14%, rgba(255,255,255,.05) 28%, rgba(255,255,255,.02) 42%, rgba(255,255,255,0) 62%);
  mix-blend-mode:screen; opacity:.72; transform:rotate(-10deg); filter:blur(8px);
}
.top-ba-after{
  z-index:2;
  clip-path:polygon(56% 0, 100% 0, 100% 100%, 40% 100%);
  transition:clip-path .22s ease-out;
  will-change:clip-path;
}
.top-ba-divider{
  position:absolute; top:-10%; bottom:-10%; left:50%; width:2px; z-index:3;
  background:linear-gradient(180deg, rgba(255,255,255,.0), rgba(255,255,255,.85), rgba(255,255,255,.0));
  box-shadow:0 0 0 1px rgba(255,255,255,.08),0 0 22px rgba(255,160,60,.28),0 0 48px rgba(255,122,0,.18);
  transform:rotate(12deg); transform-origin:center;
  transition:left .22s ease-out, opacity .25s ease;
  opacity:.92;
  will-change:left, opacity;
}
.top-ba-label{
  position:absolute; bottom:18px; z-index:4; padding:8px 14px;
  font-size:11px; line-height:1; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  border-radius:999px; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); user-select:none;
}
.top-ba-label.before{left:18px; background:rgba(0,0,0,.45); border:1px solid rgba(255,255,255,.10); color:#fff;}
.top-ba-label.after{right:18px; background:#ff7a00; color:#fff; box-shadow:0 10px 24px rgba(255,122,0,.28);}
@media (max-width:767px){
  .top-ba-wrap{min-height:90px;}
  .top-ba-frame{border-radius:18px;}
  .top-ba-label{bottom:12px; padding:7px 12px; font-size:10px;}
  .top-ba-label.before{left:12px;}
  .top-ba-label.after{right:12px;}
}