/* QuietLumen PWA - Dark Theme Styles */

/* CSS Custom Properties for Dark Theme and Animation Config */
:root {
  --bg-primary: #000000;      /* Pure black background */
  --text-primary: #ffffff;    /* Pure white text */
  --text-secondary: #cccccc;  /* Subtle gray for secondary text */
  --accent: #333333;          /* Dark gray for controls */
  --accent-hover: #555555;    /* Lighter gray for hover states */
  --overlay: rgba(0,0,0,0.8); /* Semi-transparent overlay */
  
  /* Animation Configuration - Set from JavaScript */
  --pan-duration-standard: 12s;
  --pan-duration-portrait: 15s;
  --pan-duration-small: 18s;
  --pan-duration-medium: 14s;
  --pan-duration-large: 16s;
  --pan-duration-wide: 12s;
  --pan-duration-ultrawide: 14s;
  --pan-duration-minimal: 20s;
  
  /* Scale Configuration */
  --scale-minimal: 1.01;
  --scale-small: 1.03;
  --scale-medium: 1.015;
  --scale-standard: 1.02;
  --scale-portrait: 1.05;
  --scale-wide: 1.01;
  --scale-ultrawide: 1.02;
  
  /* Movement Configuration */
  --movement-minimal: 0.3%;
  --movement-small: 0.5%;
  --movement-medium: 0.8%;
  --movement-standard: 1.0%;
  --movement-portrait: 1.0%;
  --movement-wide: 1.0%;
  --movement-ultrawide: 1.0%;
}

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', 'Roboto', sans-serif;
  font-weight: 300;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  overflow: hidden;
  height: 100vh;
  width: 100vw;
}

#app {
  height: 100vh;
  width: 100vw;
  position: relative;
}

/* Startup Screen Styles */
.startup-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--bg-primary);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.startup-screen .logo {
  width: 120px;
  height: auto;
  margin-bottom: 2rem;
  opacity: 0.9;
}

.startup-screen .tagline {
  font-size: 1.2rem;
  font-weight: 300;
  letter-spacing: 2px;
  text-align: center;
  text-transform: lowercase;
  margin: 0.25rem 0;
}

.startup-screen .tagline-static {
  opacity: 0.8; /* Always visible */
}

.startup-screen .tagline-animated {
  opacity: 0;
  animation: fadeInTagline 1000ms ease-in-out forwards;
  animation-delay: 800ms;
}

@keyframes fadeInTagline {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.8;
  }
}

/* Simple loading text with pulsing animation */
.loading-text {
  font-size: 0.8rem;
  font-weight: 300;
  letter-spacing: 1px;
  color: var(--text-secondary);
  text-align: center;
  margin-top: 2rem;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.7;
  }
}

.tagline-placeholder {
  visibility: hidden; /* Takes up space but invisible */
}

/* Slideshow Container */
.slideshow-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--bg-primary);
  overflow: hidden;
  /* Ensure proper stacking context */
  z-index: 1;
}

/* Slideshow Images */
.slideshow-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  object-position: var(--portrait-position, center);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  display: block;
  /* Gentle panning animation for zoomed images - duration from config */
  animation: gentle-pan var(--pan-duration-standard) ease-in-out infinite alternate;
  /* Ensure smooth image quality */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: smooth;
  /* Prevent overlapping issues */
  z-index: 1;
}

/* Disable panning when config flag is off */
.slideshow-image.no-pan {
  animation: none !important;
  transform: none !important;
}

/* Active image should be on top */
.slideshow-image[x-show="true"] {
  z-index: 2;
}

/* Gentle Panning Animation Keyframes */
@keyframes gentle-pan {
  0% { 
    transform: scale(1.02) translateX(-1%); 
  }
  100% { 
    transform: scale(1.02) translateX(1%); 
  }
}

/* Portrait Viewport Specific Panning */
@keyframes gentle-pan-portrait {
  0% { 
    transform: scale(var(--scale-portrait)) translateX(calc(-1 * var(--movement-portrait))); 
  }
  100% { 
    transform: scale(var(--scale-portrait)) translateX(var(--movement-portrait)); 
  }
}

/* Responsive Image Handling */

