/* plastiLamp project page styles */

:root {
  /* Hero Banner variables */
  --hero-padding: 4vw; /* Horizontal/vertical padding for hero text section */
  --title-size: 4.67vw; /* Title font size (7vw * 2/3) */
  --subtitle-size: 1.2vw; /* Subtitle font size (1.8vw * 2/3) */
  --subtitle-margin: 1vw; /* Spacing between subtitles */
  
  /* Image Section variables - reusable across multiple sections */
  --section-title-size: 1.8vw; /* Section description/title font size */
  --section-image-horizontal-padding: 8vw; /* Left/right padding around images */
  --section-text-image-gap: 2vw; /* Gap between description and image */  
  /* Whitespace Section variable */
  --whitespace-height: 3vw; /* Uniform spacing between sections */
  
  /* Bottom Full Bleed Section variable */
  --bottom-section-height: 40vh; /* Height of bottom full bleed section */
  --bottom-section-text-width: 20vw; /* Max width for bottom section text to prevent clipping */
  
  /* Image-Image Section variable */
  --image-image-gap: 2vw; /* Black padding between images in image-image section */
}

body {
  margin: 0;
  padding: 0;
  background: #fff;
  font-family: 'LunchType Light', system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
  overflow-x: hidden;
}

.site-wrap {
  display: flex;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
}

/* Nav positioning - fixed and translucent like projecttestpage */
.side-nav {
  z-index: 2200;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  overflow-y: auto;
  width: var(--nav-width);
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Nav collapsed state */
.side-nav.collapsed {
  width: calc(var(--nav-visible) * 2);
}

/* Collapsed label positioning */
.collapsed-label {
  z-index: 2250;
}

/* Main content area - doesn't get affected by nav positioning */
.project-content {
  flex: 1;
  padding: 0;
  margin-left: 0;
  transition: margin-left 260ms ease;
}

.hero {
  max-width: 1000px;
}

.hero h1 {
  font-family: 'LunchType Regular', system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
  font-size: 36px;
  font-weight: 400;
  margin: 0 0 24px 0;
  color: #111;
}

.hero p {
  font-size: 12px;
  color: #666;
  line-height: 1.6;
  margin: 0;
}

/* Hero Banner Section */
.hero-banner {
  display: flex;
  width: 100%;
  min-height: 80vh;
  background: #000;
  position: relative;
}

.hero-text {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--hero-padding);
}

.hero-title {
  font-family: 'LunchType Regular', system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
  font-size: var(--title-size);
  font-weight: 400;
  color: #fff;
  margin: 0 0 var(--subtitle-margin) 0;
  line-height: 1;
  margin-left: -0.5vw;
}

.hero-subtitle {
  font-family: 'LunchType Light', system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
  font-size: var(--subtitle-size);
  font-weight: 300;
  color: #fff;
  margin: 0 0 var(--subtitle-margin) 0;
  line-height: 1.5;
  max-width: 90%;
  margin-left: -0.5vw;
}

