/* Fade-in animation */
.fade-in { 
  opacity: 0; 
  transform: translateY(30px); 
  transition: opacity 1s ease-out, transform 1s ease-out; 
}
.fade-in.visible { 
  opacity: 1; 
  transform: translateY(0); 
}

/* Mobile menu bars */
.bar { transition: all 0.3s ease; }
.bar1.open { transform: rotate(45deg) translate(5px, 5px); }
.bar2.open { opacity: 0; }
.bar3.open { transform: rotate(-45deg) translate(5px, -5px); }

/* Navigation active link */
nav a.active { 
  color: #F59E0B; 
  font-weight: bold; 
}

/* Section Titles */
.section-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: #374151;
  text-align: center;
  position: relative;
  display: block;
  padding-bottom: 0.4rem;
}
.section-title::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 25%;
  height: 2px;
  background: #FACC15;
  border-radius: 1px;
}

/* Hero Titles */
.hero-title { 
  font-size: 2.5rem; 
  font-weight: 800; 
  margin-bottom: 1.2rem; 
  color: #f3f4f6; 
  text-shadow: 1px 1px 6px rgba(0,0,0,0.25); 
}
h3 { 
  font-size: 1.25rem; 
  font-weight: 600; 
  color: #374151; 
}
.hero-sub { 
  opacity: 0; 
  transform: translateY(30px); 
  animation: fadeUp 1.5s ease-out forwards; 
  animation-delay: 0.6s; 
}
@keyframes fadeUp { 
  to { opacity: 1; transform: translateY(0); } 
}

/* Back to Top Button */
#backToTop { 
  position: fixed; 
  bottom: 20px; 
  right: 20px; 
  display: none; 
  z-index: 100; 
  transition: opacity 0.3s ease, transform 0.3s ease; 
  animation: floatBtn 3s ease-in-out infinite; 
}
#backToTop.show { 
  display: block; 
  opacity: 1; 
  transform: translateY(0); 
}
@keyframes floatBtn { 
  0%,100% { transform: translateY(0); } 
  50% { transform: translateY(-6px); } 
}

/* Scroll offsets */
:root { --header-height: 80px; scroll-padding-top: var(--header-height); }

/* Prevent content from sitting underneath fixed header */
body { padding-top: var(--header-height); }
main section, #why, #ready, #namkeen, #beer, #directors { 
  scroll-margin-top: calc(var(--header-height) + 12px); 
}

/* jquery.ime minimal positioning and visibility */

.imeselector {
  position: absolute; /* allow JS top/left to take effect */
  z-index: 10000;
}
.imeselector-menu {
  position: absolute;
  top: 100%;
  right: 0;
  display: none; /* keep menu closed until toggled */
  background: #ffffff;
  border: 1px solid #e5e7eb; /* gray-200 */
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.12);
  padding: 6px 8px;
  min-width: 220px;
  max-width: min(90vw, 420px);
}
.imeselector-menu.ime-open { display: block; }
.imeselector-menu .ime-language-list-wrapper { max-height: 240px; overflow: auto; }
.imeselector-menu .ime-list { max-height: 160px; overflow: auto; margin-bottom: 6px; }
.imeselector-menu .selectable-row { display: flex; align-items: center; padding: 6px 8px; border-radius: 6px; }
.imeselector-menu .selectable-row:hover { background: #f9fafb; }

/* Utility fallback: Tailwind v4 may not include text-justify; ensure it exists */
.text-justify { text-align: justify; }

/* ===== Hero micro-animations ===== */
.hero-blobs { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-blob { position: absolute; border-radius: 9999px; filter: blur(24px); opacity: .35; mix-blend-mode: screen; }
.hero-blob-1 { width: 42vmin; height: 42vmin; left: -8vmin; top: 10vmin; background: radial-gradient(closest-side, rgba(16,185,129,.6), rgba(16,185,129,0)); animation: hopFloat1 18s ease-in-out infinite alternate; }
.hero-blob-2 { width: 48vmin; height: 48vmin; right: -10vmin; top: 0; background: radial-gradient(closest-side, rgba(56,189,248,.5), rgba(56,189,248,0)); animation: hopFloat2 22s ease-in-out infinite alternate; }
.hero-blob-3 { width: 36vmin; height: 36vmin; left: 30%; bottom: -8vmin; background: radial-gradient(closest-side, rgba(99,102,241,.45), rgba(99,102,241,0)); animation: hopFloat3 20s ease-in-out infinite alternate; }

@keyframes hopFloat1 { from { transform: translate3d(0,0,0) rotate(0deg); } to { transform: translate3d(4vmin,-2vmin,0) rotate(20deg); } }
@keyframes hopFloat2 { from { transform: translate3d(0,0,0) rotate(0deg); } to { transform: translate3d(-5vmin,3vmin,0) rotate(-18deg); } }
@keyframes hopFloat3 { from { transform: translate3d(0,0,0) rotate(0deg); } to { transform: translate3d(2vmin,-4vmin,0) rotate(24deg); } }

/* CTA pulse (subtle) */
.cta-pulse { position: relative; }
.cta-pulse::after { content: ""; position: absolute; inset: -2px; border-radius: 14px; box-shadow: 0 0 0 0 rgba(16,185,129,.45); animation: hopCtaPulse 2.2s ease-out infinite; }
@keyframes hopCtaPulse { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,.45); } 70% { box-shadow: 0 0 0 10px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } }

/* Scroll indicator */
.hero-scroll-indicator { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); width: 42px; height: 42px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); color: #fff; backdrop-filter: blur(6px); transition: background .2s ease; }
.hero-scroll-indicator:hover { background: rgba(255,255,255,.25); }
.hero-scroll-indicator svg { animation: hopBounce 1.4s ease-in-out infinite; }
@keyframes hopBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* Hero gradient background (moved out of Tailwind arbitrary to avoid CLI crash) */
.hero-bg { position:absolute; inset:0; background:
  radial-gradient(circle at 20% 20%, rgba(16,185,129,0.35), transparent 60%),
  radial-gradient(circle at 80% 40%, rgba(56,189,248,0.25), transparent 65%),
  linear-gradient(135deg, #065f46, #059669, #0ea5e9);
}