/* Secret Water (secretwater9.com) - Main Style Sheet */

@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;500;600;700&family=Sarabun:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  --primary-blue: #0ea5e9;
  --secondary-green: #10b981;
  --dark-bg: #0f172a;
}

body {
  font-family: 'Sarabun', sans-serif;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .font-prompt {
  font-family: 'Prompt', sans-serif;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
.dark ::-webkit-scrollbar-track {
  background: #0f172a;
}
::-webkit-scrollbar-thumb {
  background: #38bdf8;
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: #0284c7;
}

/* Parallax Hero Video Container */
.hero-parallax-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transform: translateZ(-1px) scale(1.5);
}

/* Glassmorphism Header */
.glass-header {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.dark .glass-header {
  background: rgba(15, 23, 42, 0.85);
}

/* Vertical Timeline Line Pulse */
.timeline-line {
  background: linear-gradient(180deg, #38bdf8 0%, #34d399 50%, #0284c7 100%);
}

/* Floating Contact Widget Pulse Animation */
@keyframes floatPulse {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 10px 25px -5px rgba(14, 165, 233, 0.4);
  }
  50% {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 20px 30px -5px rgba(16, 185, 129, 0.5);
  }
}

.animate-float-pulse {
  animation: floatPulse 4s infinite ease-in-out;
}

/* Lightbox Animation */
.lightbox-modal {
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

/* Custom Water Wave Animation */
@keyframes wave {
  0% { transform: translateX(0) translateZ(0) scaleY(1); }
  50% { transform: translateX(-25%) translateZ(0) scaleY(0.85); }
  100% { transform: translateX(-50%) translateZ(0) scaleY(1); }
}

.animate-wave {
  animation: wave 12s infinite linear;
}

/* Site-wide Grayscale Mode */
html.grayscale-mode, html.grayscale-mode * {
  filter: grayscale(100%) !important;
  -webkit-filter: grayscale(100%) !important;
}