.hero-image {
  flex: 0 0 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Image Section Component - reusable throughout project pages */
.image-section {
  background-color: white;
  /* No top/bottom padding - reserved for whitespace section component */
}

.section-description {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 var(--section-image-horizontal-padding);
}

.section-title {
  font-family: 'LunchType Light', sans-serif;
  font-size: var(--section-title-size);
  font-weight: 300;
  color: #000;
  text-align: center;
  margin: 0;
  line-height: 1.4;
}

.section-subtitle {
  font-family: 'LunchType Light', sans-serif;
  font-size: calc(var(--section-title-size) * 0.75);
  font-weight: 300;
  color: #666;
  text-align: center;
  margin: 0.5vw 0 0 0;
  line-height: 1.4;
}

.section-image-wrapper {
  margin-top: var(--section-text-image-gap);
  padding: 0 var(--section-image-horizontal-padding);
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-image {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Full Bleed Image Section */
.full-bleed-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Bottom-left aligned title variant */
.full-bleed-section.full-bleed-bottom-left {
  min-height: var(--bottom-section-height);
  align-items: flex-end;
  justify-content: flex-end;
  padding: 4vw;
}

.full-bleed-section.full-bleed-bottom-left .full-bleed-title {
  font-size: calc(var(--section-title-size) * 0.75) !important;
  color: #fff !important;
  text-align: left !important;
  margin: 0 !important;
  max-width: calc(100vw - 10vw) !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  hyphens: auto;
}

.full-bleed-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.full-bleed-title {
  position: relative;
  z-index: 10;
  font-family: 'LunchType Regular', sans-serif;
  font-size: calc(var(--section-title-size) * 3.5);
  font-weight: 400;
  color: #000000;
  text-align: center;
  margin: 0;
  line-height: 1.2;
}
/* Image + Model Viewer Section */
.image-model-section {
  display: flex;
  width: 100%;
  /*min-height: 70vh;*/
  max-height: 70vh;
  background-color: rgb(0, 0, 0);
}

.image-model-image {
  flex: 0 0 40%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-model-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.image-model-viewer {
  flex: 0 0 60%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000000;
}

model-viewer {
  width: 100%;
  height: 50%;
}


/* Whitespace Section - uniform spacing between content sections */
.whitespace-section {
  width: 100%;
  height: var(--whitespace-height);
  background-color: white;
}

.blackspace-section {
  width: 100%;
  height: var(--whitespace-height);
  background-color: black;
}

/* Dual Full Bleed Image Section */
.dual-fullbleed-section {
  display: flex;
  width: 100%;
  min-height: 80vh;
  background-color: #000;
  gap: 1vw;
}

.dual-fullbleed-image {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dual-fullbleed-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Standalone Model Viewer Section */
.model-viewer-section {
  width: 100%;
  min-height: 55vh;
  background-color: #242424;
  display: flex;
  align-items: center;
  justify-content: center;
}

.model-viewer-section model-viewer {
  width: 100%;
  height: 50vh;
}

/* Hotspot Styles for Model Viewer */
.Hotspot {
  background: #fff;
  border-radius: 32px;
  border: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  box-sizing: border-box;
  cursor: pointer;
  height: 12px;
  padding: 4px;
  position: relative;
  transition: opacity 0.3s;
  width: 12px;
}

.Hotspot:not([data-visible]) {
  background: transparent;
  border: 2px solid #fff;
  box-shadow: none;
  height: 16px;
  pointer-events: none;
  width: 16px;
}

.Hotspot:focus {
  border: 2px solid rgb(0, 128, 200);
  height: 16px;
  outline: none;
  width: 16px;
}

.Hotspot > * {
  opacity: 1;
  transform: translateY(-50%);
}

.HotspotAnnotation {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  color: rgba(0, 0, 0, 0.8);
  display: block;
  font-family: 'LunchType Light', sans-serif;
  font-size: 12px;
  font-weight: 400;
  left: calc(100% + 1em);
  max-width: 180px;
  overflow-wrap: break-word;
  padding: 0.5em 1em;
  position: absolute;
  top: 50%;
  width: max-content;
}

.Hotspot:not([data-visible]) > * {
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(-50% + 4px));
  transition: transform 0.3s, opacity 0.3s;
}

/* Progress bar for model loading */
.progress-bar {
  display: block;
  width: 33%;
  height: 10%;
  max-height: 2%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  border-radius: 25px;
  box-shadow: 0px 3px 10px 3px rgba(0, 0, 0, 0.5), 0px 0px 5px 1px rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.9);
  background-color: rgba(0, 0, 0, 0.5);
}

.progress-bar.hide {
  visibility: hidden;
  transition: visibility 0.3s;
}

.update-bar {
  background-color: rgba(255, 255, 255, 0.9);
  width: 0%;
  height: 100%;
  border-radius: 25px;
  float: left;
  transition: width 0.3s;
}

/* Image + Image Section (Swapped Proportions) */
.image-image-section {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: rgb(0, 0, 0);
}

.image-image-description {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 var(--section-image-horizontal-padding);
  padding-bottom: var(--section-text-image-gap);
}

.image-image-title {
  font-family: 'LunchType Light', sans-serif;
  font-size: var(--section-title-size);
  font-weight: 300;
  color: #fff;
  text-align: center;
  margin: 0;
  line-height: 1.4;
}

.image-image-subtitle {
  font-family: 'LunchType Light', sans-serif;
  font-size: calc(var(--section-title-size) * 0.75);
  font-weight: 300;
  color: #ccc;
  text-align: center;
  margin: 0.5vw 0 0 0;
  line-height: 1.4;
}

.image-image-container {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  max-height: 70vh;
  gap: var(--image-image-gap);
  padding: 0 var(--image-image-gap);
  padding-left: var(--section-image-horizontal-padding);
  padding-bottom: var(--section-image-horizontal-padding);
}

.image-image-large {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-image-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.image-image-small {
  flex: 1;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000000;
}

.image-image-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Quote / Title Section */
.quote-section {
  background-color: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3vw var(--section-image-horizontal-padding);
  text-align: center;
}

.quote-text {
  font-family: 'LunchType Light', sans-serif;
  font-size: clamp(18px, 2.4vw, 48px);
  font-weight: 300;
  color: #fff;
  margin: 0;
  line-height: 1.5;
  max-width: 60vw;
}

/* Organic gradient variant */
.quote-section--gradient {
  background:
    radial-gradient(ellipse 60% 80% at 10% 40%, rgba(178, 60, 60, 0.7), transparent 60%),
    radial-gradient(ellipse 50% 70% at 35% 70%, rgba(232, 160, 180, 0.65), transparent 55%),
    radial-gradient(ellipse 55% 75% at 60% 30%, rgba(140, 110, 195, 0.6), transparent 55%),
    radial-gradient(ellipse 50% 70% at 80% 65%, rgba(90, 175, 185, 0.6), transparent 55%),
    radial-gradient(ellipse 60% 80% at 95% 35%, rgba(75, 145, 95, 0.65), transparent 60%),
    linear-gradient(135deg, #8a3a3a, #d4a0b0, #9a80c4, #6aafb0, #4a8a5a);
  filter: blur(0px);
  position: relative;
  overflow: hidden;
}

.quote-section--gradient::before {
  content: '';
  position: absolute;
  inset: -40px;
  background: inherit;
  filter: blur(30px);
  z-index: 0;
}

.quote-section--gradient .quote-text {
  position: relative;
  z-index: 1;
}