@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Kannada:wght@400;500&display=swap");

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter18pt-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter18pt-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter18pt-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ZCOOL XiaoWei";
  src: url("../fonts/ZCOOLXiaoWei-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

html {
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
  width: 100%;
  font-family: "Inter", sans-serif;
}

.top-bar-contact-prompt {
  color: #debc7c;
}

.partner-logos-inner {
  width: 60%;
  max-width: 100%;
  min-width: 0;
  margin-left: auto;
  margin-right: auto;
}

.partner-logos-inner ul.partner-logos-list {
  row-gap: 3.5rem;
}

.partner-logos-inner img {
  max-width: 280px;
  width: auto;
}

/* Inter first for Latin in mixed lines; Kannada glyphs fall through to Noto (Inter has no Kannada). */
.font-kannada {
  font-family: "Inter", "Noto Sans Kannada", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.display-font {
  font-family: "ZCOOL XiaoWei", serif;
}

/*
 * Heading scale: Tailwind CDN Preflight sets h1–h6 to font-size/font-weight inherit,
 * so they pick up body’s text-xl. Use body main … so these beat Preflight even when
 * Tailwind injects after this stylesheet.
 */
body main h1 {
  font-size: 2.25rem;
  line-height: 0.9;
  font-weight: 400;
  letter-spacing: -0.025em;
  color: #e2a731;
  text-align: center;
  margin: 0 0 1rem;
  padding-top: 0.5rem;
}

@media (min-width: 768px) {
  body main h1 {
    font-size: 3.75rem;
  }
}

@media (min-width: 1024px) {
  body main h1 {
    font-size: 4.5rem;
  }
}

body main h2 {
  font-size: 2.25rem;
  line-height: 0.9;
  font-weight: 400;
  letter-spacing: -0.025em;
  color: #7b1113;
  margin: 0 0 2rem;
}

@media (min-width: 768px) {
  body main h2 {
    font-size: 3rem;
  }
}

@media (min-width: 1024px) {
  body main h2 {
    font-size: 3.75rem;
  }
}

body main h3 {
  font-size: 2rem !important;
  margin-bottom: 2rem !important;
  line-height: 0.9 !important;
  letter-spacing: -0.025em;
  color: #7b1113;
  margin: 0;
}

@media (min-width: 768px) {
  body main h3 {
    font-size: 1.875rem;
  }
}

/* Hero title: initial state for staggered reveal */
.hero-card-title {
  opacity: 0;
}

/* Franchise section: centered heading */
#franchise h2 {
  text-align: center;
}

/* About: second mission/vision-style h3 after body copy */
#about .story-reveal-heading ~ .story-reveal-heading {
  margin-top: 2.5rem;
}

/*
 * Footer “Follow” column: compiled tailwind.min.css omits .text-right and .justify-end,
 * so alignment is enforced here. Mobile: center; md+: right (matches Tailwind md breakpoint).
 */
footer .footer-follow-col {
  text-align: center;
}

footer .footer-social-icons {
  justify-content: center;
}

footer a.footer-social-link:hover,
footer a.footer-social-link:focus-visible {
  background-color: #5a0200;
  border-color: #5a0200;
  color: #fff;
}

@media (min-width: 768px) {
  footer .footer-follow-col {
    text-align: right;
  }

  footer .footer-social-icons {
    justify-content: flex-end;
  }
}

footer .footer-copyright {
  width: 100%;
  text-align: center;
}

@media (min-width: 768px) {
  footer .footer-copyright {
    width: auto;
    text-align: left;
  }
}

@keyframes float1 {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
  33% {
    transform: translateY(-30px) rotate(5deg) scale(1.05);
  }
  66% {
    transform: translateY(15px) rotate(-5deg) scale(0.95);
  }
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
}

@keyframes float2 {
  0% {
    transform: translateY(0) translateX(0) rotate(15deg);
  }
  50% {
    transform: translateY(-40px) translateX(20px) rotate(25deg);
  }
  100% {
    transform: translateY(0) translateX(0) rotate(15deg);
  }
}

@keyframes float3 {
  0% {
    transform: translateY(0) scale(0.8) rotate(-15deg);
  }
  50% {
    transform: translateY(30px) scale(0.9) rotate(-5deg);
  }
  100% {
    transform: translateY(0) scale(0.8) rotate(-15deg);
  }
}

.animate-float-1 {
  animation: float1 12s ease-in-out infinite;
}
.animate-float-2 {
  animation: float2 15s ease-in-out infinite;
}
.animate-float-3 {
  animation: float3 10s ease-in-out infinite;
}

