/* Introduction chapter. One 1920 x 1080 world, scaled to the stage the same way the camera clips are. */
.stage > .intro.ix { display: block; background: none; overflow: hidden; }
.ix-world { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; overflow: hidden; }
.ix-world * { box-sizing: border-box; }
.ix-sc { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: hidden; opacity: 0; }
.ix-sc.on { opacity: 1; }
.ix-sc:not(.on) { visibility: hidden; }
.ix-cam { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.ix-street .ix-cam { width: 1920px; height: 1080px; transform-origin: 1700px 300px; }
.ix-row .ix-cam, .ix-city .ix-cam { width: 3840px; height: 1648px; }
.ix-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.ix-clip { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; object-fit: fill; opacity: 0; z-index: 5; }
.ix-clip.on { opacity: 1; }

/* Screens: live HTML fitted to the four measured corners of each screen. */
.ix-scr { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; container-type: size; color: #fff; text-align: center;
  font-family: "Archivo", system-ui, sans-serif; background: #02060f; }
.ix-scr::before { content: ""; position: absolute; inset: 0; background: radial-gradient(90cqw 90cqh at 50% 0%, rgba(56, 182, 255, 0.26), transparent 70%), linear-gradient(170deg, #0a2457 0%, #041235 65%, #020a22 100%);
  opacity: 0; transition: opacity 0.9s ease; }
.ix-scr.lit::before { opacity: 1; }
.ix-scr::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, 0.07), transparent 38%); }
.ix-sl { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.6cqh; padding: 5cqh 6cqw;
  opacity: 0; transform: translateY(3cqh); transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.ix-sl.on { opacity: 1; transform: none; }
.ix-sl > * { opacity: 0; transform: translateY(2.4cqh); transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.ix-sl > .in { opacity: 1; transform: none; }
.ix-sl.all > * { opacity: 1; transform: none; }
.ix .ix-scr p { margin: 0; }
.ix .ix-h { color: #fff; font-size: 7.4cqw; font-weight: 800; letter-spacing: -0.02em; line-height: 1.02; }
.ix .ix-p { font-size: 4.1cqw; font-weight: 500; line-height: 1.25; color: rgba(255, 255, 255, 0.86); max-width: 90cqw; }
.ix .ix-eye { font-size: 3.4cqw; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #7fd0ff; }
.ix .ix-why { font-size: 4.4cqw; font-weight: 600; line-height: 1.2; color: #fff; padding: 1.6cqh 3.4cqw; border-radius: 99px; background: rgba(56, 182, 255, 0.2); border: 0.25cqw solid rgba(127, 208, 255, 0.5); }

/* Shop messages: the design made on the laptop and sent to every screen on the street. */
.ix-msg { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2cqh; opacity: 0; transition: opacity 0.45s ease; }
.ix-msg.on { opacity: 1; }
.ix-msg b { font-size: 12cqw; font-weight: 800; letter-spacing: -0.03em; line-height: 0.95; }
.ix-msg i { font-style: normal; font-size: 5.4cqw; font-weight: 600; letter-spacing: 0.04em; }
.ix-msg--a { background: linear-gradient(150deg, #3a1f12, #8a4a22 55%, #d98a3c); }
.ix-msg--b { background: linear-gradient(150deg, #071b45, #1453b8 60%, #38b6ff); }
.ix-msg--b i { color: #ffd27a; }
.ix-msg--c { background: linear-gradient(150deg, #2a0d3a, #6a1d6a 55%, #ff9900); }
.ix-tall .ix-msg b { font-size: 21cqw; }
.ix-tall .ix-msg i { font-size: 10cqw; }

/* The line of light from the laptop to the screens, and the tags that ride it. */
.ix-svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.ix-ray { fill: none; stroke: #9fdcff; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0.9;
  filter: drop-shadow(0 0 6px rgba(56, 182, 255, 0.95)) drop-shadow(0 0 16px rgba(56, 182, 255, 0.6)); transition: stroke-dashoffset 1.6s cubic-bezier(0.45, 0, 0.2, 1), opacity 0.8s ease; }
.ix-ray.thin { stroke-width: 1.6; opacity: 0.6; }
.ix-ray.on { stroke-dashoffset: 0; }
.ix-ray.gone { opacity: 0; }
.ix-pulse { fill: #fff; filter: drop-shadow(0 0 8px #38b6ff) drop-shadow(0 0 20px #38b6ff); opacity: 0; }
.ix-tag { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 10px; padding: 9px 18px 9px 10px; border-radius: 99px; white-space: nowrap;
  font: 700 22px/1 "Archivo", system-ui, sans-serif; color: #fff; background: rgba(4, 18, 48, 0.82); border: 1.5px solid rgba(127, 208, 255, 0.7);
  box-shadow: 0 0 24px rgba(56, 182, 255, 0.45); opacity: 0; transform: translate(-50%, -150%) scale(0.9); transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.ix-tag.on { opacity: 1; transform: translate(-50%, -150%) scale(1); }
.ix-tag u { text-decoration: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #38b6ff; color: #02142f; font-size: 16px; }
/* The laptop's screen, shown beside the office window while the message is designed. */
.ix-make { position: absolute; left: 236px; top: 118px; width: 260px; height: 146px; border-radius: 10px; overflow: hidden; container-type: size;
  border: 2px solid rgba(127, 208, 255, 0.75); box-shadow: 0 0 30px rgba(56, 182, 255, 0.5); background: #061331; opacity: 0; transform: scale(0.92); transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.ix-make.on { opacity: 1; transform: none; }
.ix-make .ix-msg { transition: opacity 0.35s ease, clip-path 0.9s cubic-bezier(0.45, 0, 0.2, 1); clip-path: inset(0 100% 0 0); }
.ix-make .ix-msg.on { clip-path: inset(0 0 0 0); }
.ix-make .ix-msg b, .ix-make .ix-msg i { opacity: 0; transition: opacity 0.35s ease; }
.ix-make .ix-msg.typed b, .ix-make .ix-msg.typed i { opacity: 1; }
.ix-make::after { content: ""; position: absolute; width: 7%; height: 12%; left: var(--cx, 80%); top: var(--cy, 70%); background: #fff;
  clip-path: polygon(0 0, 100% 62%, 52% 64%, 34% 100%); transition: left 0.6s ease, top 0.6s ease; filter: drop-shadow(0 1px 2px #000); }

/* Restaurant boards: breakfast, then lunch. */
.ix-menu { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr; padding: 7cqh 6cqw; gap: 4cqh; text-align: left; opacity: 0; transition: opacity 0.5s ease; }
.ix-menu.on { opacity: 1; }
.ix-menu h4 { font-size: 9cqw; font-weight: 800; color: #ffcf6a; }
.ix-menu ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 3cqh; align-content: start; }
.ix-menu li { display: flex; justify-content: space-between; font-size: 6.4cqw; font-weight: 600; }
.ix-menu li span:last-child { color: #ffcf6a; }

/* Factory board. */
.ix-kpi { display: flex; align-items: baseline; gap: 2cqw; }
.ix-kpi b { font-size: 15cqw; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.ix-kpi span { font-size: 5cqw; color: rgba(255, 255, 255, 0.7); }
.ix-bar { width: 70cqw; height: 2.6cqh; border-radius: 99px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.ix-bar i { display: block; height: 100%; width: var(--w, 88%); background: linear-gradient(90deg, #2fd18a, #5ff0ad); transition: width 0.8s ease; }
.ix .ix-safe { font-size: 4.2cqw; font-weight: 700; color: #ffc24a; }

/* City: screens as points of light, the lines into the tower, and the four jobs. */
.ix-dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 3px; background: #bfe8ff;
  box-shadow: 0 0 8px 2px rgba(56, 182, 255, 0.95), 0 0 22px 6px rgba(56, 182, 255, 0.45); opacity: 0; transform: scale(0.3);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), background 0.4s ease, box-shadow 0.4s ease; }
.ix-dot.on { opacity: 1; transform: none; }
.ix-dot::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(159, 220, 255, 0.9); opacity: 0; }
.ix-city[data-job~="create"] .ix-dot.c0 { background: #ffd08a; box-shadow: 0 0 10px 3px rgba(255, 153, 0, 0.95), 0 0 26px 8px rgba(255, 153, 0, 0.45); }
.ix-city[data-job~="create"] .ix-dot.c0::after { animation: ix-ping 1.2s ease-out 2; border-color: #ffb54a; }
.ix-city[data-job~="schedule"] .ix-dot.c1 { background: #fff3c4; box-shadow: 0 0 10px 3px rgba(255, 207, 106, 0.95), 0 0 26px 8px rgba(255, 207, 106, 0.5); }
.ix-city[data-job~="schedule"] .ix-dot.c1::after { animation: ix-ping 1s ease-out 1; border-color: #ffe08a; }
.ix-city[data-job~="live"] .ix-dot.c2 { background: #c8ffe6; animation: ix-tick 0.5s steps(2) 6; box-shadow: 0 0 10px 3px rgba(47, 209, 138, 0.95), 0 0 26px 8px rgba(47, 209, 138, 0.45); }
.ix-city[data-job~="manage"] .ix-dot::after { animation: ix-ping 1.1s ease-out var(--d, 0s) 1; }
.ix-city[data-glow] .ix-dot { transform: scale(1.5); }
.ix-city[data-glow] .ix-dot.c0 { background: #ffd08a; box-shadow: 0 0 12px 4px rgba(255, 153, 0, 0.95), 0 0 34px 10px rgba(255, 153, 0, 0.5); }
.ix-city[data-glow] .ix-dot.c1 { background: #fff3c4; box-shadow: 0 0 12px 4px rgba(255, 207, 106, 0.95), 0 0 34px 10px rgba(255, 207, 106, 0.5); }
.ix-city[data-glow] .ix-dot.c2 { background: #c8ffe6; box-shadow: 0 0 12px 4px rgba(47, 209, 138, 0.95), 0 0 34px 10px rgba(47, 209, 138, 0.5); }
.ix-city[data-glow] .ix-dot.c3 { background: #e4f5ff; box-shadow: 0 0 12px 4px rgba(56, 182, 255, 1), 0 0 34px 10px rgba(56, 182, 255, 0.6); }
@keyframes ix-ping { from { opacity: 1; transform: scale(0.6); } to { opacity: 0; transform: scale(3.2); } }
@keyframes ix-tick { 50% { opacity: 0.45; } }
.ix-city .ix-ray { stroke-width: 3; transition-duration: 1.8s; }
.ix-dots, .ix-city .ix-svg { transition: opacity 1.4s ease; }
.ix-city.fall .ix-bg { opacity: 0; transition: opacity 1.9s ease; }
.ix-city.fall .ix-dots, .ix-city.fall .ix-svg { opacity: 0; }
.ix-city.fall .ix-bb { opacity: 0; transition: opacity 1s ease 1.5s; }

.ix-logo { height: 13cqh; width: auto; display: block; }
.ix-jobs { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqh 3cqw; width: 88cqw; }
.ix-jobs > div { display: flex; align-items: center; gap: 2cqw; padding: 3.4cqh 3cqw; border-radius: 2cqw; text-align: left;
  background: rgba(56, 182, 255, 0.14); border: 0.25cqw solid rgba(127, 208, 255, 0.45); font-size: 4.8cqw; font-weight: 700;
  opacity: 0; transform: translateY(2cqh); transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), background 0.5s ease; }
.ix-jobs > div.in { opacity: 1; transform: none; }
.ix-jobs > div.now { background: rgba(56, 182, 255, 0.34); }
.ix-jobs u { text-decoration: none; flex: none; width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: var(--c, #38b6ff); box-shadow: 0 0 2cqw var(--c, #38b6ff); }
.ix-logos { display: flex; align-items: center; justify-content: center; gap: 5cqw; }
.ix-logos img { display: block; height: 7cqh; width: auto; }
.ix-logos .white { filter: brightness(0) invert(1); }
.ix-logos i { width: 0.2cqw; height: 8cqh; background: rgba(255, 255, 255, 0.3); }

@media (prefers-reduced-motion: reduce) {
  .ix-world *, .ix-world *::before, .ix-world *::after { transition-duration: 0.01s !important; animation: none !important; }
}