/* Living fields — house media already on disk. No new gens.
   Day wears locked os-gradient-lib + y2026 paper.
   Night wears gold 4K star plates in the same field-grid volume, farther on Z.
   Float creep + tiny veil pulse + one seeded streak. Galaxy is night only.
   Not a skybox. Not a navy costume. Not the day land.
   Director Studio lock 2026-09-06: Pillow wavyRoundedCube n=4 amp0.06 freq0.8Hz (mesh displacement, PILLOW-DRIFT-FIX)
   + drift 2-4% @0.06-0.11Hz (scale/opacity breath, mid 0.08Hz → 12.5s). Canon DESIGN.md geometry.wavyRoundedCube
   and deploy/_shared/4d-doc driftHz distinguished; living.css drift locked to 0.06-0.11 via duration 9-16s,
   not ss-float×16/18/40. Veil pulse uses same drift band. kpf-door: deploy/loomallure/library/living/living.css */

.living-field {
  position: absolute;
  top:0;right:0;bottom:0;left:0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.living-field .field-grid,
.living-field .field-grid--paper,
.living-field .field-grid[data-field-grid="paper"],
.living-field .field-grid--plate,
.living-field .field-grid[data-field-grid="plate"] {
  position: absolute;
  top:0;right:0;bottom:0;left:0;
  z-index: 0;
}

.living-day {
  background: #F2EFE8;
}

.living-field .living-day .field-grid,
.living-field .living-day .field-grid--paper,
.living-field .living-day .field-grid[data-field-grid="paper"],
.living-field .living-day .field-grid--plate,
.living-field .living-day .field-grid[data-field-grid="plate"] {
  background: #F2EFE8;
}

.living-field .living-night .field-grid,
.living-field .living-night .field-grid--paper,
.living-field .living-night .field-grid[data-field-grid="paper"],
.living-field .living-night .field-grid--plate,
.living-field .living-night .field-grid[data-field-grid="plate"],
.living-field .night-volume .field-grid,
.living-field .night-volume .field-grid--paper,
.living-field .night-volume .field-grid[data-field-grid="paper"],
.living-field .night-volume .field-grid--plate,
.living-field .night-volume .field-grid[data-field-grid="plate"] {
  background: transparent;
}

.living-day,
.living-night {
  position: absolute;
  top:0;right:0;bottom:0;left:0;
}

.living-day {
  opacity: 1;
}

.living-night {
  opacity: 0;
  background: var(--os-ground-void);
}

html[data-night="1"] .living-day,
html[data-theme="night"] .living-day {
  opacity: 0;
}

html[data-night="1"] .living-night,
html[data-theme="night"] .living-night,
.living-night[data-night-demo],
[data-night-demo] .living-night {
  opacity: 1;
}

.living-day-grad {
  position: absolute;
  top:-8%;right:-8%;bottom:-8%;left:-8%;
  animation: living-drift 12.5s var(--ss-silk-easing) infinite alternate; /* 0.08Hz lock — was 57.6s 0.017Hz */
}

.living-day-paper {
  position: absolute;
  top:-10%;right:-10%;bottom:-10%;left:-10%;
  background-image: url("/media/manymoats/skins/y2026-paper-4k.jpg");
  background-size: cover;
  background-position: 50% 50%;
  opacity: 0.42;
  mix-blend-mode: multiply;
  animation: living-drift 13.5s var(--ss-silk-easing) infinite alternate-reverse; /* 0.074Hz lock — was 64.8s */
}

.living-dither {
  position: absolute;
  top:0;right:0;bottom:0;left:0;
  opacity: 0.045;
  mix-blend-mode: multiply;
  background-image:
    repeating-linear-gradient(
      0deg,
      color-mix(in srgb, var(--os-ink) 35%, transparent) 0 1px,
      transparent 1px 3px
    ),
    repeating-linear-gradient(
      90deg,
      color-mix(in srgb, var(--os-ink) 22%, transparent) 0 1px,
      transparent 1px 3px
    );
  pointer-events: none;
}

html[data-night="1"] .living-dither,
html[data-theme="night"] .living-dither {
  mix-blend-mode: screen;
  opacity: 0.06;
}

.living-stars {
  position: absolute;
  top:0;right:0;bottom:0;left:0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.night-volume {
  position: absolute;
  top:0;right:0;bottom:0;left:0;
  perspective: calc(var(--os-space-unit) * 220);
  perspective-origin: 50% 42%;
  transform-style: preserve-3d;
  overflow: hidden;
  --night-far-ms: 14.285s; /* 0.07Hz Director lock — was calc(ss-float*40)=144s 0.0069Hz — drift 0.06-0.11 band */
  --night-mid-ms: 12.5s; /* 0.08Hz mid — was 108s */
  --night-indigo-ms: 11.111s; /* 0.09Hz — was 93.6s */
  --night-galaxy-ms: 13.333s; /* 0.075Hz — was 122.4s */
  --night-wear-ms: 12.8s; /* 0.078Hz — was 100.8s */
  --night-veil-ms: 14.285s; /* 0.07Hz veil — was pulse*14=16.8s 0.059Hz */
}

.night-plate {
  position: absolute;
  top:-14% -10%;right:-14% -10%;bottom:-14% -10%;left:-14% -10%;
  width: 120%;
  height: 120%;
  max-width: none;
  object-fit: cover;
  transform-origin: 50% 50%;
}

.night-plate[data-night-z="far"] {
  transform: translateZ(calc(var(--os-space-unit) * -64)) scale(1.18);
  opacity: 1;
}

.night-plate[data-night-z="mid"] {
  transform: translateZ(calc(var(--os-space-unit) * -40)) scale(1.1);
  opacity: 0.62;
  mix-blend-mode: screen;
}

.night-plate[data-night-z="indigo"] {
  transform: translateZ(calc(var(--os-space-unit) * -37)) scale(1.08);
  opacity: 0.48;
  mix-blend-mode: screen;
}

.night-plate[data-night-z="galaxy"] {
  transform: translateZ(calc(var(--os-space-unit) * -34)) scale(1.06);
  opacity: 0.42;
  mix-blend-mode: screen;
}

.night-plate[data-night-z="wear"] {
  transform: translateZ(calc(var(--os-space-unit) * -30)) scale(1.05);
  opacity: 0.34;
  mix-blend-mode: screen;
}

.night-plate[data-night-z="drift"] {
  transform: translateZ(calc(var(--os-space-unit) * -48)) scale(1.12);
  opacity: 0.28;
  mix-blend-mode: screen;
}

.night-plate[data-night-z="veil"] {
  transform: translateZ(calc(var(--os-space-unit) * -14)) scale(1.08);
  opacity: 0.38;
  mix-blend-mode: screen;
}

.living-grid-z {
  position: absolute;
  top:-18% -8% -4%;right:-18% -8% -4%;bottom:-18% -8% -4%;left:-18% -8% -4%;
  transform: perspective(calc(var(--os-space-unit) * 220)) rotateX(calc(var(--fg-fov-deg, 42) * 0.22deg)) scale(1.18);
  transform-origin: 50% 78%;
  pointer-events: none;
}

.night-volume .living-grid-z {
  perspective: none;
  transform: translateZ(calc(var(--os-space-unit) * -6)) rotateX(calc(var(--fg-fov-deg, 42) * 0.22deg)) scale(1.12);
  transform-origin: 50% 78%;
}

.living-grid-z canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.living-veil {
  position: absolute;
  top:0;right:0;bottom:0;left:0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--os-ground-void) 58%, transparent) 0%,
      transparent 34%,
      transparent 60%,
      color-mix(in srgb, var(--os-ground-void) 74%, transparent) 100%
    );
}

