/*
 * 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; }

/* Blog banner with the founder portrait: keep the face in the wide crop */
.img-founder-banner { object-position: 50% 10%; }

/* Utility classes used by the Unlisted Shares page that the original Tailwind build did not include */
.pb-4 { padding-bottom: 1rem; }
.pt-12 { padding-top: 3rem; }
@media (min-width: 768px) {
  .md\:p-8 { padding: 2rem; }
}

/* Home page unlisted-shares call-to-action card */
@media (min-width: 768px) {
  .md\:p-12 { padding: 3rem; }
}
@media (min-width: 1024px) {
  .lg\:gap-12 { gap: 3rem; }
}

/* Cookie notice (shown only when analytics is configured in js/analytics-config.js) */
.cookie-banner {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90;
  max-width: 760px; margin: 0 auto; padding: 16px 18px; border-radius: 12px;
  background: #032D20; color: #fff; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  font-size: 14px; line-height: 1.5;
}
.cookie-banner__text { margin: 0; flex: 1 1 320px; color: rgba(255, 255, 255, 0.85); }
.cookie-banner__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cookie-banner__actions a { color: #fff; text-decoration: underline; font-weight: 600; margin-right: 6px; }
.cookie-banner__btn {
  min-height: 40px; padding: 0 18px; border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.4); background: transparent; color: #fff; font-family: inherit;
}
.cookie-banner__btn--primary { background: #F28C28; border-color: #F28C28; color: #032D20; }
.cookie-banner__btn:hover { filter: brightness(1.08); }
@media (max-width: 520px) { .cookie-banner__actions { width: 100%; } .cookie-banner__btn { flex: 1 1 0; } }