/* ============================================
   BASE STYLES
   Reset, typography, focus indicators,
   utility classes, and keyframe animations
   ============================================ */

/* ----------------------------------------
   CSS RESET
   ---------------------------------------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  touch-action: manipulation;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.4;
}

/* ----------------------------------------
   FOCUS INDICATORS - Accessibility
   ---------------------------------------- */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* ----------------------------------------
   UTILITY CLASSES
   ---------------------------------------- */
.hidden {
  display: none !important;
}

/* ----------------------------------------
   HIDDEN FILE INPUT
   Using sr-only pattern instead of display:none for mobile browser compatibility.
   display:none breaks label-input association on Samsung Internet and some other mobile browsers.
   ---------------------------------------- */
#fileInput,
#secondFileInput,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   KEYFRAME ANIMATIONS
   ============================================ */

/* Credits button celebration */
@keyframes celebrateCredits {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

/* Ripple effect for empty state */
@keyframes ripple {
  0% {
    width: 80px;
    height: 80px;
    opacity: 0.5;
  }
  100% {
    width: 300px;
    height: 300px;
    opacity: 0;
  }
}

/* Edit marker pulse */
@keyframes marker-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.8; }
}

/* Shimmer effect for tips */
@keyframes shimmer {
  0%, 80% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* Image reveal animation */
@keyframes imageReveal {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Loading spinner */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Badge pulse animation */
@keyframes pulse-badge {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* ============================================
   DESKTOP OVERRIDES - Ripple animation
   ============================================ */
@media (min-width: 900px) {
  @keyframes ripple {
    0% { width: 100px; height: 100px; opacity: 0.5; }
    100% { width: 400px; height: 400px; opacity: 0; }
  }
}