header.void {
  color: var(--os-ink);
}

html[data-night="1"] .void-slot,
html[data-theme="night"] .void-slot {
  opacity: 0.08;
}

html[data-night="0"] .void-slot,
html[data-theme="day"] .void-slot {
  opacity: 0.22;
}

@keyframes living-drift {
  from {
    transform: translate3d(-2.4%, -1.2%, 0) scale(1.04);
  }
  to {
    transform: translate3d(2.2%, 1.6%, 0) scale(1.1);
  }
}

@keyframes night-far-drift {
  from {
    transform: translate3d(-1.8%, -1%, calc(var(--os-space-unit) * -64)) scale(1.16);
  }
  to {
    transform: translate3d(1.6%, 1.2%, calc(var(--os-space-unit) * -64)) scale(1.2);
  }
}

@keyframes night-mid-drift {
  from {
    transform: translate3d(1.4%, 0.8%, calc(var(--os-space-unit) * -40)) scale(1.08);
  }
  to {
    transform: translate3d(-1.6%, -1%, calc(var(--os-space-unit) * -40)) scale(1.12);
  }
}

@keyframes night-indigo-drift {
  from {
    transform: translate3d(-1.1%, 0.7%, calc(var(--os-space-unit) * -37)) scale(1.06);
  }
  to {
    transform: translate3d(1.2%, -0.8%, calc(var(--os-space-unit) * -37)) scale(1.1);
  }
}

