/* poster.css — ISU-inspired color palette, typographic scale, layout, and print rules
   Inspired by: Miller (Effective Research Posters), "Bridging the Gap", Brown University poster guide,
   and ISU branding guidance. Designed for screen and print (high-res). */

:root{
  --isu-blue: rgb(0, 0, 0); /* ISU corporate blue */
  --white: #ffffff;
  --isu-accent: #0b90ff; /* accent for highlights */
  --isu-green: #2ca02c; /* NDVI/positive */
  --bg-dark: linear-gradient(145deg,#001026,#001a36);
  --panel-bg: rgba(255,255,255,0.03);
  --text-light: #f2f5fb; /* light text */
  --muted: rgba(242,245,251,0.75);
}

/* Ensure the deepest back layer is solid black so videos and transparent layers
   blend into true black. Use strong specificity and !important to override
   any incidental background gradients or images while developing. */
html, body, :root{
  background-color: #000000 !important;
  background-image: none !important;
}

/* Also ensure video elements and their containers have a black background so
   any transparent frames still show black behind them. */
.hero-video, .hero-video video, video{
  background-color: #000000 !important;
}


/* Page shell and print sizing */
html,body{
  height: 100%;
  margin: 0;
  font-family: 'Inter', Calibri, Arial, 'Helvetica Neue', sans-serif;
  /* use pure black edge-to-edge so the video blends into the page */
  background: #000000;
  color: var(--text-light);
}

/* Hero video styles (top and bottom) */
.hero-video{ width:100%; display:block; overflow:hidden; }
.hero-video.top{ position: relative; }
.hero-video video{ width:100%; height:auto; display:block; opacity:1; transition: opacity 700ms ease; }
.hero-video video.mirrored{ transform: scaleY(-1); }
.hero-video video.fade-out{ opacity:0; }
.hero-video.top{ margin-bottom: 12px; }
.hero-video.bottom{ margin-top: 12px; }

/* Ensure poster content sits below the top video and is not overlapping */
.poster{ margin-top: 0; }

.poster{
  max-width: 1200px; /* poster frame for screen preview */
  margin: 0 auto; /* let videos and page flow naturally, no forced vertical offset */
  /* make poster background transparent so it seamlessly blends with page black */
  background: transparent;
  border-radius: 8px;
  padding: 28px;
  box-shadow: none;
  color: var(--text-light);
  position: relative;
  overflow: visible;
}

/* make the poster vertically scrollable in the viewport so the intro bar stays visible at top
   while the rest of the poster can be scrolled into view */
.poster{
  max-height: none;
  overflow-y: visible;
}

/* A faint nebula / Milky Way wash for realism using a pseudo-element */
.poster::before{ display:none !important; }

/* animated twinkle layer */
.poster::after{ display:none !important; }

@keyframes twinkle{
  0% { opacity: 0.85; filter: brightness(0.9); }
  10% { opacity: 1; filter: brightness(1.55); }
  30% { opacity: 0.8; filter: brightness(0.85); }
  50% { opacity: 1; filter: brightness(1.35); }
  70% { opacity: 0.82; filter: brightness(1.9); }
  90% { opacity: 1; filter: brightness(1.3); }
  100% { opacity: 0.9; filter: brightness(1); }
}

@keyframes drift{
  0% { background-position: 10px 20px, 90px 140px, 200px 90px; }
  50% { background-position: 30px 10px, 70px 160px, 180px 110px; }
  100% { background-position: 10px 20px, 90px 140px, 200px 90px; }
}

/* Header */
.poster-header{
  position: absolute;
  left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items:center; gap:6px;
  padding: 6px 20px; z-index: 80; pointer-events: none;
}

#poster-title{
  font-family: 'Orbitron', 'Inter', sans-serif;
  font-size: 56px;
  line-height: 1.02;
  margin: 6px 0 8px 0;
  color: var(--white);
  text-align: center;
  font-weight: 800;
  letter-spacing: 0.035em;
  z-index: 2; /* keep title above overlays */
  /* subtle glow for contrast on dark background */
  text-shadow: 0 6px 18px rgba(0,0,0,0.85), 0 1px 0 rgba(255,255,255,0.02);
}