/* Hero reveal animations */
@keyframes reveal-fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes reveal-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.reveal-fade-up {
  animation: reveal-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.reveal-fade-in {
  animation: reveal-fade-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Hero reveal: only when image is loaded (hero-ready class added via JS) */
#hero-section.hero-ready .hero-bg {
  animation: reveal-fade-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#hero-section.hero-ready .hero-card {
  animation: reveal-fade-up 0.8s 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#hero-section.hero-ready .hero-card-title {
  animation: reveal-fade-up 0.8s 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#hero-section.hero-ready .hero-card-desc {
  animation: reveal-fade-up 0.8s 1.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
#hero-section.hero-ready .hero-card-cta {
  animation: reveal-fade-up 0.8s 1.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Scroll reveal animations for sections */
.reveal-onscroll {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-onscroll.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-onscroll.reveal-delay-1 {
  transition-delay: 80ms;
}
.reveal-onscroll.reveal-delay-2 {
  transition-delay: 160ms;
}
.reveal-onscroll.reveal-delay-3 {
  transition-delay: 240ms;
}
.reveal-onscroll.reveal-delay-4 {
  transition-delay: 320ms;
}
.reveal-onscroll.reveal-delay-5 {
  transition-delay: 400ms;
}
.reveal-onscroll.reveal-delay-6 {
  transition-delay: 480ms;
}
.reveal-onscroll.reveal-delay-7 {
  transition-delay: 560ms;
}
.reveal-onscroll.reveal-delay-8 {
  transition-delay: 640ms;
}

/* Our Offerings – creative reveal animations per section */
.offer-reveal .offer-reveal-img,
.offer-reveal .offer-reveal-text {
  opacity: 0;
  transition:
    opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.offer-reveal.offer-reveal-visible .offer-reveal-img,
.offer-reveal.offer-reveal-visible .offer-reveal-text {
  opacity: 1;
}

/* Sweets: image slides in from left, text rises from below */
.offer-reveal-sweets .offer-reveal-img {
  transform: translateX(-60px);
}
.offer-reveal-sweets .offer-reveal-text {
  transform: translateY(40px);
  transition-delay: 120ms;
}
.offer-reveal-sweets.offer-reveal-visible .offer-reveal-img {
  transform: translateX(0);
}
.offer-reveal-sweets.offer-reveal-visible .offer-reveal-text {
  transform: translateY(0);
}

/* Savouries: image slides in from right, text rises from below */
.offer-reveal-savoury .offer-reveal-img {
  transform: translateX(60px);
}
.offer-reveal-savoury .offer-reveal-text {
  transform: translateY(40px);
  transition-delay: 120ms;
}
.offer-reveal-savoury.offer-reveal-visible .offer-reveal-img {
  transform: translateX(0);
}
.offer-reveal-savoury.offer-reveal-visible .offer-reveal-text {
  transform: translateY(0);
}

/* Chaat: same as Sweets – image slides from left, text rises from below */
.offer-reveal-chaat .offer-reveal-img {
  transform: translateX(-60px);
}
.offer-reveal-chaat .offer-reveal-text {
  transform: translateY(40px);
  transition-delay: 120ms;
}
.offer-reveal-chaat.offer-reveal-visible .offer-reveal-img {
  transform: translateX(0);
}
.offer-reveal-chaat.offer-reveal-visible .offer-reveal-text {
  transform: translateY(0);
}

/* Gifting: same as Savouries – image slides from right, text rises from below */
.offer-reveal-gifting .offer-reveal-img {
  transform: translateX(60px);
}
.offer-reveal-gifting .offer-reveal-text {
  transform: translateY(40px);
  transition-delay: 120ms;
}
.offer-reveal-gifting.offer-reveal-visible .offer-reveal-img {
  transform: translateX(0);
}
.offer-reveal-gifting.offer-reveal-visible .offer-reveal-text {
  transform: translateY(0);
}

/* Mobile: stack stays visually centered — no horizontal slide on images */
@media (max-width: 767px) {
  .offer-reveal-sweets .offer-reveal-img,
  .offer-reveal-savoury .offer-reveal-img,
  .offer-reveal-chaat .offer-reveal-img,
  .offer-reveal-gifting .offer-reveal-img {
    transform: translateY(40px);
  }

  .offer-reveal-sweets.offer-reveal-visible .offer-reveal-img,
  .offer-reveal-savoury.offer-reveal-visible .offer-reveal-img,
  .offer-reveal-chaat.offer-reveal-visible .offer-reveal-img,
  .offer-reveal-gifting.offer-reveal-visible .offer-reveal-img {
    transform: translateY(0);
  }
}

/* About — motif background scales from 0 → 100% (origin top center) when section enters view */
#about {
  isolation: isolate;
}

#about::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: transparent;
  background-image: var(--about-motif-bg);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  pointer-events: none;
  transform: scale(0);
  transform-origin: top center;
  transition: transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Mobile / tablet: anchor motif to the top of the section */
@media (max-width: 1023px) {
  #about::before {
    background-position: top center;
  }
}

#about.about-bg-visible::before {
  transform: scale(1);
}

/* About — “A Story of Taste & Trust”: each .about-reveal-watch reveals when scrolled into view */
#about .story-reveal-title:not(.about-reveal-visible) {
  opacity: 0;
  transform: translateY(1.15rem) scale(0.985);
}

