/* The banner is self-contained: its six footage panels keep their natural colour. */
#hypnosis-motion-banner {
  --hypnosis-height: clamp(310px, 24vw, 430px);
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  height: var(--hypnosis-height);
  margin: 24px 0 0;
  overflow: hidden;
  border: 1px solid #292929;
  border-radius: 24px;
  background: #030303;
  color: #fff;
  container-type: inline-size;
}

#hypnosis-motion-banner .hypnosis-motion-fan {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  width: 35%;
  pointer-events: none;
  perspective: 1100px;
}

#hypnosis-motion-banner .hypnosis-motion-fan--left { left: 0; }
#hypnosis-motion-banner .hypnosis-motion-fan--right { right: 0; }

#hypnosis-motion-banner .hypnosis-motion-panel {
  position: absolute;
  top: 12%;
  bottom: -30%;
  width: 53%;
  margin: 0;
  overflow: hidden;
  border: 1px solid #ffffff14;
  border-radius: 11px;
  background: #141414;
  box-shadow: 0 0 24px #0007;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  animation: hypnosis-panel-drift 10s ease-in-out infinite alternate;
}

#hypnosis-motion-banner .hypnosis-motion-panel::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(180deg, #0000 45%, #0002 85%, #0005);
}

#hypnosis-motion-banner .hypnosis-motion-panel video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--subject-x, 50%) 50%;
  background: #141414;
}

#hypnosis-motion-banner .hypnosis-motion-fan--left .hypnosis-motion-panel {
  transform-origin: left bottom;
  transform: rotateY(20deg) skewY(18deg);
}

#hypnosis-motion-banner .hypnosis-motion-fan--right .hypnosis-motion-panel {
  transform-origin: right bottom;
  transform: rotateY(-20deg) skewY(-18deg);
}

#hypnosis-motion-banner .hypnosis-motion-fan--left [data-slot="outer"] { left: -13%; z-index: 1; animation-delay: -3s; }
#hypnosis-motion-banner .hypnosis-motion-fan--left [data-slot="middle"] { left: 13%; z-index: 2; animation-delay: -6s; }
#hypnosis-motion-banner .hypnosis-motion-fan--left [data-slot="inner"] { left: 40%; z-index: 3; animation-delay: -1s; }
#hypnosis-motion-banner .hypnosis-motion-fan--right [data-slot="outer"] { right: -13%; z-index: 1; animation-delay: -4s; }
#hypnosis-motion-banner .hypnosis-motion-fan--right [data-slot="middle"] { right: 13%; z-index: 2; animation-delay: -7s; }
#hypnosis-motion-banner .hypnosis-motion-fan--right [data-slot="inner"] { right: 40%; z-index: 3; animation-delay: -2s; }

#hypnosis-motion-banner .hypnosis-motion-fan--left::after,
#hypnosis-motion-banner .hypnosis-motion-fan--right::after {
  position: absolute;
  z-index: 4;
  inset: 0;
  content: "";
  pointer-events: none;
}

#hypnosis-motion-banner .hypnosis-motion-fan--left::after { background: linear-gradient(90deg, #0000 72%, #030303 99%); }
#hypnosis-motion-banner .hypnosis-motion-fan--right::after { background: linear-gradient(270deg, #0000 72%, #030303 99%); }

#hypnosis-motion-banner .hypnosis-motion-content {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  width: 44%;
  min-width: 0;
  height: 100%;
  margin: 0 auto;
  padding: 22px 6px 28px;
  text-align: center;
}

#hypnosis-motion-banner .hypnosis-motion-brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 12px;
  color: #fff;
  font-size: clamp(13px, 1.25cqw, 20px);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -.6px;
}

#hypnosis-motion-banner .hypnosis-motion-brand img { display: block; width: 25px; height: 25px; object-fit: contain; }

#hypnosis-motion-banner h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(19px, 2.15cqw, 36px);
  font-weight: 850;
  line-height: 1.05;
  letter-spacing: -.055em;
}

#hypnosis-motion-banner .hypnosis-motion-headline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .18em;
  max-width: 100%;
  margin: 16px 0 17px;
  padding: .1em .18em .15em;
  border: 1px solid #b3b3b3;
  border-radius: .3em;
  background: linear-gradient(180deg, #ffffff0c, #ffffff03 65%, #ffffff08);
  box-shadow: inset 0 0 12px #ffffff24, 0 0 12px #ffffff0c;
  color: #080808;
  font-family: "Roboto Condensed", "Arial Narrow", sans-serif;
  font-size: clamp(25px, 3.35cqw, 59px);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.03em;
  white-space: nowrap;
  -webkit-text-stroke: 1px #f2f2f2;
  text-shadow: 0 0 14px #ffffff2e;
}

#hypnosis-motion-banner .hypnosis-motion-headline svg {
  flex: 0 0 auto;
  width: .7em;
  height: .7em;
  color: #ededed;
  filter: drop-shadow(0 0 4px #ffffff50);
}

#hypnosis-motion-banner .hypnosis-motion-description {
  max-width: 370px;
  margin: 0;
  color: #aaa;
  font-size: clamp(11px, .94cqw, 15px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -.15px;
}

#hypnosis-motion-banner .hypnosis-motion-description span { display: block; color: #e0e0e0; }

