:root {
  --living-dawn: 1;
  --living-noon: 0;
  --living-dusk: 0;
}

html[data-variant="customer-v12"] .scene-phase-layer--noon,
html[data-variant="customer-v12"] .scene-phase-layer--dusk {
  -webkit-mask-image: linear-gradient(140deg, #000 var(--noon-wipe-solid), rgba(0, 0, 0, 0.86) var(--noon-wipe-clear), transparent calc(var(--noon-wipe-clear) + 3.5%));
  mask-image: linear-gradient(140deg, #000 var(--noon-wipe-solid), rgba(0, 0, 0, 0.86) var(--noon-wipe-clear), transparent calc(var(--noon-wipe-clear) + 3.5%));
}

html[data-variant="customer-v12"] .scene-phase-layer--dusk {
  -webkit-mask-image: linear-gradient(140deg, #000 var(--dusk-wipe-solid), rgba(0, 0, 0, 0.86) var(--dusk-wipe-clear), transparent calc(var(--dusk-wipe-clear) + 3.5%));
  mask-image: linear-gradient(140deg, #000 var(--dusk-wipe-solid), rgba(0, 0, 0, 0.86) var(--dusk-wipe-clear), transparent calc(var(--dusk-wipe-clear) + 3.5%));
}

.living-atmosphere,
.living-atmosphere > span {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.living-atmosphere {
  z-index: 5;
  overflow: hidden;
  contain: paint;
}

.living-atmosphere > span {
  will-change: auto;
}

.living-atmosphere__clouds {
  inset: -26% -32% 30%;
  background:
    radial-gradient(ellipse at 9% 58%, rgba(2, 4, 7, 0.82) 0 10%, rgba(5, 7, 10, 0.48) 24%, transparent 51%),
    radial-gradient(ellipse at 47% 31%, rgba(8, 9, 12, 0.7) 0 13%, rgba(8, 9, 11, 0.34) 30%, transparent 56%),
    radial-gradient(ellipse at 86% 49%, rgba(3, 4, 7, 0.76) 0 12%, rgba(6, 7, 9, 0.42) 27%, transparent 54%),
    linear-gradient(112deg, rgba(8, 8, 10, 0.3), transparent 37% 62%, rgba(5, 5, 7, 0.24));
  filter: blur(0.72rem) saturate(0.82);
  mix-blend-mode: multiply;
  opacity: calc(0.24 + (var(--living-dawn) * 0.1) + (var(--living-dusk) * 0.24));
}

.living-atmosphere__haze {
  mix-blend-mode: screen;
}

.living-atmosphere__haze--far {
  inset: 38% -24% 14%;
  background:
    radial-gradient(ellipse at 12% 66%, rgba(210, 211, 205, 0.34) 0 8%, rgba(188, 190, 184, 0.19) 27%, transparent 57%),
    radial-gradient(ellipse at 48% 48%, rgba(224, 212, 187, 0.3) 0 10%, rgba(203, 193, 175, 0.16) 31%, transparent 61%),
    radial-gradient(ellipse at 87% 61%, rgba(226, 194, 148, 0.26) 0 8%, rgba(202, 178, 145, 0.14) 29%, transparent 58%);
  filter: blur(0.72rem);
  opacity: calc(0.14 + (var(--living-dawn) * 0.16) + (var(--living-noon) * 0.08) + (var(--living-dusk) * 0.1));
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 23% 73%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 23% 73%, transparent);
}

.living-atmosphere__haze--near {
  inset: 55% -25% -11%;
  background:
    radial-gradient(ellipse at 22% 50%, rgba(224, 222, 211, 0.27), transparent 43%),
    linear-gradient(96deg, transparent 3%, rgba(228, 219, 197, 0.14) 26%, rgba(206, 184, 150, 0.21) 53%, rgba(222, 201, 164, 0.13) 73%, transparent 96%);
  filter: blur(0.95rem);
  opacity: calc(0.13 + (var(--living-dawn) * 0.07) + (var(--living-dusk) * 0.13));
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22% 78%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 22% 78%, transparent);
}

.living-atmosphere__rays {
  inset: -16% -14% 8% 18%;
  background: conic-gradient(
    from 194deg at 76% 47%,
    transparent 0 5deg,
    rgba(255, 238, 195, 0.3) 7deg 10deg,
    transparent 13deg 18deg,
    rgba(255, 221, 154, 0.2) 21deg 25deg,
    transparent 29deg 36deg,
    rgba(255, 230, 177, 0.16) 39deg 42deg,
    transparent 46deg 360deg
  );
  filter: blur(0.38rem);
  mix-blend-mode: screen;
  opacity: calc(0.14 + (var(--living-noon) * 0.34) + (var(--living-dusk) * 0.14));
  transform-origin: 76% 47%;
  -webkit-mask-image: radial-gradient(circle at 76% 47%, #000 0 18%, rgba(0, 0, 0, 0.88) 48%, transparent 84%);
  mask-image: radial-gradient(circle at 76% 47%, #000 0 18%, rgba(0, 0, 0, 0.88) 48%, transparent 84%);
}

.living-atmosphere__weather {
  inset: -20% -16%;
  background-image:
    linear-gradient(108deg, transparent 46.5%, rgba(242, 232, 211, 0.22) 48.4%, rgba(242, 232, 211, 0.045) 50%, transparent 52%),
    linear-gradient(108deg, transparent 47%, rgba(222, 211, 190, 0.16) 49%, rgba(222, 211, 190, 0.035) 50.5%, transparent 52.5%);
  background-position: 0 0, 1.8rem 2.7rem;
  background-size: 3.8rem 6.2rem, 5.2rem 8.4rem;
  filter: blur(0.18px);
  mix-blend-mode: screen;
  opacity: calc(var(--living-dusk) * 0.26);
  -webkit-mask-image: linear-gradient(to bottom, transparent 3%, #000 17% 82%, transparent 98%);
  mask-image: linear-gradient(to bottom, transparent 3%, #000 17% 82%, transparent 98%);
}

.living-atmosphere__reflection {
  inset: 62% -22% -20%;
  background:
    repeating-linear-gradient(96deg, transparent 0 7%, rgba(255, 222, 158, 0.17) 8.4%, transparent 10.5% 18%),
    linear-gradient(104deg, transparent 22%, rgba(230, 191, 119, 0.13) 44%, rgba(255, 223, 155, 0.2) 54%, transparent 74%),
    radial-gradient(ellipse at 72% 2%, rgba(255, 205, 112, 0.26), transparent 49%);
  background-size: 132% 100%, 158% 100%, 100% 100%;
  filter: blur(0.24rem);
  mix-blend-mode: screen;
  opacity: calc(0.15 + (var(--living-dawn) * 0.08) + (var(--living-noon) * 0.06) + (var(--living-dusk) * 0.24));
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 19% 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent, #000 19% 78%, transparent 100%);
}

html.is-enhanced[data-motion-mode="full"]:not([data-capture-mode="true"]) .intro:not([data-scene-state="released"]) .living-atmosphere__clouds {
  animation: living-cloud-drift 28s ease-in-out infinite alternate;
}

html.is-enhanced[data-motion-mode="full"]:not([data-capture-mode="true"]) .intro:not([data-scene-state="released"]) .living-atmosphere__haze--far {
  animation: living-fog-far 22s ease-in-out infinite alternate;
}

html.is-enhanced[data-motion-mode="full"]:not([data-capture-mode="true"]) .intro:not([data-scene-state="released"]) .living-atmosphere__haze--near {
  animation: living-fog-near 16s ease-in-out infinite alternate;
}

html.is-enhanced[data-motion-mode="full"]:not([data-capture-mode="true"]) .intro:not([data-scene-state="released"]) .living-atmosphere__rays {
  animation: living-rays 13s ease-in-out infinite alternate;
}

html.is-enhanced[data-motion-mode="full"]:not([data-capture-mode="true"]) .intro:not([data-scene-state="released"]) .living-atmosphere__weather {
  animation: living-weather 1.35s linear infinite;
}

html.is-enhanced[data-motion-mode="full"]:not([data-capture-mode="true"]) .intro:not([data-scene-state="released"]) .living-atmosphere__reflection {
  animation: living-reflection 9s ease-in-out infinite alternate;
}

@keyframes living-cloud-drift {
  from { transform: translate3d(-5%, 1.2%, 0) scale(1.04); }
  to { transform: translate3d(5%, -1.4%, 0) scale(1.09); }
}

@keyframes living-fog-far {
  from { transform: translate3d(-5.5%, 0.4%, 0) scaleX(1.03); }
  to { transform: translate3d(5.5%, -1.1%, 0) scaleX(1.09); }
}

@keyframes living-fog-near {
  from { transform: translate3d(6.5%, 1.2%, 0) scaleX(1.06); }
  to { transform: translate3d(-6.5%, -1.2%, 0) scaleX(1.13); }
}

@keyframes living-rays {
  from { transform: rotate(-0.8deg) scale(1.015); }
  to { transform: rotate(0.8deg) scale(1.065); }
}

@keyframes living-weather {
  from { transform: translate3d(-2.4rem, -8.8rem, 0); }
  to { transform: translate3d(2.4rem, 8.8rem, 0); }
}

@keyframes living-reflection {
  from { transform: translate3d(-4%, 0.6%, 0) scaleX(1.01); }
  to { transform: translate3d(4%, -0.7%, 0) scaleX(1.08); }
}

@media (prefers-reduced-motion: reduce) {
  .living-atmosphere > span {
    animation: none !important;
    transform: none !important;
  }
}

@media (max-width: 760px), (pointer: coarse) {
  .living-atmosphere__weather {
    display: none;
  }

  .living-atmosphere__clouds,
  .living-atmosphere__haze,
  .living-atmosphere__rays,
  .living-atmosphere__reflection {
    filter: none;
  }
}