:root {
  color-scheme: dark;
  --cyan: #8bf8ff;
  --gold: #ffad48;
  --paper: #f3f1e9;
  --brand: Georgia, "Times New Roman", serif;
  font-family: var(--brand);
  background: #02070b;
  color: var(--paper);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #02070b;
}

body::before,
body::after {
  position: fixed;
  inset: 0;
  content: "";
  pointer-events: none;
}

body::before {
  z-index: 0;
  background: #02070b url("./assets/nightshift-threshold.webp") center 55% / cover no-repeat;
  filter: saturate(.86) contrast(1.08) brightness(.68);
  transform: scale(1.015);
}

body::after {
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(0, 5, 8, .34), rgba(1, 6, 10, .14) 44%, rgba(0, 4, 7, .78)),
    linear-gradient(90deg, rgba(0, 5, 8, .62), transparent 58%, rgba(2, 7, 10, .24)),
    radial-gradient(circle at 73% 72%, rgba(255, 154, 53, .12), transparent 25%);
}

.demo-stage {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  place-content: center;
  justify-items: center;
  gap: .55rem;
  padding: .7rem;
}

.phone-shell {
  position: relative;
  width: min(26rem, calc(100vw - 1.25rem));
  height: min(50rem, calc(100dvh - 4rem));
  overflow: hidden;
  border: .48rem solid #06090c;
  border-radius: 3rem;
  background: #02070b;
  box-shadow:
    0 2.4rem 7rem rgba(0, 0, 0, .58),
    0 0 0 1px rgba(255, 173, 72, .3),
    inset 0 0 0 1px rgba(255, 255, 255, .08);
  isolation: isolate;
}

.phone-shell::before {
  position: absolute;
  z-index: 0;
  inset: -.35rem;
  background: url("./assets/nightshift-threshold-mobile.webp") center 52% / cover no-repeat;
  content: "";
  filter: saturate(1.22) contrast(1.07) brightness(1.12);
  pointer-events: none;
}

.phone-speaker {
  position: absolute;
  z-index: 20;
  top: .22rem;
  left: 50%;
  width: 3.4rem;
  height: .24rem;
  border-radius: 999px;
  background: rgba(198, 214, 214, .28);
  box-shadow: 0 0 .65rem rgba(139, 248, 255, .13);
  pointer-events: none;
  transform: translateX(-50%);
}

.harness {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: flex;
  min-height: 0;
  padding: calc(.8rem + env(safe-area-inset-top)) .85rem calc(.75rem + env(safe-area-inset-bottom));
  flex-direction: column;
}

.harness header {
  text-align: center;
}

.harness header span {
  color: var(--cyan);
  font-size: .58rem;
  letter-spacing: .22em;
}

.harness header h1 {
  margin: .25rem 0 0;
  color: #fff;
  font-size: .92rem;
  letter-spacing: .11em;
}

.back-home {
  position: absolute;
  z-index: 4;
  top: calc(.35rem + env(safe-area-inset-top));
  left: .6rem;
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  gap: .32rem;
  color: rgba(229, 237, 234, .68);
  padding: 0 .35rem;
  font-size: .48rem;
  letter-spacing: .08em;
  text-decoration: none;
  text-transform: uppercase;
}

.back-home:focus-visible,
.secure-signin:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.conversation {
  display: flex;
  min-height: 0;
  margin-top: .8rem;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(211, 231, 232, .22);
  border-top-color: rgba(255, 173, 72, .5);
  border-radius: 20px;
  background: rgba(3, 10, 14, .2);
  box-shadow: 0 24px 76px rgba(0, 0, 0, .32), inset 0 1px rgba(255, 255, 255, .06);
  backdrop-filter: blur(8px) saturate(1.08);
}

.messages {
  display: flex;
  min-height: 7rem;
  padding: .85rem;
  flex: 1;
  flex-direction: column;
  gap: .72rem;
  overflow-y: auto;
}

.message {
  width: fit-content;
  max-width: 88%;
  padding: .68rem .74rem .7rem;
  border: 1px solid rgba(211, 231, 232, .18);
  border-radius: 12px 12px 12px 3px;
  background: rgba(255, 255, 255, .025);
}

