:root {
  --r-main-font: "Roboto Mono", monospace;
  --r-heading-font: "Roboto Mono", monospace;
  --navbar-h: 72px;
}

.reveal {
  font-family: "Roboto Mono", monospace;
}

.reveal h1 {
  font-size: 2.6em;
  font-weight: 700;
}

.reveal h2 {
  font-size: 1.8em;
  font-weight: 600;
}

.reveal h3 {
  font-size: 1.3em;
  font-weight: 500;
}

.reveal p,
.reveal li {
  font-size: 1.15em;
  line-height: 1.5;
}

.reveal ul {
  margin-top: 0.4em;
}

.reveal li {
  margin: 0.1em 0;
}

.reveal ul ul li {
  margin-bottom: 0.05em;
}

.title-slide {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;

    display: block !important;
}

.title-slide h1 {
  font-size: 110px;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.8);
}

.title-slide h3 {
  margin-top: 40px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8);
}

.title-slide .earth {
  position: absolute;
  left: 50%;
  bottom: 0px;
  transform: translateX(-50%);
  z-index: 0;
}

/* ------------------------------
   Navigation Bar
-------------------------------- */

#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--navbar-h);
  display: flex;
  justify-content: center;
  align-items: center;
  background: #111;
  border-bottom: 1px solid #2a2a2a;
  z-index: 1000;
}

#navbar a {
  font-family: "Roboto Mono", monospace;
  margin: 0 22px;
  color: #9a9a9a;
  text-decoration: none;
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: .08em;
  position: relative;
  
  /* Make link span full navbar height so the indicator pins to the bottom border */
  height: 100%;
  display: flex;
  align-items: center;
  
  /* Smooth color shift */
  transition: color 0.2s ease;
}

#navbar a:hover,
#navbar a.active {
  color: #ffffff;
}

/* Active indicator bar */
#navbar a.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px; /* Align precisely with the 1px navbar border */
  height: 3px;
  background: #3b82f6;
  border-radius: 2px 2px 0 0; /* Slight rounding on top corners */
}

.reveal .progress {
  height: 6px;
}

.reveal .progress span {
  background: #4aa3ff;
}

/* Reserve the navbar inside Reveal's own box so its scale/centering math is
   computed against the *actual* available area (window height minus navbar),
   instead of nudging .slides down after the fact. This fixes content hiding
   under the navbar and clipping off the bottom globally. */
.reveal {
  position: absolute;
  top: var(--navbar-h);
  left: 0;
  right: 0;
  bottom: 0;
  height: auto;
}

/* ------------------------------
   Per-slide content padding
   Every slide gets an inset...
-------------------------------- */
.reveal .slides section {
  padding: 40px 60px;
  box-sizing: border-box;
}

/* Vertical slides live inside a .stack wrapper that the rule above also
   matches. An absolutely positioned child is laid out from its parent's
   *content* box but sizes itself against the parent's *padding* box, so the
   stack's 60px inset shifts every sub-slide 60px right while leaving it a
   full 1280px wide — every stacked slide ends up off-center. Stacks are
   invisible containers; they get no inset of their own. */
.reveal .slides > section.stack {
  padding: 0;
}

/* ...except the title slide, which stays full-bleed */
.reveal .slides section.title-slide {
  padding: 0;
}

/* ------------------------------
   Universal layout engine
   Every content slide is a bounded flex column of full logical height:
   the heading is pinned to the top and never shrinks, and any media placed
   in a .fit region auto-scales to fill the *remaining* height. Sizes are
   resolved against the slide's own box (%, object-fit), never against the
   browser window (vh/vw), so nothing drifts or clips as the window resizes.
   Excludes .stack (vertical-slide wrapper) and .title-slide (full-bleed).
-------------------------------- */
/* Reveal writes `display:flex` (our configured `display` value) inline on every
   shown slide and `display:none` on hidden ones, so we only set the flex
   *direction* and box here — no !important, and no `.present` gating. Because
   even off-screen/adjacent slides are laid out as flex columns, media is
   already fitted before a slide animates in, so nothing snaps mid-transition. */
.reveal .slides section:not(.stack):not(.title-slide) {
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  height: 100%;
  box-sizing: border-box;
  padding: 24px 60px 40px;
}

/* Stacks (vertical-slide wrappers) are flex too now; make them columns so the
   current sub-slide fills the full width. */
.reveal .slides > section.stack {
  flex-direction: column;
}

/* Headings sit at the top and hold their size */
.reveal .slides section > h1,
.reveal .slides section > h2,
.reveal .slides section > h3 {
  flex: 0 0 auto;
  margin-top: 0;
}

/* Media region: fills the leftover height and can shrink below its content
   size (min-height:0 is the key that lets flex clamp large images). */