#about .story-reveal-ornament:not(.about-reveal-visible) {
  opacity: 0;
  transform: scaleX(0.32);
  transform-origin: center center;
}

#about .story-reveal-line:not(.about-reveal-visible) {
  opacity: 0;
  transform: translateY(1.35rem);
  filter: blur(8px);
}

#about .story-reveal-heading:not(.about-reveal-visible) {
  opacity: 0;
  transform: translateY(1.1rem);
  filter: blur(5px);
}

#about .story-reveal-col-left:not(.about-reveal-visible) {
  opacity: 0;
  transform: translateX(-2rem);
}

#about .story-reveal-col-right:not(.about-reveal-visible) {
  opacity: 0;
  transform: translateX(2rem);
}

#about .story-reveal-ornament {
  transform-origin: center center;
}

@keyframes about-reveal-title {
  from {
    opacity: 0;
    transform: translateY(1.15rem) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes about-reveal-ornament {
  from {
    opacity: 0;
    transform: scaleX(0.32);
  }
  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

@keyframes about-reveal-line {
  from {
    opacity: 0;
    transform: translateY(1.35rem);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes about-reveal-heading {
  from {
    opacity: 0;
    transform: translateY(1.1rem);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes about-reveal-col-left {
  from {
    opacity: 0;
    transform: translateX(-2rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes about-reveal-col-right {
  from {
    opacity: 0;
    transform: translateX(2rem);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

#about .story-reveal-title.about-reveal-visible {
  animation: about-reveal-title 1.05s cubic-bezier(0.65, 0, 0.35, 1) both;
}

#about .story-reveal-ornament.about-reveal-visible {
  animation: about-reveal-ornament 0.88s cubic-bezier(0.34, 1.15, 0.64, 1) both;
}

#about .story-reveal-line.about-reveal-visible {
  animation: about-reveal-line 0.82s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#about .story-reveal-heading.about-reveal-visible {
  animation: about-reveal-heading 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#about .story-reveal-col-left.about-reveal-visible {
  animation: about-reveal-col-left 0.84s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#about .story-reveal-col-right.about-reveal-visible {
  animation: about-reveal-col-right 0.84s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  #about::before {
    transform: scale(1) !important;
    transition: none !important;
  }

  #about .story-reveal-title,
  #about .story-reveal-ornament,
  #about .story-reveal-line,
  #about .story-reveal-heading,
  #about .story-reveal-col-left,
  #about .story-reveal-col-right {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }
}

@keyframes orbit-slow {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes orbit-medium {
  from {
    transform: translate(-50%, -50%) rotate(360deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}

.btn-fancy {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.btn-fancy::before,
.btn-fancy::after {
  content: none;
}

.hero-bg-fade {
  mask-image: linear-gradient(to right, transparent 0%, black 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 100%);
}

@media (min-width: 768px) {
  .hero-bg-fade {
    mask-image: linear-gradient(to right, transparent 0%, black 40%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 40%);
  }
}

[style*="--border-gradient"]::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: var(--border-radius-before, inherit);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  background: var(--border-gradient);
  pointer-events: none;
}

/* Mobile nav: hamburger → close (animated) */
.mobile-menu-btn__icon {
  position: relative;
  display: block;
  width: 1.625rem;
  height: 1.125rem;
}

.mobile-menu-btn__line {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 1px;
  background-color: currentColor;
  transform-origin: center;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.25s ease,
    top 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    bottom 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.mobile-menu-btn__line--top {
  top: 0;
}

.mobile-menu-btn__line--mid {
  top: calc(50% - 1px);
}

.mobile-menu-btn__line--bot {
  bottom: 0;
}

#mobile-menu-btn.is-open .mobile-menu-btn__line--top {
  top: calc(50% - 1px);
  transform: rotate(45deg);
}

#mobile-menu-btn.is-open .mobile-menu-btn__line--mid {
  opacity: 0;
  transform: scaleX(0);
}

#mobile-menu-btn.is-open .mobile-menu-btn__line--bot {
  bottom: auto;
  top: calc(50% - 1px);
  transform: rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu-btn__line {
    transition-duration: 0.01ms !important;
  }
}

/* Contact form status icons: avoid extra SVG stroke ring around filled MDI marks */
[data-form-status] .form-status-ico:not(.hidden) {
  display: block;
}

[data-form-status] .form-status-ico svg {
  stroke: none !important;
  outline: none;
}