.hero-showcase {
  isolation: isolate;
  background: #031f33;
}
.hero-reel,
.hero-shot,
.hero-shot::after,
.hero-tech-grid {
  position: absolute;
  inset: 0;
}
.hero-shot {
  margin: 0;
  opacity: 0;
  animation: heroCycle 15s infinite;
}
.hero-shot img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.08);
  animation: heroZoom 15s infinite;
}
.hero-shot::after {
  content: "";
  background: linear-gradient(180deg, rgba(2,28,46,.1), rgba(2,28,46,.38) 48%, rgba(2,28,46,.88));
}
.shot-two,
.shot-two img { animation-delay: 5s; }
.shot-three,
.shot-three img { animation-delay: 10s; }
.hero-tech-grid {
  z-index: 2;
  opacity: .22;
  background-image: linear-gradient(rgba(97,223,231,.24) 1px, transparent 1px), linear-gradient(90deg, rgba(97,223,231,.24) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, #000, transparent 75%);
}
.hero-scan {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: -12%;
  height: 90px;
  background: linear-gradient(transparent, rgba(31,217,228,.18), rgba(91,233,241,.55), transparent);
  filter: blur(1px);
  animation: scanMove 4.6s ease-in-out infinite;
}
.hero-live {
  position: absolute;
  z-index: 5;
  top: 22px;
  left: 22px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 99px;
  background: rgba(3,38,64,.72);
  backdrop-filter: blur(9px);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.hero-live i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #44e1e9;
  box-shadow: 0 0 0 0 rgba(68,225,233,.65);
  animation: livePulse 1.8s infinite;
}
.hero-caption {
  position: absolute;
  z-index: 5;
  left: 28px;
  bottom: 72px;
  color: #fff;
  opacity: 0;
  transform: translateY(18px);
  animation: captionCycle 15s infinite;
}
.hero-caption span,
.hero-caption strong,
.hero-caption small { display: block; }
.hero-caption span { color: #65e0e7; font-size: .72rem; font-weight: 800; letter-spacing: .16em; }
.hero-caption strong { margin: 4px 0 2px; font-size: 1.55rem; line-height: 1.1; }
.hero-caption small { color: #d7edf1; font-size: .8rem; }
.caption-two { animation-delay: 5s; }
.caption-three { animation-delay: 10s; }
.hero-project-link {
  position: absolute;
  z-index: 6;
  right: 22px;
  bottom: 20px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  text-decoration: none;
  font-size: .8rem;
  font-weight: 700;
  padding: 9px 13px;
  border-bottom: 2px solid #38d4de;
}
.hero-project-link span { color: #65e0e7; font-size: 1rem; transition: transform .2s ease; }
.hero-project-link:hover span { transform: translate(3px,-3px); }
@keyframes heroCycle {
  0%, 30% { opacity: 1; }
  36%, 100% { opacity: 0; }
}
@keyframes heroZoom {
  0% { transform: scale(1.08); }
  34% { transform: scale(1.01); }
  100% { transform: scale(1.01); }
}
@keyframes captionCycle {
  0%, 29% { opacity: 1; transform: translateY(0); }
  34%, 100% { opacity: 0; transform: translateY(-8px); }
}
@keyframes scanMove {
  0%, 15% { transform: translateY(-80px); opacity: 0; }
  30% { opacity: .75; }
  75% { opacity: .35; }
  100% { transform: translateY(540px); opacity: 0; }
}
@keyframes livePulse {
  70% { box-shadow: 0 0 0 9px rgba(68,225,233,0); }
  100% { box-shadow: 0 0 0 0 rgba(68,225,233,0); }
}
@media (max-width: 580px) {
  .hero-live { top: 16px; left: 16px; font-size: .66rem; }
  .hero-caption { left: 20px; bottom: 70px; }
  .hero-caption strong { font-size: 1.3rem; }
  .hero-project-link { right: 16px; bottom: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-shot, .hero-shot img, .hero-caption, .hero-scan, .hero-live i { animation: none; }
  .shot-one, .caption-one { opacity: 1; transform: none; }
  .shot-two, .shot-three, .caption-two, .caption-three { display: none; }
}