/*
 * Temporary header trial, variant 2.
 * Four hanging portrait frames. Turn off in Appearance → Theme settings → Brand → Trial header.
 * Delete this file when the experiment is finished.
 */

.abc-body--trial .abc-hero__title {
  font-family: "Bricolage Grotesque", var(--abc-serif);
  font-weight: 680;
  font-style: normal;
  letter-spacing: -0.045em;
}

.abc-trial-cams { pointer-events: none; }

.abc-trial-hang {
  position: absolute;
  z-index: 0;
  width: 7.4rem;
  transform-origin: top center;
  animation: abc-trial-swing 5.6s ease-in-out infinite;
}

.abc-trial-hang__string {
  display: block;
  width: 1px;
  height: 1.35rem;
  margin: 0 auto .15rem;
  background: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .08));
}

.abc-trial-hang--1 { left: max(.7rem, calc(50% - 40rem)); top: .35rem; animation-duration: 5.2s; }
.abc-trial-hang--2 { left: max(.7rem, calc(50% - 31.5rem)); top: 6.4rem; animation-duration: 6.4s; animation-delay: -1.6s; }
.abc-trial-hang--3 { right: max(.7rem, calc(50% - 31.5rem)); top: 1.1rem; animation-duration: 5.8s; animation-delay: -2.4s; }
.abc-trial-hang--4 { right: max(.7rem, calc(50% - 40rem)); top: 7.1rem; animation-duration: 6.8s; animation-delay: -.8s; }

.abc-trial-cam {
  position: relative;
  height: 10.2rem;
  border-radius: .9rem;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18);
  background: #14090c;
  box-shadow: 0 22px 36px rgba(0, 0, 0, .5);
}

.abc-trial-cam img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}

.abc-trial-cam::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0 38%, rgba(255, 255, 255, .07) 38.3%, transparent 38.8% 100%);
  background-size: 100% 220%;
  animation: abc-trial-scan 4.2s linear infinite;
  mix-blend-mode: screen;
  opacity: .4;
  pointer-events: none;
}

.abc-trial-hang--2 .abc-trial-cam::after,
.abc-trial-hang--4 .abc-trial-cam::after { animation-delay: -2s; }

.abc-trial-cam__live {
  position: absolute;
  top: .45rem;
  left: .45rem;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  padding: .12rem .42rem .12rem .32rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-family: var(--abc-sans);
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.abc-trial-cam__live::before {
  content: "";
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: var(--abc-red);
  box-shadow: 0 0 0 0 rgba(225, 6, 0, .7);
  animation: abc-trial-live 1.6s ease-out infinite;
}

@keyframes abc-trial-swing {
  0%, 100% { transform: rotate(-4.5deg); }
  50% { transform: rotate(4.5deg); }
}

@keyframes abc-trial-live {
  0% { box-shadow: 0 0 0 0 rgba(225, 6, 0, .65); }
  100% { box-shadow: 0 0 0 .45rem rgba(225, 6, 0, 0); }
}

@keyframes abc-trial-scan {
  from { background-position: 0 -40%; }
  to { background-position: 0 140%; }
}

@media (max-width: 1320px) {
  .abc-trial-hang { display: none; }
}

.abc-trial-feature {
  position: absolute;
  z-index: 2;
  left: calc(50% + 23.2rem);
  bottom: -0.4rem;
  width: 18rem;
  height: 25rem;
  pointer-events: none;
  animation: abc-trial-float 8s ease-in-out infinite;
}

.abc-trial-feature img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% 18%;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 16%, #000 78%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 10%, #000 76%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 16%, #000 78%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 10%, #000 76%, transparent 100%);
  mask-composite: intersect;
  animation: abc-trial-drift 16s ease-in-out infinite;
}

.abc-trial-feature .abc-trial-cam__live { top: 2.2rem; left: 2.4rem; }

@keyframes abc-trial-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

@keyframes abc-trial-drift {
  0%, 100% { transform: scale(1.05) translate3d(0, 0, 0); }
  50% { transform: scale(1.12) translate3d(-2%, -1.5%, 0); }
}

@media (max-width: 1420px) {
  .abc-trial-feature { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .abc-trial-hang,
  .abc-trial-cam::after,
  .abc-trial-cam__live::before,
  .abc-trial-feature,
  .abc-trial-feature img { animation: none; }
}