/* V6.2 — living aizome. These surfaces are decorative, isolated from content,
   and enabled only by the page's common, visitor-controlled motion director. */
.living-indigo {
  position: absolute;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
  opacity: 0;
  visibility: hidden;
  transition: opacity 900ms ease;
}
.living-indigo canvas { display: block; width: 100%; height: 100%; }
.motion-ready:not(.motion-off):not(.is-motion-still) .living-indigo.is-surface-visible {
  opacity: var(--indigo-surface-opacity, .68);
  visibility: visible;
}
.living-indigo--hero {
  z-index: 1;
  inset: -2% -4% 49% 56%;
  --indigo-surface-opacity: .68;
  -webkit-mask-image: linear-gradient(90deg,transparent 0%,#000 38%,#000 88%,transparent 100%),linear-gradient(180deg,#000 0%,#000 30%,transparent 88%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg,transparent 0%,#000 38%,#000 88%,transparent 100%),linear-gradient(180deg,#000 0%,#000 30%,transparent 88%);
  mask-composite: intersect;
}
.experience { position: relative; isolation: isolate; }
.living-indigo--experience {
  z-index: -1;
  top: 0;
  right: 0;
  width: min(820px,66%);
  height: clamp(240px,31vw,460px);
  --indigo-surface-opacity: .74;
  -webkit-mask-image: linear-gradient(90deg,transparent 0%,#000 35%),linear-gradient(180deg,transparent 0%,#000 18%,#000 42%,transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg,transparent 0%,#000 35%),linear-gradient(180deg,transparent 0%,#000 18%,#000 42%,transparent 100%);
  mask-composite: intersect;
}
.living-indigo--material {
  z-index: 1;
  inset: 0;
  --indigo-surface-opacity: .56;
  -webkit-mask-image: linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
  mask-image: linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);
}
/* The tone window and approved IKI mark always remain above the material. */
.indigo-visual .indigo-tone-window { z-index: 2; }
.indigo-visual .indigo-seal { z-index: 3; }
.living-indigo--threshold {
  z-index: -1;
  top: 30%;
  bottom: 0;
  left: 0;
  right: 0;
  --indigo-surface-opacity: .7;
  -webkit-mask-image: linear-gradient(180deg,transparent 0%,#000 38%,#000 86%,transparent 100%);
  mask-image: linear-gradient(180deg,transparent 0%,#000 38%,#000 86%,transparent 100%);
}
.living-indigo.is-surface-fallback {
  background: url('/assets/release-v4/indigo-strata.webp') center / cover;
}
.living-indigo.is-surface-fallback canvas { display: none; }
.is-motion-still .living-indigo,
.motion-off .living-indigo,
.is-page-hidden .living-indigo { opacity: 0; visibility: hidden; transition: none; }
@media (max-width: 760px) {
  .living-indigo--hero { inset: 5% -6% 53% 60%; --indigo-surface-opacity: .6; }
  .living-indigo--experience { width: 85%; height: 270px; --indigo-surface-opacity: .54; }
  .living-indigo--material { --indigo-surface-opacity: .5; }
  .living-indigo--threshold { top: 45%; --indigo-surface-opacity: .72; }
}
@media (prefers-reduced-motion: reduce) {
  html:not(.motion-ready) .living-indigo { display: none; }
}
@media print { .living-indigo { display: none !important; } }