@import url("https://fonts.googleapis.com/css2?family=DynaPuff:wght@400..700&family=Rubik+Glitch&family=Rubik+Scribble&family=Syne+Mono&display=swap");

@import url("https://use.typekit.net/eyw6cnj.css");

@font-face {
  font-family: "title-font";
  src: url(./assets/fonts/unknow.ttf) format("truetype");
}

.syne-mono-button {
  font-family: "Syne Mono", monospace;
  font-weight: 400;
  font-style: normal;
}

.dynapuff-subtitles {
  font-family: "DynaPuff", system-ui;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

:root {
  /*screen dimension*/
  --max-width: 1280px;
  --max-height: 720px;

  /* Colour Palette */
  --primary-white: #fefef4;
  --primary-black: #000000;
  --off-white: #d9fde1;
  --light-purple: #5d67b0;
  --dark-purple: #4c5ab3;
  --light-blue: #5fc2c0;
  --dark-blue: #216d88;
  --light-blue-two: #99c4d3;
  --dark-blue-two: #538090;
  --light-green: #c5fd98;
  --dark-green: #76975f;
  --button-disabled: #f3f2f2;

  /* Typography */
  --font-family-base: "quicksand", sans-serif;
  --font-family-heading: "title-font", monospace;
  --font-family-subheading: "Syne Mono", monospace;
  --font-family-button: "Syne Mono", monospace;
  --font-family-td: "DynaPuff", system-ui;

  /* Font Sizes */
  --font-size-base: 1.5rem;
  --font-size-heading: 6rem;
  --font-size-subheading: 4rem;
  --font-size-tabs: 2.5rem;
  --font-size-button: 3rem;
  --font-size-content: 1.8rem;
  --font-size-processing: 2rem;
  /* Line Heights */
  --line-height-base: 1.6;
  --line-height-tight: 1.4;

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 3rem;
  --spacing-xl: 4rem;
  --spacing-xxl: 6rem;

  /* Border Radius */
  --border-radius: 15px;

  /* Layout */
  --container-width: 90%;
  --container-max-width: 1800px;
  --input-container-width: 60%;
  --output-container-width: 40%;
  --chat-height: 400px;
  --textarea-height: 400px;
  --textarea-width: 100%;

  /* Button */
  --button-width-sm: 300px;
  --button-width-md: 400px;
  --button-width-lg: 600px;
  --button-padding-sm: 5px;
  --button-padding-tb: 10px;
  --button-padding-lr: 80px;
  --button-border-width: 3px;
  --button-border-style: dashed;

  /* Manual Container */
  --manual-width: 800px;
  --manual-height: 450px;

  /* Waveform */
  --waveform-height: 150px;

  /* Trust Assessment */
  --trust-container-width: 400px;
  --trust-container-max-width: 900px;
  /* Transitions */
  --transition-fast: 0.1s;
  --transition-normal: 0.3s;
}

/* Reset & Base Styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--primary-black);
  background: url(./assets/images/background/bg1.png);
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--primary-white);
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
}

/* Headings */
h1 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-heading);
  color: var(--primary-white);
  font-weight: 700;
  font-style: normal;
  text-align: center;
}

h2 {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-subheading);
  margin-bottom: var(--spacing-sm);
}

h3 {
  font-family: var(--font-family-subtitle);
  font-size: var(--font-size-subheading);
  margin-bottom: var(--spacing-sm);
}

p {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  font-weight: 200;
}

/* Base Button Styles */
button {
  background-color: transparent;
  color: var(--dark-purple);
  border: var(--button-border-width) var(--button-border-style)
    var(--primary-white);
  border-radius: var(--border-radius);
  padding: var(--button-padding-tb) var(--button-padding-lr);
  cursor: pointer;
  font-family: var(--font-family-button);
  font-size: var(--font-size-button);
  transition: all var(--transition-normal);
  margin: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs) 0;
}

button:hover {
  background-color: var(--light-green);
  color: var(--primary-black);
  border-color: var(--primary-white);
  transform: scale(1.02);
}

button:active {
  background-color: var(--dark-green);
  color: var(--primary-white);
  border-color: var(--primary-white);
  transform: scale(0.98);
}

