/* ========================================
   Safari-Style Viewport Fixes for Chrome
   แก้ปัญหาแถบดำใน Chrome ให้เหมือน Safari
======================================== */

/* Force Safari-like behavior */
html {
  height: 100%;
  width: 100%;
  overflow: hidden; /* Prevent scroll like Safari */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}

body {
  height: 100%;
  width: 100%;
  overflow: hidden; /* Lock like Safari */
  position: fixed; /* Prevent any movement */
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
}

/* Enhanced Hero Container - Safari Style */
.hero-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* Fallback for older browsers */
  height: 100dvh; /* Dynamic viewport height for modern browsers */
  overflow: hidden;
  z-index: 1;
}

/* Support for different viewport units */
@supports (height: 100dvh) {
  .hero-container {
    height: 100dvh;
  }
}

@supports (height: 100svh) {
  .hero-container {
    height: 100svh; /* Small viewport height */
  }
}

/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
  .hero-container {
    height: -webkit-fill-available;
  }
  
  body {
    height: -webkit-fill-available;
  }
}

/* Enhanced Background System */
.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/background.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  z-index: 1;
  /* Fallback gradient if image doesn't load */
  background-color: #000;
  background-image: 
    linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 165, 0, 0.2) 30%, rgba(0, 0, 0, 0.8) 100%),
    url('../images/background.png');
}

/* Enhanced Decorative Elements */
.hero-container::before {
  content: '💰';
  position: absolute;
  top: 15%;
  left: 8%;
  font-size: 3.5rem;
  color: var(--gold-primary, #FFD700);
  text-shadow: 
    0 0 10px rgba(255, 215, 0, 0.8),
    0 0 20px rgba(255, 215, 0, 0.6),
    0 0 30px rgba(255, 215, 0, 0.4);
  animation: coinFloat 5s ease-in-out infinite;
  z-index: 5;
  pointer-events: none;
  animation-delay: 0s;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.7));
}

.hero-container::after {
  content: '✨';
  position: absolute;
  bottom: 20%;
  right: 8%;
  font-size: 3rem;
  color: var(--gold-primary, #FFD700);
  text-shadow: 
    0 0 10px rgba(255, 215, 0, 0.8),
    0 0 20px rgba(255, 215, 0, 0.6),
    0 0 30px rgba(255, 215, 0, 0.4);
  animation: sparkleFloat 6s ease-in-out infinite;
  z-index: 5;
  pointer-events: none;
  animation-delay: 2s;
  filter: drop-shadow(0 0 10px rgba(255, 215, 0, 0.7));
}

/* Enhanced Content floating elements */
.content::before {
  content: '🎰';
  position: absolute;
  top: -60px;
  right: -80px;
  font-size: 2.5rem;
  color: var(--gold-accent, #DAA520);
  text-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
  animation: coinFloat 7s ease-in-out infinite;
  z-index: 5;
  pointer-events: none;
  animation-delay: 1s;
  opacity: 0.8;
}

.content::after {
  content: '💎';
  position: absolute;
  bottom: -40px;
  left: -60px;
  font-size: 2.2rem;
  color: var(--gold-light, #FFFF99);
  text-shadow: 0 0 30px rgba(255, 215, 0, 0.6);
  animation: sparkleFloat 8s ease-in-out infinite;
  z-index: 5;
  pointer-events: none;
  animation-delay: 3s;
  opacity: 0.9;
}

/* Enhanced Animations */
@keyframes coinFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg) scale(1);
    opacity: 0.8;
  }
  25% {
    transform: translateY(-20px) rotate(90deg) scale(1.15);
    opacity: 1;
  }
  50% {
    transform: translateY(-8px) rotate(180deg) scale(1.05);
    opacity: 0.9;
  }
  75% {
    transform: translateY(-15px) rotate(270deg) scale(1.1);
    opacity: 0.95;
  }
}

@keyframes sparkleFloat {
  0%, 100% {
    transform: translateY(0px) scale(1) rotate(0deg);
    opacity: 0.8;
  }
  25% {
    transform: translateY(-25px) scale(1.3) rotate(90deg);
    opacity: 1;
  }
  50% {
    transform: translateY(-10px) scale(0.9) rotate(180deg);
    opacity: 0.7;
  }
  75% {
    transform: translateY(-18px) scale(1.1) rotate(270deg);
    opacity: 0.9;
  }
}

/* Mobile Specific Fixes */
@media screen and (max-width: 768px) {
  .hero-container {
    height: 100vh;
    height: 100dvh;
    /* iOS Safari specific */
    height: -webkit-fill-available;
  }
  
  .content::before,
  .content::after {
    display: none; /* Hide extra elements on mobile for performance */
  }
  
  .hero-container::before,
  .hero-container::after {
    font-size: 2.5rem;
  }
}

/* Very small screens */
@media screen and (max-width: 480px) {
  .hero-container::before {
    top: 10%;
    left: 5%;
    font-size: 2rem;
  }
  
  .hero-container::after {
    bottom: 15%;
    right: 5%;
    font-size: 2rem;
  }
}

/* Landscape mode adjustments */
@media screen and (orientation: landscape) and (max-height: 600px) {
  .hero-container::before,
  .hero-container::after {
    font-size: 2rem;
  }
}

/* Desktop enhancements */
@media screen and (min-width: 1025px) {
  .hero-container::before,
  .hero-container::after {
    font-size: 4rem;
  }
}

/* Prevent scrolling and zooming on touch devices */
body.safari-fix {
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* High contrast support */
@media (prefers-contrast: high) {
  .hero-container::before,
  .hero-container::after,
  .content::before,
  .content::after {
    filter: contrast(2) brightness(1.5);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .hero-container::before,
  .hero-container::after,
  .content::before,
  .content::after {
    animation: none !important;
  }
}

/* Print support */
@media print {
  .hero-container::before,
  .hero-container::after,
  .content::before,
  .content::after {
    display: none !important;
  }
  
  .hero-container {
    position: static !important;
    height: auto !important;
  }
  
  body {
    position: static !important;
    overflow: visible !important;
  }
}