/*
 * Additions needed by the vanilla-JS conversion only.
 * style.css holds the original design (compiled Tailwind + index.css from the Magic Patterns export).
 * Nothing in here changes the look of the original; it re-creates the animations/state handling that
 * framer-motion and React state provided.
 */

/* Shared component mount points must not create a layout box (keeps the sticky header sticky). */
[data-component] {
  display: contents;
}

/* Avoid a flash of a header-less/footer-less page while components are fetched. */
html:not(.components-ready) body {
  visibility: hidden;
}

/* [hidden] must win over utility classes such as .flex / .grid. */
[hidden] {
  display: none !important;
}

/* Mega menu (framer-motion: opacity 0->1, y -6->0, 0.18s, ease [0.23,1,0.32,1]) */
#mega-menu {
  transition: opacity 0.18s cubic-bezier(0.23, 1, 0.32, 1), transform 0.18s cubic-bezier(0.23, 1, 0.32, 1), visibility 0.18s;
}
#mega-menu[data-open='false'] {
  opacity: 0;
  transform: translateY(-6px);
  visibility: hidden;
  pointer-events: none;
}

/* Mobile menu (framer-motion: opacity 0->1, 0.16s) */
#mobile-menu:not([hidden]) {
  animation: morgan-fade 0.16s ease-out;
}
@keyframes morgan-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Step timeline reveal (whileInView: opacity 0->1, y 10->0, 0.25s) */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.25s cubic-bezier(0.23, 1, 0.32, 1), transform 0.25s cubic-bezier(0.23, 1, 0.32, 1);
  transition-delay: var(--reveal-delay, 0s);
}
html.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* FAQ accordion panel height animation (0.22s) */
[data-accordion] > li > div {
  transition: height 0.22s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.22s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Product tab panel + enquiry success fade-in */
.morgan-fade-in {
  animation: morgan-fade-up 0.2s cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes morgan-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
[data-enquiry-success]:not([hidden]) {
  animation: morgan-scale-in 0.22s cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes morgan-scale-in {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  #mega-menu,
  [data-accordion] > li > div,
  html.js [data-reveal] {
    transition: none;
  }
  #mobile-menu:not([hidden]),
  .morgan-fade-in,
  [data-enquiry-success]:not([hidden]) {
    animation: none;
  }
  html.js [data-reveal] {
    opacity: 1;
    transform: none;
  }
}


/* Header: wider gap on tablet/desktop (class used by components/header.html) */
@media (min-width: 768px) {
  .md\:gap-6 { gap: 1.5rem; }
}

/* Very small phones: keep logo + EN/मराठी + menu button on one line */
@media (max-width: 359px) {
  [data-site-header] [data-lang-switch] button { min-width: 32px; padding-left: 6px; padding-right: 6px; }
}

/* Founder portrait card: room for the gradient behind the name */
.founder-caption { padding-top: 5rem; }

/* Founder page: photo on the left on desktop, text first on phones */
@media (min-width: 1024px) {
  .lg-order-first { order: -1; }
}

/* Home page founder avatar: zoom to the face */
.avatar-face { object-position: 50% 0; transform: scale(1.75); transform-origin: 50% 16%; }

/* Stats strip: numbers line up at the top on every screen size (labels sit underneath) */
[aria-labelledby="glance-title"] dl > div { justify-content: flex-end; }