/* Portrait Viewport - Mobile devices in portrait orientation */
@media (orientation: portrait) {
  .slideshow-image {
    /* Zoom into landscape images from 1/3 left or right positioning, centered vertically (Requirement 3.1) */
    object-position: var(--portrait-position, 33% 50%);
    /* Use portrait-specific panning animation with configurable duration */
    animation: gentle-pan-portrait var(--pan-duration-portrait) ease-in-out infinite alternate;
  }
  
  /* Alternate positioning for variety - can be controlled via CSS custom properties */
  .slideshow-image:nth-child(even) {
    --portrait-position: 67% 50%; /* 1/3 from right, middle vertically */
  }
  
  .slideshow-image:nth-child(odd) {
    --portrait-position: 33% 50%; /* 1/3 from left, middle vertically */
  }
}

/* Landscape Viewport - Desktop and landscape mobile */
@media (orientation: landscape) {
  .slideshow-image {
    /* Zoom to fit screen for landscape images that don't exactly match viewport (Requirement 3.2) */
    object-fit: cover;
    /* Use dynamic positioning - very subtle adjustment to respect original composition */
    object-position: var(--landscape-position, center 55%);
    /* Standard gentle panning for landscape with configurable duration */
    animation: gentle-pan var(--pan-duration-standard) ease-in-out infinite alternate;
  }
  
  /* For very wide screens, ensure images fill properly */
  @media (min-aspect-ratio: 21/9) {
    .slideshow-image {
      object-fit: cover;
      /* Use dynamic positioning with subtle fallback for wide screens */
      object-position: var(--landscape-position, center 58%);
      animation: gentle-pan-wide var(--pan-duration-wide) ease-in-out infinite alternate;
    }
    
    @keyframes gentle-pan-wide {
      0% { 
        transform: scale(var(--scale-wide)) translateX(calc(-1 * var(--movement-wide))); 
      }
      100% { 
        transform: scale(var(--scale-wide)) translateX(var(--movement-wide)); 
      }
    }
  }
  
  /* For ultra-wide screens */
  @media (min-aspect-ratio: 32/9) {
    .slideshow-image {
      object-fit: cover;
      /* Use dynamic positioning with moderate fallback for ultra-wide */
      object-position: var(--landscape-position, center 60%);
      animation: gentle-pan-ultrawide var(--pan-duration-ultrawide) ease-in-out infinite alternate;
    }
    
    @keyframes gentle-pan-ultrawide {
      0% { 
        transform: scale(var(--scale-ultrawide)) translateX(calc(-1 * var(--movement-ultrawide))); 
      }
      100% { 
        transform: scale(var(--scale-ultrawide)) translateX(var(--movement-ultrawide)); 
      }
    }
  }
}

/* High DPI Display Support for Image Quality Preservation (Requirement 3.5) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .slideshow-image {
    /* Optimize for high DPI displays */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    /* Ensure crisp rendering on retina displays */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Improve rendering performance */
    will-change: transform;
  }
}

/* Very Small Screens - Minimal zoom to preserve composition */
@media (max-width: 480px) {
  .slideshow-image {
    /* Minimal zoom to preserve the photographer's intended composition */
    animation: gentle-pan-minimal var(--pan-duration-minimal) ease-in-out infinite alternate;
  }
}

@keyframes gentle-pan-minimal {
  0% { 
    transform: scale(var(--scale-minimal)) translateX(calc(-1 * var(--movement-minimal))); 
  }
  100% { 
    transform: scale(var(--scale-minimal)) translateX(var(--movement-minimal)); 
  }
}

/* Very Small Screens in Portrait - Respect composition while providing subtle positioning */
@media (max-width: 480px) and (orientation: portrait) {
  .slideshow-image {
    /* Reduce zoom significantly to show more of the original composition */
    animation: gentle-pan-small var(--pan-duration-small) ease-in-out infinite alternate;
  }
}

@keyframes gentle-pan-small {
  0% { 
    transform: scale(var(--scale-small)) translateX(calc(-1 * var(--movement-small))); 
  }
  100% { 
    transform: scale(var(--scale-small)) translateX(var(--movement-small)); 
  }
}

/* Large Desktop Screens */
@media (min-width: 1920px) and (orientation: landscape) {
  .slideshow-image {
    /* Slightly more subtle panning on large screens */
    animation: gentle-pan-large var(--pan-duration-large) ease-in-out infinite alternate;
  }
}

