/* Reset base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100vh;
    overflow-x: auto;
    overflow-y: hidden;
    font-family: "Times New Roman", Times, serif;
    font-size: 14pt;
    background-color: #f0f0f0;
}

/* Container for all horizontal panels */
.container {
    display: flex;
    flex-direction: row;
    height: 100vh;
    width: max-content;
}

/* Each panel takes up full viewport width */
.panel {
    flex: 0 0 100vw;
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

#panel-lenses .text-content {
  position: absolute;
  left: 10%;
  top: 30%;
  opacity: 1;
  max-width: 60%;
}

#panel-lenses.visible .text-content {
  opacity: 1;
}

#panel-main .author-name {
    margin-top: 20em; /* push the name downward */
    font-size: 0.9em; /* optional size tweak */
    color: #333;
}

.spacer-panel {
  width: 30vw; /* or 100vw for a full extra panel of space */
  flex-shrink: 0;
}

/* Base text styling (not absolute globally anymore) */
.text-content {
    max-width: 60%;
}

/* Only apply absolute positioning for main and right panels */
#panel-main .text-content,
#panel-right .text-content {
    position: absolute;
    left: 10%;
    top: 20%;
}

/* Panel 1 visible on load */
#panel-main .text-content {
    opacity: 1;

}

/* Show text when right panel is in view */
#panel-right.visible .text-content {
    opacity: 1;
}

/* Follow-up question styling */
.follow-up {
    display: flex;
    flex-direction: column;
    margin-top: 1em;
    font-size: 14pt;
}

/* Base span animation */
.follow-up span {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    display: inline-block;
    position: relative;
}

/* When shown */
.follow-up span.show {
    opacity: 1;
    transform: translateY(0);
}

/* Step-down staggered horizontal offset */
/* Step-down staggered horizontal offset – wider spacing */
.follow-up span:nth-child(1) { margin-left: 0em; }
.follow-up span:nth-child(2) { margin-left: 7em; }
.follow-up span:nth-child(3) { margin-left: 12em; }
.follow-up span:nth-child(4) { margin-left: 19em; }
.follow-up span:nth-child(5) { margin-left: 23em; }
.follow-up span:nth-child(6) { margin-left: 27em; }
.follow-up span:nth-child(7) { margin-left: 31em; }
.follow-up span:nth-child(8) { margin-left: 34em; }


/* Optional: staggered fade-in delay */
.follow-up span:nth-child(1).show { transition-delay: 0s; }
.follow-up span:nth-child(2).show { transition-delay: 0.1s; }
.follow-up span:nth-child(3).show { transition-delay: 0.2s; }
.follow-up span:nth-child(4).show { transition-delay: 0.3s; }
.follow-up span:nth-child(5).show { transition-delay: 0.4s; }
.follow-up span:nth-child(6).show { transition-delay: 0.5s; }
.follow-up span:nth-child(7).show { transition-delay: 0.6s; }
.follow-up span:nth-child(8).show { transition-delay: 0.7s; }

.hidden {
    display: none;
}

#panel-after .text-content {
    opacity: 1;
    position: absolute;
    left: 10%;
    top: 30%;
    max-width: 60%;
}

.inbetween-text {
    margin-bottom: 2em;
    font-weight: normal;
}

.quotes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Container for quotes */
.quotes {
    position: relative;       /* ✅ Needed for .quote positioning */
    width: 100%;
    height: 100%;
}

/* Each quote */
.quote {
    position: absolute;
    max-width: 30%;
    font-size: 12pt;
    opacity: 0;
     transition: opacity 2s ease-in; /* slow fade */
}

/* Show quotes when panel is in view */
#panel-after.visible .quote {
    opacity: 1;
}

/* Optional styling for attribution */
.attribution {
    font-size: 9pt;
    color: #555;
    display: block;
    margin-top: 0.5em;
}

/* Scatter quotes around */
.quote:nth-child(1) { top: 10%; left: 10%; }
.quote:nth-child(2) { top: 40%; left: 40%; }
.quote:nth-child(3) { top: 60%; left: 20%; }
.quote:nth-child(4) { top: 50%; left: 75%; }
.quote:nth-child(5) { top: 75%; left: 60%; }
.quote:nth-child(6) { top: 15%; left: 70%; }
.quote:nth-child(7) { top: 15%; left: 70%; }

/* Dim the entire quote */
/* Dim the entire quote */
/* Base state: quotes hidden */
.quote {
    opacity: 0;
    transition: opacity 2s ease-in;
    color: rgba(0, 0, 0, 0.8); /* dimmed base */
}

/* Fade-in after delay */
#panel-after.visible .quote {
    opacity: 0.8; /* full quote appears slightly faded */
    transition-delay: 3s;
}

#quote-moten {
  opacity: 0;
  transition: opacity 2s ease-in;
}

#panel-after.visible #quote-moten {
  opacity: 1;
  transition-delay: 3s; /* optional */
}

#panel-after:not(.visible) #quote-moten {
  opacity: 1; /* Stay visible */
}




/* Highlighted word: fully opaque + bold */
.quote .highlight {
    color: rgba(0, 0, 0, 1);
    font-weight: bold;
}
#panel1 .concepts {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3em;
}

