/* CSS Variables & Global Styles */
:root {
  /* Global Node Variables */
  --node-border-width: 1px;
  --node-font-size: 3vh;
  --node-border-color: rgb(60, 60, 60);
  --node-bg: #fff;
  --node-padding-vertical: calc(var(--node-font-size) / 3);
  --node-padding-horizontal: calc(var(--node-font-size) / 2);
  --node-border-radius: calc(var(--node-font-size) * 1.5);
  --node-collapsed-height: calc(var(--node-font-size) * 2);

  /* Horizontal Spacing Variables */
  --main-nodes-spacing: max(7vw, 30px);
  --sub-nodes-spacing: max(5vw, 20px);
  --sub-nodes-start: max(35vw, 200px);

  --node-transition-duration: 0.4s;
  --node-transition-timing: cubic-bezier(0.19, 1, 0.22, 1);

  /* Expanded Content Typography */
  --expanded-h2-font-size: 5vh;
  --expanded-p-font-size: 1.7vh;

  /* Close Button */
  --close-btn-size: 3vh;
  --close-btn-inset: 1.5vh;

  /* Expanded Content Padding */
  --expanded-content-padding: 2vh;

  /* Placeholder - increased height for typographic variety */
  --placeholder-height: 40vh;

  /* WebGL Node */
  --webgl-width: 80vw;
  --webgl-height: 80vh;

  /* Tag Variables */
  --tag-font-size: 1.5vh;
  --tag-padding: 0.3vh 0.8vh;
  --tag-border-radius: 1.5vh;
  --tag-border: 1px solid var(--node-border-color);
  --tag-hover-overlay: rgba(255, 255, 255, 0.8);
}

