/* FORBIDDEN ENTRY OBJECT ------------------------------------------------ */

.entry-gate__idle {
  width: min(540px, calc(100vw - 32px));
  min-height: 220px;
  isolation: isolate;
}

.entry-gate__button {
  position: relative;
  z-index: 2;
  display: inline-grid;
  width: min(468px, calc(100vw - 36px));
  min-width: 0;
  min-height: 108px;
  place-items: center start;
  overflow: hidden;
  padding: 38px 76px 30px 34px;
  border: 1px solid rgba(134, 239, 255, 0.92);
  clip-path: polygon(
    0 0,
    calc(100% - 18px) 0,
    100% 18px,
    100% calc(100% - 11px),
    calc(100% - 11px) 100%,
    15px 100%,
    0 calc(100% - 15px)
  );
  color: var(--paper);
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 6px,
      rgba(134, 239, 255, 0.28) 6px 7px,
      transparent 7px 10px,
      rgba(155, 124, 255, 0.2) 10px 12px,
      transparent 12px 16px
    ) calc(100% - 16px) 18px / 47px calc(100% - 36px) no-repeat,
    linear-gradient(rgba(71, 207, 255, 0.12) 1px, transparent 1px) 0 0 / 100% 9px,
    linear-gradient(90deg, rgba(71, 207, 255, 0.09) 1px, transparent 1px) 0 0 / 11px 100%,
    linear-gradient(
      116deg,
      rgba(24, 63, 190, 0.34),
      rgba(2, 8, 13, 0.96) 37%,
      rgba(2, 8, 13, 0.92) 66%,
      rgba(155, 124, 255, 0.22)
    );
  box-shadow:
    -7px 7px 0 rgba(24, 63, 190, 0.62),
    5px -5px 0 rgba(134, 239, 255, 0.14),
    0 0 0 1px rgba(2, 8, 13, 0.92),
    0 0 34px rgba(71, 207, 255, 0.16),
    inset 0 0 32px rgba(24, 63, 190, 0.16);
  font: 800 12px/1 var(--mono);
  letter-spacing: 0.22em;
  text-align: left;
  text-shadow:
    -2px 0 0 rgba(24, 63, 190, 0.8),
    2px 0 0 rgba(134, 239, 255, 0.42);
  transition:
    color 160ms ease,
    border-color 160ms ease,
    box-shadow 180ms ease,
    background-position 420ms steps(4),
    letter-spacing 180ms ease;
}

.entry-gate__button::before,
.entry-gate__button::after {
  position: absolute;
  left: 16px;
  color: rgba(134, 239, 255, 0.72);
  font: 700 6px/1 var(--mono);
  letter-spacing: 0.12em;
  pointer-events: none;
  text-shadow: none;
}

.entry-gate__button::before {
  top: 13px;
  content: "ENTRY: BY ACTION ONLY // ACCESS_00";
}

.entry-gate__button::after {
  bottom: 12px;
  content: "SEAT: UNLISTED  //  TRUST: REVOKED";
  color: rgba(155, 124, 255, 0.76);
}

.entry-gate__button:hover:not(:disabled),
.entry-gate__button:focus-visible {
  border-color: var(--paper);
  color: var(--cyan-hot);
  background-position:
    calc(100% - 10px) 18px,
    0 -4px,
    -4px 0,
    0 0;
  box-shadow:
    -10px 10px 0 rgba(24, 63, 190, 0.7),
    7px -7px 0 rgba(155, 124, 255, 0.28),
    0 0 0 1px rgba(246, 252, 255, 0.72),
    0 0 26px rgba(134, 239, 255, 0.32),
    0 0 52px rgba(155, 124, 255, 0.18),
    inset 0 0 38px rgba(24, 63, 190, 0.22);
  letter-spacing: 0.245em;
}

.entry-gate__button:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 8px;
}

html.has-entry-gate[data-entry-state="gate"].gate-threat .entry-gate__button {
  animation: bb-forbidden-command 920ms steps(3, end) infinite;
}

