/* ==========================================================================
   HMIF Photobooth - Animations & Motion Design
   Restrained, snappy, tactile feedback without excessive bounce.
   ========================================================================== */

/* Shutter Flash Animation */
#flash-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background-color: #FFFFFF;
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 80ms ease-out;
}

#flash-overlay.flash-active {
  opacity: 1;
  transition: none;
}

#flash-overlay.flash-fade {
  opacity: 0;
  transition: opacity 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Countdown Number Scale & Pulse */
@keyframes countdownPulse {
  0% {
    transform: scale(0.75);
    opacity: 0;
  }
  30% {
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.95;
  }
}

/* Kiosk Screen Transitions */
.fade-in {
  animation: fadeIn 220ms ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.99);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Shutter Button Idle Subtle Breathing */
.shutter-btn.pulse-idle {
  animation: shutterGlow 2.5s infinite ease-in-out;
}

@keyframes shutterGlow {
  0%, 100% {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.4);
  }
}

/* ==========================================================================
   RESPONSIVE & TOUCHSCREEN ADAPTATIONS
   ========================================================================== */

/* Tablet & Smaller Screens (< 1024px) */
@media (max-width: 1024px) {
  .top-nav {
    height: 60px;
    padding: 0 20px;
  }

  .studio-body, .final-body {
    flex-direction: column;
    overflow-y: auto;
  }

  .studio-stage, .final-stage {
    min-height: 420px;
    flex: none;
    padding: 20px;
  }

  .studio-panel, .final-panel {
    max-width: 100%;
    flex: none;
    border-left: none;
    border-top: 1px solid var(--border-light);
    padding: 24px 20px;
  }

  #preview-canvas, #final-canvas-preview {
    max-height: 380px;
  }

  .camera-controls {
    padding: 0 24px;
    height: 100px;
  }
}

/* Touchscreens: Ensure touch targets are comfortable (>= 48px) */
@media (pointer: coarse) {
  .btn {
    min-height: 48px;
  }

  .mode-pill {
    min-height: 44px;
  }

  .swatch-btn {
    width: 48px;
    height: 48px;
  }

  .template-card {
    padding: 14px;
  }
}

/* Print Media Styles (Native Printer Support) */
@media print {
  body {
    background: #FFFFFF !important;
  }

  #app > *:not(#screen-final) {
    display: none !important;
  }

  .final-panel, .top-nav {
    display: none !important;
  }

  .final-stage {
    background: none !important;
    padding: 0 !important;
  }

  #final-canvas-preview {
    box-shadow: none !important;
    max-width: 100% !important;
    max-height: 100% !important;
  }
}