/* glowTrack project page styles */

:root {
  /* Hero Banner variables */
  --hero-padding: 4vw;
  --title-size: 4.67vw;
  --subtitle-size: 1.2vw;
  --subtitle-margin: 1vw;

  /* Image Section variables */
  --section-title-size: 1.8vw;
  --section-image-horizontal-padding: 8vw;
  --section-text-image-gap: 2vw;

  /* Whitespace Section variable */
  --whitespace-height: 6vw;

  /* Bottom Full Bleed Section variable */
  --bottom-section-height: 40vh;
  --bottom-section-text-width: 20vw;
}

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 */
.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 */
.project-content {
  flex: 1;
  padding: 0;
  margin-left: 0;
  transition: margin-left 260ms ease;
}

/* 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;
}

/* Text-Image Section Component */
.text-image-section {
  display: flex;
  width: 100%;
  min-height: 60vh;
  background: #fff;
  position: relative;
}

.text-image-text {
  flex: 0 0 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: calc(96px + 2vw);
  padding-right: 1vw;
  padding-top: var(--hero-padding);
  padding-bottom: var(--hero-padding);
  box-sizing: border-box;
}

.text-image-paragraph {
  font-family: 'LunchType Light', system-ui, -apple-system, 'Segoe UI', Roboto, Arial;
  font-size: var(--subtitle-size);
  font-weight: 300;
  color: #000;
  margin: 0 0 5vh 0;
  line-height: 1.75;
}

.text-image-image {
  flex: 0 0 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-left: 1vw;
  padding-right: 2vw;
  box-sizing: border-box;
}

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

/* Image Section Component */
.image-section {
  background-color: white;
}

.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;
}

/* Triple Image Section Component */
.triple-image-section {
  background-color: rgb(33, 33, 33);
}

.triple-image-grid {
  display: flex;
  gap: 2vw;
  margin-top: var(--section-text-image-gap);
  padding: 0 calc(var(--section-image-horizontal-padding) + 4vw);
  justify-content: center;
  align-items: flex-start;
}

.triple-image-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.triple-image-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: 8px;
}

/* Fade effect on outer edges */
.triple-image-item:first-child img {
  /* -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 5%, black 100%); */
  border-radius: 32px 8px 8px 32px;
}

.triple-image-item:last-child img {
  /* -webkit-mask-image: linear-gradient(to left, transparent 0%, black 5%, black 100%);
  mask-image: linear-gradient(to left, transparent 0%, black 5%, black 100%); */
  border-radius: 8px 32px 32px 8px;
}

.triple-image-caption {
  font-family: 'LunchType Light', sans-serif;
  font-size: calc(var(--section-title-size) * 0.8);
  font-weight: 300;
  color: #ffffff;
  text-align: center;
  margin-top: 2vw;
}

/* Sequential GIF styles */
.sequential-gif {
  opacity: 0.3;
  filter: grayscale(100%);
  transition: opacity 0.4s ease, filter 0.4s ease;
}

.sequential-gif.active {
  opacity: 1;
  filter: grayscale(0%);
}

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

.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%;
  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: 100%;
}

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

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

/* 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 Section with Captions Component */
.image-section-captioned {
  background-color: #c8c8c8;
}

/* ── Gradient variants (shared base) ──────────────────── */
.image-section-captioned[class*="--gradient-"] {
  background: transparent;
}

.image-section-captioned[class*="--gradient-"] .section-description {
  background: transparent;
}

.image-section-captioned[class*="--gradient-"] .section-title {
  color: #000;
}

.image-section-captioned[class*="--gradient-"] .section-subtitle {
  color: #222;
}

.image-section-captioned[class*="--gradient-"] .section-image-wrapper {
  background-color: #c8c8c8;
}

.image-section-captioned[class*="--gradient-"] .section-captions,
.image-section-captioned[class*="--gradient-"] .section-captions-double {
  background: transparent;
}

.image-section-captioned[class*="--gradient-"] .section-caption,
.image-section-captioned[class*="--gradient-"] .section-caption-sub {
  color: #111;
}

/* ── Continuous gradient wrapper ──────────────────────── */
.gradient-flow-wrap {
  position: relative;
  overflow: hidden;
}