/* Screen Burn apparition behind the command object. */
.entry-gate__curtain::before,
.entry-gate__curtain::after,
.entry-gate__idle::before {
  position: fixed;
  content: "";
  opacity: 0;
  pointer-events: none;
}

.entry-gate__curtain::before {
  z-index: 0;
  inset: -12vh -8vw;
  background:
    linear-gradient(90deg, rgba(2, 8, 13, 0.82), transparent 28% 72%, rgba(2, 8, 13, 0.82)),
    url("art%20main.png") 50% 34% / cover no-repeat;
  filter:
    grayscale(1)
    contrast(1.65)
    brightness(0.58)
    drop-shadow(-18px 0 0 rgba(24, 63, 190, 0.46))
    drop-shadow(13px 0 0 rgba(134, 239, 255, 0.24));
  mix-blend-mode: screen;
  transform: scale(1.14);
  clip-path: polygon(0 7%, 100% 7%, 100% 29%, 0 25%, 0 42%, 100% 45%, 100% 72%, 0 68%, 0 86%, 100% 82%, 100% 100%, 0 100%);
}

.entry-gate__curtain::after {
  z-index: 1;
  top: 8vh;
  right: 3vw;
  bottom: 7vh;
  left: 3vw;
  content:
    "PRIVATE ROOM // NO GUESTS\A\A"
    "                              SEAT: UNLISTED\A\A\A"
    "ENTRY: BY ACTION ONLY\A\A"
    "                                       TRUST REVOKED";
  color: rgba(134, 239, 255, 0.62);
  font: 700 clamp(7px, 0.72vw, 11px)/1.1 var(--mono);
  letter-spacing: 0.16em;
  white-space: pre;
  text-shadow:
    -3px 0 0 rgba(24, 63, 190, 0.72),
    3px 0 0 rgba(155, 124, 255, 0.34),
    0 0 13px rgba(71, 207, 255, 0.34);
}

.entry-gate__idle::before {
  z-index: 0;
  top: 12vh;
  left: 50%;
  width: 100vw;
  content: "THE DOOR IS CLOSED.";
  color: rgba(246, 252, 255, 0.42);
  font: 900 clamp(36px, 8vw, 128px)/0.82 var(--sans);
  letter-spacing: -0.06em;
  text-align: center;
  text-shadow:
    -8px 0 0 rgba(24, 63, 190, 0.62),
    7px 0 0 rgba(134, 239, 255, 0.32),
    0 0 40px rgba(155, 124, 255, 0.22);
  transform: translateX(-50%) scaleX(1.04);
  white-space: nowrap;
}

html.has-entry-gate[data-entry-state="gate"].gate-threat .entry-gate__curtain::before {
  opacity: 0.36;
  animation: bb-screen-burn-threat 840ms steps(3, end) infinite;
}

html.has-entry-gate[data-entry-state="gate"].gate-threat .entry-gate__curtain::after {
  opacity: 0.84;
  animation: bb-threat-readout 1.15s steps(4, end) infinite;
}

html.has-entry-gate[data-entry-state="gate"].gate-threat .entry-gate__idle::before {
  opacity: 0.68;
  animation: bb-threat-title 1.3s steps(3, end) infinite;
}

@media (max-width: 600px) {
  .entry-gate__idle {
    min-height: 188px;
  }

  .entry-gate__button {
    min-height: 102px;
    padding: 36px 58px 29px 22px;
    font-size: 10px;
    letter-spacing: 0.16em;
  }

  .entry-gate__button::before,
  .entry-gate__button::after {
    left: 12px;
    font-size: 5px;
  }

  .entry-gate__curtain::before {
    inset: -6vh -28vw;
    background-position: 50% 31%;
  }

  .entry-gate__curtain::after {
    top: 6vh;
    right: 10px;
    left: 10px;
    overflow: hidden;
    font-size: 6px;
  }

  .entry-gate__idle::before {
    top: 16vh;
    font-size: clamp(31px, 11.5vw, 58px);
  }
}

