/**
 * MonBau Service — motion layer styles.
 * FOUC guard, header states, and the few static helpers the JS layer
 * animates against. Loaded front-end only, after the site styles.
 */

/* 1. FOUC guard — hero text is hidden only while JS is on its way in.
 *    Reduced-motion users never get the guard; if GSAP fails to load,
 *    the head script removes .mb-js after 3 s and everything shows. */
@media (prefers-reduced-motion: no-preference) {
  .mb-js .mb-hero .mb-hero__eyebrow,
  .mb-js .mb-hero .mb-hero__title,
  .mb-js .mb-hero .mb-hero__sub,
  .mb-js .mb-hero .mb-hero__actions { visibility: hidden; }
}

/* 2. Header states */
:root { --mb-header-h: 88px; }
@media (max-width: 991px) { :root { --mb-header-h: 72px; } }

#brx-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1000;
  background-color: var(--white, #FFFFFF);
  border-bottom: 1px solid rgba(40, 40, 40, .08);
  color: var(--ink, #282828);
  transition: transform .45s cubic-bezier(.2, .7, .2, 1),
              background-color .3s ease,
              box-shadow .3s ease,
              color .3s ease;
}

#brx-header.is-hidden { transform: translateY(-100%); }

#brx-header.is-scrolled {
  background-color: var(--white, #FFFFFF);
  border-bottom-color: rgba(40, 40, 40, .08);
  box-shadow: 0 6px 24px -12px rgba(28, 28, 28, .25);
  color: var(--ink, #282828);
}

/* Transparent over the opening hero; white + shadow once scrolled or while
 * the services mega menu is open (the panel hangs below a solid bar). Header
 * links inherit currentColor, so only the bar colour switches here. */
body:has(.mb-hero, .mb-page-hero) #brx-header:not(.is-scrolled):not(:has(.brx-has-megamenu:hover, .brx-has-megamenu.open)) {
  background-color: transparent;
  border-bottom-color: transparent;
  box-shadow: none;
  color: var(--white, #FFFFFF);
}

/* Logo variants: light logo over the hero, dark logo otherwise. */
.mb-header__logo-light { display: none; }
body:has(.mb-hero, .mb-page-hero) #brx-header:not(.is-scrolled):not(:has(.brx-has-megamenu:hover, .brx-has-megamenu.open)) .mb-header__logo-dark { display: none; }
body:has(.mb-hero, .mb-page-hero) #brx-header:not(.is-scrolled):not(:has(.brx-has-megamenu:hover, .brx-has-megamenu.open)) .mb-header__logo-light { display: block; }

/* Mega menu panel: full header width, soft drop shadow. */
#brx-header .brx-megamenu { box-shadow: 0 28px 48px -28px rgba(28, 28, 28, .35); }

/* 3. Fixed-header offset on pages without an opening hero. */
html { scroll-padding-top: var(--mb-header-h, 88px); }
body:not(:has(.mb-hero, .mb-page-hero)) #brx-content { padding-top: var(--mb-header-h, 88px); }

/* 4. Eyebrow rule — JS animates --mb-rule from 0 to 1 on enter. */
.mb-eyebrow { --mb-rule: 1; }
.mb-eyebrow::before {
  content: "";
  display: inline-block;
  width: 2.5em;
  height: 2px;
  background: var(--primary, #CC0A0B);
  vertical-align: middle;
  margin-right: .9em;
  transform: scaleX(var(--mb-rule, 1));
  transform-origin: left center;
}

/* 5. Roof shape (kept by static CSS after the clip-path reveal) and
 *    step media (the `scale` property composes with GSAP's transform). */
.mb-roof { clip-path: polygon(0% var(--mb-roof-h, 14%), 50% 0%, 100% var(--mb-roof-h, 14%), 100% 100%, 0% 100%); }
.mb-step__media { overflow: hidden; }
.mb-step__media img { scale: 1.12; }

/* 6. Stats — tabular figures so the count-up does not jitter. */
.mb-stat__number { font-variant-numeric: tabular-nums; }

/* 7. German headings — long compounds must hyphenate, never overflow. */
h1, h2, h3, h4 {
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* 8. Hero background video (JS-injected above the still image) and its
 *    pause toggle — top-right under the header: the contact dock owns the
 *    bottom-right and the stats card overlaps the hero's bottom edge. */
.mb-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}
.mb-hero__video.is-playing { opacity: 1; }

.mb-hero__video-toggle {
  position: absolute;
  top: calc(var(--mb-header-h, 88px) + 2.4rem);
  right: var(--gutter, 2.4rem);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 50%;
  background: rgba(28, 28, 28, .25);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--white, #FFFFFF);
  cursor: pointer;
  transition: border-color .25s ease, background-color .25s ease;
}
.mb-hero__video-toggle:hover,
.mb-hero__video-toggle:focus-visible {
  border-color: var(--white, #FFFFFF);
  background: rgba(28, 28, 28, .45);
}
.mb-hero__video-icon { width: 18px; height: 18px; }
.mb-hero__video-toggle[aria-pressed="false"] .mb-hero__video-icon--play,
.mb-hero__video-toggle[aria-pressed="true"] .mb-hero__video-icon--pause { display: none; }

@media (max-width: 767px) {
  .mb-hero__video-toggle { top: calc(var(--mb-header-h, 72px) + 1.6rem); right: 1.6rem; width: 40px; height: 40px; }
}

/* 9. Cursor follower (fine pointers only; the native cursor stays). */
.mb-cursor { display: none; }
html.mb-cursor-on .mb-cursor {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}
html.mb-cursor-on .mb-cursor.is-visible { opacity: 1; }
html.mb-cursor-on .mb-cursor.is-hidden { opacity: 0; }

.mb-cursor__ring,
.mb-cursor__dot,
.mb-cursor__label {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
}
.mb-cursor__ring {
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--primary, #CC0A0B);
  transition: width .3s ease, height .3s ease, background-color .3s ease,
              border-color .3s ease, opacity .3s ease;
}
.mb-cursor__dot {
  width: 6px;
  height: 6px;
  background: var(--primary, #CC0A0B);
  transition: opacity .3s ease, background-color .3s ease;
}
.mb-cursor__label {
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--white, #FFFFFF);
  opacity: 0;
  transition: opacity .3s ease;
}

.mb-cursor.is-link .mb-cursor__ring {
  width: 58px;
  height: 58px;
  background-color: rgba(204, 10, 11, .12);
}
.mb-cursor.is-card .mb-cursor__ring {
  width: 88px;
  height: 88px;
  border-color: var(--primary, #CC0A0B);
  background-color: var(--primary, #CC0A0B);
}
.mb-cursor.is-card .mb-cursor__dot { opacity: 0; }
.mb-cursor.is-card .mb-cursor__label { opacity: 1; }

.mb-cursor.is-dark:not(.is-card) .mb-cursor__ring { border-color: var(--white, #FFFFFF); }
.mb-cursor.is-dark:not(.is-card) .mb-cursor__dot { background: var(--white, #FFFFFF); }
.mb-cursor.is-dark.is-link .mb-cursor__ring { background-color: rgba(255, 255, 255, .14); }

/* 10. Service cards: pointer spotlight; GSAP owns the transform while the
 *     tilt runs, so the CSS transform transition must not fight it. */
html.mb-cursor-on .mb-card { transition: box-shadow .5s ease, background-image .3s ease; }
.mb-card.is-pointer {
  background-image: radial-gradient(circle 220px at var(--mx, 50%) var(--my, 50%),
                    rgba(204, 10, 11, .07), transparent 70%);
}

/* 11. Reading progress rail (above the fixed header). */
.mb-progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 1001;
  height: 3px;
  pointer-events: none;
}
.mb-progress__bar {
  height: 100%;
  background: var(--primary, #CC0A0B);
  transform: scaleX(0);
  transform-origin: left center;
}

/* 12. Feature image parallax — the `scale` property composes with GSAP's
 *     yPercent so no edges show during travel. */
.mb-philo__media,
.mb-story__media,
.mb-cta__media,
.mb-about__media { overflow: hidden; }
.mb-philo__media img,
.mb-story__media img,
.mb-cta__media img,
.mb-about__media img { scale: 1.14; }

/* 13a. Service page contents: current section (set by animations.js). */
.mb-svc-toc__link.is-active { color: var(--ink, #282828); font-weight: 700; }
@media (max-width: 991px) {
  .mb-svc-toc__link.is-active { border-color: var(--primary, #CC0A0B); }
}

/* 13. Contact dock: phones get a fixed bottom bar, keep the page end clear. */
@media (max-width: 767px) {
  body:has(.mb-dock) { padding-bottom: calc(5.8rem + env(safe-area-inset-bottom, 0px)); }
}

/* 14. Reduced motion + focus visibility */
@media (prefers-reduced-motion: reduce) {
  #brx-header { transition: none; }
  *, *::before, *::after { scroll-behavior: auto !important; }
  .mb-step__media img,
  .mb-philo__media img,
  .mb-story__media img,
  .mb-cta__media img,
  .mb-about__media img { scale: 1; }
  .mb-cursor,
  .mb-progress,
  .mb-hero__video,
  .mb-hero__video-toggle { display: none !important; }
}

@media print {
  .mb-cursor,
  .mb-progress,
  .mb-hero__video,
  .mb-hero__video-toggle { display: none !important; }
}

:focus-visible {
  outline: 2px solid var(--primary, #CC0A0B);
  outline-offset: 3px;
}