button:disabled {
  border: dashed 3px var(--button-disabled);
  color: var(--button-disabled);
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Specific button variations */
#start-button {
  position: absolute;
  top: 75%;
  left: 40%;
  align-items: center;
  justify-content: center;
  transform: translate(-30%, -10%);
  width: var(--button-width-lg);
  padding: var(--button-padding-tb) var(--button-padding-lr);
}

#sendButton {
  width: 100%;
  height: 60px;
  font-size: var(--font-size-button);
}

.narrative-button {
  flex-grow: 1;
  text-align: center;
  min-width: 120px;
}

.primary-button {
  background-color: var(--color-primary-hover);
}

.primary-button:hover {
  background-color: var(--color-primary-active);
}

/*index.html*/
#firstVid,
#secondVid,
#thirdVid,
#fourthVid,
#fifthVid,
#sixthVid {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: 100%;
  height: 100%;
  z-index: 0;
  object-fit: cover;
}

#title-container {
  position: relative;
  width: var(--max-width);
  height: var(--max-height);
  padding: var(--spacing-xl);
  box-sizing: border-box;
  z-index: 2;
}

/* #stranger-image {
  position: absolute;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 80%;
  max-width: 500px;
  opacity: 0.9;
  box-sizing: border-box;
} */

/* .title-text {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-heading);
  font-weight: 700;
  font-style: normal;
  position: relative;
  z-index: 2;
}

#title-one {
  position: absolute;
  top: 15vh;
  left: 15vw;
  z-index: 2;
}

#title-two {
  position: absolute;
  top: 25vh;
  left: 30vw;
  z-index: 2;
}

#title-three {
  position: absolute;
  top: 40vh;
  left: 80vw;
  z-index: 2;
}

#title-four {
  position: absolute;
  top: 55vh;
  left: 50vw;
  z-index: 2;
} */

/*scenario.html*/
#setting-desc {
  position: relative;
  width: var(--max-width);
  height: var(--max-height);
  margin: 0;
  padding: var(--spacing-xl);
  box-sizing: border-box;
  top: 40%;
  left: 50%;
  transform: translate(-40%, -50%);
  z-index: 2;
}

#setting-desc p {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
}

#turn-on-machine {
  position: absolute;
  top: 50%;
  left: 40%;
  transform: translate(-50%, -50%);
  color: var(--primary-white);
}

#turn-on-machine:hover {
  color: var(--primary-black);
}

/*manual.html*/

#manual-button-container {
  position: absolute;
  top: 10vh;
  left: 30vw;
  transform: translate(-15%, -50%);
  display: flex;
  gap: 1.5vw;
  z-index: 3;
}

.machine-manual-container {
  width: var(--manual-width);
  height: var(--manual-height);
  top: 40%;
  left: 50%;
  transform: translate(30%, 30%);
  overflow: hidden;
  border-radius: var(--border-radius);
  border: 3px dashed var(--primary-white);
  z-index: 2;
}

#manual-title {
  font-size: var(--font-size-heading);
  line-height: 1.2;
}

#interaction-page-button {
  font-size: var(--font-size-tabs);
  color: var(--primary-white);
  padding: 1vh 0.8vw;
  height: 1.2em;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius);
  border: 3px dashed var(--primary-white);
  transition: background-color 0.3s, color 0.3s;
  box-sizing: content-box;
}

#interaction-page-button:hover {
  background-color: var(--light-green);
  color: var(--primary-black);
}

#interaction-page-button.inactive {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.tabs {
  display: flex;
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
  position: relative;
  overflow: hidden;
  z-index: 3;
}

.tab {
  font-family: var(--font-family-subheading);
  font-size: var(--font-size-tabs);
  padding: 1.5vh 0;
  flex: 1;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
  margin: 0 0.2vw;
  z-index: 4;
}

.tab[onclick="openTab('machine-id')"] {
  background-color: rgb(153, 196, 211, 0.5);
  color: var(--primary-black);
  opacity: 0.8;
}

.tab[onclick="openTab('machine-functions')"] {
  background-color: rgb(197, 253, 152, 0.5);
  color: var(--primary-black);
  opacity: 0.8;
}

.tab[onclick="openTab('machine-signals')"] {
  background-color: rgb(93, 103, 176, 0.5);
  color: var(--primary-black);
  opacity: 0.8;
}

/* Active tab colors */
.tab[onclick="openTab('machine-id')"].active {
  background-color: rgb(153, 196, 211, 0.8);
  color: var(--primary-black);
}