.message--visitor {
  align-self: flex-end;
  border-color: rgba(255, 173, 72, .3);
  border-radius: 12px 12px 3px 12px;
  background: rgba(255, 173, 72, .07);
}

.message--habitat {
  border-color: rgba(139, 248, 255, .26);
  background: rgba(139, 248, 255, .045);
}

.message span {
  display: block;
  margin-bottom: .28rem;
  color: var(--gold);
  font-size: .52rem;
  letter-spacing: .12em;
}

.message--habitat span {
  color: var(--cyan);
}

.message p {
  margin: 0;
  color: var(--paper);
  font-size: .82rem;
  line-height: 1.58;
  text-shadow: 0 1px .45rem rgba(0, 0, 0, .42);
}

.signin {
  display: grid;
  width: min(100%, 22rem);
  margin: auto auto 0;
  place-items: center;
}

.secure-signin {
  display: flex;
  width: 100%;
  min-height: 3.25rem;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(139, 248, 255, .34);
  background: rgba(3, 12, 16, .48);
  color: var(--paper);
  padding: 0 .9rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  backdrop-filter: blur(16px);
}

.secure-signin b {
  color: var(--cyan);
  font-size: 1rem;
}

.route-motion {
  position: relative;
  width: 100%;
  height: 2.5rem;
  flex: 0 0 auto;
  pointer-events: none;
}

.route-motion i {
  position: absolute;
  top: calc(.5rem + (var(--n, 0) * .16rem));
  left: calc(50% - 3.8rem + (var(--n, 0) * 1.12rem));
  width: .38rem;
  height: .38rem;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 1.1rem rgba(139, 248, 255, .9);
  animation: string-pulse 1.8s ease-in-out infinite;
  animation-delay: calc(var(--n, 0) * 90ms);
}

.route-motion i:nth-child(1) { --n: 0; }
.route-motion i:nth-child(2) { --n: 1; }
.route-motion i:nth-child(3) { --n: 2; }
.route-motion i:nth-child(4) { --n: 3; }
.route-motion i:nth-child(5) { --n: 4; }
.route-motion i:nth-child(6) { --n: 5; }
.route-motion i:nth-child(7) { --n: 6; }

.release-note {
  margin: 0 0 .55rem;
  color: rgba(198, 214, 214, .66);
  text-align: center;
  font-size: .48rem;
  letter-spacing: .12em;
}

.composer {
  display: flex;
  min-height: 4.25rem;
  align-items: center;
  gap: .65rem;
  border-top: 1px solid rgba(211, 231, 232, .18);
  background: rgba(3, 9, 13, .3);
  padding: .42rem .42rem .42rem 1rem;
  backdrop-filter: blur(18px);
}

.composer-field {
  display: flex;
  min-width: 0;
  min-height: 3rem;
  flex: 1;
  align-items: center;
  border: 1px solid rgba(146, 179, 190, .22);
  border-radius: 14px;
  background: rgba(3, 10, 14, .38);
  color: rgba(243, 241, 233, .58);
  padding: .72rem .76rem;
  font-size: 1rem;
  line-height: 1.45;
}

.send {
  display: block;
  width: 3.35rem;
  height: 3.35rem;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 50%;
}

.send img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: turn 12s linear infinite;
}

.stage-truth {
  margin: .35rem 0 0;
  color: rgba(198, 214, 214, .54);
  font-size: .43rem;
  letter-spacing: .1em;
  line-height: 1.45;
  text-align: center;
}

.phone-caption {
  margin: 0;
  color: rgba(211, 231, 232, .58);
  font-size: .48rem;
  letter-spacing: .14em;
  text-align: center;
  text-shadow: 0 .15rem .8rem #000;
}

@keyframes turn {
  to { transform: rotate(1turn); }
}

@keyframes string-pulse {
  0%, 100% { opacity: .22; transform: translateY(.4rem) scale(.72); }
  50% { opacity: 1; transform: translateY(-.4rem) scale(1); }
}

@media (min-width: 48rem) {
  .phone-shell::before {
    background-image: url("./assets/nightshift-threshold.webp");
  }
}

@media (max-width: 25rem), (max-height: 44rem) {
  .message p {
    font-size: .76rem;
  }

  .messages {
    padding: .7rem;
  }

  .composer-field {
    font-size: .86rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .send img,
  .route-motion i {
    animation: none;
  }
}