.reveal section .fit {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Images: scale down to fit the region on both axes, keeping aspect ratio. */
.reveal section .fit img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Inline SVGs have a viewBox ratio but no intrinsic pixel size, so they
   collapse to 0 when given only max-* constraints. Pin a definite height and
   let the viewBox ratio derive the width (capped by max-width); the default
   preserveAspectRatio keeps the drawing contained and centered. */
.reveal section .fit svg {
  height: 100%;
  max-height: 100%;
  max-width: 100%;
}

/* iframes / model-viewers have no aspect ratio to preserve — fill the box. */
.reveal section .fit iframe,
.reveal section .fit model-viewer {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  border: 0;
}

/* Rows / columns of media inside a .fit region. Each media child gets an equal
   share of the shared axis (flex:1 1 0) and is contained within its cell, so
   two wide images side-by-side never overrun the width and two stacked images
   never overrun the height. Non-image children (captions) keep natural size. */
.reveal section .media-row {
  display: flex;
  gap: 3%;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.reveal section .media-col {
  display: flex;
  flex-direction: column;
  gap: 3%;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* The Markdown parser wraps an image in a <p> when blank lines surround it, so
   a media child may be either a bare <img>/<svg> or a <p> containing one. Make
   the picture-bearing <p> the flex cell too (via :has), and size the image to
   fill it. Caption-only <p>s (no image) keep their natural size. */
.reveal section .media-row > img,
.reveal section .media-row > svg,
.reveal section .media-row > p:has(> img),
.reveal section .media-row > p:has(> svg) {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.reveal section .media-col > img,
.reveal section .media-col > svg,
.reveal section .media-col > p:has(> img),
.reveal section .media-col > p:has(> svg) {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* When a media child is a wrapping <p>, center the image inside that cell and
   let it be contained. */
.reveal section .media-row > p:has(> img),
.reveal section .media-row > p:has(> svg),
.reveal section .media-col > p:has(> img),
.reveal section .media-col > p:has(> svg) {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

.reveal section .media-row > p > img,
.reveal section .media-row > p > svg,
.reveal section .media-col > p > img,
.reveal section .media-col > p > svg {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Global safety clamp: nothing may exceed the slide box, even if a slide has
   not been migrated onto the .fit system yet. */
.reveal .slides img,
.reveal .slides svg,
.reveal .slides iframe {
  max-width: 100%;
  max-height: 100%;
}

/* Styling for model viewers */
.model-container {
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0 auto;
}

model-viewer {
  width: 100%;
  height: 100%;
  --poster-color: transparent;
}


@keyframes slideDown {
    0% {
        transform: translateY(-120%);
    }
    100% {
        transform: translateY(120%);
    }
}

/* ------------------------------
   Heading Fly-in Animation
-------------------------------- */
.mount-heading {
  display: inline-block;
  position: relative;
  letter-spacing: 0.05em;
  opacity: 0;
}

.mount-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
}

.mount-heading-play {
  animation: fly-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.mount-heading-play::after {
  animation: scan-underline 0.6s ease-out 0.7s forwards;
}

@keyframes fly-in {
  0% { opacity: 0; transform: translateX(-60px); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes scan-underline {
  to { transform: scaleX(1); }
}

.corner-media { 
  width: 30%; 
  height: auto; 
  border-radius: 8px; 
  box-shadow: 0 4px 12px 
rgba(0, 0, 0, 0.25); 
  margin: -1.5em 0 1em; } 

.corner-media-left {
  float: left;
  margin-right: 1.5em;
}

.corner-media-right {
  float: right;
  margin-left: 1.5em;
}

/* --- Team Grid --- */
.team-grid {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 1rem;
  text-align: center;
}

.team-card {
  flex: 1;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.team-card img {
  width: 90px;
  height: 90px;
  object-fit: contain;
  border-radius: 50%;
  margin-bottom: 1rem;
  background: rgba(255, 255, 255, 0.08);
  padding: 8px;
  cursor: zoom-in;
  transition: transform 0.2s ease;
}

.team-card img:hover {
  transform: scale(1.08);
}

.team-card h4 {
  margin: 0 0 0.5rem 0;
  font-size: 1.25rem;
  color: #fff;
}

.team-card .meta {
  font-size: 0.8rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.85);
}

.team-card .meta strong {
  color: #58a6ff;
  display: block;
  margin-top: 0.4rem;
}

/* --- Connect Grid --- */
.connect-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin-top: 0.2rem;
}

.connect-grid img.icon {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.connect-grid img.qr {
  width: 135px;
  height: 135px;
  object-fit: contain;
  border-radius: 8px;
  background: #fff;
} /* Fixed: Added missing closing brace */

/* --- Modal & Overlay Styling --- */
.image-modal {
  display: none;
  position: fixed;
  z-index: 99999; /* Fixed: High z-index to stay above Reveal.js slides */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(5px);
  justify-content: center;
  align-items: center;
  cursor: zoom-out;
}

.image-modal img {
  max-width: 85vw;
  max-height: 85vh;
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  transform: scale(0.9);
  transition: transform 0.2s ease-out;
}

.image-modal.active {
  display: flex;
}

.image-modal.active img {
  transform: scale(1);
}

#image-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 99999;
}

#image-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}

#overlay-image {
  max-width: 95vw;
  max-height: 95vh;
  object-fit: contain;
  cursor: zoom-out;
}

.click-expand {
  cursor: zoom-in;
  transition: transform 0.15s ease;
}

.click-expand:hover {
  transform: scale(1.02);
}

.reveal .fragment.current-visible {
    display: none;
}

.reveal .fragment.current-visible.current-fragment {
    display: block;
}

.reveal .slides section.top-aligned {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
}
section#hardware-slide {
  display: block !important;
}
section#hardware-slide h2 {
  margin-top: 260px;
}