.tab[onclick="openTab('machine-functions')"].active {
  background-color: rgb(197, 253, 152, 0.8);
  color: var(--primary-black);
}

.tab[onclick="openTab('machine-signals')"].active {
  background-color: rgb(93, 103, 176, 0.8);
  color: var(--primary-black);
}

.tab-content {
  padding: 3vh 3vw;
  min-height: 45vh;
  transition: all 0.3s ease;
  background-color: var(--light-blue-two);
  color: var(--primary-black);
  opacity: 0.8;
}

.content {
  display: none;
}

.content.active {
  display: block;
}

#machine-id,
#machine-functions,
#machine-signals {
  padding: 0% 10%;
}

.machine-id-icon,
.machine-functions-icon,
.machine-signals-icon {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  width: 70%;
  height: 50%;
  justify-content: center;
  align-self: center;
}

.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: var(--light-blue-two);
  padding: 2rem;
  border-radius: 10px;
  max-width: 600px;
  width: 90%;
  text-align: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  animation: modalFadeIn 0.3s ease-out;
}

.modal-content h2 {
  font-family: var(--font-family-subheading);
  color: var(--primary-black);
  margin-bottom: 1rem;
  font-size: 1.8rem;
}

.modal-content p {
  color: var(--primary-black);
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.modal-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.modal-buttons button {
  padding: 0.8rem 1.5rem;
  border: 3px dashed var(--primary-white);
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: var(--font-family-subheading);
  font-size: var(--font-size-content);
}

#modal-cancel {
  background-color: var(--light-purple);
  color: var(--primary-black);
}

#modal-cancel:hover {
  background-color: var(--light-green);
}

#modal-proceed {
  background-color: var(--light-purple);
  color: var(--primary-black);
}

#modal-proceed:hover {
  background-color: var(--light-green);
}

.modal-buttons button:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/*interactions.html*/

#control-buttons {
  width: 100%;
  height: 100vh;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

#control-buttons button {
  position: absolute;
  padding: 1vh 1.5vw;
  margin: 1vh;
  width: var(--button-width-md);
  font-size: var(--font-size-button);
  cursor: pointer;
  background-color: var(--dark-purple);
  color: var(--primary-white);
  border: 2px dashed var(--primary-white);
  border-radius: var(--border-radius);
  transition: all 0.3s ease;
}

#control-buttons button:hover {
  background-color: var(--light-blue-two);
}

#control-buttons button.inactive {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  background-color: var(--button-disabled);
  border: 3px dashed var(--dark-purple);
  color: var(--dark-purple);
}

#share-btn {
  top: 20%;
  left: 20%;
  transform: translate(-50%, -50%);
}

#share-btn.active {
  background-color: var(--light-purple);
}

#share-btn.inactive {
  cursor: not-allowed;
  pointer-events: none;
}

#share-btn:hover {
  background-color: var(--light-green);
  color: var(--primary-black);
}

#seek-btn {
  top: 50%;
  left: 70%;
  transform: translate(-50%, -50%);
}

#seek-btn.active {
  background-color: var(--light-purple);
}

#seek-btn.inactive {
  cursor: not-allowed;
  pointer-events: none;
}

#seek-btn:hover {
  background-color: var(--light-green);
  color: var(--primary-black);
}

#take-btn {
  top: 80%;
  left: 30%;
  transform: translate(-50%, -50%);
}

#take-btn.inactive {
  cursor: not-allowed;
  pointer-events: none;
}

#take-btn.active {
  background-color: var(--light-purple);
}

#take-btn:hover {
  background-color: var(--light-green);
  color: var(--primary-black);
}

.narrative-interaction {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  margin: 0;
  z-index: 2;
}

#interface-elements {
  width: var(--container-width);
  max-width: var(--container-max-width);
  height: 70vh;
  margin: 0 auto;
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
}

#interaction-title {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  width: 100%;
  text-align: center;
}

#next-btn {
  font-size: var(--font-size-tabs);
  color: var(--primary-white);
  padding: 1vh 0.8vw;
  height: 1.2em;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--border-radius);
  border: 3px dashed var(--primary-white);
  transition: background-color 0.3s, color 0.3s;
  box-sizing: content-box;
}

#next-btn:hover {
  color: var(--primary-black);
}

#interaction-title h2 {
  font-size: var(--font-size-subheading);
  color: var(--primary-white);
}