.gradient-flow-wrap::before {
  content: '';
  position: absolute;
  inset: -60px;
  background:
    radial-gradient(ellipse 50% 35% at 15% 8%, rgba(70, 120, 200, 0.55), transparent 60%),
    radial-gradient(ellipse 45% 30% at 75% 12%, rgba(160, 195, 240, 0.45), transparent 55%),
    radial-gradient(ellipse 50% 30% at 30% 35%, rgba(120, 200, 230, 0.3), transparent 55%),
    radial-gradient(ellipse 50% 35% at 60% 45%, rgba(130, 235, 155, 0.5), transparent 55%),
    radial-gradient(ellipse 45% 30% at 25% 55%, rgba(170, 245, 180, 0.45), transparent 55%),
    radial-gradient(ellipse 50% 35% at 80% 70%, rgba(220, 140, 140, 0.4), transparent 55%),
    radial-gradient(ellipse 50% 35% at 40% 85%, rgba(210, 100, 100, 0.5), transparent 55%),
    radial-gradient(ellipse 55% 30% at 70% 95%, rgba(235, 160, 160, 0.45), transparent 55%),
    linear-gradient(to bottom,
      #b8d4f0 0%,
      #c8e0f4 12%,
      #d2eedc 28%,
      #c8f0ca 42%,
      #d5f5d8 55%,
      #e8ddd0 68%,
      #f0c8c8 82%,
      #e8b0b0 100%
    );
  filter: blur(40px);
  z-index: 0;
}

.gradient-flow-wrap > * {
  position: relative;
  z-index: 1;
}

.gradient-flow-spacer {
  height: 6vh;
}

/* ── Dark gradient variant (standalone) ───────────────── */
.image-section-captioned.image-section-captioned--gradient-dark {
  position: relative;
  overflow: hidden;
  background: transparent;
  padding-top: 1vh;    /* ← top padding for dark gradient section */
  padding-bottom: 6vh; /* ← bottom padding for dark gradient section */
}

.image-section-captioned--gradient-dark::before {
  content: '';
  position: absolute;
  inset: -60px;
  background:
    radial-gradient(ellipse 60% 70% at 20% 30%, rgba(0, 0, 0, 0.9), transparent 60%),
    radial-gradient(ellipse 55% 65% at 75% 60%, rgba(70, 70, 75, 0.6), transparent 55%),
    radial-gradient(ellipse 70% 80% at 50% 50%, rgba(40, 40, 45, 0.5), transparent 65%),
    linear-gradient(135deg, #0a0a0e, #2a2a2e, #3a3a3e, #2a2a2e);
  filter: blur(40px);
  z-index: 0;
}

.image-section-captioned--gradient-dark > * {
  position: relative;
  z-index: 1;
}

.image-section-captioned.image-section-captioned--gradient-dark .section-description {
  background: transparent;
}

.image-section-captioned.image-section-captioned--gradient-dark .section-title {
  color: #fff;
}

.image-section-captioned.image-section-captioned--gradient-dark .section-subtitle {
  color: #bbb;
}

.image-section-captioned.image-section-captioned--gradient-dark .section-image-wrapper {
  background-color: #c8c8c8;
}

.image-section-captioned.image-section-captioned--gradient-dark .section-captions,
.image-section-captioned.image-section-captioned--gradient-dark .section-captions-double {
  background: transparent;
}

.image-section-captioned.image-section-captioned--gradient-dark .section-caption,
.image-section-captioned.image-section-captioned--gradient-dark .section-caption-sub {
  color: #ccc;
}

.image-section-captioned .section-description {
  background-color: #000;
  padding-top: 2vw;
  padding-bottom: 2vw;
}

.image-section-captioned .section-title {
  color: #fff;
}

.image-section-captioned .section-subtitle {
  color: #ccc;
}

/* Light/inverse variant for the first captioned image section */
.image-section-captioned--light {
  background-color: #fff;
}

.image-section-captioned--light .section-description {
  background-color: #fff;
}

.image-section-captioned--light .section-title {
  color: #000;
}

.image-section-captioned--light .section-subtitle {
  color: #999;
}

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

.section-image-container {
  display: inline-flex;
  flex-direction: column;
  max-width: 100%;
}

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

.section-captions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  width: 100%;
  margin-top: 0;
  padding: 1vw 8vw;
  background-color: #000;
  box-sizing: border-box;
}

.section-captions-double {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  margin-top: 0;
  padding: 1vw 22vw;
  background-color: #000;
  box-sizing: border-box;
}

.image-section-captioned--light .section-captions-double {
  background-color: #fff;
}

.image-section-captioned--light .section-caption {
  color: #000;
}

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

.section-caption-sub {
  font-family: 'LunchType Light', sans-serif;
  font-size: calc(var(--section-title-size) * 0.55);
  font-weight: 300;
  color: #aaa;
  line-height: 1.4;
  text-align: center;
  margin-top: 0.3vw;
}

/* 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;
}

.quote-attribution {
  font-family: 'LunchType Light', sans-serif;
  font-size: clamp(12px, 1.1vw, 22px);
  font-weight: 300;
  color: #666;
  margin: 1.5vw 0 0 0;
  line-height: 1.4;
}

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

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