/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Custom touch utilities for mobile optimization */
@media (hover: none) {
  /* Touch-specific hover states */
  .hover\:scale-110:active {
    transform: scale(1.1);
  }
  
  .hover\:bg-gray-300:active {
    background-color: rgb(209 213 219);
  }
  
  .hover\:bg-blue-700:active {
    background-color: rgb(29 78 216);
  }
}

/* Prevent double-tap zoom on touch devices */
.touch-manipulation {
  touch-action: manipulation;
}

/* Improve tap target size on mobile */
@media (max-width: 768px) {
  button, 
  a,
  [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Photo modal styles */
.photo-modal-backdrop {
  backdrop-filter: blur(4px);
}


/* Recent color hover effect */
[data-map-target="recentColors"] > div[data-color]:hover {
  transform: scale(1.15);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Prevent text selection and popups on mobile for map elements */
svg {
  -webkit-touch-callout: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

svg * {
  -webkit-touch-callout: none !important;
  -webkit-user-select: none !important;
  -khtml-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

svg text {
  pointer-events: none !important;
}

svg path {
  -webkit-tap-highlight-color: transparent !important;
}

/* Prevent iOS magnifying glass and text selection */
@media (pointer: coarse) {
  svg, svg * {
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
  }
  
  [data-map-target="container"] {
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-touch-callout: none !important;
  }
}

/* Edge-to-Edge display support for Android 15+ */
@supports (padding: env(safe-area-inset-top)) {
  /* Body to fill entire viewport */
  body {
    min-height: 100vh;
    min-height: 100dvh;
  }
  
  /* Navigation bar safe area */
  nav {
    padding-top: env(safe-area-inset-top);
  }
  
  /* Adjust nav container for safe areas */
  nav > div {
    padding-left: max(0.5rem, env(safe-area-inset-left));
    padding-right: max(0.5rem, env(safe-area-inset-right));
  }
  
  /* Hamburger menu adjustments */
  [data-hamburger-menu-target="menu"] {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    height: 100vh;
    height: 100dvh;
  }
  
  /* Map container adjustments - only when user is signed in */
  body:has(nav) main {
    height: calc(100vh - 4rem - env(safe-area-inset-top));
    height: calc(100dvh - 4rem - env(safe-area-inset-top));
  }
  
  /* Flash messages positioning */
  [data-controller="flash"] {
    top: calc(1rem + env(safe-area-inset-top));
    right: calc(1rem + env(safe-area-inset-right));
  }
  
  /* Home page sections for safe areas */
  .safe-x {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  
  .safe-bottom {
    padding-bottom: max(30px, env(safe-area-inset-bottom));
  }
  
  /* Privacy and other pages */
  body:not(:has(nav)) {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* ===== 기차 여행 전환 애니메이션 ===== */

/* 오버레이 페이드 인/아웃 */
#train-transition-overlay {
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
}

#train-transition-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

/* 패럴랙스 레이어 애니메이션 - 각 레이어별 속도 차이로 깊이감 표현 */
@keyframes train-parallax-cloud {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes train-parallax-far {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes train-parallax-mid {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes train-parallax-near {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* 컨텐츠를 2배로 복제하여 무한 스크롤 효과 */
.train-parallax-cloud {
  animation: train-parallax-cloud 20s linear infinite;
  width: 200%;
}

.train-parallax-far {
  animation: train-parallax-far 8s linear infinite;
  width: 200%;
}

.train-parallax-mid {
  animation: train-parallax-mid 5s linear infinite;
  width: 200%;
}

.train-parallax-near {
  animation: train-parallax-near 2s linear infinite;
  width: 200%;
}

/* 기차 흔들림 효과 */
@keyframes train-shake {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  12.5% { transform: translateX(-50%) translateY(-2px); }
  25% { transform: translateX(-50%) translateY(1px); }
  37.5% { transform: translateX(-50%) translateY(-1px); }
  50% { transform: translateX(-50%) translateY(2px); }
  62.5% { transform: translateX(-50%) translateY(-1px); }
  75% { transform: translateX(-50%) translateY(1px); }
  87.5% { transform: translateX(-50%) translateY(-2px); }
}

.train-shake {
  animation: train-shake 0.4s ease-in-out infinite;
}

/* 레일 침목 패턴 */
@keyframes train-sleepers {
  0% { transform: translateX(0); }
  100% { transform: translateX(-48px); }
}

.train-sleepers {
  animation: train-sleepers 0.15s linear infinite;
}

/* 지역명 등장 애니메이션 */
@keyframes train-region-appear {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(20px) scale(0.9);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

.train-region-name {
  animation: train-region-appear 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* 바퀴 회전 효과 */
@keyframes train-wheel-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.train-wheel-spin {
  animation: train-wheel-spin 0.3s linear infinite;
}

/* 애니메이션 일시정지 (hidden 상태에서 성능 최적화) */
#train-transition-overlay.hidden .train-parallax-cloud,
#train-transition-overlay.hidden .train-parallax-far,
#train-transition-overlay.hidden .train-parallax-mid,
#train-transition-overlay.hidden .train-parallax-near,
#train-transition-overlay.hidden .train-sleepers,
#train-transition-overlay.hidden .train-shake {
  animation-play-state: paused;
}