/* Third screen "Ihr Assistent": one night on the visitor's own website, from the 23:41 inquiry to the 8:00 summary.
   The phone shows the visitor's mini-site (apps.js) with a chat over it; the chat is laid out at 390 px and
   scaled like the apps. Behind the phone the clock and the sky over the mountains go from night to morning. */

.night {
  position: relative; isolation: isolate; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: clamp(24px, 4vw, 72px); overflow-x: clip;
  /* full width for the sky, the content still within 1480 px */
  padding: calc(var(--hdr) + 8px) calc(var(--gutter) + max(0px, (100% - 1480px) / 2)) 32px;
}
.night-copy { max-width: 560px; justify-self: end; }
/* everything stands on the sky by its own z-index: with the sky at z-index -1, Safari and GPU Chrome drew the
   cross-fading sky layers over the plain title and lead while the fade ran */
.night-copy, .night-copy > *, .night-stage { position: relative; z-index: 1; }
.night-lead { margin: 22px 0 0; max-width: 32em; font-size: var(--t-lead); line-height: 1.6; color: var(--muted); }
.night.auto .step.on .st-bar { transform: scaleY(0); animation: stbar var(--dur, 4s) linear forwards; transition: none; }
.night.auto .step.on.last .st-bar { animation: none; transform: scaleY(1); }
.night.seen .sv { opacity: 1; transform: none; transition: opacity .8s var(--ease) var(--d, 0s), transform 1s var(--expo) var(--d, 0s); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- the sky over the Montafon: night at 23:41, blue hour, dawn, the sun behind the ridge at 8:00 ----------
   Four painted skies cross-fade (opacity only), the stars and the moon fade, the glow climbs behind the peaks.
   The scene number sits on .night as data-s; without it (before the first scene) it is night. */
.sky { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; --mh: clamp(150px, 30%, 300px); --floor: 0px; --T: 2.4s; }
.sky > * { position: absolute; }
.sky .l { inset: 0; opacity: 0; transition: opacity var(--T) ease; }
.sky .l0 { opacity: 1; background: linear-gradient(180deg, #0a0a0b 0%, #07090f 12%, #0a1024 44%, #111a38 70%, #1a2549 86%); }
.sky .l1 { background: linear-gradient(180deg, #0a0a0b 0%, #090c19 12%, #111b3c 42%, #23306a 64%, #47478a 80%, #6e5590 94%); }
.sky .l2 { background: linear-gradient(180deg, #0a0a0b 0%, #0b0f20 12%, #17214a 40%, #333f7c 60%, #7a5a88 76%, #cf8468 89%, #e9a06c 100%); }
.sky .l3 { background: linear-gradient(180deg, #0a0a0b 0%, #0c1226 12%, #1d2b5c 38%, #42548e 58%, #a6849c 75%, #eeaf7a 88%, #f8cb8e 100%); }
.night[data-s="1"] .l1, .night[data-s="2"] .l1, .night[data-s="3"] .l1,
.night[data-s="2"] .l2, .night[data-s="3"] .l2, .night[data-s="3"] .l3 { opacity: 1; }

.sky .stars { left: 0; top: 0; width: 100%; height: calc(100% - var(--floor) - var(--mh) * .5); transition: opacity var(--T) ease; }
.sky .tw { inset: 0; transition: opacity var(--T) ease; }
.sky .tw i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px 1px rgba(200, 214, 255, .55); opacity: .5; }
.night.vis:not([data-s="2"]):not([data-s="3"]) .tw i { animation: twinkle 3.2s ease-in-out infinite alternate; }
.sky .tw i:nth-child(2n) { animation-duration: 4.1s; animation-delay: -1.3s; }
.sky .tw i:nth-child(3n) { animation-duration: 2.7s; animation-delay: -2.1s; }
@keyframes twinkle { from { opacity: .15; } to { opacity: .95; } }
.night[data-s="1"] .stars, .night[data-s="1"] .tw { opacity: .4; }
.night[data-s="2"] .stars, .night[data-s="2"] .tw { opacity: .08; }
.night[data-s="3"] .stars, .night[data-s="3"] .tw { opacity: 0; }

/* a waning crescent high over the clock; it sets towards the morning */
.sky .moon {
  top: 14%; left: 84%; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset 8px -4px 0 0 #efe6cf;
  filter: drop-shadow(0 0 12px rgba(239, 230, 207, .35)); transition: opacity 1.8s ease, translate var(--T) ease;
}
.night[data-s="1"] .moon { opacity: .45; translate: 0 24px; }
.night[data-s="2"] .moon, .night[data-s="3"] .moon { opacity: 0; translate: 0 48px; }

/* the sun is still behind the peaks: only its glow climbs */
.sky .sun {
  left: 72%; bottom: calc(var(--floor) + var(--mh) * .55); width: min(1200px, 120vw); aspect-ratio: 2; translate: -50% 62%; scale: .7; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 224, 164, .95), rgba(255, 178, 110, .55) 26%, rgba(232, 122, 92, .2) 58%, transparent);
  transition: opacity var(--T) ease, scale var(--T) ease, translate var(--T) ease;
}
.night[data-s="1"] .sun { opacity: .3; }
.night[data-s="2"] .sun { opacity: .65; scale: .85; translate: -50% 56%; }
.night[data-s="3"] .sun { opacity: 1; scale: 1; translate: -50% 46%; }

/* two ridges: the peaks catch a warm rim at dawn, the near hills are as dark as the page below.
   On phones the steps sit under the phone: the valley floor (--floor, set in assist.js) lifts the ridges above them. */
.sky .defs { width: 0; height: 0; }
.sky .far, .sky .rim, .sky .near { left: 0; bottom: var(--floor); width: 100%; height: var(--mh); }
.sky .valley { left: 0; bottom: 0; width: 100%; height: calc(var(--floor) + 1px); background: #0a0a0b; }
.sky .near { height: calc(var(--mh) * .62); }
.sky .warm, .sky .rim { opacity: 0; transition: opacity var(--T) ease; }
.night[data-s="2"] .warm { opacity: .55; }
.night[data-s="3"] .warm { opacity: 1; }
.night[data-s="2"] .rim { opacity: .35; }
.night[data-s="3"] .rim { opacity: .8; }

/* the text side stays dark enough to read on any sky */
.sky .scrim { inset: 0; background: linear-gradient(90deg, rgba(10, 10, 11, .86) 0%, rgba(10, 10, 11, .76) 38%, rgba(10, 10, 11, .5) 50%, rgba(10, 10, 11, 0) 64%); }

/* ---------- the stage: clock and phone ---------- */
.night-stage {
  --ph: clamp(420px, calc(100svh - 210px), 660px);
  position: relative; display: grid; grid-template-columns: auto auto; grid-template-areas: "phone clock" "cap cap";
  justify-content: center; align-items: center; column-gap: clamp(20px, 3.4vw, 56px); min-height: calc(var(--ph) + 60px);
}

/* the time of the scene, stacked like a lock screen beside the phone */
.clock {
  grid-area: clock; position: relative; z-index: 1; display: grid; margin: 0; padding-bottom: 6%;
  font: 200 clamp(84px, 8.6vw, 150px)/.86 var(--font); letter-spacing: -.045em; color: rgba(255, 255, 255, .2);
  font-variant-numeric: tabular-nums; pointer-events: none; user-select: none;
}
.clock.tick span { animation: tick .8s var(--expo) both; }
.clock.tick span + span { animation-delay: .08s; }
@keyframes tick { from { opacity: 0; transform: translateY(18%); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

.nphone { grid-area: phone; position: relative; z-index: 1; }
.nphone .phone { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), inset 0 0 0 calc(var(--ph) * .006) #050506, 0 calc(var(--ph) * .06) calc(var(--ph) * .12) calc(var(--ph) * -.03) rgba(0, 0, 0, .7); }
.nphone .screen { background: #0b0b0c; }
.night-cap { grid-area: cap; justify-self: center; position: relative; z-index: 1; display: flex; align-items: center; gap: 10px; margin: 18px 0 0; font-size: 13.5px; color: var(--muted); }
.night-cap .tag { font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--terra-lit); border: 1px solid rgba(210, 102, 74, .45); padding: 5px 7px; border-radius: 2px; }

/* ---------- inside the phone: 390 px wide, scaled by assist.js ---------- */
.n-ui { position: absolute; left: 0; top: 0; width: 390px; transform-origin: 0 0; overflow: hidden; font-family: 'Manrope', sans-serif; }
.n-ui .app { position: absolute; inset: 0; height: 100%; opacity: 1; }
.n-ui .app .sb { visibility: hidden; }           /* the phone's own bar below shows the scene's time */
.n-dim { position: absolute; inset: 0; z-index: 4; background: rgba(8, 10, 14, .46); }
.n-sb { position: absolute; left: 0; right: 0; top: 0; z-index: 7; height: 50px; display: flex; align-items: center; justify-content: space-between; padding: 6px 30px 0 40px; color: #fff; font: 600 15px/1 'Inter Tight', sans-serif; }
.n-sb svg { fill: currentColor; display: block; }
.n-sb .sb-i { display: flex; gap: 6px; align-items: center; }

/* the chat: a website widget opened over the page */
.n-chat {
  position: absolute; left: 0; right: 0; top: 118px; bottom: 0; z-index: 5; display: flex; flex-direction: column;
  border-radius: 24px 24px 0 0; background: #f3f2ef; color: #17171a; overflow: hidden;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .28); transition: transform .6s var(--expo), opacity .4s ease;
}
.n-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: var(--mo-go-bg, #222); color: var(--mo-go-fg, #fff); }
.n-av { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--mo-go-fg, #fff) 18%, transparent); font: 600 17px/1 'Manrope', sans-serif; }
.n-who { min-width: 0; display: grid; gap: 3px; }
.n-who b { font-size: 15.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-who small { display: flex; align-items: center; gap: 6px; font-size: 12px; opacity: .8; }
.n-who small i { width: 7px; height: 7px; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 2px color-mix(in srgb, var(--mo-go-bg, #222) 70%, #fff 0%); }
.n-msgs { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 9px; padding: 14px 14px 10px; overflow: hidden; }
.n-in { flex: none; display: flex; align-items: center; gap: 10px; padding: 10px 14px 26px; border-top: 1px solid rgba(0, 0, 0, .06); background: #fff; }
.n-in span { flex: 1; height: 40px; display: flex; align-items: center; padding: 0 16px; border-radius: 99px; background: #f1f1f3; color: #8a8a90; font-size: 14px; }
.n-in i { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--mo-go-bg, #222); }
.n-in i::after { content: ''; display: block; width: 100%; height: 100%; background: var(--mo-go-fg, #fff); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 18V7m0 0-5 5m5-5 5 5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 18V7m0 0-5 5m5-5 5 5' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 22px no-repeat; }

.msg { max-width: 82%; padding: 10px 14px; border-radius: 18px; font-size: 15px; line-height: 1.38; font-weight: 500; animation: pop .45s var(--expo) both; }
.msg.g { align-self: flex-end; border-bottom-right-radius: 6px; background: var(--mo-go-bg, #222); color: var(--mo-go-fg, #fff); }
.msg.b { align-self: flex-start; border-bottom-left-radius: 6px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.msg.t { display: flex; gap: 5px; padding: 14px 16px; }
.msg.t i { width: 7px; height: 7px; border-radius: 50%; background: #a3a3a9; animation: dot 1s ease-in-out infinite; }
.msg.t i:nth-child(2) { animation-delay: .15s; } .msg.t i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
.card { align-self: flex-start; width: 84%; padding: 14px 16px 16px; border-radius: 18px; border-bottom-left-radius: 6px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .06); animation: pop .5s var(--expo) both; }
.card .k { font-size: 10px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--mo-acc, #a8452f); }
.card b { display: block; margin-top: 6px; font-size: 17px; font-weight: 600; }
.card small { display: block; margin-top: 3px; font-size: 12.5px; color: #6b6b72; }
.card .row { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: 12px; }
.card .pr { font-size: 26px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.card .pr small { display: block; margin-top: 5px; font-size: 11px; font-weight: 500; letter-spacing: 0; }
.card .go2 { flex: none; height: 40px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 99px; background: var(--mo-go-bg, #222); color: var(--mo-go-fg, #fff); font-size: 13px; font-weight: 600; }
.sys { align-self: center; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 99px; background: rgba(0, 0, 0, .06); color: #4a4a50; font-size: 12.5px; font-weight: 600; animation: pop .45s var(--expo) both; }
.sys::before { content: ''; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h10M8.5 4.5 12 8l-3.5 3.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h10M8.5 4.5 12 8l-3.5 3.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.n-msgs.out > * { animation: none; opacity: 0; transform: translateY(-8px); transition: opacity .3s ease, transform .3s ease; }

/* 8:00: the lock screen with the owner's summary */
.n-lock { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; padding: 96px 14px 0; opacity: 0; pointer-events: none;
  background: radial-gradient(120% 60% at 50% 105%, #d98a5f 0%, rgba(217, 138, 95, 0) 60%), linear-gradient(180deg, #161a2c 0%, #2c2a48 55%, #6b4a5c 100%);
  transition: opacity .7s ease; color: #fff; }   /* a dawn wallpaper; no backdrop blur: it costs seconds on slow phones */
.n-lock .t { font: 200 76px/1 var(--font); letter-spacing: -.02em; }
.n-lock .d { margin-top: 6px; font: 500 15px/1 'Inter Tight', sans-serif; opacity: .8; }
.note { width: 100%; margin-top: 34px; padding: 14px 16px 16px; border-radius: 22px; background: rgba(250, 250, 252, .93); color: #17171a; box-shadow: 0 12px 30px rgba(0, 0, 0, .25); transform: translateY(16px); opacity: 0; transition: transform .7s var(--expo) .35s, opacity .4s ease .35s; }
.note .top { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #6b6b72; }
.note .top i { width: 20px; height: 20px; border-radius: 6px; background: var(--mo-go-bg, #222); }
.note .top span:last-child { margin-left: auto; }
.note b { display: block; margin-top: 9px; font-size: 16px; font-weight: 600; }
.note small { display: block; margin-top: 2px; font-size: 12.5px; color: #6b6b72; }
.note ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.note li { position: relative; padding-left: 22px; font-size: 13.5px; line-height: 1.35; font-weight: 500; }
.note li::before { content: ''; position: absolute; left: 2px; top: 4px; width: 10px; height: 10px; border-radius: 50%; background: #34c759; }
.note li.todo { margin-top: 3px; padding: 9px 10px 9px 32px; border-radius: 12px; background: color-mix(in srgb, var(--mo-go-bg, #222) 10%, #fff); }
.note li.todo::before { left: 12px; top: 13px; background: var(--mo-acc, #a8452f); }
.n-ui.lock .n-lock { opacity: 1; }
.n-ui.lock .note { transform: none; opacity: 1; }
.n-ui.lock .n-chat { transform: translateY(6%); opacity: 0; }
.n-ui .app, .n-dim { transition: opacity .6s ease; }
.n-ui.lock .app, .n-ui.lock .n-dim { opacity: 0; }

/* ---------- smaller screens ---------- */
@media (min-width: 901px) and (max-height: 820px) {
  .night-lead { display: none; }
  .night .steps { margin-top: 26px; }
  .night .step { padding-block: 10px; }
}
@media (max-width: 900px) {
  .night { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 0; min-height: 0; padding-top: calc(var(--hdr) + 22px); padding-bottom: 28px; }
  .night-copy { display: contents; }
  .night .eyebrow { order: 1; margin-bottom: 14px; font-size: 10.5px; letter-spacing: .14em; }
  .night .h2 { order: 2; font-size: clamp(1.9rem, 8.4vw, 3rem); }
  .night-lead, .night-cap { display: none; }
  .night-stage { order: 3; --ph: clamp(330px, calc(100svh - 372px), 520px); margin-top: 18px; min-height: 0; }
  .clock { font-size: clamp(56px, 13vw, 96px); }
  .night .steps { order: 4; margin-top: 14px; }
  .night .step { padding: 9px 0 9px 18px; }
  .night .step b { font-size: 16px; }
  /* the other steps keep only their time: four full steps do not fit under the phone */
  .night .step:not(.on) b, .night .st-t { display: none; }
  .night .step { padding-block: 7px; }
  .night .st-t { font-size: 13.5px; }
  .night .step.on .st-t { display: block; }
  /* text above and below the phone: the sky behind it, no side scrim, the moon would sit on the title */
  .sky .scrim, .sky .moon { display: none; }
  .sky { --mh: 200px; }
  .sky .sun { left: 50%; }
}
@media (max-width: 480px) { .clock { display: none; } .night-stage { grid-template-columns: auto; grid-template-areas: "phone" "cap"; } }   /* the phone's own bar shows the time */
@media (prefers-reduced-motion: reduce) {
  .night-stage, .clock span, .msg, .card, .sys, .n-chat, .n-lock, .note, .sky *, .sky .tw i { transition: none !important; animation: none !important; }
}