/* Local homepage concept: original portrait, headline and animated vocabulary. */
.hero {
  min-height: max(740px, calc(100svh - 164px));
}

.hero-copy {
  top: 42px;
  right: var(--gutter);
  width: 50%;
  transform: none;
}

#hero-theme {
  max-width: none;
  margin-top: 28px;
}

.workshop-stage {
  position: absolute;
  z-index: 3;
  top: clamp(318px, 35vh, 370px);
  right: 1.2%;
  width: min(51%, 770px);
  margin: 0;
  aspect-ratio: 16 / 9;
}

.workshop-film {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
  mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 96%, transparent);
}

.workshop-action {
  position: absolute;
  z-index: 8;
  left: 46%;
  bottom: 25px;
  margin: 0;
  font-size: 16px;
}

.workshop-playback {
  position: absolute;
  right: 9%;
  bottom: 1%;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(17, 17, 15, .12);
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: #615e57;
  font-size: 14px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 180ms ease;
}

.workshop-stage:hover .workshop-playback,
.workshop-playback:focus-visible,
.workshop-stage.is-paused .workshop-playback {
  opacity: 1;
}

.orbit-lines {
  display: none;
}

.orbit-tag-layer {
  top: 0;
  right: 7%;
  bottom: 0;
  left: 39%;
  width: auto;
  height: auto;
  z-index: 4;
}

.orbit-tag-layer::before,
.orbit-tag-layer::after {
  content: none;
}

.galaxy-dust {
  position: absolute;
  inset: -10% -15%;
  width: 130%;
  height: 120%;
  pointer-events: none;
}

.orbit-satellite {
  position: absolute;
  top: 53%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #e9b570;
  box-shadow: 0 0 8px rgba(232, 178, 104, .4);
  opacity: .7;
  will-change: transform;
}

.orbit-tag { top: 53%; transition: opacity 350ms ease; }

.floating-tag {
  min-height: 31px;
  padding-inline: 12px;
  font-weight: 680;
  font-size: 9px;
  box-shadow: 0 7px 20px rgba(40, 31, 15, .035);
}

.tag-1 { top: 10%; left: 0; }
.tag-2 { top: 8%; right: 0; }
.tag-3 { top: 28%; right: 0; bottom: auto; left: auto; }
.tag-4 { top: 37%; right: auto; bottom: auto; left: 0; }
.tag-5 { top: 59%; left: 0; }
.tag-6 { top: 54%; bottom: auto; left: 39%; }

@keyframes drift-a {
  0%, 100% { transform: translate3d(-8px, -6px, 0); }
  30% { transform: translate3d(14px, 8px, 0); }
  65% { transform: translate3d(4px, 19px, 0); }
  85% { transform: translate3d(-13px, 7px, 0); }
}

@keyframes drift-b {
  0%, 100% { transform: translate3d(7px, -7px, 0); }
  28% { transform: translate3d(-16px, 3px, 0); }
  58% { transform: translate3d(-7px, 17px, 0); }
  80% { transform: translate3d(12px, 8px, 0); }
}

@keyframes drift-c {
  0%, 100% { transform: translate3d(-10px, 5px, 0); }
  32% { transform: translate3d(11px, -8px, 0); }
  65% { transform: translate3d(18px, 10px, 0); }
  85% { transform: translate3d(-6px, 17px, 0); }
}

@media (min-width: 761px) and (max-width: 1100px) {
  .hero-copy { top: 38px; width: 51%; }
  .workshop-stage { top: 325px; right: -2%; width: 57%; }
  .orbit-tag-layer { left: 39%; right: 2%; }
  .floating-tag { font-size: 8px; gap: 6px; padding-inline: 8px; min-height: 28px; }
  .tag-6 { left: 37%; top: 56%; }
}

@media (min-width: 761px) and (max-height: 820px) {
  .brand-lockup { min-height: 78px; }
  .hero { min-height: max(560px, calc(100svh - 148px)); }
  .hero-copy { top: 16px; }
  #hero-theme { margin-top: 20px; }
  .workshop-stage { top: clamp(225px, 31.2vh, 255px); width: 47%; }
  .workshop-action { bottom: 17px; }
}

@media (max-width: 760px) {
  .hero { min-height: 0; }
  .hero-copy { top: auto; right: auto; width: 100%; padding: 38px 0 25px; }
  #hero-theme { margin: 24px auto 0; }
  .portrait-stage { order: 2; }
  .workshop-stage {
    position: relative;
    top: auto;
    right: auto;
    order: 3;
    width: calc(100% + 28px);
    max-width: none;
    margin: 38px -14px 58px;
  }
  .workshop-action {
    position: relative;
    left: auto;
    bottom: auto;
    order: 4;
    align-self: center;
    margin: 0 0 36px;
  }
  .orbit-tag-layer { display: block; top: auto; right: 15%; bottom: 110px; left: 15%; height: 340px; }
  .floating-tag { font-size: 7px; gap: 6px; min-height: 26px; padding-inline: 8px; }
  .tag-1 { top: 30%; left: 0; }
  .tag-2 { top: 44%; right: 0; }
  .tag-3 { display: inline-flex; top: 62%; right: 0; }
  .tag-4 { display: inline-flex; top: 53%; left: 0; }
  .tag-5 { display: inline-flex; top: 68%; left: 0; }
  .tag-6 { display: inline-flex; top: 25%; left: auto; right: 0; }
  .workshop-playback { opacity: .75; }
}