.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: 1500px; height: 800px; }
.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); }
.ix-tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.15) brightness(1.08); }
.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; }