#inputs-container {
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.machine-process-output {
  width: 100%;
  text-align: center;
  color: var(--primary-white);
  margin-bottom: 1rem;
}

#inputText {
  width: 100%;
  min-height: 200px;
  padding: 1rem;
  border: 2px dashed var(--primary-white);
  border-radius: var(--border-radius);
  background-color: rgba(255, 255, 255, 0.3);
  color: var(--primary-black);
  font-size: var(--font-size-content);
  resize: vertical;
}

#inputText:focus {
  background-color: rgba(255, 255, 255, 0.5);
}

#sendButton {
  padding: 0.8rem 2rem;
  background-color: var(--dark-purple);
  color: var(--primary-white);
  font-size: var(--font-size-content);
  border: 3px dashed var(--primary-white);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all 0.3s ease;
}

#sendButton:hover {
  background-color: var(--light-green);
  color: var(--primary-black);
  transform: translateY(-2px);
}

#chatBox {
  height: calc(100% - 4vh);
  min-height: 10vh;
  overflow-y: auto;
  padding: var(--spacing-sm);
  border-radius: var(--border-radius);
  border: 3px dashed var(--primary-white);
  margin-bottom: var(--spacing-sm);
}

.machine-process-output {
  margin-bottom: var(--spacing-sm);
  background-color: transparent;
  border: 3px dashed var(--primary-white);
  border-radius: var(--border-radius);
  padding: var(--spacing-sm);
}

#processing-message {
  font-size: var(--font-size-processing);
  padding: 0;
  margin-bottom: var(--spacing-sm);
}

.processing-message p {
  font-family: var(--font-family-selection);
}

#status {
  color: var(--primary-white);
  font-style: italic;
  min-height: 1.5em;
  margin-top: var(--spacing-xs);
}

/* Audio Player */
#audioPlayer {
  width: 100%;
  margin-top: var(--spacing-md);
}

.soundFile {
  width: 100%;
  margin-bottom: var(--spacing-sm);
  border: 3px dashed var(--primary-white);
  border-radius: var(--border-radius);
  padding: var(--spacing-md);
}

/* Soundwave Container */
.waveform-container {
  width: 100%;
  height: var(--waveform-height);
  margin: var(--spacing-sm) 0;
}

.play-pause-button {
  position: absolute;
  right: var(--spacing-md);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--font-size-button);
}

/* loading animation */
.loader {
  height: 3vh;
  width: 4vw;
  aspect-ratio: 2;
  box-sizing: border-box;
  background: radial-gradient(farthest-side, #fff 98%, #0000) left/1vw 1vw,
    radial-gradient(farthest-side, #fff 98%, #0000) left/1vw 1vw,
    radial-gradient(farthest-side, #fff 98%, #0000) center/1vw 1vw,
    radial-gradient(farthest-side, #fff 98%, #0000) right/1vw 1vw, transparent;
  background-repeat: no-repeat;
  filter: blur(2px) contrast(10);
  animation: l14 1s infinite;
  display: none;
}

.loader.active {
  display: block;
}

@keyframes l14 {
  100% {
    background-position: right, left, center, right;
  }
}

/*results.html*/

#trust-assessment {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-xl) var(--spacing-md) var(--spacing-xl)
    var(--spacing-md);
  position: relative;
  z-index: 1;
}

#trust-analysis {
  width: var(--trust-container-width);
  max-width: var(--trust-container-max-width);
  background-color: transparent;
  margin: var(--spacing-sm) auto;
  padding: var(--spacing-sm);
  font-size: var(--font-size-content);
  color: var(--primary-white);
  border-radius: var(--border-radius);
  border: 3px dashed var(--primary-white);
  position: relative;
  z-index: 1;
}

#receipt-generate-message {
  font-size: var(--font-size-content);
  background-color: var(--primary-white);
  padding: var(--spacing-md);
  color: var(--primary-black);
  position: relative;
  z-index: 1;
}

#receipt-generate-message p {
  font-family: var(--font-family-selection);
  text-align: center;
}

#back-button {
  width: var(--button-width-md);
  color: var(--primary-white);
  z-index: 1;
  margin-top: var(--spacing-lg);
}

#back-button:hover {
  background-color: var(--light-green);
  color: var(--primary-black);
}

#sixthVid {
  z-index: 0;
}