@media (hover: none) {
  .entry-gate__button:hover:not(:disabled) {
    border-color: rgba(134, 239, 255, 0.92);
    color: var(--paper);
    box-shadow:
      -7px 7px 0 rgba(24, 63, 190, 0.62),
      5px -5px 0 rgba(134, 239, 255, 0.14),
      0 0 0 1px rgba(2, 8, 13, 0.92),
      0 0 34px rgba(71, 207, 255, 0.16),
      inset 0 0 32px rgba(24, 63, 190, 0.16);
    letter-spacing: 0.16em;
  }

  .entry-gate__button:active:not(:disabled) {
    border-color: var(--paper);
    color: var(--cyan-hot);
    box-shadow:
      -9px 9px 0 rgba(24, 63, 190, 0.7),
      6px -6px 0 rgba(155, 124, 255, 0.24),
      0 0 34px rgba(134, 239, 255, 0.28);
  }
}

@media (prefers-reduced-motion: reduce) {
  html.has-entry-gate[data-entry-state="gate"].gate-threat .entry-gate__button,
  html.has-entry-gate[data-entry-state="gate"].gate-threat .entry-gate__curtain::before,
  html.has-entry-gate[data-entry-state="gate"].gate-threat .entry-gate__curtain::after,
  html.has-entry-gate[data-entry-state="gate"].gate-threat .entry-gate__idle::before {
    animation: none !important;
  }

  html.has-entry-gate[data-entry-state="gate"].gate-threat .entry-gate__curtain::before {
    opacity: 0.24;
    transform: scale(1.08);
  }
}

@keyframes bb-forbidden-command {
  0%, 100% {
    filter: none;
  }
  34% {
    filter: drop-shadow(-5px 0 0 rgba(24, 63, 190, 0.52));
  }
  67% {
    filter: drop-shadow(5px 0 0 rgba(155, 124, 255, 0.38));
  }
}

@keyframes bb-screen-burn-threat {
  0%, 100% {
    clip-path: polygon(0 7%, 100% 7%, 100% 29%, 0 25%, 0 42%, 100% 45%, 100% 72%, 0 68%, 0 86%, 100% 82%, 100% 100%, 0 100%);
    transform: translate3d(0, 0, 0) scale(1.14);
  }
  38% {
    clip-path: polygon(0 3%, 100% 8%, 100% 34%, 0 29%, 0 51%, 100% 47%, 100% 78%, 0 71%, 0 91%, 100% 87%, 100% 100%, 0 100%);
    transform: translate3d(-9px, 2px, 0) scale(1.16);
  }
  72% {
    clip-path: polygon(0 11%, 100% 6%, 100% 24%, 0 31%, 0 38%, 100% 43%, 100% 67%, 0 74%, 0 83%, 100% 79%, 100% 100%, 0 100%);
    transform: translate3d(8px, -2px, 0) scale(1.13);
  }
}

@keyframes bb-threat-readout {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  42% {
    transform: translate3d(-8px, 3px, 0);
  }
  76% {
    transform: translate3d(5px, -2px, 0);
  }
}

@keyframes bb-threat-title {
  0%, 100% {
    clip-path: inset(0);
    transform: translateX(-50%) scaleX(1.04);
  }
  46% {
    clip-path: inset(9% 0 18% 0);
    transform: translateX(calc(-50% - 9px)) scaleX(1.08);
  }
  72% {
    clip-path: inset(22% 0 7% 0);
    transform: translateX(calc(-50% + 7px)) scaleX(0.98);
  }
}

/* CTA-FIRST DIRECTION -------------------------------------------------- */

html.has-entry-gate .entry-gate::after {
  animation: none !important;
  background-position: 50% 0, 0 0, 0 0;
}

html.has-entry-gate .cursor-echo {
  display: none !important;
}

.entry-gate__idle::before {
  display: none;
}