@keyframes gentle-pan-large {
  0% { 
    transform: scale(var(--scale-standard)) translateX(calc(-1.5 * var(--movement-standard))); 
  }
  100% { 
    transform: scale(var(--scale-standard)) translateX(calc(1.5 * var(--movement-standard))); 
  }
}

/* Tablet and Medium Screens - Balanced approach */
@media (min-width: 481px) and (max-width: 1024px) {
  .slideshow-image {
    /* Moderate zoom that balances composition preservation with gentle movement */
    animation: gentle-pan-medium var(--pan-duration-medium) ease-in-out infinite alternate;
  }
}

@keyframes gentle-pan-medium {
  0% { 
    transform: scale(var(--scale-medium)) translateX(calc(-1 * var(--movement-medium))); 
  }
  100% { 
    transform: scale(var(--scale-medium)) translateX(var(--movement-medium)); 
  }
}

/* Tablet Landscape */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .slideshow-image {
    /* Optimized for tablet landscape viewing */
    object-fit: cover;
    animation: gentle-pan 22s ease-in-out infinite alternate;
  }
}

/* Image Protection - Comprehensive CSS techniques to discourage casual downloading */
.slideshow-image {
  /* Disable all forms of user interaction with images */
  -webkit-user-select: none !important;
  -khtml-user-select: none !important;
  -moz-user-select: none !important;
  -o-user-select: none !important;
  user-select: none !important;
  
  /* Prevent dragging */
  -webkit-user-drag: none !important;
  -khtml-user-drag: none !important;
  -moz-user-drag: none !important;
  -o-user-drag: none !important;
  user-drag: none !important;
  
  /* Disable touch callouts on mobile */
  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: transparent !important;
  
  /* Disable pointer events for protection */
  pointer-events: none !important;
  
  /* Prevent image saving through CSS */
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  
  /* Additional protection measures */
  -webkit-background-clip: text !important;
  background-clip: text !important;
  
  /* Prevent selection highlighting */
  -webkit-highlight: none !important;
  -moz-highlight: none !important;
  highlight: none !important;
  
  /* Disable image context menu specifically */
  -webkit-context-menu: none !important;
  context-menu: none !important;
}

/* Prevent right-click and selection on the entire slideshow container */
.slideshow-container {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

/* Prevent image caching in some browsers */
.slideshow-image {
  /* Force browser to treat as dynamic content */
  cache-control: no-cache, no-store, must-revalidate;
  pragma: no-cache;
  expires: 0;
}

/* Hide images from print stylesheets */
@media print {
  .slideshow-image {
    display: none !important;
    visibility: hidden !important;
  }
  
  .slideshow-container::after {
    content: "Images are not available for printing - © QuietLumen Photography";
    display: block;
    text-align: center;
    padding: 2rem;
    color: #333;
    font-size: 14px;
  }
}

/* Prevent image manipulation through CSS filters when dev tools detected */
.slideshow-image.protected {
  filter: blur(2px) contrast(0.8);
  transition: filter 0.3s ease;
}

/* Prevent image outline/focus indicators */
.slideshow-image:focus,
.slideshow-image:active {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.slideshow-placeholder {
  color: var(--text-secondary);
  text-align: center;
  font-size: 1rem;
  opacity: 0.6;
}

/* Gallery Container (Requirements 5.1, 5.3, 5.5) */
.gallery-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--bg-primary);
  overflow-y: auto;
  z-index: 1000;
  padding: 1rem;
}

/* Floating Close Button */
.gallery-close-btn {
  position: fixed;
  top: 1rem;
  right: 1rem;
  background: rgba(0, 0, 0, 0.8);
  color: var(--text-primary);
  border: none;
  width: 3rem;
  height: 3rem;
  font-size: 1.5rem;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
  z-index: 1001;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.gallery-close-btn:hover {
  background: rgba(51, 51, 51, 0.9);
  opacity: 1;
  transform: scale(1.05);
}

/* Gallery Grid (Requirement 5.1) */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 2px;
  padding: 0;
  width: 100%;
}

