/* Site-wide scroll palette (V-011) + feathered media (V-012, no glow) */

html.page-palette::before,
html.page-palette::after {
  display: none;
}

html.page-palette {
  background-color: var(--color-page, #f5f7f8);
  transition: background-color 500ms cubic-bezier(0, 0, 0.6, 1);
}

body.page-palette {
  background: transparent;
}

body.page-palette .page-content,
body.page-palette .page-shell--spine,
body.page-palette .page-shell {
  background: transparent;
}

body.page-palette .page-content > section,
body.page-palette .page-content > article {
  background: transparent;
}

/* Mesh atmosphere — colored blobs on mobile only; desktop keeps flat scroll tint */
.page-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  display: none;
}

.page-atmosphere__mesh {
  position: absolute;
  inset: 0;
}

.page-atmosphere__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.page-atmosphere__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(clamp(48px, 8vw, 72px));
  transform: translate3d(0, 0, 0);
  will-change: background-color, opacity, transform;
  transition:
    background-color 500ms cubic-bezier(0, 0, 0.6, 1),
    opacity 500ms cubic-bezier(0, 0, 0.6, 1),
    transform 900ms cubic-bezier(0, 0, 0.6, 1);
}

.page-atmosphere__blob--a {
  width: min(52vw, 38rem);
  height: min(52vw, 38rem);
  top: 6%;
  right: -6%;
  background: var(--blob-a, #c09376);
  opacity: 0.88;
}

.page-atmosphere__blob--b {
  width: min(38vw, 28rem);
  height: min(38vw, 28rem);
  top: 36%;
  left: -4%;
  background: var(--blob-b, #9bb4c4);
  opacity: 0.58;
}

.page-atmosphere__blob--c {
  width: min(30vw, 20rem);
  height: min(30vw, 20rem);
  top: 62%;
  right: 18%;
  background: var(--blob-c, #d4b496);
  opacity: 0.46;
}

body.page-palette-dark .page-atmosphere__blob--a {
  opacity: 0.72;
  transform: translate3d(-4%, 6%, 0) scale(1.06);
}

body.page-palette-dark .page-atmosphere__blob--b,
body.page-palette-dark .page-atmosphere__blob--c {
  opacity: 0.55;
}

@media (max-width: 767px) {
  .page-atmosphere {
    display: block;
  }

  .page-atmosphere__blob {
    filter: blur(clamp(36px, 10vw, 52px));
  }

  .page-atmosphere__blob--a {
    opacity: 0.62;
  }

  .page-atmosphere__blob--b,
  .page-atmosphere__blob--c {
    opacity: 0.38;
  }
}

@media (min-width: 768px) {
  body.page-industry-family .page-atmosphere,
  body.page-industry-avto .page-atmosphere,
  body.page-industry-beauty .page-atmosphere,
  body.page-industry-trade .page-atmosphere,
  body.page-industry-cafe .page-atmosphere {
    display: block;
  }

  body.page-industry-family .page-atmosphere__blob,
  body.page-industry-avto .page-atmosphere__blob,
  body.page-industry-beauty .page-atmosphere__blob,
  body.page-industry-trade .page-atmosphere__blob,
  body.page-industry-cafe .page-atmosphere__blob {
    filter: blur(clamp(56px, 9vw, 88px));
  }

  body.page-industry-family .page-atmosphere__blob--a,
  body.page-industry-avto .page-atmosphere__blob--a,
  body.page-industry-beauty .page-atmosphere__blob--a,
  body.page-industry-trade .page-atmosphere__blob--a,
  body.page-industry-cafe .page-atmosphere__blob--a {
    opacity: 0.34;
  }

  body.page-industry-family .page-atmosphere__blob--b,
  body.page-industry-family .page-atmosphere__blob--c,
  body.page-industry-avto .page-atmosphere__blob--b,
  body.page-industry-avto .page-atmosphere__blob--c,
  body.page-industry-beauty .page-atmosphere__blob--b,
  body.page-industry-beauty .page-atmosphere__blob--c,
  body.page-industry-trade .page-atmosphere__blob--b,
  body.page-industry-trade .page-atmosphere__blob--c,
  body.page-industry-cafe .page-atmosphere__blob--b,
  body.page-industry-cafe .page-atmosphere__blob--c {
    opacity: 0.22;
  }
}

/* V-012 Feathered only — no glow. */
.media-feathered {
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-composite: intersect;
}

@media (max-width: 767px) {
  .media-feathered {
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
    mask-image:
      linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, #000 10%, #000 90%, transparent 100%);
  }
}

/* Office photo banners — center visible, edges dissolve into page field */
.office-banner {
  width: 100%;
  margin: 0 0 0.35rem;
  line-height: 0;
  pointer-events: none;
}

.office-banner__img {
  display: block;
  width: 100%;
  height: clamp(9rem, 20vw, 15.5rem);
  object-fit: cover;
  object-position: center 42%;
  -webkit-mask-image:
    radial-gradient(ellipse 78% 92% at 50% 40%, #000 16%, rgba(0, 0, 0, 0.72) 40%, transparent 72%),
    linear-gradient(to bottom, transparent 0%, #000 10%, #000 68%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(ellipse 78% 92% at 50% 40%, #000 16%, rgba(0, 0, 0, 0.72) 40%, transparent 72%),
    linear-gradient(to bottom, transparent 0%, #000 10%, #000 68%, transparent 100%);
  mask-composite: intersect;
}

@media (max-width: 719px) {
  .office-banner__img {
    height: clamp(7.5rem, 36vw, 11.5rem);
    -webkit-mask-image:
      radial-gradient(ellipse 88% 95% at 50% 38%, #000 20%, rgba(0, 0, 0, 0.75) 46%, transparent 76%),
      linear-gradient(to bottom, transparent 0%, #000 8%, #000 72%, transparent 100%);
    mask-image:
      radial-gradient(ellipse 88% 95% at 50% 38%, #000 20%, rgba(0, 0, 0, 0.75) 46%, transparent 76%),
      linear-gradient(to bottom, transparent 0%, #000 8%, #000 72%, transparent 100%);
  }
}

@media (min-width: 720px) {
  .office-banner__img,
  body.page-home .office-banner__img {
    height: clamp(18rem, 25vw, 26rem);
  }
}

/* Dark scroll zones */
body.page-palette-dark .eyebrow:not(.eyebrow--on-dark) {
  color: color-mix(in srgb, var(--accent) 88%, white);
}

body.page-palette-dark .section-lead,
body.page-palette-dark .hero__lead,
body.page-palette-dark .contacts-page__lead {
  color: var(--color-text-muted);
}

body.page-palette-dark .text-link {
  color: color-mix(in srgb, var(--accent) 92%, white);
}

body.page-palette-dark .site-header:not(.is-scrolled) .site-logo__name,
body.page-palette-dark .site-header:not(.is-scrolled) .site-header__phone {
  color: var(--color-text-inverse);
}

/* Reviews sit on the page field, not a pale tray */
body.page-palette-dark .reviews-strip {
  border: none;
  background: transparent;
  box-shadow: none;
}

/* Light cards keep dark ink when the field goes into a dark valley */
body.page-palette-dark .sip-dossier,
body.page-palette-dark .sip-dossier dd,
body.page-palette-dark .ush-branch,
body.page-palette-dark .ush-branch a,
body.page-palette-dark .contacts-form-stage__inner,
body.page-palette-dark .contacts-form-stage__inner .hero-request,
body.page-palette-dark .yb-land__inner,
body.page-palette-dark .yb-land__h,
body.page-palette-dark .yb-land p,
body.page-palette-dark .yb-land a,
body.page-palette-dark .yb-land li,
body.page-palette-dark .ind-fam__plaque,
body.page-palette-dark .ind-fam__box,
body.page-palette-dark .ind-fam__door-title,
body.page-palette-dark .owl-sticky__bubble {
  color: var(--color-ink);
}

body.page-palette-dark .sip-dossier__title,
body.page-palette-dark .sip-dossier dt {
  color: #3d4a55;
}

body.page-palette-dark .situation,
body.page-palette-dark .karina-vcard {
  background: color-mix(in srgb, var(--color-ink-deep, #142028) 90%, var(--field) 10%);
  color: var(--color-text);
}

body.page-palette-dark .situation__title,
body.page-palette-dark .karina-vcard__name,
body.page-palette-dark .karina-vcard__lead {
  color: var(--color-text);
}

body.page-palette-dark .situation__num,
body.page-palette-dark .situation__text,
body.page-palette-dark .karina-vcard__role {
  color: var(--color-text-muted);
}

body.page-palette-dark .karina-vcard__chips li {
  color: var(--color-text-muted);
  background: color-mix(in srgb, var(--color-primary) 22%, var(--color-ink-deep, #142028));
  border-color: color-mix(in srgb, var(--color-primary) 38%, transparent);
}

body.page-palette-dark .karina-vcard__contacts a {
  color: var(--color-text);
  border-bottom-color: color-mix(in srgb, var(--color-gold, #d4af37) 50%, transparent);
}

body.page-palette-dark .karina-vcard__contacts a:hover {
  color: var(--color-gold, #e8c878);
}

body.page-palette-dark .karina-vcard__actions .btn--ghost {
  color: var(--color-text);
  border-color: color-mix(in srgb, var(--color-text) 28%, transparent);
  background: color-mix(in srgb, var(--color-ink-deep, #142028) 55%, transparent);
}

body.page-palette-dark .situation.is-inked,
body.page-palette-dark .karina-vcard.is-inked,
body.page-palette-dark .situation.is-spotlight,
body.page-palette-dark .karina-vcard.is-spotlight {
  background: var(--axis-ink, var(--color-primary, #31475b));
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--white) 10%, transparent) inset,
    0 10px 28px -10px rgba(0, 0, 0, 0.42),
    0 2px 8px -4px rgba(0, 0, 0, 0.28);
}