/* Orbeon additions on top of the compiled design-system bundle (main.css).
   Handles: scroll-reveal transitions, nav scroll morph, mobile menu states,
   and a couple of utilities the bundle doesn't ship. */

html { scroll-behavior: smooth; }

/* ---- Scroll reveals -------------------------------------------------- */
/* Initial hidden state lives in main.css (opacity:0; translateY(28px)).
   JS adds .is-visible when the element enters the viewport. */
.hero-element,
.cs-hero,
.logos-row,
.offering-header,
.case-study-header,
.story-card,
.case-study-card,
.cs-related-card,
.final-cta-inner {
  transition:
    opacity .8s cubic-bezier(.22, 1, .36, 1),
    transform .8s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}

.is-visible.hero-element,
.is-visible.cs-hero,
.is-visible.logos-row,
.is-visible.offering-header,
.is-visible.case-study-header,
.is-visible.story-card,
.is-visible.case-study-card,
.is-visible.cs-related-card,
.is-visible.final-cta-inner {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-element, .cs-hero, .logos-row, .offering-header,
  .case-study-header, .story-card, .case-study-card, .cs-related-card,
  .final-cta-inner {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- Nav scroll morph ------------------------------------------------ */
/* Default (top of page) state is authored inline via utilities.
   When scrolled, the shell condenses into a floating glass pill. */
.nav-scrolled #nav-shell {
  max-width: 56rem;
  height: 3.5rem;
  margin-top: .75rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  background: rgba(10, 7, 3, .82);
  border-color: rgba(212, 175, 55, .16);
  border-radius: 9999px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 10px 40px -12px rgba(0, 0, 0, .55);
}

/* ---- Mobile menu ------------------------------------------------------ */
.menu-open #menu-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.menu-open #mobile-menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Logo lockup: .link-magnetic sets display:inline-block, which stacks the
   mark above the wordmark — restore flex so they sit side by side. */
a.flex.link-magnetic {
  display: flex;
  align-items: center;
}

/* ---- Utilities referenced in markup but purged from the bundle -------- */
.hover\:shadow-premium-hover:hover {
  box-shadow: 0 24px 70px -18px rgba(212, 175, 55, .28);
}

/* Utilities used in Orbeon-authored markup that the compiled bundle doesn't include */
.max-w-md { max-width: 28rem; }
.w-48 { width: 12rem; }
.text-\[72px\] { font-size: 72px; }
.text-\[clamp\(2\.6rem\,5vw\,4rem\)\] { font-size: clamp(2.6rem, 5vw, 4rem); }
@media (min-width: 768px) {
  .md\:h-10 { height: 2.5rem; }
  .md\:w-44 { width: 11rem; }
  .md\:h-24 { height: 6rem; }
  .md\:w-24 { width: 6rem; }
  .md\:text-\[110px\] { font-size: 110px; }
}

/* Case-study long-form typography */
.cs-content p {
  margin-top: 1rem;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(255, 255, 255, .7);
}
.cs-content ul {
  margin: 1rem 0 1rem 1.25rem;
  list-style: disc;
  color: rgba(255, 255, 255, .7);
  font-size: 15px;
  line-height: 1.8;
}
.cs-content li::marker { color: #D4AF37; }
.cs-content strong { color: #fff; font-weight: 600; }
@media (min-width: 768px) {
  .cs-content p, .cs-content ul { font-size: 16px; }
}