/* Gallery Items */
.gallery-item {
  position: relative;
  aspect-ratio: 4/3;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.gallery-item:hover {
  transform: scale(1.02);
  border-color: var(--accent-hover);
}

.gallery-item-current {
  border-color: var(--text-primary) !important;
}

.gallery-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: all 0.3s ease;
  /* Image protection for gallery thumbnails */
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

.gallery-item:hover .gallery-thumb {
  transform: scale(1.05);
}

/* Responsive Gallery Design */
@media (max-width: 768px) {
  .gallery-container {
    padding: 0.5rem;
  }
  
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
  }
  
  .gallery-close-btn {
    top: 0.5rem;
    right: 0.5rem;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
  }
  
  .gallery-close-btn {
    width: 2.2rem;
    height: 2.2rem;
    font-size: 1.1rem;
  }
}

/* Large screens - more columns */
@media (min-width: 1200px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 3px;
  }
}

@media (min-width: 1600px) {
  .gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 4px;
  }
}

/* Navigation Controls (Requirements 4.1, 4.2, 4.3, 4.5) */
.nav-menu {
  position: fixed;
  bottom: 2rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: fit-content;
  display: flex;
  gap: 1rem;
  background: var(--overlay);
  padding: 1rem 1.5rem;
  border-radius: 2rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 1000;
  /* Ensure controls don't interfere with image protection */
  pointer-events: auto;
}

.nav-btn {
  background: var(--accent);
  color: var(--text-primary);
  border: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: 300;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.9;
  /* Ensure buttons are interactive */
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.nav-btn:hover {
  background: var(--accent-hover);
  opacity: 1;
  transform: scale(1.05);
}

.nav-btn:active {
  transform: scale(0.95);
}

/* Specific button styling */
.nav-btn-prev,
.nav-btn-next {
  font-size: 1.5rem;
  font-weight: 400;
}

.nav-btn-play {
  font-size: 1rem;
  position: relative;
}

/* Custom pause icon using SVG */
.pause-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pause-icon svg {
  display: block;
}

/* Play icon styling */
.play-icon {
  font-size: 1rem;
  margin-left: 2px; /* Slight offset to center visually */
}

.nav-btn-gallery {
  font-size: 1.2rem;
  font-weight: 400;
}

/* Touch-friendly sizing for mobile */
@media (max-width: 768px) {
  .nav-menu {
    bottom: 1.5rem;
    padding: 0.8rem 1.2rem;
    gap: 0.8rem;
  }
  
  .nav-btn {
    width: 2.8rem;
    height: 2.8rem;
    font-size: 1.1rem;
  }
  
  .nav-btn-prev,
  .nav-btn-next {
    font-size: 1.4rem;
  }
  
  .nav-btn-gallery {
    font-size: 1.1rem;
  }
}

/* Very small screens */
@media (max-width: 480px) {
  .nav-menu {
    bottom: 1rem;
    padding: 0.6rem 1rem;
    gap: 0.6rem;
  }
  
  .nav-btn {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1rem;
  }
  
  .nav-btn-prev,
  .nav-btn-next {
    font-size: 1.3rem;
  }
  
  .nav-btn-gallery {
    font-size: 1rem;
  }
}

/* Narration Overlay Styles */
.narration-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900;
  padding: 2rem;
  pointer-events: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.narration-content {
  max-width: 600px;
  width: 100%;
  max-height: 85vh;
  background: rgba(20, 20, 20, 0.95);
  border-radius: 1rem;
  padding: 2.5rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  pointer-events: auto;
  position: relative;
  display: flex;
  flex-direction: column;
}

.narration-close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: var(--text-primary);
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  z-index: 10;
  pointer-events: auto;
}

.narration-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

.narration-scroll-container {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1rem;
  padding-right: 0.5rem;
}

.narration-text {
  color: var(--text-primary);
  font-size: 1.1rem;
  line-height: 1.8;
  font-weight: 300;
  letter-spacing: 0.3px;
  white-space: pre-line;
  text-align: left;
}

.narration-hint {
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 300;
  letter-spacing: 1px;
  text-align: center;
  text-transform: lowercase;
  opacity: 0.6;
  animation: pulse 2s ease-in-out infinite;
  flex-shrink: 0;
}