@keyframes night-galaxy-drift {
  from {
    transform: translate3d(-0.8%, 0.6%, calc(var(--os-space-unit) * -34)) scale(1.04);
  }
  to {
    transform: translate3d(1%, -0.7%, calc(var(--os-space-unit) * -34)) scale(1.08);
  }
}

@keyframes night-wear-drift {
  from {
    transform: translate3d(0.9%, -0.5%, calc(var(--os-space-unit) * -30)) scale(1.03);
  }
  to {
    transform: translate3d(-1%, 0.6%, calc(var(--os-space-unit) * -30)) scale(1.07);
  }
}

@keyframes night-veil-breathe {
  from {
    opacity: 0.36;
    transform: translate3d(-0.6%, 0.2%, calc(var(--os-space-unit) * -14)) scale(1.07);
  }
  to {
    opacity: 0.44;
    transform: translate3d(0.5%, -0.2%, calc(var(--os-space-unit) * -14)) scale(1.09);
  }
}

@keyframes night-streak-go {
  0% {
    opacity: 0;
    transform: translate3d(var(--sx), var(--sy), calc(var(--os-space-unit) * -20)) rotate(var(--rot)) scaleX(0.16);
  }
  14% {
    opacity: 0.88;
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--ex), var(--ey), calc(var(--os-space-unit) * -20)) rotate(var(--rot)) scaleX(1);
  }
}

.night-streak {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--os-space-unit) * 28);
  height: 1px;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--os-ink) 82%, transparent),
    transparent
  );
  transform-origin: 0 50%;
}

.night-streak.is-firing {
  animation: night-streak-go calc(var(--ss-snap-duration) + var(--ss-silk-duration)) var(--ss-silk-easing) forwards;
}

html[data-night="1"] .night-plate[data-night-z="far"],
html[data-theme="night"] .night-plate[data-night-z="far"],
[data-night-demo] .night-plate[data-night-z="far"] {
  animation: night-far-drift var(--night-far-ms) var(--ss-easing, ease-in-out) infinite alternate;
}

html[data-night="1"] .night-plate[data-night-z="mid"],
html[data-theme="night"] .night-plate[data-night-z="mid"],
[data-night-demo] .night-plate[data-night-z="mid"] {
  animation: night-mid-drift var(--night-mid-ms) var(--ss-easing, ease-in-out) infinite alternate;
}

html[data-night="1"] .night-plate[data-night-z="indigo"],
html[data-theme="night"] .night-plate[data-night-z="indigo"],
[data-night-demo] .night-plate[data-night-z="indigo"] {
  animation: night-indigo-drift var(--night-indigo-ms) var(--ss-easing, ease-in-out) infinite alternate;
}

html[data-night="1"] .night-plate[data-night-z="galaxy"],
html[data-theme="night"] .night-plate[data-night-z="galaxy"],
[data-night-demo] .night-plate[data-night-z="galaxy"] {
  animation: night-galaxy-drift var(--night-galaxy-ms) var(--ss-easing, ease-in-out) infinite alternate;
}

html[data-night="1"] .night-plate[data-night-z="wear"],
html[data-theme="night"] .night-plate[data-night-z="wear"],
[data-night-demo] .night-plate[data-night-z="wear"] {
  animation: night-wear-drift var(--night-wear-ms) var(--ss-easing, ease-in-out) infinite alternate;
}

html[data-night="1"] .night-plate[data-night-z="veil"],
html[data-theme="night"] .night-plate[data-night-z="veil"],
[data-night-demo] .night-plate[data-night-z="veil"] {
  animation: night-veil-breathe var(--night-veil-ms) ease-in-out infinite alternate;
}

.living-room {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  color: var(--os-ink);
}

main.paper > .living-room {
  margin-inline: calc(var(--os-space-unit) * -4);
  width: calc(100% + (var(--os-space-unit) * 8));
}

.living-room-copy {
  position: relative;
  z-index: 2;
  padding: calc(var(--os-space-unit) * 6) calc(var(--os-space-unit) * 4);
  max-width: 28ch;
  background: color-mix(in srgb, var(--os-ground) 78%, transparent);
}