#panel1 .concept {
    font-size: 14;
    color: #333;
    position: relative;
}

#panel1 .concepts-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start; /* keep left alignment */
  gap: 1em;
  padding-left: 100px; /* shift whole block 100px right */
}

#panel1 .intro-text {
  font-size: 14pt;
  top: 40%;
  margin-bottom: 20px;
  color: #333;
}

#panel1 .concepts {
  display: flex;
  flex-direction: column;
  gap: 3em;
}

#panel1 .concept {
  font-size: 14pt;
  color: #333;
  position: relative;
}

.extended-paragraph {
  max-width: 60%;
  margin-top: 2em;
  font-size: 14pt;
  color: #444;
  opacity: 0;
  transition: opacity 1.5s ease;
}

/* Trigger fade-in after 2 seconds */
.fade-in-delay {
  animation: fadeIn 1.5s ease forwards;
  animation-delay: 4s;
  opacity: 1;
}
#panel-cartography .text-content {
  position: absolute;
  left: 10%;
  top: 25%;
  max-width: 60%;
  font-size: 14pt;
  color: #333;
  opacity: 1;
  transition: opacity 2s ease;
}

#panel-cartography.visible .text-content {
  opacity: 1;
}
.fade-in-delayed {
  opacity: 0;
  transition: opacity 4s ease-in; /* fade duration */
}

.fade-in-delayed.show {
  opacity: 1;
}

.situatedness {
  margin-top: 40px; /* or however much space you want */
}

.container {
  display: flex;
  overflow-x: auto;
  width: 100vw;
  height: 100vh;
}

#panel-materialities .text-content {
  position: absolute;
  left: 10%;
  top: 15%; /* You can adjust this value to move text lower or higher */
  max-width: 40%;
  font-size: 14pt;
  color: #333;
  opacity: 1;
  transition: opacity 2s ease;
}

#panel-materialities.visible .text-content {
  opacity: 1;
}
#panel-materialities .text-content .lower-paragraph {
  margin-top: 3em;  /* adjust spacing to your liking */
  font-size: 14pt;
  color: #333;
}

#panel-next .text-content {
    position: absolute;
    left: 10%;
    top: 20%;
    max-width: 60%;
    opacity: 1;
    display: flex;
    gap: 8em;
    justify-content: center;
    align-items: center;
}

body {
  overflow-y: hidden; /* Prevent vertical scrolling */
}


#panel-next .images-container {
  text-align: center;
}
#panel-next {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  flex: none;
  overflow: hidden; /* Ensures nothing spills outside */
}

#panel-next .images-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  width: 100%;
  transform: translateY(-30vh); /* adjust upward */
}


#panel-next img {
  max-height: 90vh;
  max-width: 90vw;
  height: auto;
  width: auto;
  object-fit: contain;
}


/* Initially hidden */
.fade-in-paragraph {
  opacity: 1;
  transform: translateY(20px);
  transition: opacity 1.5s ease, transform 1.5s ease;
  position: absolute;
  top: 20%;
  left: 10%;
  max-width: 60%;
  font-size: 14pt;
  color: #333;
}

/* When panel is visible, show paragraph */
#panel-next2.visible .fade-in-paragraph {
  opacity: 1;
  transform: translateY(0);
}

.delayed-fade-in-lower {
  opacity: 1;
  transform: translateY(40px);
  transition: opacity 1.5s ease, transform 1.5s ease;
  margin-top: 5em; /* more spacing below the first paragraph */
  max-width: 60%;
  font-size: 14pt;
  color: #333;
  position: relative;
}

/* Show after longer delay */
#panel-next2.visible .delayed-fade-in-lower {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 2s; /* fade in later than first paragraph */
}
.images-container img {
  max-width: 45%;
  height: auto;
  margin: 0 20px; /* horizontal spacing */
  vertical-align: middle;
  display: inline-block;
}

/* Center images container if needed */
.images-container {
  text-align: center;
  margin-top: 2em;
}
#panel-next-images .text-content {
  position: absolute;
  left: 10%;
  top: 10%;
  max-width: 60%;
  opacity: 1;
  display: flex;
  gap: 8em;
  justify-content: center;
  align-items: center;
}

#panel-next-images .text-content img {
  max-width: 45%;
  border-radius: 4px;
}

#panel-final .text-content {
  opacity: 1;
  transform: translateY(20px);
  transition: opacity 1.5s ease, transform 1.5s ease;
  position: absolute;
  top: 18%;
  left: 25%;
  max-width: 60%;
  font-size: 14pt;
  color: #333;
}
.text-content p {
  margin-bottom: 2rem;
}


#scroll-thumb {
  transition: transform 0.1s linear;
}


#panel-sight-lines {
  display: flex;
  align-items: center;
  justify-content: center;
}

#panel-sight-lines img.full-screen-image {
  height: 100vh;         /* Image fills full height */
  width: auto;           /* Width scales proportionally */
  max-width: none;       /* Prevent image from shrinking unnecessarily */
  display: block;
}

