/* ==========================================================================
   MUTTI LAB v9.4.55 — STUDIO REFLECTION BACKGROUND
   Builds on the quiet Ambient Studio base with a visible-but-restrained
   studio reflection layer, pointer inertia and scroll depth.
   Buyer-facing goal: the interface stays a calm curated showcase while the
   products, Hero scenes and brand accents carry the character.

   Mechanics:
   - two very broad neutral studio-light pools drift slowly behind the page;
   - desktop pointer movement adds only a tiny parallax offset;
   - scroll contributes a very small vertical shift;
   - no routed lines, particles, geometry or visible "effect" graphics;
   - reduced motion is fully static.
   ========================================================================== */

html body.mutti-reference-theme{
  --mutti-page-base:#f3f2ef;
  --mutti-page-base-2:#fbfaf8;
  --mutti-page-base-3:#eeece8;
  --mutti-surface-solid:rgba(255,255,255,.972);
  --mutti-surface-solid-2:rgba(248,247,244,.988);
  --mutti-surface-line:rgba(20,22,27,.072);
  --mutti-surface-shadow:0 14px 34px rgba(26,26,30,.065),inset 0 1px 0 rgba(255,255,255,.72);
  --mutti-ambient-x:0px;
  --mutti-ambient-y:0px;
  position:relative;
  isolation:isolate;
  overflow-x:hidden;
  background:var(--mutti-page-base)!important;
}

/* Permanent studio base: intentionally plain, warm-neutral and low contrast. */
html body.mutti-reference-theme::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-3;
  pointer-events:none;
  background:
    radial-gradient(80% 48% at 50% -7%,rgba(255,255,255,.82) 0%,rgba(255,255,255,.28) 48%,transparent 78%),
    linear-gradient(180deg,var(--mutti-page-base-2) 0%,#f6f5f2 35%,var(--mutti-page-base) 69%,var(--mutti-page-base-3) 100%);
  transform:translateZ(0);
}

/* Moving light field.  The gradients are deliberately huge, so motion reads
   as changing studio illumination rather than an animated wallpaper. */
html body.mutti-reference-theme::after{
  content:"";
  position:fixed;
  inset:-18vh -15vw;
  z-index:-2;
  pointer-events:none;
  background:
    radial-gradient(48% 36% at 24% 23%,rgba(255,255,255,.94) 0%,rgba(255,255,255,.52) 35%,rgba(255,255,255,0) 74%),
    radial-gradient(41% 31% at 77% 35%,rgba(255,255,255,.68) 0%,rgba(255,255,255,.28) 38%,rgba(255,255,255,0) 75%),
    radial-gradient(39% 36% at 83% 82%,rgba(194,198,204,.15) 0%,rgba(194,198,204,.055) 43%,transparent 76%),
    radial-gradient(32% 29% at 7% 80%,rgba(230,196,208,.085) 0%,rgba(230,196,208,.025) 44%,transparent 76%);
  opacity:.86;
  transform:translate3d(var(--mutti-ambient-x),var(--mutti-ambient-y),0) scale(1.035);
  will-change:transform;
}

html body.mutti-reference-theme>main,
html body.mutti-reference-theme>.site-footer{position:relative;z-index:1}

/* Solid commerce/category surfaces remain calm and readable over the ambient
   background. No glass repaint or backdrop blur is introduced here. */
html body.home.mutti-reference-theme .mutti-popular-v9370__storefront,
html body.home.mutti-reference-theme .mutti-ref-market-v920,
html body.home.mutti-reference-theme .mutti-ref-results-v910,
html body.home.mutti-reference-theme .mutti-category-gallery-v9328,
html body.home.mutti-reference-theme .mutti-category-carousel-v920,
html body.home.mutti-reference-theme .mutti-ref-categories-v910{
  background:linear-gradient(180deg,var(--mutti-surface-solid),var(--mutti-surface-solid-2))!important;
  border:1px solid var(--mutti-surface-line)!important;
  box-shadow:var(--mutti-surface-shadow)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}
html body.home.mutti-reference-theme .mutti-category-gallery-v9328::before,
html body.home.mutti-reference-theme .mutti-category-carousel-v920::before,
html body.home.mutti-reference-theme .mutti-ref-categories-v910::before{display:none!important}

