:root {
  --n1-handle-pivot-x: 41.82%;
  --n1-handle-pivot-y: 50.1%;
  --n1-handle-width: 11.2%;
  --n1-handle-source-offset-x: -7.4%;
  --n1-handle-source-offset-y: -49.7%;
  --n1-handle-source-pivot-x: 7.4%;
  --n1-handle-source-pivot-y: 49.7%;
  --n1-handle-turn: 23deg;
}

.scene[data-scene-state="closed"] {
  pointer-events: none;
}

.scene[data-scene-state="closed"] .scene-stage,
.scene[data-scene-state="open"] .scene-stage {
  width: min(100vw, 150svh);
  height: min(100svh, 66.6667vw);
  visibility: hidden;
}

.scene[data-scene-state="closed"] .scene-stage {
  visibility: visible;
}

.scene[data-scene-state="closed"].is-visually-ready.is-interactive.is-entry-ready {
  pointer-events: auto;
}

.scene[data-scene-state="closed"].is-visually-ready.is-interactive.is-entry-ready .handle-hitbox {
  pointer-events: auto;
}

.scene[data-scene-state="closed"].is-visually-ready .scene-stage {
  visibility: visible;
}

.scene[data-scene-state="closed"].is-entry-door-visible .scene-stage {
  visibility: visible;
}

.entry-page .scene[data-scene-state="closed"].is-entry-ready .scene-stage {
  visibility: visible;
}

.entry-page .scene[data-scene-state="closed"] {
  opacity: 1;
  transition: opacity var(--entry-transition, 1190ms) ease;
}

.entry-page .scene[data-scene-state="closed"].is-entry-door-visible {
  opacity: .25;
}

.entry-page .scene[data-scene-state="closed"].is-entry-ready {
  opacity: 1;
  transition-duration: var(--entry-fade-in, 1870ms);
}

.entry-cinematic {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: rgba(0, 0, 0, .9);
  color: #e7e9e8;
  --entry-text-scale: 1.520875;
  --entry-excluded-text-scale: 1.3225;
  --entry-line-height: 1.595;
  font: 500 calc(clamp(14px, 2.8vw, 25px) * var(--entry-text-scale))/var(--entry-line-height) Georgia, serif;
  letter-spacing: .08em;
  text-align: center;
  transition: opacity var(--entry-transition, 1190ms) ease, visibility 0s linear var(--entry-transition, 1190ms);
}

.entry-cinematic.is-door {
  background: transparent;
}

.entry-cinematic.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.entry-copy {
  width: min(88vw, 960px);
  min-height: min(72svh, 680px);
  display: grid;
  grid-template-rows: minmax(5rem, .8fr) minmax(12rem, 1.5fr);
  align-items: center;
}

.entry-anchor-region,
.entry-message-region {
  display: grid;
  place-items: center;
  min-width: 0;
}

.entry-anchor-region {
  grid-template-columns: 1fr;
  grid-template-rows: repeat(2, minmax(2.2rem, auto));
  justify-items: center;
  min-height: 5rem;
  transform: translateY(0vh);
}

.entry-message-region {
  align-content: center;
  gap: clamp(1.25rem, 4vh, 3.5rem);
  grid-template-rows: minmax(4rem, auto) minmax(4rem, auto);
  min-height: 12rem;
}

.entry-anchor,
.entry-primary,
.entry-secondary {
  margin: 0;
  opacity: 0;
  transition: opacity var(--entry-fade-in, 1870ms) ease;
  white-space: pre-line;
}

.entry-fade-out {
  transition-duration: var(--entry-fade-out, 2805ms);
}

.entry-anchor {
  font-size: calc(clamp(1.05rem, 2.35vw, 1.8rem) * var(--entry-text-scale));
  letter-spacing: .16em;
}

.entry-always,
.entry-but {
  grid-column: 1;
  grid-row: 1;
}

.entry-remember {
  grid-column: 1;
  grid-row: 2;
}

.entry-primary {
  max-width: 28ch;
  font-size: calc(clamp(1.05rem, 2.65vw, 1.85rem) * var(--entry-text-scale));
  overflow-wrap: anywhere;
}

.entry-secondary {
  max-width: 34ch;
  font-size: calc(clamp(.8rem, 1.75vw, 1.15rem) * var(--entry-text-scale));
  color: #b8bcba;
  overflow-wrap: anywhere;
}

.entry-cinematic.is-finale .entry-message-region {
  align-content: center;
  gap: clamp(1.25rem, 4vh, 3.5rem);
  grid-template-rows: minmax(4.5rem, auto) minmax(5.5rem, auto);
}

.entry-cinematic.is-finale .entry-primary,
.entry-secondary.entry-finale {
  max-width: 28ch;
  font-size: calc(clamp(1.5rem, 3.6vw, 2.45rem) * var(--entry-excluded-text-scale));
  color: #e7e9e8;
}

.entry-cinematic.is-finale .entry-primary,
.entry-cinematic.is-finale .entry-secondary {
  align-self: center;
}

.entry-dev-paused {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1;
  color: rgba(231, 233, 232, .58);
  font: 600 10px/1 ui-monospace, monospace;
  letter-spacing: .12em;
  pointer-events: none;
}

.entry-cinematic.show-always .entry-always,
.entry-cinematic.show-but .entry-but,
.entry-cinematic.show-remember .entry-remember,
.entry-cinematic.show-primary .entry-primary,
.entry-cinematic.show-secondary .entry-secondary {
  opacity: 1;
}

.entry-cinematic.is-knock {
  cursor: pointer;
  touch-action: manipulation;
}