.subtitle{
  font-size:26px;
  font-weight:600;
  color: var(--white);
  margin:6px 0 12px 0;
  text-transform:none;
}

.authors{
  font-size:14px;
  color:var(--muted);
  margin:0;
}

.logos{ display:flex; gap:12px; align-items:center; }
.logo{ padding:8px 12px; background:transparent; border-radius:6px; color:var(--text-light); font-weight:700; }
.isu-logo{ width: clamp(72px, 10vw, 120px); height: auto; object-fit:contain; background:transparent; display:block; }

/* top-right positioned logo aligned with the title */
.brand-right{ display:none; }
.brand-left{ text-align:center; }

/* Top logo styles: center above the title */
.top-logo{ display:flex; justify-content:center; align-items:center; width:100%; margin-bottom:8px; z-index:3; }
.top-logo .top-logo-img{ width: clamp(84px, 10vw, 140px); height:auto; display:block; }

/* add spacing so the title never overlaps the logo */
.poster-header .brand-left{ padding-top:8px; }
.poster-header #poster-title{ margin-top:6px; }

/* subtle vignette to darken bright areas and improve legibility */
/* vignette removed per user request */

/* Two-column grid following poster layout */
.content-grid{
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  gap:18px;
  margin-top:18px;
  padding-bottom: 18px; /* give space above bottom key-findings */
}

.col-left .panel, .col-right .panel{ background:var(--panel-bg); padding:16px; border-radius:8px; }

.panel h2{ font-size:26px; margin:0 0 8px 0; color:var(--text-light); font-weight:700; letter-spacing:0.02em; text-shadow: 0 3px 8px rgba(0,0,0,0.6); }
.panel p, .panel li{ font-size:16px; color:var(--muted); }

/* Summary heading inside collapsibles */
.collapsible summary h2, .collapsible summary h3{ display:inline-block; margin:0; }

/* Intro banner: large, full-width bar at the top of the poster */
.sections-list{ display:flex; flex-direction:column; gap:28px; padding:30px 24px; max-width:1100px; margin:18px auto 60px auto; }

.section-box{ background: transparent; border: 2px solid rgba(255,255,255,0.95); padding:18px; border-radius:8px; color:var(--text-light); }
.section-box h2{ margin:0 0 12px 0; font-size:24px; }
.section-box .section-body{ min-height:120px; display:block; color:var(--muted); }
.section-box .section-body p{ margin-bottom: 1rem; }
.section-box .section-body ul{ margin-bottom: 1rem; margin-left: 2rem; }
.section-box .section-body ul li{ margin-bottom: 1.5rem; }
.section-box .section-body ul li:last-child{ margin-bottom: 0; }
.section-box#way-forward-box{ border: none; background: transparent; }
.section-box#way-forward-box .section-body{ min-height: auto; display: block; }

.image-compare{ position:relative; height:320px; display:flex; align-items:center; justify-content:center; }
.image-compare{ position:relative; height:320px; display:flex; align-items:center; justify-content:center; background-size:cover; background-position:center; background-image: url("./assets/Rwanda Background.png"); }
.image-compare .img{ position:absolute; inset:0; border-radius:6px; display:block; width:100%; height:100%; object-fit:cover; }
.image-compare .img-b{ clip-path: inset(0 0 0 0); z-index:30; }
.image-compare .img-a{ clip-path: inset(0 50% 0 0); z-index:40; }
.image-compare .img-b{ z-index:30; }
.image-compare .img-a{ z-index:40; }
.image-compare input[type="range"]{
  position:absolute; inset:0; width:100%; height:100%; margin:0; padding:0; background:transparent;
  opacity:0; cursor: ew-resize; z-index:50; /* invisible but interactive */
}

.image-compare .divider{
  position:absolute; top:0; bottom:0; width:3px; left:50%; transform: translateX(-50%); background: rgba(255,255,255,0.95);
  z-index:55; box-shadow: 0 6px 18px rgba(0,0,0,0.6);
  pointer-events: auto; /* allow dragging */
  cursor: ew-resize;
}
.image-compare .divider::after{
  content: '';
  position: absolute; left:50%; top:8px; transform: translate(-50%, 0);
  width:18px; height:18px; border-radius:50%; background: var(--isu-accent); box-shadow:0 6px 12px rgba(0,0,0,0.45);
}