#hypnosis-motion-banner .hypnosis-motion-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 42px;
  margin-top: 19px;
  padding: 10px 19px;
  border: 1px solid #fff;
  border-radius: 10px;
  background: #fff;
  color: #050505;
  box-shadow: 0 3px 0 #a3a3a3;
  font-size: clamp(11px, .91cqw, 14px);
  font-weight: 650;
  line-height: 1.35;
  text-decoration: none;
  transition: background 160ms ease, transform 160ms ease;
}

#hypnosis-motion-banner .hypnosis-motion-cta:hover { transform: translateY(-1px); background: #e5e5e5; }
#hypnosis-motion-banner .hypnosis-motion-cta:focus-visible,
#hypnosis-motion-banner .hypnosis-motion-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }

#hypnosis-motion-banner .hypnosis-motion-toggle {
  position: absolute;
  z-index: 8;
  right: 12px;
  bottom: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 8px 11px;
  border: 1px solid #ffffff42;
  border-radius: 24px;
  background: #050505bf;
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 550;
  line-height: 1;
  cursor: pointer;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

#hypnosis-motion-banner .hypnosis-motion-toggle:hover { background: #242424; }
#hypnosis-motion-banner .hypnosis-motion-toggle svg { display: block; width: 14px; height: 14px; }
#hypnosis-motion-banner .hypnosis-motion-toggle .hypnosis-motion-play-icon { display: none; }
#hypnosis-motion-banner[data-motion-state="paused"] .hypnosis-motion-toggle .hypnosis-motion-play-icon { display: block; }
#hypnosis-motion-banner[data-motion-state="paused"] .hypnosis-motion-toggle .hypnosis-motion-pause-icon { display: none; }
#hypnosis-motion-banner[data-motion-state="paused"] .hypnosis-motion-panel { animation-play-state: paused; }

@keyframes hypnosis-panel-drift {
  from { translate: 0 0; }
  to { translate: 0 -5px; }
}

@media (max-width: 900px) and (min-width: 641px) {
  #hypnosis-motion-banner { --hypnosis-height: 300px; }
  #hypnosis-motion-banner .hypnosis-motion-brand { margin-bottom: 10px; }
  #hypnosis-motion-banner .hypnosis-motion-headline { font-size: 3.45cqw; margin: 14px 0; }
  #hypnosis-motion-banner .hypnosis-motion-description { max-width: 250px; }
  #hypnosis-motion-banner .hypnosis-motion-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

@media (max-width: 640px) {
  #hypnosis-motion-banner {
    display: block;
    height: auto;
    min-height: 620px;
    margin-top: 20px;
    border-radius: 18px;
  }

  #hypnosis-motion-banner .hypnosis-motion-fan { width: 100%; height: 185px; bottom: auto; overflow: hidden; }
  #hypnosis-motion-banner .hypnosis-motion-fan--left { top: -5px; }
  #hypnosis-motion-banner .hypnosis-motion-fan--right { top: auto; bottom: -8px; }
  #hypnosis-motion-banner .hypnosis-motion-panel { top: 6%; bottom: -40%; width: 43%; border-radius: 9px; }
  #hypnosis-motion-banner .hypnosis-motion-fan--left .hypnosis-motion-panel { transform: rotateY(12deg) skewY(10deg); }
  #hypnosis-motion-banner .hypnosis-motion-fan--right .hypnosis-motion-panel { transform: rotateY(-12deg) skewY(-10deg); }
  #hypnosis-motion-banner .hypnosis-motion-fan--left [data-slot="outer"] { left: -7%; }
  #hypnosis-motion-banner .hypnosis-motion-fan--left [data-slot="middle"] { left: 25%; }
  #hypnosis-motion-banner .hypnosis-motion-fan--left [data-slot="inner"] { left: 57%; }
  #hypnosis-motion-banner .hypnosis-motion-fan--right [data-slot="outer"] { right: -7%; }
  #hypnosis-motion-banner .hypnosis-motion-fan--right [data-slot="middle"] { right: 25%; }
  #hypnosis-motion-banner .hypnosis-motion-fan--right [data-slot="inner"] { right: 57%; }
  #hypnosis-motion-banner .hypnosis-motion-fan--left::after { background: linear-gradient(180deg, #03030300 35%, #030303 99%); }
  #hypnosis-motion-banner .hypnosis-motion-fan--right::after { background: linear-gradient(0deg, #03030300 40%, #030303 99%); }
  #hypnosis-motion-banner .hypnosis-motion-content { width: 100%; height: auto; min-height: 290px; margin: 164px auto 166px; padding: 28px 15px 32px; }
  #hypnosis-motion-banner .hypnosis-motion-brand { margin-bottom: 12px; font-size: 16px; }
  #hypnosis-motion-banner h2 { font-size: 29px; }
  #hypnosis-motion-banner .hypnosis-motion-headline { margin: 15px 0; font-size: clamp(22px, 8cqw, 47px); }
  #hypnosis-motion-banner .hypnosis-motion-description { max-width: 315px; font-size: 12px; }
  #hypnosis-motion-banner .hypnosis-motion-cta { min-height: 44px; margin-top: 18px; padding: 11px 18px; font-size: 12px; }
  #hypnosis-motion-banner .hypnosis-motion-toggle { right: 10px; bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  #hypnosis-motion-banner .hypnosis-motion-panel { animation: none; }
  #hypnosis-motion-banner .hypnosis-motion-cta { transition: none; }
  #hypnosis-motion-banner .hypnosis-motion-cta:hover { transform: none; }
}