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

/* Google Website Translator: hide its toolbar/tooltips so the original design is unchanged */
body { top: 0 !important; }
.skiptranslate iframe,
iframe.skiptranslate,
.goog-te-banner-frame,
#goog-gt-tt,
.goog-tooltip,
.goog-te-balloon-frame { display: none !important; }
.goog-text-highlight { background: none !important; box-shadow: none !important; }
font[style] { background: none !important; box-shadow: none !important; }