.image-compare.dragging .divider{ cursor: grabbing; }

.image-compare .divider.dragging::after{ background: #ffffff; box-shadow:0 8px 20px rgba(0,0,0,0.5); }

.videos-row{ display:flex; gap:18px; }
.video-placeholder{ flex:1; min-height:180px; border-radius:6px; background:rgba(255,255,255,0.02); display:flex; align-items:center; justify-content:center; }

.timeline-wrap{ position:relative; height:240px; }
.timeline-curve{ position:absolute; left:0; right:0; top:0; bottom:0; width:100%; height:100%; }
.timeline{ position:relative; width:200%; height:100%; overflow-x:auto; overflow-y:visible; z-index:40; }
.timeline{ position:relative; width:200%; height:100%; overflow-x:auto; overflow-y:visible; perspective: 900px; }
.timeline .cube{ position:absolute; top:40%; width:36px; height:36px; background:#ffffff; border-radius:4px; transform: translateY(-50%) translateZ(0); animation: float 3s ease-in-out infinite; z-index:50; display:block; }
@keyframes float{ 0%{ transform: translateY(-50%) translateX(0);}50%{ transform: translateY(-56%) translateX(0);}100%{ transform: translateY(-50%) translateX(0);} }

/* Tooltip for timeline cubes */
.timeline-curve{ z-index: 20; pointer-events: none; }

.timeline .cube{
  background: linear-gradient(180deg,#ffffff,#e9eef6);
  box-shadow: 0 10px 26px rgba(0,0,0,0.6);
  cursor: pointer;
  border: 1px solid rgba(0,0,0,0.08);
  transform-style: preserve-3d;
}
.timeline .cube:focus{ outline: 3px solid rgba(11,144,255,0.18); outline-offset:6px; }

/* Permanent label next to each cube */
.timeline .cube .cube-label{
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-light);
  font-size:13px;
  white-space: nowrap;
  background: rgba(2,6,23,0.0);
  padding-left:6px;
  pointer-events: none; /* labels are decorative */
  z-index: 45;
  opacity: 0.95;
}

/* Add a subtle 3D face illusion using pseudo-elements */
.timeline .cube::before,
.timeline .cube::after{
  content: '';
  position: absolute;
  left: 0; top: 0; right: 0; bottom: 0;
  border-radius: 4px;
  transform-origin: center center;
  pointer-events: none;
}
.timeline .cube::before{
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(235,240,250,0.9));
  transform: rotateX(18deg) translateZ(2px);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.06);
  z-index: 1;
}
.timeline .cube::after{
  background: linear-gradient(180deg, rgba(215,225,240,0.95), rgba(195,210,235,0.9));
  transform: rotateY(-18deg) translateZ(0px);
  z-index: 0;
}

.timeline .cube:hover{ transform: translateY(-54%) scale(1.06); }
.timeline .cube:active{ transform: translateY(-56%) scale(0.98); }

/* References overlay that sits above the bottom hero video */
.hero-video.bottom{ margin-top: 12px; position: relative; }

.references-overlay{ max-width:1100px; margin: 0 auto; position: absolute; left:50%; transform: translateX(-50%); bottom:18px; z-index:120; width:calc(100% - 64px); pointer-events:auto; }
.references-overlay .section-box{ background: rgba(0,0,0,0.65); border: 2px solid rgba(255,255,255,0.12); }

.references-box{ position:relative; }
.references-box .section-body{ min-height:60px; }

.intro-banner{
  display:flex;
  align-items:center;
  justify-content:center;
  height:260px;
  padding:22px 28px;
  margin: 14px 0;
  /* slightly more opaque than the black background for better legibility */
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
  position: relative;
  z-index: 2;
}
.intro-banner .intro-inner{ max-width:1100px; text-align:center; }
.intro-banner h2{ font-size:40px; margin:0 0 8px 0; }
.intro-banner p{ font-size:18px; color:var(--muted); max-width:980px; margin:0 auto; }