.entry-cinematic.qa-knock-demonstration {
  --qa-knock-demo-opacity: 0.50;
}

.entry-cinematic.qa-knock-demonstration.show-primary .entry-primary,
.entry-cinematic.qa-knock-demonstration.show-secondary .entry-secondary {
  opacity: var(--qa-knock-demo-opacity);
}

.entry-cinematic.is-knock .entry-primary {
  font-size: calc(clamp(14px, 2.8vw, 25px) * var(--entry-excluded-text-scale));
  font-family: ui-monospace, monospace;
  letter-spacing: .18em;
}

.scene-stage.is-knock-impact {
  animation: entry-knock-impact 179ms ease-out;
  transform-origin: center center;
}

@keyframes entry-knock-impact {

  0%,
  100% {
    filter: brightness(1);
    transform: scale(1)
  }

  35% {
    filter: brightness(1.75);
    transform: scale(1.02)
  }

  65% {
    transform: scale(.992)
  }
}

.entry-finale-pulse {
  animation: entry-finale-pulse 468ms ease-in-out 4;
}

@keyframes entry-finale-pulse {
  50% {
    opacity: .62;
    text-shadow: 0 0 15px rgba(230, 235, 232, .35)
  }
}

@media (prefers-reduced-motion:reduce) {

  .entry-cinematic,
  .entry-anchor,
  .entry-primary,
  .entry-secondary {
    transition-duration: 213ms
  }

  .scene-stage.is-knock-impact {
    animation: none
  }

  .entry-finale-pulse {
    animation: none
  }
}

@media (max-width:600px) {
  .entry-copy {
    width: min(90vw, 620px);
    min-height: min(68svh, 580px);
    grid-template-rows: minmax(4rem, .65fr) minmax(13rem, 1.7fr)
  }

  .entry-primary {
    max-width: 25ch
  }

  .entry-secondary {
    max-width: 29ch
  }

  .entry-anchor-region {
    transform: translateY(-5svh);
  }
}

.scene[data-scene-state="open"].is-visually-ready .scene-stage {
  visibility: visible;
}

.scene[data-scene-state="open"] .dark-doorway {
  pointer-events: none;
}

.scene[data-scene-state="open"].is-visually-ready .dark-doorway {
  pointer-events: auto;
}

.scene.qa-door-hitbox-expanded .door-surface {
  top: 26%;
  left: 41.8%;
  width: 16.4%;
  height: 49%;
  pointer-events: none;
}

.scene.qa-door-hitbox-expanded.is-visually-ready.is-interactive.is-entry-ready .door-surface {
  pointer-events: auto;
}

.scene.qa-door-hitbox-expanded .handle-hitbox {
  pointer-events: none !important;
}

.door-surface {
  position: absolute;
  top: 16.6%;
  left: 36.9%;
  width: 25%;
  height: 65%;
}

.handle-anchor {
  position: absolute;
  top: var(--n1-handle-pivot-y);
  left: var(--n1-handle-pivot-x);
  width: var(--n1-handle-width);
  aspect-ratio: 1774 / 887;
  pointer-events: none;
}

.handle-hitbox {
  position: absolute;
  top: 0;
  left: -6%;
  width: 104%;
  height: max(60%, 44px);
  translate: 0 -50%;
  cursor: grab;
  pointer-events: none;
  touch-action: manipulation;
}

.handle-hitbox:active {
  cursor: grabbing;
}

.handle-lever {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  translate: var(--n1-handle-source-offset-x) var(--n1-handle-source-offset-y);
  transform-origin: var(--n1-handle-source-pivot-x) var(--n1-handle-source-pivot-y);
  will-change: transform;
}

.handle-raster-source {
  display: block;
  width: 300%;
  height: auto;
  transform: scale(0.3333333333);
  transform-origin: 0 0;
  pointer-events: none;
}

.scene.is-attempting .handle-lever {
  animation: n1-handle-attempt 380ms cubic-bezier(.25, .75, .3, 1);
}

.scene.is-attempting .scene-stage {
  animation: n1-door-jolt 380ms ease-out;
}

.dark-doorway {
  position: absolute;
  top: 18.5%;
  left: 38.2%;
  width: 21%;
  height: 64%;
  cursor: pointer;
  touch-action: manipulation;
}

@media (orientation: portrait) {
  :root {
    --n1-handle-pivot-x: 36.75%;
    --n1-handle-pivot-y: 48.9%;
    --n1-handle-width: 20%;
  }

  .scene[data-scene-state="closed"] .scene-stage,
  .scene[data-scene-state="open"] .scene-stage {
    width: min(100vw, 56.2799svh);
    height: min(100svh, 177.6833vw);
  }

  .scene.qa-door-hitbox-expanded .door-surface {
    top: 30.3%;
    left: 35.7%;
    width: 28.6%;
    height: 38.8%;
  }

  .dark-doorway {
    top: 25.1%;
    left: 31.8%;
    width: 32.5%;
    height: 48.5%;
  }
}

@keyframes n1-handle-attempt {

  0%,
  100% {
    transform: rotate(0);
  }

  38%,
  58% {
    transform: rotate(var(--n1-handle-turn));
  }
}

@keyframes n1-door-jolt {

  0%,
  30%,
  100% {
    transform: translateX(0);
  }

  43% {
    transform: translateX(.12%);
  }

  56% {
    transform: translateX(-.06%);
  }
}

@media (prefers-reduced-motion: reduce) {

  .scene.is-attempting .handle-lever,
  .scene.is-attempting .scene-stage {
    animation-duration: 200ms;
  }
}