/* Narration Indicator (subtle book icon) */
.narration-indicator {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 3rem;
  height: 3rem;
  background: var(--overlay);
  border: none;
  border-radius: 50%;
  color: var(--text-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.5;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 800;
  pointer-events: auto;
}

.narration-indicator:hover {
  opacity: 1;
  transform: scale(1.1);
  background: var(--accent);
}

.narration-indicator svg {
  width: 20px;
  height: 20px;
}

/* Narration button in nav menu */
.nav-btn-narration {
  font-size: 1rem;
}

.nav-btn-narration svg {
  width: 16px;
  height: 16px;
}

/* Mobile responsive narration styles */
@media (max-width: 768px) {
  .narration-overlay {
    padding: 1rem;
    align-items: flex-start;
    padding-top: 3rem;
  }
  
  .narration-content {
    padding: 2rem 1.5rem 1.5rem 1.5rem;
    max-width: 100%;
    max-height: 80vh;
  }
  
  .narration-close-btn {
    top: 0.75rem;
    right: 0.75rem;
    width: 2.2rem;
    height: 2.2rem;
    font-size: 1.8rem;
  }
  
  .narration-scroll-container {
    max-height: calc(80vh - 8rem);
  }
  
  .narration-text {
    font-size: 1rem;
    line-height: 1.7;
  }
  
  .narration-indicator {
    bottom: 1.5rem;
    right: 1.5rem;
    width: 2.8rem;
    height: 2.8rem;
  }
  
  .narration-indicator svg {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 480px) {
  .narration-overlay {
    padding: 0.5rem;
    padding-top: 2rem;
  }
  
  .narration-content {
    padding: 1.5rem 1rem 1rem 1rem;
    border-radius: 0.75rem;
    max-height: 85vh;
  }
  
  .narration-close-btn {
    top: 0.5rem;
    right: 0.5rem;
    width: 2rem;
    height: 2rem;
    font-size: 1.5rem;
  }
  
  .narration-scroll-container {
    max-height: calc(85vh - 6rem);
  }
  
  .narration-text {
    font-size: 0.95rem;
    line-height: 1.6;
  }
  
  .narration-hint {
    font-size: 0.75rem;
  }
  
  .narration-indicator {
    bottom: 1rem;
    right: 1rem;
    width: 2.5rem;
    height: 2.5rem;
  }
  
  .narration-indicator svg {
    width: 16px;
    height: 16px;
  }
}

/* Landscape mobile - adjust narration positioning */
@media (max-height: 500px) and (orientation: landscape) {
  .narration-overlay {
    padding: 0.5rem;
  }
  
  .narration-content {
    max-height: 90vh;
    padding: 1.5rem 1rem 1rem 1rem;
  }
  
  .narration-scroll-container {
    max-height: calc(90vh - 5rem);
  }
  
  .narration-text {
    font-size: 0.9rem;
    line-height: 1.5;
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .startup-screen .logo {
    width: 100px;
  }
  
  .startup-screen .tagline {
    font-size: 1rem;
    letter-spacing: 1.5px;
    padding: 0 2rem;
  }
}

@media (max-width: 480px) {
  .startup-screen .logo {
    width: 80px;
  }
  
  .startup-screen .tagline {
    font-size: 0.9rem;
    letter-spacing: 1px;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  /* Disable panning animations for users who prefer reduced motion */
  .slideshow-image {
    animation: none !important;
    transform: none !important;
  }
}

/* Performance Optimizations for Smooth Animations */
.slideshow-image {
  /* Disable hardware acceleration to prevent rendering artifacts */
  transform: none;
  -webkit-transform: none;
  /* Remove will-change to prevent GPU rendering issues */
  /* Improve rendering performance */
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  /* Ensure smooth transitions */
  -webkit-perspective: none;
  perspective: none;
}

/* Cross-platform input handling styles */

/* Android keyboard handling */
body.keyboard-open {
  height: 100vh;
  overflow: hidden;
}

body.keyboard-open .slideshow-container {
  height: 100vh;
}

/* PWA mode styles */
body.pwa-mode {
  /* Additional styles when running as PWA */
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* iOS viewport height fix */
.slideshow-container {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}

.gallery-container {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}

.startup-screen {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}

/* Touch gesture feedback */
.slideshow-container.swiping {
  cursor: grabbing;
}

/* Fullscreen mode adjustments */
:fullscreen .nav-menu,
:-webkit-full-screen .nav-menu,
:-moz-full-screen .nav-menu {
  bottom: 1rem;
}

/* Print Styles */
@media print {
  body {
    background: white;
    color: black;
  }
}