html body.home.mutti-reference-theme .mutti-popular-v9370__tab,
html body.home.mutti-reference-theme .mutti-popular-v9370__nav button,
html body.home.mutti-reference-theme .mutti-home-view-switch-v8521__control{
  background:linear-gradient(180deg,rgba(255,255,255,.97),rgba(247,246,243,.995))!important;
  border-color:var(--mutti-surface-line)!important;
  box-shadow:0 6px 14px rgba(28,28,32,.055)!important;
  -webkit-backdrop-filter:none!important;
  backdrop-filter:none!important;
}

/* Retire the older pink/violet merchandising haze. Local modules can keep
   their own designed backgrounds, but the page atmosphere itself stays quiet. */
html body.home.mutti-reference-theme .mutti-popular-v9370__shell,
html body.home.mutti-reference-theme .mutti-ref-market-v920{position:relative}
html body.home.mutti-reference-theme .mutti-popular-v9370__shell::after,
html body.home.mutti-reference-theme .mutti-ref-market-v920::after{
  content:"";
  position:absolute;
  inset:-16px;
  z-index:-1;
  border-radius:32px;
  pointer-events:none;
  background:radial-gradient(65% 70% at 50% 30%,rgba(255,255,255,.22),transparent 75%);
  opacity:.52;
}
html body.mutti-reference-theme .site-footer{background:transparent!important}

/* DARK — graphite studio, not pure black. The cards and Hero remain distinct
   while broad silver light gives the page depth. */
