/* Presentation mode styles */

html, body {

  margin: 0;

  padding: 0;

  overflow: hidden;

  height: 100vh;

  width: 100vw;

}

/* Landscape prompt for mobile portrait mode */

.rotate-prompt {

  display: none;

  position: fixed;

  inset: 0;

  background: oklch(var(--b2));

  z-index: 1000;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 1.5rem;

  text-align: center;

  padding: 2rem;

}

.rotate-prompt svg {

  width: 4rem;

  height: 4rem;

  color: oklch(var(--p));

  animation: rotate-hint 2s ease-in-out infinite;

}

@keyframes rotate-hint {

  0%, 100% { transform: rotate(0deg); }

  50% { transform: rotate(90deg); }

}

.rotate-prompt h2 {

  font-size: 1.5rem;

  font-weight: 600;

  color: oklch(var(--bc));

}

.rotate-prompt p {

  color: oklch(var(--bc) / 0.6);

  max-width: 280px;

}

/* Show prompt only on portrait mobile screens */

@media (max-width: 768px) and (orientation: portrait) {

  .rotate-prompt {

    display: flex;

  }

  #slides-container,

  .slide-counter,

  .nav-hint,

  .progress-bar {

    display: none;

  }

}

.slide {

  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;

  justify-content: center;

  padding: 5vw;

  opacity: 0;

  transform: translateX(100%);

  transition: all 0.5s ease;

}

.slide.active {

  opacity: 1;

  transform: translateX(0);

}

.slide.prev {

  transform: translateX(-100%);

}

.slide-counter {

  position: fixed;

  bottom: 20px;

  right: 20px;

  background: rgba(0, 0, 0, 0.5);

  padding: 8px 16px;

  border-radius: 20px;

  font-size: 14px;

  color: white;

  z-index: 100;

}

.nav-hint {

  position: fixed;

  bottom: 20px;

  left: 20px;

  background: rgba(0, 0, 0, 0.5);

  padding: 8px 16px;

  border-radius: 20px;

  font-size: 14px;

  color: rgba(255, 255, 255, 0.6);

  z-index: 100;

}

.exit-btn {

  position: fixed;

  top: 20px;

  right: 20px;

  z-index: 100;

}

.progress-bar {

  position: fixed;

  bottom: 0;

  left: 0;

  height: 4px;

  transition: width 0.3s ease;

  z-index: 100;

}