.living-room-copy h2,
.living-room-copy h1 {
  margin: 0 0 calc(var(--os-space-unit) * 2);
  font-size: var(--la-display, clamp(28px, 7vw, 56px));
  letter-spacing: -0.04em;
}

.living-room-copy p {
  margin: 0;
  color: color-mix(in srgb, var(--os-ink) 72%, var(--os-ground));
}

.living-well,
.year-skin,
.little-stage {
  position: absolute;
  top:0;right:0;bottom:0;left:0;
}

.living-well video,
.living-well .living-poster,
.year-skin {
  position: absolute;
  top:0;right:0;bottom:0;left:0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.year-skin {
  background-size: 118% 118%;
  background-position: 50% 50%;
  animation: living-drift 12.5s var(--ss-easing, ease-in-out) infinite alternate; /* 0.08Hz lock — was 50.4s */
}

.grad-stack {
  position: absolute;
  top:0;right:0;bottom:0;left:0;
  overflow: hidden;
}

.grad-plate {
  position: absolute;
  top:-8%;right:-8%;bottom:-8%;left:-8%;
  opacity: 0;
  pointer-events: none;
}

.grad-plate[data-grad-on="1"] {
  opacity: 1;
}

.grad-plate[data-grad="paper"][data-grad-on="1"] {
  background-size: cover;
  background-position: 50% 50%;
}

html[data-night="1"] .grad-plate[data-grad-on="1"],
html[data-theme="night"] .grad-plate[data-grad-on="1"],
[data-grad-well] .grad-plate[data-grad-on="1"] {
  animation: living-drift 12.5s var(--ss-easing, ease-in-out) infinite alternate; /* 0.08Hz lock — was 57.6s */
}

.living-switch {
  position: absolute;
  z-index: 3;
  left: calc(var(--os-space-unit) * 4);
  bottom: calc(var(--os-space-unit) * 5);
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--os-space-unit) * 1);
}

.living-switch button {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--os-ink) 18%, transparent);
  background: color-mix(in srgb, var(--os-ground) 72%, transparent);
  color: var(--os-ink);
  font: inherit;
  font-size: var(--la-meta, 13px);
  padding: calc(var(--os-space-unit) * 1.5) calc(var(--os-space-unit) * 2.5);
}

.living-switch button[aria-pressed="true"] {
  background: var(--os-ink);
  color: var(--os-ground);
}

.little-stage {
  display: grid;
  place-items: center;
  perspective: calc(var(--os-space-unit) * 200);
  background:
    radial-gradient(
      70% 55% at 50% 58%,
      color-mix(in srgb, var(--os-fam-surface, var(--os-ground)) 70%, transparent),
      var(--os-ground-absorptive)
    );
}

.little-turn {
  transform-style: preserve-3d;
  animation: little-spin calc(var(--ss-float-duration) * 10) var(--ss-silk-easing) infinite;
}

.little-turn img {
  display: block;
  height: min(72vh, 36rem);
  width: auto;
  max-width: none;
  filter: drop-shadow(
    0 calc(var(--os-space-unit) * 5) calc(var(--os-space-unit) * 10)
      color-mix(in srgb, var(--os-ink) 28%, transparent)
  );
}

@keyframes little-spin {
  from {
    transform: rotateY(-18deg);
  }
  to {
    transform: rotateY(342deg);
  }
}

html[data-reduced="1"] .living-day-grad,
html[data-reduced="1"] .living-day-paper,
html[data-reduced="1"] .year-skin,
html[data-reduced="1"] .little-turn,
html[data-reduced="1"] .living-stars,
html[data-reduced="1"] .night-plate,
html[data-reduced="1"] .night-streak,
html[data-reduced="1"] .grad-plate {
  animation: none;
}

html[data-reduced="1"] .night-streak {
  display: none;
}

html[data-reduced="1"] .living-well video {
  display: none;
}

html[data-reduced="1"] .living-well .living-poster {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  .living-day-grad,
  .living-day-paper,
  .year-skin,
  .little-turn,
  .living-stars,
  .night-plate,
  .night-streak,
  .grad-plate {
    animation: none;
  }

  .night-streak {
    display: none;
  }

  .living-well video {
    display: none;
  }

  .living-well .living-poster {
    display: block;
  }
}

.living-well .living-poster {
  display: none;
}

.living-page {
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--os-ground);
  color: var(--os-ink);
  font-family: var(--os-font-body);
}

.living-page body {
  margin: 0;
}