.entry-gate__button {
  width: min(430px, calc(100vw - 36px));
  min-height: 102px;
  place-items: center;
  padding: 34px 68px 30px;
  border: 2px solid var(--paper);
  color: var(--ink);
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 5px,
      rgba(2, 8, 13, 0.72) 5px 7px,
      transparent 7px 10px,
      rgba(24, 63, 190, 0.72) 10px 11px,
      transparent 11px 15px
    ) calc(100% - 14px) 16px / 42px calc(100% - 32px) no-repeat,
    linear-gradient(rgba(71, 207, 255, 0.13) 1px, transparent 1px) 0 0 / 100% 8px,
    linear-gradient(108deg, var(--paper) 0 72%, var(--cyan-hot) 100%);
  box-shadow:
    -9px 9px 0 var(--deep-blue),
    6px -6px 0 rgba(155, 124, 255, 0.42),
    0 0 0 1px rgba(134, 239, 255, 0.7),
    0 0 34px rgba(134, 239, 255, 0.3);
  font: 900 clamp(14px, 1.25vw, 18px)/1 var(--mono);
  letter-spacing: 0.16em;
  text-align: center;
  text-shadow: none;
  transition:
    color 150ms ease,
    background-color 150ms ease,
    border-color 150ms ease,
    box-shadow 180ms ease;
}

.entry-gate__button::before,
.entry-gate__button::after {
  right: 58px;
  left: 14px;
  color: rgba(2, 8, 13, 0.66);
  font-size: 6px;
  text-align: left;
}

.entry-gate__button::before {
  content: "ENTRY: BY ACTION ONLY";
}

.entry-gate__button::after {
  content: "NO SPECTATORS.  //  PRESS TO ENTER";
  color: rgba(24, 63, 190, 0.82);
}

.entry-gate__button:hover:not(:disabled),
.entry-gate__button:focus-visible,
html.has-entry-gate[data-entry-state="gate"].gate-threat .entry-gate__button {
  border-color: var(--paper);
  color: var(--ink);
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 5px,
      rgba(2, 8, 13, 0.78) 5px 7px,
      transparent 7px 10px,
      rgba(155, 124, 255, 0.68) 10px 11px,
      transparent 11px 15px
    ) calc(100% - 14px) 16px / 42px calc(100% - 32px) no-repeat,
    linear-gradient(rgba(24, 63, 190, 0.12) 1px, transparent 1px) 0 0 / 100% 8px,
    linear-gradient(108deg, var(--cyan-hot) 0 76%, var(--paper) 100%);
  box-shadow:
    -12px 12px 0 var(--deep-blue),
    8px -8px 0 rgba(155, 124, 255, 0.62),
    0 0 0 2px rgba(134, 239, 255, 0.76),
    0 0 32px rgba(134, 239, 255, 0.56),
    0 0 64px rgba(155, 124, 255, 0.2);
  letter-spacing: 0.16em;
  animation: none;
}

html.has-entry-gate[data-entry-state="gate"].gate-threat .entry-gate__curtain::before {
  opacity: 0.13;
  clip-path: inset(0);
  transform: scale(1.08);
  animation: none;
}

html.has-entry-gate[data-entry-state="gate"].gate-threat .entry-gate__curtain::after {
  top: 12vh;
  content:
    "PRIVATE ROOM // NO GUESTS\A\A\A"
    "                                              TRUST REVOKED";
  opacity: 0.34;
  animation: none;
}

/* Click choreography: white overexposure, center apparition, side intrusions. */
.entry-gate__scene::before,
.entry-gate__scene::after {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0;
  pointer-events: none;
}

.entry-gate__scene::before {
  z-index: 7;
  background: var(--paper);
  mix-blend-mode: normal;
}