/* Base Body Styles */
body {
  margin: 0;
  padding: 0;
  font-family: "Instrument Serif", serif;
  color:  rgb(60, 60, 60);
  min-height: 100vh;
  background-image: radial-gradient(circle, rgba(0, 0, 0) 1px, transparent 1px);
  background-size: 4vh 4vh;
}
/* Node Styles */
.node {
  position: absolute;
  border: var(--node-border-width) solid var(--node-border-color);
  background-color: var(--node-bg);
  cursor: move;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--node-collapsed-height);
  padding: var(--node-padding-vertical) var(--node-padding-horizontal);
  border-radius: var(--node-border-radius);
  box-sizing: border-box;
  font-size: var(--node-font-size);
  overflow: hidden;
  z-index: 1;
  transition: opacity var(--node-transition-duration) ease;
}
.node:not(.expanded):hover {
  -moz-box-shadow: inset 0 0 30px rgba(174, 174, 174, 0.5);
  -webkit-box-shadow: inset 0 0 30px rgba(174, 174, 174, 0.5);
  box-shadow: inset 0 0 30px rgba(174, 174, 174, 0.5);
  background-color: white;
}
.node.expanded {
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}
/* Expanded Content Styles */
.expandedContent {
  display: none;
  opacity: 0;
  position: relative;
  padding: var(--expanded-content-padding);
  white-space: wrap;
  text-align: left;
  box-sizing: border-box;
  width: 100%;
}
.expandedContent h2 {
  font-size: var(--expanded-h2-font-size);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin-top: -1vh;
  margin-bottom: 0.5vh;
}
.expandedContent p {
  font-size: var(--expanded-p-font-size);
  line-height: 1.6;
  margin: 0.5vh 0;
}
.expandedContent p a {
  color: rgb(60, 60, 60);
  text-decoration: wavy underline;
}
/* Sequential Fade-in Animations */
.expandedContent > h2,
.expandedContent > .placeholder,
.expandedContent > p,
.expandedContent > .tags {
  opacity: 0;
  animation: fadeIn 0.5s forwards;
}
.expandedContent > h2 {
  animation-delay: 0.2s;
}
.expandedContent > .placeholder {
  animation-delay: 0.4s;
}
.expandedContent > p {
  animation-delay: 0.6s;
}
.expandedContent > .tags {
  animation-delay: 0.8s;
}
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
.collapsedLabel {
  display: block;
}
/* Close Button Styles */
.closeBtn {
  position: absolute;
  top: var(--close-btn-inset);
  right: var(--close-btn-inset);
  width: var(--close-btn-size);
  height: var(--close-btn-size);
  background: var(--node-bg);
  border: var(--node-border-width) solid var(--node-border-color);
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
  z-index: 10000;
  font-size: 0;
  transition: transform 0.3s ease;
}
.closeBtn::before,
.closeBtn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60%;
  height: 1px;
  background-color: var(--node-border-color);
  transition: transform 0.3s ease;
}
.closeBtn::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
.closeBtn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
/* Back button state for close button */
.closeBtn.back-mode::before {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.closeBtn.back-mode::after {
  transform: translate(-50%, -50%) rotate(45deg);
}
/* Main Node Positions */
#kdklv {
  top: 7vh;
  left: var(--main-nodes-spacing);
}
#work {
  top: 25vh;
  left: calc(var(--main-nodes-spacing) * 1.5);
}
#experimental {
  top: 40vh;
  left: calc(var(--main-nodes-spacing) * 1.7);
}
#about {
  top: 55vh;
  left: calc(var(--main-nodes-spacing) * 2);
}
#contact {
  top: 70vh;
  left: calc(var(--main-nodes-spacing) * 2.2);
}
/* Work Subpage Positions */
.work-subnode {
  display: none;
  opacity: 0;
  font-size: var(--node-font-size);
  height: var(--node-collapsed-height);
  padding: var(--node-padding-vertical) var(--node-padding-horizontal);
  border-radius: var(--node-border-radius);
}
#work1 {
  top: 10vh;
  left: var(--sub-nodes-start);
}
#work2 {
  top: 20vh;
  left: calc(var(--sub-nodes-start) + var(--sub-nodes-spacing));
}
#work3 {
  top: 30vh;
  left: calc(var(--sub-nodes-start) + var(--sub-nodes-spacing) * 2);
}
#work4 {
  top: 40vh;
  left: calc(var(--sub-nodes-start) + var(--sub-nodes-spacing) * 3);
}
/* Experimental Subpage Positions */
.experiment-subnode {
  display: none;
  opacity: 0;
  font-size: var(--node-font-size);
  height: var(--node-collapsed-height);
  padding: var(--node-padding-vertical) var(--node-padding-horizontal);
  border-radius: var(--node-border-radius);
}
#exp1 {
  top: 20vh;
  left: var(--sub-nodes-start);
}
#exp2 {
  top: 30vh;
  left: calc(var(--sub-nodes-start) + var(--sub-nodes-spacing));
}
#exp3 {
  top: 40vh;
  left: calc(var(--sub-nodes-start) + var(--sub-nodes-spacing) * 2);
}
#exp4 {
  top: 50vh;
  left: calc(var(--sub-nodes-start) + var(--sub-nodes-spacing) * 3);
}

/* Placeholder Styling: now using images */
.placeholder {
  width: 100%;
  height: var(--placeholder-height);
  object-fit: cover;
  border-radius: calc(var(--node-border-radius) / 2);
}
/* WebGL Node */
.staticNode {
  position: fixed;
  width: var(--webgl-width);
  height: var(--webgl-height);
  top: 10vh;
  left: 10vw;
  border: var(--node-border-width) solid var(--node-border-color);
  background-color: var(--node-bg);
  border-radius: var(--node-border-radius);
  z-index: 20000;
  display: none;
  box-sizing: border-box;
  overflow: hidden;
}
/* Force the Cables canvas to fill the container */
#glcanvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}
@keyframes gradientAnimationBW {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/* Tag Styles */
.tags {
  margin-top: 1.5vh;
}
.tag {
  display: inline-block;
  padding: var(--tag-padding);
  border: var(--tag-border);
  border-radius: var(--tag-border-radius);
  font-size: calc(var(--tag-font-size) * 0.8);
  margin-right: 0.2vw;
  position: relative;
  overflow: hidden;
  transition: background 0.3s ease;
}
.tag::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--tag-hover-overlay), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.tag:hover::after {
  opacity: 1;
}