html[data-mutti-theme="dark"] body.mutti-reference-theme,
body.mutti-reference-theme.mutti-dark-mode{
  --mutti-page-base:#101113;
  --mutti-page-base-2:#151619;
  --mutti-page-base-3:#0b0c0e;
  --mutti-surface-solid:rgba(27,28,31,.982);
  --mutti-surface-solid-2:rgba(20,21,24,.992);
  --mutti-surface-line:rgba(255,255,255,.072);
  --mutti-surface-shadow:0 18px 44px rgba(0,0,0,.27),inset 0 1px 0 rgba(255,255,255,.035);
  background:var(--mutti-page-base)!important;
}
html[data-mutti-theme="dark"] body.mutti-reference-theme::before,
body.mutti-reference-theme.mutti-dark-mode::before{
  background:
    radial-gradient(82% 49% at 50% -8%,rgba(255,255,255,.055) 0%,rgba(255,255,255,.018) 46%,transparent 78%),
    linear-gradient(180deg,#151619 0%,#111214 39%,#0f1012 70%,#0b0c0e 100%);
}
html[data-mutti-theme="dark"] body.mutti-reference-theme::after,
body.mutti-reference-theme.mutti-dark-mode::after{
  background:
    radial-gradient(49% 36% at 24% 23%,rgba(255,255,255,.075) 0%,rgba(255,255,255,.028) 39%,transparent 74%),
    radial-gradient(42% 31% at 77% 35%,rgba(211,216,224,.055) 0%,rgba(211,216,224,.017) 40%,transparent 76%),
    radial-gradient(39% 37% at 83% 82%,rgba(255,255,255,.038) 0%,rgba(255,255,255,.012) 43%,transparent 76%),
    radial-gradient(31% 29% at 7% 80%,rgba(255,27,105,.028) 0%,rgba(255,27,105,.008) 44%,transparent 76%);
  opacity:.92;
}

html[data-mutti-theme="dark"] body.home.mutti-reference-theme .mutti-popular-v9370__storefront,
html[data-mutti-theme="dark"] body.home.mutti-reference-theme .mutti-ref-market-v920,
html[data-mutti-theme="dark"] body.home.mutti-reference-theme .mutti-ref-results-v910,
html[data-mutti-theme="dark"] body.home.mutti-reference-theme .mutti-category-gallery-v9328,
html[data-mutti-theme="dark"] body.home.mutti-reference-theme .mutti-category-carousel-v920,
html[data-mutti-theme="dark"] body.home.mutti-reference-theme .mutti-ref-categories-v910,
body.mutti-dark-mode.home.mutti-reference-theme .mutti-popular-v9370__storefront,
body.mutti-dark-mode.home.mutti-reference-theme .mutti-ref-market-v920,
body.mutti-dark-mode.home.mutti-reference-theme .mutti-ref-results-v910,
body.mutti-dark-mode.home.mutti-reference-theme .mutti-category-gallery-v9328,
body.mutti-dark-mode.home.mutti-reference-theme .mutti-category-carousel-v920,
body.mutti-dark-mode.home.mutti-reference-theme .mutti-ref-categories-v910{
  background:linear-gradient(180deg,var(--mutti-surface-solid),var(--mutti-surface-solid-2))!important;
}
html[data-mutti-theme="dark"] body.home.mutti-reference-theme .mutti-popular-v9370__tab,
html[data-mutti-theme="dark"] body.home.mutti-reference-theme .mutti-popular-v9370__nav button,
html[data-mutti-theme="dark"] body.home.mutti-reference-theme .mutti-home-view-switch-v8521__control,
body.mutti-dark-mode.home.mutti-reference-theme .mutti-popular-v9370__tab,
body.mutti-dark-mode.home.mutti-reference-theme .mutti-popular-v9370__nav button,
body.mutti-dark-mode.home.mutti-reference-theme .mutti-home-view-switch-v8521__control{
  background:linear-gradient(180deg,rgba(31,32,35,.98),rgba(23,24,27,.995))!important;
  box-shadow:0 7px 18px rgba(0,0,0,.22)!important;
}
html[data-mutti-theme="dark"] body.home.mutti-reference-theme .mutti-popular-v9370__shell::after,
html[data-mutti-theme="dark"] body.home.mutti-reference-theme .mutti-ref-market-v920::after,
body.mutti-dark-mode.home.mutti-reference-theme .mutti-popular-v9370__shell::after,
body.mutti-dark-mode.home.mutti-reference-theme .mutti-ref-market-v920::after{
  background:radial-gradient(65% 70% at 50% 30%,rgba(255,255,255,.025),transparent 75%);
  opacity:.7;
}

/* Touch devices keep the mechanism but with a smaller travel envelope.
   JS sets the actual transform values; these declarations prevent expensive
   repaint tricks and preserve the same art direction. */
@media (max-width:1024px), (pointer:coarse){
  html body.mutti-reference-theme::after{inset:-12vh -18vw;opacity:.78;will-change:transform}
  html[data-mutti-theme="dark"] body.mutti-reference-theme::after,
  body.mutti-reference-theme.mutti-dark-mode::after{opacity:.86}
}

@media (prefers-reduced-motion:reduce){
  html body.mutti-reference-theme::after{transform:translate3d(0,0,0) scale(1.035)!important;will-change:auto}
}


/* ==========================================================================
   v9.4.55 — STUDIO REFLECTION MECHANICS
   The v9.4.54 pearl/graphite base stays intact. These layers add only light:
   a broad moving softbox reflection, an inertial halo and a rare MUTTI tint.
   No lines, particles, grids, waves or geometric decorations are introduced.
   ========================================================================== */
html body.mutti-reference-theme{
  --mutti-reflection-x:0px;
  --mutti-reflection-y:0px;
  --mutti-reflection-tilt:-5deg;
  --mutti-pointer-halo-x:0px;
  --mutti-pointer-halo-y:0px;
  --mutti-accent-x:0px;
  --mutti-accent-y:0px;
  --mutti-accent-opacity:0;
}

/* The softbox reflection is intentionally huge. Its cool trailing edge makes
   the motion readable even on the warm pearl light-mode base. */
.mutti-studio-reflection-v9455{
  position:fixed;
  inset:-20vh -42vw;
  z-index:0;
  pointer-events:none;
  user-select:none;
  contain:strict;
  background:
    linear-gradient(108deg,
      transparent 0%,
      transparent 31%,
      rgba(188,194,204,.035) 36%,
      rgba(255,255,255,.24) 41%,
      rgba(255,255,255,.70) 47%,
      rgba(255,255,255,.30) 52%,
      rgba(197,202,210,.055) 58%,
      transparent 66%,
      transparent 100%);
  opacity:.66;
  transform:translate3d(var(--mutti-reflection-x),var(--mutti-reflection-y),0) rotate(var(--mutti-reflection-tilt)) scale(1.055);
  transform-origin:center;
  will-change:transform;
}

/* Large inertial light pool. It trails pointer movement instead of sitting
   directly under the cursor, so it feels like a physical lamp being turned. */
.mutti-studio-pointer-v9455{
  position:fixed;
  left:10vw;
  top:0;
  width:80vw;
  height:86vh;
  z-index:0;
  pointer-events:none;
  user-select:none;
  contain:strict;
  background:radial-gradient(ellipse at center,
    rgba(255,255,255,.58) 0%,
    rgba(255,255,255,.27) 27%,
    rgba(234,234,232,.075) 49%,
    transparent 72%);
  opacity:.53;
  transform:translate3d(var(--mutti-pointer-halo-x),var(--mutti-pointer-halo-y),0) scale(1.12);
  will-change:transform;
}

/* Brand colour is only an occasional reflected tint at a far edge. */
.mutti-studio-accent-v9455{
  position:fixed;
  left:-16vw;
  bottom:-19vh;
  width:76vw;
  height:61vh;
  z-index:0;
  pointer-events:none;
  user-select:none;
  contain:strict;
  background:radial-gradient(ellipse at center,
    rgba(229,0,85,.15) 0%,
    rgba(229,0,85,.055) 31%,
    rgba(229,0,85,.014) 53%,
    transparent 73%);
  opacity:var(--mutti-accent-opacity);
  transform:translate3d(var(--mutti-accent-x),var(--mutti-accent-y),0) rotate(-8deg);
  will-change:transform,opacity;
}

/* All foreground page architecture stays above the ambient mechanics. */
html body.mutti-reference-theme>main,
html body.mutti-reference-theme>.site-footer{position:relative;z-index:1}

/* Dark mode: the same physical-light idea on graphite. The reflection is
   brighter than v9.4.54 on purpose, but remains silver rather than neon. */
html[data-mutti-theme="dark"] .mutti-studio-reflection-v9455,
body.mutti-reference-theme.mutti-dark-mode .mutti-studio-reflection-v9455{
  background:
    linear-gradient(108deg,
      transparent 0%,
      transparent 30%,
      rgba(154,161,172,.018) 35%,
      rgba(194,201,211,.055) 40%,
      rgba(232,236,242,.145) 47%,
      rgba(209,215,224,.072) 53%,
      rgba(143,150,160,.022) 59%,
      transparent 67%,
      transparent 100%);
  opacity:.92;
}
html[data-mutti-theme="dark"] .mutti-studio-pointer-v9455,
body.mutti-reference-theme.mutti-dark-mode .mutti-studio-pointer-v9455{
  background:radial-gradient(ellipse at center,
    rgba(230,234,240,.075) 0%,
    rgba(210,216,225,.032) 30%,
    rgba(180,187,198,.010) 52%,
    transparent 73%);
  opacity:.74;
}
html[data-mutti-theme="dark"] .mutti-studio-accent-v9455,
body.mutti-reference-theme.mutti-dark-mode .mutti-studio-accent-v9455{
  background:radial-gradient(ellipse at center,
    rgba(255,25,105,.105) 0%,
    rgba(255,25,105,.030) 33%,
    rgba(255,25,105,.008) 54%,
    transparent 74%);
}

@media (max-width:1024px), (pointer:coarse){
  .mutti-studio-reflection-v9455{inset:-14vh -55vw;opacity:.56}
  .mutti-studio-pointer-v9455{left:2vw;top:4vh;width:96vw;height:78vh;opacity:.40}
  html[data-mutti-theme="dark"] .mutti-studio-reflection-v9455,
  body.mutti-reference-theme.mutti-dark-mode .mutti-studio-reflection-v9455{opacity:.78}
  html[data-mutti-theme="dark"] .mutti-studio-pointer-v9455,
  body.mutti-reference-theme.mutti-dark-mode .mutti-studio-pointer-v9455{opacity:.58}
}

@media (prefers-reduced-motion:reduce){
  .mutti-studio-reflection-v9455{
    transform:translate3d(-32px,0,0) rotate(-5deg) scale(1.055)!important;
    will-change:auto!important;
  }
  .mutti-studio-pointer-v9455{
    transform:translate3d(0,0,0) scale(1.12)!important;
    will-change:auto!important;
  }
  .mutti-studio-accent-v9455{display:none!important}
}