/* Objectives banner styling: prominent but slightly smaller than intro */
.objectives-banner{
  display:flex;
  align-items:center;
  justify-content:center;
  height:200px;
  padding:18px 24px;
  margin: 12px 0 18px 0;
  background: linear-gradient(180deg, rgba(8, 0, 255, 0.4), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 8px;
  position: relative;
  z-index: 2;
}
.objectives-inner{ max-width:1050px; text-align:center; }
.objectives-banner h2{ font-size:28px; margin:0 0 8px 0; letter-spacing:0.04em; }
.objectives-banner p{ font-size:16px; color:var(--muted); margin:0 auto; }

.panel.small h3{ font-size:20px; }

/* Collapsible panels: modern, accessible styling for <details>/<summary> */
details.collapsible{ background: var(--panel-bg); border-radius:8px; padding:0; overflow:hidden; }
details.collapsible[open]{ box-shadow: 0 12px 30px rgba(0,0,0,0.45); }
details.collapsible summary{
  list-style:none; cursor:pointer; padding:14px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px; user-select:none;
  background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
  border-bottom: 1px solid rgba(255,255,255,0.03);
}
details.collapsible summary::-webkit-details-marker{ display:none; }
details.collapsible summary h2, details.collapsible summary h3{ margin:0; color:var(--text-light); }
details.collapsible summary:hover{ background: rgba(255,255,255,0.02); }
details.collapsible summary::after{ content: '▾'; transform-origin: center; transition: transform 200ms ease; color:var(--muted); }
details.collapsible[open] summary::after{ transform: rotate(180deg); }
details.collapsible .panel-body{ padding: 14px 18px 18px 18px; }

/* Tooltip helper class: attach data-tooltip="..." to any element */
.has-tooltip{ position: relative; }
.has-tooltip[data-tooltip]::after{
  content: attr(data-tooltip);
  position: absolute; left:50%; transform: translateX(-50%) translateY(-6px);
  bottom: calc(100% + 8px);
  background: rgba(2,6,23,0.95); color:#fff; padding:6px 8px; border-radius:6px; font-size:12px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity 140ms ease, transform 140ms ease; z-index:50;
}
.has-tooltip:hover[data-tooltip], .has-tooltip:focus[data-tooltip]{ outline: none; }
.has-tooltip:hover::after, .has-tooltip:focus::after{ opacity:1; transform: translateX(-50%) translateY(-10px); }

/* small accessibility tweak for focus-visible */
:where(button):focus-visible{ outline: 3px solid rgba(11,144,255,0.18); outline-offset:2px; }

/* Stat/Key-findings row */
.stats{
  display:flex; gap:12px; margin:8px 0 0 0;
}
.stat{ flex:1; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:14px; border-radius:8px; text-align:center; box-shadow:0 6px 16px rgba(0,0,0,0.6); }
.stat .num{ font-size:28px; font-weight:800; color:var(--isu-accent); display:flex; align-items:center; justify-content:center; gap:8px; }
.stat .label{ font-size:13px; color:var(--muted); }
.stat .num::before{ content: ''; width:18px; height:18px; display:inline-block; flex:0 0 18px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffffff' d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.62L12 2 9.19 8.62 2 9.24l5.46 4.73L5.82 21z'/></svg>"); background-size: contain; background-repeat: no-repeat; background-position:center; opacity:0.95; margin-right:6px; }

/* Interactive area */
.interactive{ display:flex; flex-direction:column; gap:12px; }
.viewer{ background:transparent; border-radius:8px; border:1px solid rgba(255,255,255,0.04); overflow:hidden; }
.viewer-topbar{ display:flex; justify-content:space-between; align-items:center; padding:10px 14px; background:transparent; border-bottom:1px solid rgba(255,255,255,0.03); }
.viewer-title{ font-weight:700; color:var(--text-light); }
.viewer-controls .control{ margin-left:8px; padding:6px 10px; border-radius:6px; border:1px solid rgba(255,255,255,0.06); background:rgba(255,255,255,0.02); color:var(--text-light); cursor:pointer; }
.viewer-controls .control,
.carousel-btn{
  transition: background-color 160ms ease, transform 90ms ease, box-shadow 160ms ease;
}
.viewer-controls .control:hover,
.carousel-btn:hover{
  background: var(--isu-accent);
  color: #021124;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(11,144,255,0.14);
}
.viewer-controls .control:active,
.carousel-btn:active{
  transform: translateY(0);
  box-shadow: 0 6px 12px rgba(11,144,255,0.12) inset;
}
.viewer-controls .control:focus,
.carousel-btn:focus{
  outline: 3px solid rgba(11,144,255,0.16);
  outline-offset: 2px;
}

.visual-area{ height:420px; display:flex; align-items:center; justify-content:center; background:linear-gradient(180deg,#021124,#022b4a); }
.visual-area svg{ width:100%; height:100%; display:block; }

.carousel{ display:flex; align-items:center; gap:10px; }
.carousel-frame{ width:100%; overflow:hidden; }
.carousel-frame .carousel-slide{ width:100%; }
.carousel-btn{ background:transparent; border:1px solid rgba(255,255,255,0.06); padding:8px 12px; border-radius:6px; color:var(--text-light); cursor:pointer; }
.image-placeholder{ display:flex; align-items:center; justify-content:center; height:120px; background:rgba(255,255,255,0.02); border-radius:6px; color:var(--text-light); font-weight:700; }

.caption{ font-size:13px; color:var(--muted); }

/* Footer */
.poster-footer{ margin-top:14px; font-size:12px; color:var(--muted); }

/* Print rules for high-res posters (A0/A1 guidance) */
@media print{
  body{ background:white; color:#06112a; }
  .poster{ max-width: 1188px; padding:40px; box-shadow:none; background:white; }
  .poster{ max-height: none; overflow: visible; }
  #poster-title{ font-size:72px; color:#021124; }
  .panel p, .panel li{ font-size:20px; color:#021124; }
  .visual-area{ height:1200px; }
}

/* Responsive */
@media (max-width:980px){ .content-grid{ grid-template-columns: 1fr; } .visual-area{ height:360px; } }

/* Right-edge tiny scroll indicator */
#page-scroll-indicator{
  position: fixed;
  right: 14px; /* slightly offset from the very edge */
  width: 12px;
  height: 12px;
  background: #ffffff;
  border-radius: 2px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.6);
  z-index: 9999;
  transform: translateY(0);
  transition: transform 120ms linear;
  pointer-events: auto;
  touch-action: none; /* allow dragging on touch devices */
  user-select: none;
  cursor: grab;
}

#page-scroll-indicator:focus{ outline: 3px solid rgba(11,144,255,0.18); outline-offset: 4px; }
#page-scroll-indicator.dragging{ cursor: grabbing; }

/* Section Navigation Scrollbar */
html {
  scroll-behavior: smooth;
}

#section-nav {
  position: fixed;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 40px;
  z-index: 9998;
  padding: 20px 0;
}

.nav-point {
  position: relative;
  width: 16px;
  height: 16px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50% 0 0 50%;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  border: 2px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.nav-point:hover {
  background: rgba(11, 144, 255, 0.8);
  border-color: rgba(11, 144, 255, 1);
  transform: scale(1.2) translateX(-2px);
  box-shadow: 0 4px 12px rgba(11, 144, 255, 0.6);
}

.nav-point.active {
  background: rgba(11, 144, 255, 1);
  border-color: rgba(11, 144, 255, 1);
  transform: scale(1.3) translateX(-3px);
  box-shadow: 0 4px 16px rgba(11, 144, 255, 0.8);
}

.nav-point::before {
  content: attr(data-label);
  position: absolute;
  right: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  background: rgba(2, 6, 23, 0.95);
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.nav-point:hover::before {
  opacity: 1;
  transform: translateY(-50%) translateX(-4px);
}

.nav-point.active::before {
  opacity: 0.9;
}

@media (max-width: 980px) {
  #section-nav {
    display: none;
  }
}