/* Tag Label Styles */
.tag-label {
  display: block;
  font-family: "Geist", sans-serif; /* Sans-serif font as requested */
  font-size: 1.5vh; /* Slightly smaller than tags for hierarchy */
  font-weight: 200; /* Medium weight for clarity */
  color: grey; /* Dark gray for contrast */
  margin-bottom: 0vh; /* Space between label and tags */
}


/* Link Button Styles */
.link-btn {
  display: inline-block;
  padding: 0.3vh 1.5vw;
  border: 1px solid #3c3c3c;
  border-radius: 2.5vh;
  font-family: "Geist", sans-serif;
  font-size: 2vh;
  font-weight: 200;
  text-decoration: none;
  color: #3c3c3c;
  cursor: pointer;
  transition: background 0.3s ease;
}

.link-btn:hover {
  background: #e0e0e0;
}

@media (pointer: coarse) {
  html,
  body {
    overflow: hidden;
    touch-action: none;
  }
}
/* Custom typography for additional variety */
bold {
  font-family: "Geist", sans-serif;
  font-weight: 500;
}
italic {
  font-family: "Instrument Serif", serif;
  font-style: italic;
  letter-spacing: 0.02em; /* Slightly more space for italics */
  margin: 0 0.1em; /* Subtle horizontal breathing room */
}
p.editorial {
  font-family: "Geist", sans-serif;
  font-weight: 200;
  font-size: 2vh;
  margin-top: 1vh;
}.contact-info {
  font-family: "Geist", sans-serif;
  font-weight: 200;
  font-size: 2vh;
  line-height: 1.4;
  margin: 1vh 0;
}
.contact-info .business-name {
  font-weight: 500;
  font-size: 2.5vh;
  display: block;
  margin-bottom: 0.5vh;
}
.contact-info span {
  display: block;
}
.contact-info a {
  color: inherit;
  text-decoration: none;
}

/* Contact Info Inline Email */
.contact-info .email-inline {
  display: inline-flex;
  align-items: center;
  font-size: 2vh;
  font-family: "Geist", sans-serif;
  font-weight: 200;
  margin: 1vh 0;
}

.contact-info .email-inline a {
  color: inherit;
  text-decoration: none;
  margin-left: 0.5vw;
}

/* Social Icons */
.social-icons {
  margin-top: 1vh;
  display: flex;
  gap: 1vw;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4vh;
  height: 4vh;
  font-size: 4vh; /* Adjust icon size */
  color: var(--node-border-color); /* Match your theme */
  transition: color 0.3s ease; /* Change color on hover instead of opacity */
  text-decoration: none;
}

.social-link:hover {
  color: #606060; /* Slightly lighter shade for hover effect */
}

/* Ensure Font Awesome icons inherit styles */
.social-link i {
  line-height: 1; /* Keeps icons vertically centered */
}

/* Enhanced Node Transition */
.node {
  transition: all var(--node-transition-duration) var(--node-transition-timing);
}

.expandedContent {
  transition: opacity 0.3s ease, transform 0.4s var(--node-transition-timing);
  transform: scale(0.95);
}

.node.expanded .expandedContent {
  display: block;
  opacity: 1;
  transform: scale(1);
}

.node:not(.expanded) .expandedContent {
  opacity: 0;
  transform: scale(0.95);
}

/* Ensure collapsed state is smooth */
.collapsedLabel {
  transition: opacity 0.3s ease;
}

.node.expanded .collapsedLabel {
  opacity: 0;
}



/* Transition classes for contact info and email form */
.contact-info-container, .email-form-container {
  transition: opacity 0.3s ease;
}

.visible {
  opacity: 1;
}

.hidden {
  opacity: 0;
  display: none;
}

/* Form styling */
form input, form textarea, form button {
  display: block;
  width: 100%;
  margin-bottom: 1vh;
  padding: 0.8vh 1.5vw;
  font-family: "Geist", sans-serif;
  font-weight: 100;
  font-size: 2vh;
  border: 1px solid var(--node-border-color);
  border-radius: 2.5vh; /* Make pill-shaped */
  background: var(--node-bg);
  box-sizing: border-box;
}

form textarea {
  min-height: 15vh;
  resize: vertical;
}

form button {
  cursor: pointer;
  transition: background 0.3s ease;
}

form button:hover {
  background: #e0e0e0;
}