.entry-gate__scene::after {
  z-index: 3;
  background-image:
    url("art%20main.png"),
    url("art%20main.png");
  background-repeat: no-repeat;
  background-position:
    -46vw 38%,
    calc(100% + 46vw) 38%;
  background-size:
    auto 118vh,
    auto 118vh;
  filter:
    grayscale(1)
    contrast(1.55)
    brightness(0.68)
    drop-shadow(-12px 0 0 rgba(24, 63, 190, 0.5))
    drop-shadow(10px 0 0 rgba(134, 239, 255, 0.28));
  mix-blend-mode: screen;
}

html.has-entry-gate[data-entry-state="impact"] .entry-gate::after {
  opacity: 0.14;
}

html.has-entry-gate[data-entry-state="impact"] .entry-gate__scene::before {
  animation: bb-entry-white-flash 230ms ease-out both;
}

html.has-entry-gate[data-entry-state="impact"] .entry-gate__scene::after {
  animation: bb-entry-side-intrusions 620ms steps(5, end) 470ms both;
}

html.has-entry-gate[data-entry-state="impact"] .entry-gate__art img {
  animation: bb-entry-center-apparition 560ms cubic-bezier(0.12, 0.82, 0.18, 1) 170ms both;
}

html.has-entry-gate[data-entry-state="impact"] .entry-gate__art::after {
  animation: entry-overlay-impact 560ms cubic-bezier(0.12, 0.82, 0.18, 1) 170ms both;
}

html.has-entry-gate[data-entry-state="impact"] .entry-gate__impact {
  animation: entry-radial-impact 360ms ease-out 170ms forwards;
}

html.has-entry-gate[data-entry-state="impact"] .entry-gate__copy {
  animation: entry-copy-show 1ms steps(1, end) 360ms forwards;
}

html.has-entry-gate[data-entry-state="impact"] .entry-gate__tear--one {
  animation: entry-tear-one 120ms steps(2, end) 510ms forwards;
}

html.has-entry-gate[data-entry-state="impact"] .entry-gate__tear--two {
  animation: entry-tear-two 120ms steps(2, end) 820ms forwards;
}

@media (max-width: 600px) {
  .entry-gate__button {
    width: min(358px, calc(100vw - 32px));
    min-height: 96px;
    padding: 32px 54px 28px 18px;
    font-size: 13px;
    letter-spacing: 0.12em;
  }

  .entry-gate__button::before,
  .entry-gate__button::after {
    right: 46px;
    left: 11px;
    font-size: 5px;
  }

  .entry-gate__scene::after {
    background-position:
      -88vw 34%,
      calc(100% + 88vw) 34%;
    background-size:
      auto 104vh,
      auto 104vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .entry-gate__scene::before,
  .entry-gate__scene::after {
    display: none !important;
  }

  html.has-entry-gate[data-entry-state="impact"] .entry-gate__art img,
  html.has-entry-gate[data-entry-state="impact"] .entry-gate__art::after {
    animation: none !important;
  }
}

@keyframes bb-entry-white-flash {
  0%, 38% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes bb-entry-center-apparition {
  0% {
    opacity: 0;
    transform: scale(1.42);
    filter: brightness(2.4) contrast(1.55);
  }
  28% {
    opacity: 1;
    transform: scale(1.24);
    filter: brightness(1.16) contrast(1.3);
  }
  100% {
    opacity: 1;
    transform: scale(var(--entry-scale-end));
    filter: none;
  }
}

@keyframes bb-entry-side-intrusions {
  0% {
    opacity: 0;
    background-position:
      -52vw 38%,
      calc(100% + 52vw) 38%;
  }
  26% {
    opacity: 0.42;
    background-position:
      -27vw 38%,
      calc(100% + 27vw) 38%;
  }
  54% {
    opacity: 0.62;
    background-position:
      -13vw 38%,
      calc(100% + 13vw) 38%;
  }
  78% {
    opacity: 0.28;
    background-position:
      -19vw 38%,
      calc(100% + 19vw) 38%;
  }
  100% {
    opacity: 0;
    background-position:
      -10vw 38%,
      calc(100% + 10vw) 38%;
  }
}