/* ───────── 04 ДЕН → НОЌ ───────── */
.shift {
  --p: 0; --night: 0; --dusk: 0; --sunx: 22%; --suny: 24%; --moonx: 76%; --moony: 86%; --sl: 0; --sk: -8; --lampOn: 0;
  --k1: clamp(0%, calc(var(--night) * 200%), 100%); --k2: clamp(0%, calc((var(--night) - .5) * 200%), 100%);
  --sky-top: color-mix(in srgb, #060504 var(--k2), color-mix(in srgb, #3b2438 var(--k1), #efe4d2));
  --sky-hz: color-mix(in srgb, #1a120c var(--k2), color-mix(in srgb, #e07a3a var(--k1), #f7d8a4));
  --kt: clamp(0%, calc(var(--night) * 350%), 100%);
  --tbl-a: color-mix(in srgb, #120d0a var(--k2), color-mix(in srgb, #5a3822 var(--kt), #d6b98c));
  --tbl-b: color-mix(in srgb, #030202 var(--k2), color-mix(in srgb, #2a180d var(--kt), #a07e52));
  --ink: color-mix(in srgb, var(--cream) clamp(0%, calc((var(--night) - .14) * 1600%), 100%), var(--espresso));
  --p-shade: color-mix(in srgb, #0b0908 calc(var(--night) * 100%), #cbb99d);
  --p-mid: color-mix(in srgb, #4b3a2b calc(var(--night) * 100%), #efe3cf);
  --p-lit: color-mix(in srgb, #c29b62 calc(var(--night) * 100%), #fffaf0);
  height: 360vh; background: var(--sky-top); color: var(--ink);
}
.shift__stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.shift__stage > * { position: absolute; }
.shift__sky { inset: 0; background: linear-gradient(var(--sky-top), var(--sky-hz) 72%); }
.shift__glow { left: 0; right: 0; bottom: 22%; height: 55%; opacity: var(--dusk);
  background: radial-gradient(70% 90% at var(--sunx) 100%, rgba(255,140,60,.75), rgba(200,80,40,.25) 50%, transparent 75%); }
.shift__stars { inset: 0 0 40% 0; opacity: calc(var(--night) * var(--night));
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff, transparent), radial-gradient(1px 1px at 28% 12%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 44% 30%, #fff, transparent), radial-gradient(1px 1px at 63% 16%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 84% 34%, #fff, transparent), radial-gradient(1px 1px at 92% 10%, #fff, transparent),
    radial-gradient(1px 1px at 36% 8%, #fff, transparent), radial-gradient(1.5px 1.5px at 55% 6%, #fff, transparent); }
.shift__sun, .shift__moon { width: clamp(70px, 11vw, 150px); aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; }
.shift__sun { left: var(--sunx); top: var(--suny); background: radial-gradient(circle at 40% 38%, #fff8e6, #f9c97a 55%, #f0a04a);
  box-shadow: 0 0 120px 30px rgba(255,190,110,.55); opacity: clamp(0, calc(2.4 - var(--night) * 2.2), 1); filter: saturate(calc(1 + var(--dusk) * .6)); }
.shift__moon { left: var(--moonx); top: var(--moony); background: radial-gradient(circle at 38% 36%, #fbfbf6, #d9dcd8 60%, #b9bfc6);
  box-shadow: 0 0 90px 12px rgba(200,214,240,.28); opacity: clamp(0, calc(var(--night) * 3 - .4), 1); }
.shift__window { left: 2%; top: 4%; width: 70%; height: 78%; pointer-events: none; opacity: clamp(0, calc(.65 - var(--night) * 1.05), 1);
  background: linear-gradient(calc(96deg + var(--sk) * 1deg), rgba(255, 226, 170, .8), rgba(255, 226, 170, 0) 70%);
  -webkit-mask: linear-gradient(90deg, #000 0 47%, transparent 47% 53%, #000 53%), linear-gradient(#000 0 47%, transparent 47% 53%, #000 53%); -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, #000 0 47%, transparent 47% 53%, #000 53%), linear-gradient(#000 0 47%, transparent 47% 53%, #000 53%); mask-composite: intersect;
  transform: skewX(calc(var(--sk) * 1deg)) translateX(calc(var(--sl) * 12%)); mix-blend-mode: soft-light; filter: blur(7px); }
.shift__table { left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(var(--tbl-a), var(--tbl-b));
  border-top: 1px solid color-mix(in srgb, rgba(246,196,122,.5) calc(var(--night) * 100%), rgba(255,255,255,.5)); }
.shift__lamp { left: 50%; top: 0; width: 0; height: 0; translate: 0 calc((1 - var(--lampOn)) * -60svh); }
.shift__cord { position: absolute; left: -.5px; top: -10svh; width: 1px; height: 28svh; background: #2c241c; }
.shift__shade { max-width: none; position: absolute; width: clamp(70px, 9vw, 120px); left: calc(clamp(70px, 9vw, 120px) / -2); top: 27svh; height: auto; overflow: visible; }
.shift__cone { position: absolute; left: -32vw; width: 64vw; top: calc(27svh + clamp(35px, 4.5vw, 60px)); height: 50svh;
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); background: linear-gradient(rgba(246,196,122,.34), rgba(246,196,122,.03) 88%); opacity: var(--lampOn);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent); }

.shift__object { left: 50%; bottom: 20%; width: clamp(230px, 34vw, 460px); translate: -50% 0; -webkit-box-reflect: below -4% linear-gradient(transparent 62%, rgba(255,255,255,.2)); }
.obj { position: absolute; left: 0; bottom: 0; width: 100%; height: auto; }
.shift__object::before { content: ""; display: block; padding-top: 80%; }
.obj--cup { opacity: clamp(0, calc(1 - var(--night) * 2.2), 1); transform: translateY(calc(var(--night) * 10px)); }
.obj--glass { opacity: clamp(0, calc(var(--night) * 2.2 - 1.2), 1); transform: translateY(calc((1 - var(--night)) * 14px)); filter: drop-shadow(0 0 calc(var(--night) * 26px) rgba(246,196,122,.32)); }
.shift__shadow { left: 40%; width: 55%; bottom: 2%; height: 7%; border-radius: 50%; background: rgba(40,20,8,.55); filter: blur(9px); transform-origin: 0 50%;
  transform: skewX(calc(var(--sk) * -1.4deg)) scaleX(calc(.5 + var(--sl) * 1.7)); opacity: clamp(0, calc(1 - var(--night) * 1.8), 1); }

.shift__copy { left: var(--gutter); bottom: clamp(30px, 8vh, 90px); width: calc(100% - 2 * var(--gutter)); max-width: 620px; }
.shift__copy .eyebrow { position: relative; height: 1.2em; color: color-mix(in srgb, var(--amber-hot) calc(var(--night) * 100%), var(--ember)); }
.w { position: absolute; left: 0; top: 0; } .w--day { opacity: clamp(0, calc(1 - var(--night) * 3), 1); } .w--night { opacity: clamp(0, calc(var(--night) * 3 - 2), 1); }
.shift__title { position: relative; font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 5.4vw, 4.6rem); line-height: 1.04; height: 2.2em; }
.t { position: absolute; left: 0; top: 0; }
.t--day { opacity: clamp(0, calc(1 - var(--night) * 3), 1); } .t--night { opacity: clamp(0, calc(var(--night) * 3 - 2), 1); transform: translateY(calc((1 - var(--night)) * 20px)); }
@media (max-width: 720px) { .shift__object { bottom: 34%; width: 62vw; } .shift__copy { bottom: 4vh; } .shift__table { height: 36%; } .shift__window { width: 100%; } }