/* Desk hero: photo E with a live screen mapped onto the monitor. Prototype: tools/scrollcraft/builds/pulse-outcomes/lab/pov-proto in Tom OS. */
.dk-stage {
  --sand-50: #F8F6F4; --sand-100: #EFECE8; --sand-200: #DED8D1;
  --ink-950: #1A1E25; --ink-700: #515A69; --ink-500: #7F8A9C; --ink-200: #D3D9E4; --ink-100: #E7EBF1;
  --cobalt: #3864DF; --cobalt-300: #A6BFFF; --cobalt-200: #CAD9FE; --cobalt-50: #EEF3FF;
  --green: #1F9D5B;
  --display: "Zodiak", Georgia, serif;
  --text: "General Sans", system-ui, sans-serif;
  --ease: cubic-bezier(.22, .8, .24, 1);
}

/* ------------------------------------------------------------- desk hero frame */
.dk-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.dk-stage__photo { display: block; width: 100%; height: 100%; }
.dk-stage__glow {
  position: absolute; pointer-events: none; mix-blend-mode: screen; opacity: .55;
  background: radial-gradient(closest-side, rgba(225, 235, 255, .55), rgba(225, 235, 255, 0));
  transition: opacity 600ms var(--ease);
}
.dk-stage__glow.is-up { opacity: .8; }
.hero__wash {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(248, 246, 244, .94) 0%, rgba(248, 246, 244, .82) 30%, rgba(248, 246, 244, 0) 52%);
  opacity: calc(1 - var(--hp) * 2);
}
/* ------------------------------------------------------------- the screen */
.dk-screen {
  position: absolute; left: 0; top: 0; width: 1600px; height: 960px;
  transform-origin: 0 0; overflow: hidden; background: #F3F1EE;
}
.dk-screen__glass {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(115deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 62%, rgba(255,255,255,.07) 78%, rgba(255,255,255,0) 100%),
    radial-gradient(120% 90% at 50% 45%, rgba(0,0,0,0) 60%, rgba(40,30,20,.10) 100%),
    linear-gradient(rgba(255, 214, 170, .07), rgba(255, 214, 170, .07));
  box-shadow: inset 0 0 18px rgba(0,0,0,.12);
}
.dk-screen__glass::after {
  content: ""; position: absolute; inset: 0; opacity: .09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.desk {
  position: absolute; inset: 0; filter: blur(.5px) saturate(.9) brightness(.98);
  background: linear-gradient(160deg, #F6F3EF 0%, #ECE7E1 100%);
  font-family: var(--text); color: var(--ink-950);
}
.desk__bar { height: 44px; display: flex; align-items: center; gap: 10px; padding: 0 22px; background: rgba(255,255,255,.55); border-bottom: 1px solid rgba(0,0,0,.05); }
.desk__bar span { width: 13px; height: 13px; border-radius: 50%; background: var(--sand-200); }
.desk__bar b { margin-left: auto; font: 600 20px/1 var(--text); color: var(--ink-500); }

.win {
  position: absolute; background: rgba(255,255,255,.92); border-radius: 18px;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 12px 34px rgba(60, 45, 30, .10), 0 0 0 1px rgba(0,0,0,.04);
  padding: 22px 24px; overflow: hidden;
}
.win header { display: flex; align-items: center; gap: 12px; font: 600 26px/1 var(--text); color: var(--ink-700); margin-bottom: 20px; }
.ico { width: 34px; height: 34px; fill: none; stroke: var(--cobalt); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.win--mail { left: 40px; top: 70px; width: 520px; height: 380px; }
.win--contact { left: 650px; top: 70px; width: 440px; height: 350px; }
.win--rev { left: 1130px; top: 70px; width: 430px; height: 230px; }
.win--cal { left: 40px; top: 480px; width: 680px; height: 440px; }
.win--inv { left: 800px; top: 450px; width: 440px; height: 470px; }
.win--log { left: 1290px; top: 330px; width: 270px; height: 590px; }

.badge {
  margin-left: auto; font: 700 22px/34px var(--text); font-style: normal; min-width: 34px; text-align: center;
  color: #fff; background: #E5484D; border-radius: 17px; transform: scale(0);
}
.badge.is-on { animation: pop 520ms var(--ease) forwards; }
@keyframes pop { 0% { transform: scale(0); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

.av { flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--ink-100); display: grid; place-items: center; font: 600 20px/1 var(--text); }
.av--c { background: var(--cobalt-200); color: #1D3E9E; }
.av--lg { width: 96px; height: 96px; font-size: 34px; }
.sk { display: block; height: 14px; border-radius: 7px; background: var(--ink-100); }
.w45 { width: 45%; } .w55 { width: 55%; } .w60 { width: 60%; } .w70 { width: 70%; } .w80 { width: 80%; }

.mail { list-style: none; display: grid; gap: 6px; }
.mail li { display: flex; align-items: center; gap: 16px; padding: 12px 14px; border-radius: 12px; }
.mail li div { flex: 1; display: grid; gap: 8px; }
.mail li b { font: 600 24px/1.1 var(--text); }
.mail li em { font: 400 19px/1.2 var(--text); font-style: normal; color: var(--ink-700); }
.mail li time { font: 600 18px/1 var(--text); color: var(--cobalt); }
.mail__new { max-height: 0; opacity: 0; padding-block: 0 !important; transition: max-height 500ms var(--ease), opacity 400ms var(--ease), padding 500ms var(--ease), background-color 600ms; }
.mail__new.is-on { max-height: 100px; opacity: 1; padding-block: 12px !important; }
.mail__new.is-unread { background: var(--cobalt-50); }
.mail__new.is-grab { background: var(--cobalt-200); }
.mail__new time { white-space: nowrap; }
.mail__new time.is-done { color: var(--green); }

.dk-card { display: flex; gap: 22px; align-items: flex-start; opacity: .25; transition: opacity 400ms var(--ease); }
.dk-card.is-on { opacity: 1; }
.dk-card__fields { display: grid; gap: 14px; flex: 1; }
.dk-card__fields p { display: grid; gap: 4px; }
.dk-card__fields span { font: 500 16px/1 var(--text); color: var(--ink-500); text-transform: uppercase; letter-spacing: .06em; }
.dk-card__fields b { font: 600 24px/1.1 var(--text); clip-path: inset(0 100% 0 0); transition: clip-path 520ms steps(9); }
.dk-card__fields b.is-on { clip-path: inset(0 0 0 0); }

.pill {
  position: absolute; left: 24px; bottom: 22px; font: 700 34px/1 var(--text); font-style: normal;
  color: #fff; background: var(--cobalt); padding: 14px 20px 14px 18px; border-radius: 14px;
  opacity: 0; transform: translateY(14px) scale(.96); transition: opacity 360ms var(--ease), transform 460ms var(--ease);
}
.pill::before { content: "✓ "; }
/* In the invoice the pill sits right of the Send button; the Paid stamp later takes its place. */
.win--inv .pill { left: auto; right: 24px; font-size: 28px; }
/* In the calendar the pill sits in the header so it never covers a booking. */
.win--cal .pill { left: auto; right: 20px; top: 14px; bottom: auto; font-size: 28px; padding: 10px 16px; }
.pill.is-on { opacity: 1; transform: none; }

.rev { display: flex; align-items: baseline; gap: 14px; }
.rev span { font: 600 54px/1 var(--text); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rev em { font: 700 24px/1 var(--text); font-style: normal; color: var(--green); opacity: 0; transition: opacity 400ms; }
.rev em.is-on { opacity: 1; }
.spark { width: 100%; height: 56px; margin-top: 16px; }
.spark path { fill: none; stroke: var(--cobalt); stroke-width: 3; vector-effect: non-scaling-stroke; }

.cal__days { display: grid; grid-template-columns: 34px repeat(5, 1fr); gap: 0 5px; font: 600 18px/1 var(--text); color: var(--ink-500); margin-bottom: 10px; }
.cal__days .is-today { color: var(--cobalt); }
.cal__body { display: grid; grid-template-columns: 34px 1fr; gap: 5px; }
.cal__times { display: grid; grid-template-rows: repeat(8, 1fr); height: 304px; font: 500 15px/1 var(--text); color: var(--ink-500); }
.cal__grid {
  position: relative; height: 304px; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(8, 1fr); gap: 3px 5px;
  background: repeating-linear-gradient(to bottom, var(--ink-100) 0 1px, transparent 1px 38px);
}
.cal__grid i { grid-column: var(--c); grid-row: calc(var(--r) + 1) / span var(--h); background: var(--sand-100); border-radius: 7px; }
.cal__new {
  grid-column: var(--c); grid-row: calc(var(--r) + 1) / span 1; z-index: 1; border-radius: 7px; background: var(--cobalt); color: #fff;
  padding: 5px 9px; display: flex; align-items: center; gap: 6px; overflow: hidden; white-space: nowrap;
  font: 700 15px/1 var(--text);
  opacity: 0; transform: translateY(-50px); transition: opacity 260ms, transform 620ms cubic-bezier(.3, 1.5, .5, 1), background-color 600ms;
}
.cal__new.is-on { opacity: 1; transform: none; }
.cal__new.is-past { background: var(--cobalt-200); color: #1D3E9E; }

.inv { display: grid; gap: 14px; }
.inv p { margin: 0; }
.inv__to { font: 500 22px/1 var(--text); color: var(--ink-700); }
.inv__to b { color: var(--ink-950); }
.inv__line, .inv__total { display: flex; justify-content: space-between; font: 500 22px/1 var(--text); padding: 10px 0; border-bottom: 1px solid var(--ink-100); opacity: 0; transform: translateX(-10px); transition: opacity 300ms, transform 400ms var(--ease); }
.inv__total { font-weight: 700; border: 0; }
.inv [data-line].is-on { opacity: 1; transform: none; }
.inv__send { justify-self: start; margin-top: 6px; font: 700 22px/1 var(--text); color: #fff; background: var(--ink-950); padding: 14px 22px; border-radius: 10px; transition: transform 120ms, background-color 300ms; }
.inv__send.is-press { transform: scale(.94); }
.inv__send.is-done { background: var(--green); }
.stamp {
  position: absolute; right: 26px; bottom: 18px; font: 800 52px/1 var(--text); font-style: normal; color: var(--green);
  border: 5px solid var(--green); border-radius: 14px; padding: 10px 16px; rotate: -10deg;
  opacity: 0; transform: scale(2.2); transition: opacity 200ms, transform 420ms cubic-bezier(.3, 1.4, .5, 1);
}
.stamp.is-on { opacity: .92; transform: scale(1); }

.log { list-style: none; display: grid; gap: 12px; }
.log li { font: 600 19px/1.2 var(--text); display: grid; grid-template-columns: auto 1fr; gap: 2px 8px; animation: logIn 500ms var(--ease) both; }
.log li::before { content: "✓"; color: var(--green); font-weight: 800; grid-row: span 2; }
.log li time { font: 500 15px/1 var(--text); color: var(--ink-500); }
@keyframes logIn { from { opacity: 0; transform: translateY(10px); } }

.wires { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.wires path { fill: none; stroke: var(--cobalt-300); stroke-width: 3; stroke-dasharray: 6 9; opacity: .7; }
.wires path.is-live { stroke: var(--cobalt); stroke-dasharray: none; opacity: 1; }
.wires__spark { fill: #fff; stroke: var(--cobalt); stroke-width: 3; opacity: 0; filter: drop-shadow(0 0 8px rgba(56,100,223,.9)); }

.ghost {
  position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px;
  background: #fff; border-radius: 14px; box-shadow: 0 18px 40px rgba(30, 40, 80, .22); font: 600 24px/1 var(--text);
  opacity: 0; pointer-events: none; rotate: -2deg;
}
.cursor { position: absolute; left: 0; top: 0; width: 46px; height: 46px; fill: #111; stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 3px 4px rgba(0,0,0,.3)); z-index: 5; transition: scale 120ms; }
.cursor.is-press { scale: .86; }

/* Phone status card, hidden on wider screens. */
.mob { display: none; position: absolute; inset: 0; place-content: center; justify-items: center; text-align: center; background: linear-gradient(160deg, #F6F3EF, #ECE7E1); }
.ico--mob { width: 190px; height: 190px; stroke-width: 2.6; }
.mob__status { margin-top: 30px; font: 700 176px/1 var(--text); letter-spacing: -.01em; color: #0D1015; }
.mob__name { margin-top: 28px; font: 600 84px/1 var(--text); color: var(--ink-700); }
.mob__steps { display: flex; gap: 22px; margin-top: 56px; }
.mob__steps i { width: 90px; height: 14px; border-radius: 7px; background: var(--ink-200); transition: background-color 300ms; }
.mob__steps i.is-on { background: var(--cobalt); }


@media (max-width: 760px) {
  .hero__wash { background: linear-gradient(180deg, rgba(248,246,244,.96) 0%, rgba(248,246,244,.9) 36%, rgba(248,246,244,0) 54%); }
  .dk-stage__photo { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 86%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 16%, #000 86%, transparent); }
  .desk { display: none; }
  .mob { display: grid; }
}
@media (prefers-reduced-motion: reduce) {
  .dk-stage *, .dk-stage *::before, .dk-stage *::after { transition: none !important; animation: none !important; }
}

/* Desktop: the copy sits at the left edge so it clears the monitor. */
@media (min-width: 761px) {
  .hero { --hero-left: clamp(24px, 4.5vw + 22px, 132px); }
  .hero__copy { margin: 0 0 0 var(--hero-left); width: min(42rem, 48vw); }
  .hero__title { max-width: 17ch; font-size: clamp(2.6rem, 1.2rem + 2.6vw, 4.2rem); }
}
@media (min-width: 761px) and (max-width: 1300px) {
  .hero__title { max-width: 10ch; }
}