/* Custom Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
  opacity: 0;
  /* Starte hidden */
}

.delay-100 {
  animation-delay: 0.1s;
}

.delay-200 {
  animation-delay: 0.2s;
}

.delay-300 {
  animation-delay: 0.3s;
}

/* Glassmorphism Utilities */
.glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Design Expansion: Gold Dots & Circles */
.bg-gold-dots {
  background-image: radial-gradient(#c0a062 1px, transparent 1px);
  background-size: 30px 30px;
  opacity: 0.15;
}

.decorative-circle {
  border: 1px solid rgba(192, 160, 98, 0.2);
  border-radius: 50%;
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

/* Smooth Scrolling for Anchor Links */
html {
  scroll-behavior: smooth;
}

/* Bilingual Support */
/* Default state (en active) */
.lang-th {
  display: none;
}

.lang-en {
  display: inline-block;
}

/* When TH is active */
body.lang-th-active .lang-en {
  display: none !important;
}

body.lang-th-active .lang-th {
  display: inline-block !important;
}

/* Allow block elements to remain block */
body.lang-th-active .lang-th.block {
  display: block !important;
}

.lang-en.block {
  display: block;
}

/* Fix: Adjust line-height for Thai headings to prevent clipping */
body.lang-th-active h1,
body.lang-th-active .text-5xl,
body.lang-th-active .text-4xl {
  line-height: 1.2 !important;
  /* Tightened to match English spacing */
}

/* Specific fix for gradient text clipping (Global) */
.bg-clip-text {
  padding-top: 0.1em;
  padding-bottom: 0.25em;
  display: block;
  line-height: 1.3 !important;
  height: auto;
  /* margin-top: -0.1em;  <-- removing this specifically for English if it causes issues, or keep it if it looks good. Let's try without negative margin first for English or keep it consistent?
       Actually, let's keep the padding and display block globally, but maybe scope the negative margin if needed.
       For now, let's apply the safe clipping fix globally. */
}

/* Thai specific overrides if needed, but let's try to make it shared first */
body.lang-th-active .bg-clip-text {
  margin-top: -0.1em;
  /* Keep the tight spacing for Thai we tuned */
}

/* Font adjustments for Thai */
/* Use Prompt for general text */
/* Note: Fonts are now global, but we allow specific overrides if needed later */

/* Keep line height fixes for Thai active state */

/* FlipDown.js Custom Overrides */
.flipdown {
  width: max-content !important;
  max-width: 100%;
  /* Allow centering */
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

/* Theme: Deep Navy & Gold */
/* Colors based on Tailwind Config:
   Primary: #22304d
   Secondary: #12294b
   Dark: #11284b
   Accent: #c0a062
*/

.flipdown.flipdown__theme-dark .rotor,
.flipdown.flipdown__theme-dark .rotor-top,
.flipdown.flipdown__theme-dark .rotor-leaf-front {
  color: #c0a062;
  /* Accent Gold Text */
  background-color: #11284b;
  /* Dark Navy Background */
  box-shadow: inset 0 0 0 1px rgba(192, 160, 98, 0.3);
  /* Use inset shadow instead of border to avoid 1px size addition */
  font-family: 'Maitree', serif;
  /* UI/Header font for digits */
}

.flipdown.flipdown__theme-dark .rotor-bottom,
.flipdown.flipdown__theme-dark .rotor-leaf-rear {
  color: #c0a062;
  /* Accent Gold Text */
  background-color: #11284b;
  /* Dark Navy Background */
  box-shadow: inset 0 0 0 1px rgba(192, 160, 98, 0.3);
  font-family: 'Maitree', serif;
}

/* Heading/Labels (Days, Hours, etc.) */
.flipdown.flipdown__theme-dark .rotor-group-heading:before {
  color: #d1d5db;
  /* Light Gray for labels, less distracting */
  font-family: 'Prompt', sans-serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  opacity: 0.8;
}

/* Center the line */
.flipdown.flipdown__theme-dark .rotor:after {
  border-top: 1px solid rgba(192, 160, 98, 0.2);
  /* Subtle Gold Line */
}

/* Delimiters (Colons) */
.flipdown.flipdown__theme-dark .rotor-group:nth-child(n + 2):nth-child(-n + 3):before,
.flipdown.flipdown__theme-dark .rotor-group:nth-child(n + 2):nth-child(-n + 3):after {
  background-color: rgba(209, 213, 219, 0.4) !important;
  /* Muted light gray to match labels */
}

/* Responsive Scaling using Zoom (better layout flow) and Transform */
@media (max-width: 768px) {
  .flipdown {
    transform: scale(0.7);
    transform-origin: center top;
    margin-bottom: -15px;
  }
}

@media (max-width: 650px) {
  .flipdown {
    transform: scale(0.55);
    margin-bottom: -25px;
  }
}

@media (max-width: 500px) {
  .flipdown {
    transform: scale(0.45);
    margin-bottom: -30px;
  }
}

@media (max-width: 380px) {
  .flipdown {
    transform: scale(0.35);
    margin-bottom: -35px;
  }
}