#panel-keywords .text-content {
  position: absolute;
  left: 10%;
  top: 30%;
  font-size: 14pt;
  color: #333;
}

#panel-keywords ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#panel-keywords li {
  font-style: italic;
}
#panel-keywords .with-line {
  position: relative;
}

#panel-keywords .with-line::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-left: 10px;
  width: 3000px;
  height: 1px;
  background-color: #333;
  transform: translateY(-50%);
  opacity: 0;
  animation: fadeLineIn 2s ease forwards;
  animation-delay: 2s; /* optional */
}

@keyframes fadeLineIn {
  to {
    opacity: 1;
  }
}

#panel-territories {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#panel-territories img.full-screen-image {
  height: calc(100vh + 20px);
  width: auto;
  transform: translateY(-10px); /* Crops 10px top and bottom */
  display: block;
}

#panel-gaza-images {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  flex: none;
  overflow: hidden;
}

#panel-gaza-images .images-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px; /* space between images */
}

#panel-gaza-images img {
  max-height: 90vh;
  max-width: 45vw;
  object-fit: contain;
  border-radius: 4px;
}

#panel-image-panel {
  display: flex;
  justify-content: center;
  align-items: flex-start;  /* move image to top vertically */
  overflow: hidden;
  padding-top: 5vh;         /* space from top of viewport */
}

#panel-image-panel .image-only {
  max-width: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
}

#panel-image-panel img {
  max-width: 90vw;        /* allow image to take up most of width */
  max-height: 90vh;       /* allow taller image */
  object-fit: contain;
  display: block;
  opacity: 0;
  animation: fadeInImage 2s ease 1 forwards;
  animation-delay: 1s;
}


@keyframes fadeInImage {
  to {
    opacity: 1;
  }
}

#panel-image-panel {
  margin-left: -5vw; /* or -20vw, adjust as needed */
}
#panel-image-panel .image-only {
  padding-top: 5vh; /* or adjust to your liking */
}

#panel-final .text-content {
  display: flex;
  flex-direction: row;         /* make content horizontal */
  align-items: center;
  justify-content: space-between;
  width: 80%;                  /* limit total width */
  max-width: 1000px;
  gap: 4em;
}

#panel-final .final-text {
  flex: 1;
}

#panel-final .final-image {
  flex-shrink: 0;
}

#panel-final .final-image img {
  max-width: 100%;
  height: auto;
  max-height: 60vh;
  display: block;
  object-fit: contain;
}

.captioned-image {
  position: relative;
  display: inline-block;
  text-align: right;
  max-width: 90vw;
}

.captioned-image img {
  display: block;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
}

.captioned-image figcaption {
  margin-top: 0.5em;
  font-size: 0.85em;
  color: #444;
  text-align: right;
}


.images-vertical {
  display: flex;
  flex-direction: column;
  align-items: left;
  gap: 20px; /* space between images */
}

.images-vertical img {
  max-width: 40%;
  height: auto;
}



.final-image figure {
  margin: 0; /* Override default figure margin */
}


/* everything after this is nodal network specific */

        #network {
            width: 100vw;
            height: 100vh;
            cursor: grab;
        }

        #network.panning {
            cursor: grabbing;
        }

        .node {
            fill: rgb(60, 59, 59);
            stroke: rgb(59, 57, 57);
            stroke-width: 2px;
            cursor: move;
        }

        .node:hover {
            fill: #cccccc;
        }

        .node.dragging {
            fill: #888888;
        }

        .link {
            stroke: rgb(43, 42, 42);
            stroke-opacity: 0.6;
            stroke-width: 1px;
        }

        .node-label {
            font-size: 12px;
            fill: rgb(56, 55, 55);
            text-anchor: middle;
            pointer-events: none;
            font-weight: 500;
        }

        .zoom-controls {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .zoom-btn {
            width: 40px;
            height: 40px;
            background-color: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            color: white;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.2s;
        }

        .zoom-btn:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }

        .zoom-info {
            position: fixed;
            bottom: 20px;
            left: 20px;
            color: rgba(255, 255, 255, 0.7);
            font-size: 12px;
            font-family: monospace;
            background-color: rgba(0, 0, 0, 0.3);
            padding: 10px;
            border-radius: 5px;
            z-index: 1000;
        }
        .network_wrap {
            width: 100%;
            height: 90%;
            margin-top: 10%;
            margin-bottom: 10%;
            overflow: hidden;
            position: relative;
        }

.image-layout {
  position: relative;
  width: 100%;
  height: 50vh; /* adjust if needed */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 2rem;
  padding-right: 5vw; /* keeps right aligned images away from the edge */
  padding-left: 70vw;
}

.image-layout img {
  max-width: 350px; /* adjust size as needed */
  height: auto;
}

.image-left {
  position: absolute;
  left: 15vw;
  top: 15vh; /* adjust vertical position */
  bottom: 0vh;
  width: 350px; /* match image width */

}

.image-left .caption {
  font-size: 0.8rem;
  width: 58%;
  margin-top: 0.5rem;
  color: #333; /* optional: adjust color */
  font-style: italic; /* optional */
  text-align: left;
margin-left: 0%;
}