.stage > .ix { z-index: 20; overflow: hidden; background: #000; opacity: 0; pointer-events: none; transition: opacity .9s var(--ease-out); }
.stage > .ix.on { opacity: 1; }
.stage > .ix.gone { opacity: 0; }
.ix-frame { position: absolute; inset: 0; visibility: hidden; will-change: transform, opacity; }
.ix-frame.on { visibility: visible; }
.ix-frame.over { z-index: 2; }
.ix-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; display: block; }
.ix-scr { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; transform-origin: 0 0; overflow: hidden; background: #000; }
.ix-scr--p { width: 720px; height: 1280px; }
.ix-scr--bb { width: 1600px; height: 760px; background: #000;
  box-shadow: 0 0 120px 30px rgba(255,170,90,.28), 0 0 40px 6px rgba(120,200,255,.18); }
.ix-scr--bb img { filter: brightness(.9) saturate(1.05) contrast(1.04); }
.ix-bb-glass { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.10), transparent 30%, transparent 70%, rgba(255,255,255,.05)),
    repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 2px, transparent 2px 5px); }
.ix-scr > img, .ix-scr > video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Opening lockup: Lenovo, the title, Intel, on a dark band across the floor. */
.ix-open { position: absolute; left: 0; right: 0; bottom: 0; height: 24%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end;
  padding: 0 5% 2.6%; gap: 3vw; background: linear-gradient(to top, rgba(0,0,0,.86) 0%, rgba(0,0,0,.62) 55%, transparent);
  opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.ix.ix--logos .ix-open { opacity: 1; transform: none; }
.ix-open__lg { height: 3.2vw; width: auto; justify-self: start; margin-bottom: .5vw; filter: brightness(0) invert(1) drop-shadow(0 0 14px rgba(86,176,228,.55)); }
.ix-open__lg--intel { justify-self: end; height: 3vw; }
.ix-open__t { text-align: center; color: #fff; }
.ix-open__t h2 { font-size: clamp(36px, 5vw, 92px); font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.ix-open__t p { margin-top: .5vw; font-size: clamp(14px, 1.6vw, 28px); font-weight: 600; color: rgba(255,255,255,.78); }

/* The info card: low-opacity blue glass with a glowing edge, bottom left. */
.ix-card { position: absolute; left: 3%; bottom: 5%; z-index: 5; width: min(48%, 900px); border-radius: 12px; color: #fff;
  background: rgba(11, 34, 58, .52); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
  box-shadow: 0 0 0 1.5px rgba(124,194,236,.85), 0 0 34px rgba(86,176,228,.5), 0 30px 60px rgba(0,0,0,.45);
  opacity: 0; transform-origin: 0 100%; transition: opacity .6s var(--ease-out); }
.ix-card.on { opacity: 1; }
.ix-card__bar { display: flex; align-items: center; gap: 6px; padding: .7vw 1vw; border-bottom: 1px solid rgba(255,255,255,.14);
  font-size: clamp(11px, .95vw, 17px); font-weight: 700; letter-spacing: .02em; color: #9FD6F5; }
.ix-card__bar i { width: .5vw; height: .5vw; min-width: 6px; min-height: 6px; border-radius: 50%; background: rgba(255,255,255,.28); }
.ix-card__bar span { display: none; }
.ix-card__text { padding: 1.5vw 1.8vw 1.8vw; font-size: clamp(18px, 2.15vw, 40px); font-weight: 700; line-height: 1.22; letter-spacing: -.005em; }
.ix-card__line { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); pointer-events: none; overflow: visible; }
.ix-card__line rect { fill: none; stroke: #b9e3ff; stroke-width: 2.5; vector-effect: non-scaling-stroke; stroke-dasharray: 18 100; stroke-dashoffset: 118;
  filter: drop-shadow(0 0 6px #56b0e4); opacity: 0; }
.ix-card.trace .ix-card__line rect { animation: ixtrace 1.4s cubic-bezier(.45,.05,.3,1) .35s both; }
@keyframes ixtrace { 0% { stroke-dashoffset: 118; opacity: 1; } 85% { opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ix-card.trace .ix-card__line rect { animation: none; } }

/* The atrium wall: nine screens that switch on one by one, then carry one Lenovo logo across all of them. */
.ix-tile { position: absolute; left: 0; top: 0; width: 480px; height: 420px; transform-origin: 0 0; overflow: hidden; background: #05070c;
  opacity: 0; transition: opacity .18s ease-out; }
.ix-tile.on { opacity: 1; box-shadow: 0 0 40px 6px rgba(120,190,255,.35); }
/* Each square is a small live screen: one job signage does, set big enough to read across the hall. */
.sc { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 34px 38px;
  color: #fff; font-weight: 800; letter-spacing: -.01em; line-height: 1; }
.sc small { font-size: 26px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .82; }
.sc b { font-size: 92px; font-weight: 800; letter-spacing: -.03em; line-height: .95; }
.sc span { font-size: 28px; font-weight: 600; opacity: .9; }
.sc--welcome { background: linear-gradient(150deg, #123a6b, #0a1c38); }
.sc--welcome b { font-size: 78px; }
.sc--menu { background: radial-gradient(90% 80% at 80% 20%, #ff7a2a, #c4210f 70%); }
.sc--menu b { font-size: 64px; } .sc--menu i { font-style: normal; font-size: 84px; color: #ffe27a; }
.sc--board { background: #0b0d10; gap: 16px; }
.sc--board small { color: #ffd23f; opacity: 1; }
.sc--board p { margin: 0; display: flex; align-items: baseline; gap: 14px; font-size: 34px; font-weight: 700; }
.sc--board em { font-style: normal; color: #ffd23f; width: 70px; } .sc--board u { text-decoration: none; margin-left: auto; font-size: 26px; color: #7CF29A; }
.sc--board p:last-child u { color: #ff8a7a; }
.sc--serve { background: linear-gradient(160deg, #1f6fe0, #0c3d91); align-items: center; text-align: center; }
.sc--serve b { font-size: 190px; }
.sc--sales { background: #07131f; }
.sc--sales b { font-size: 120px; color: #5fe0a0; }
.sc--sales .bars { display: flex; align-items: flex-end; gap: 14px; height: 120px; }
.sc--sales .bars i { flex: 1; border-radius: 6px 6px 0 0; background: linear-gradient(#5fe0a0, #1a8f6a); }
.sc--sales .bars i:nth-child(1) { height: 35%; } .sc--sales .bars i:nth-child(2) { height: 52%; } .sc--sales .bars i:nth-child(3) { height: 46%; }
.sc--sales .bars i:nth-child(4) { height: 74%; } .sc--sales .bars i:nth-child(5) { height: 100%; }
.sc--sale { background: linear-gradient(140deg, #ffe3ec, #ffb3c9); color: #2a0d18; }
.sc--sale b { font-size: 110px; color: #d1124a; }
.sc--map { background: #f4f6f9; color: #10233d; }
.sc--map svg { width: 100%; height: 170px; }
.sc--map path { fill: none; stroke: #1f6fe0; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 14 12; }
.sc--map circle { fill: #e2231a; } .sc--map rect { fill: #1f6fe0; }
.sc--safety { background: linear-gradient(160deg, #1d8a4a, #0d5230); }
.sc--safety b { font-size: 112px; }
.sc--wait { background: linear-gradient(160deg, #0f6f78, #073f47); }
.sc--wait b { font-size: 130px; }
.ix-tile::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,.16), transparent 38%); }
.ix-wl { position: absolute; inset: 0; opacity: 0; transition: opacity .22s ease-out; display: grid; place-items: center;
  background: radial-gradient(75% 70% at 50% 50%, #ff3a2c 0%, #e2231a 50%, #a3100b 100%); }
.ix-wl img { height: auto; max-width: none; filter: drop-shadow(0 0 16px rgba(255,255,255,.75)) drop-shadow(0 0 46px rgba(255,200,190,.5)); }
.ix-tile.red .ix-wl { opacity: 1; }
.ix-tile.red { box-shadow: 0 0 60px 14px rgba(255,40,30,.55); }
.ix-man { position: absolute; left: 45.2083%; top: 71.4815%; width: 2.7083%; height: auto; z-index: 1; pointer-events: none; }
.ix-open { z-index: 2; }
/* When the wall turns red the hall changes with it: the same picture lit red, floor reflections included. */
.ix-bg--red { opacity: 0; transition: opacity .6s ease .15s; }
.ix.ix--red .ix-bg--red { opacity: 1; }
/* While the camera pushes into the wall, the glows switch off so every frame stays cheap to draw. */
.ix.ix--moving .ix-tile, .ix.ix--moving .ix-tile.red { box-shadow: none; }
.ix.ix--moving .ix-wl img { filter: none; }
.ix.ix--moving .ix-open { display: none; }
/* Intel stays in the bottom right corner for the whole introduction. */
.ix-intel { position: absolute; right: 3%; bottom: 5%; z-index: 6; height: clamp(26px, 3vw, 54px); width: auto;
  filter: brightness(0) invert(1) drop-shadow(0 2px 14px rgba(0,0,0,.6)); opacity: 0; transition: opacity .9s var(--ease-out); }
.ix.ix--lit .ix-intel { opacity: 1; }
/* The Times Square billboard: a travel campaign laid over its photograph. */
.ix-ad { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 0 6%;
  color: #fff; background: linear-gradient(90deg, rgba(4,20,40,.72) 0%, rgba(4,20,40,.35) 42%, transparent 62%); }
.ix-ad p { margin: 0; }
.ix-ad__brand { font-size: 46px; font-weight: 800; letter-spacing: .32em; }
.ix-ad__brand span { display: block; margin-top: 6px; font-size: 22px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; opacity: .85; }
.ix-ad__h { font-size: 116px; font-weight: 800; line-height: .95; letter-spacing: -.03em; text-shadow: 0 4px 30px rgba(0,0,0,.35); }
.ix-ad__offer { font-size: 34px; font-weight: 600; }
.ix-ad__offer b { display: block; font-size: 70px; font-weight: 800; color: #ffd36b; letter-spacing: -.02em; }
.ix-ad__cta { align-self: flex-start; padding: 14px 34px; border-radius: 999px; background: #ffd36b; color: #0b2340; font-size: 30px; font-weight: 800; }