/* Lenovo Hardware chapter. Everything inside .hw-world is laid out in stage units (2688 x 1520)
   and scaled to the stage, so screen quads, lines and type stay locked to the art. */
.stage > .hw { z-index: 40; overflow: hidden; background: #000; opacity: 0; pointer-events: none; transition: opacity 0.7s var(--ease-out); }
.stage > .hw.on { opacity: 1; pointer-events: auto; }
.hw-world { position: absolute; left: 0; top: 0; width: 2688px; height: 1520px; transform-origin: 0 0; overflow: hidden;
  --red: #e2231a; --glow: 120, 190, 255; font-family: "Archivo", system-ui, sans-serif; color: #fff; }
.hw-world > * { position: absolute; }

.hw-still { inset: 0; width: 100%; height: 100%; opacity: 0; }
.hw-still.on { opacity: 1; }
.hw-clip { inset: 0; width: 100%; height: 100%; object-fit: fill; opacity: 0; z-index: 5; }
.hw-clip.on { opacity: 1; }
.hw-black { inset: 0; background: #000; opacity: 0; z-index: 30; transition: opacity 0.45s var(--ease-out); pointer-events: none; }
.hw-black.on { opacity: 1; }

/* Overlays fade with the step; anything marked data-on is an overlay. */
[data-on] { opacity: 0; transition: opacity 0.6s var(--ease-out); z-index: 10; pointer-events: none; }
[data-on].on { opacity: 1; }

/* Screens: flat boards mapped onto measured corners. */
.hw-scr { left: 0; top: 0; transform-origin: 0 0; overflow: hidden; background: #050913; }
.hw-scr .sl { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; text-align: center; padding: 6%; }
.hw-world .sl2 { opacity: 0; }
.hw-world .on .sl2 { animation: hwSwap var(--t, 7s) var(--d, 0s) infinite; }
.hw-world .on .sl:not(.sl2) > div { animation: hwSwapA var(--t, 7s) var(--d, 0s) infinite; }
/* The first slide's words leave before the second slide arrives, and come back only once it has gone,
   so two headlines never share the screen. */
@keyframes hwSwap { 0%, 43% { opacity: 0; } 47%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes hwSwapA { 0%, 40% { opacity: 1; } 43%, 97% { opacity: 0; } 100% { opacity: 1; } }
.sig { background: radial-gradient(120% 140% at 80% 20%, var(--c1), transparent 60%), linear-gradient(135deg, var(--c2), var(--c3)); }
.sig b { display: block; font-weight: 800; letter-spacing: -0.01em; line-height: 0.95; font-size: var(--fs, 150px); }
.sig i { display: block; font-style: normal; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; font-size: calc(var(--fs, 150px) * 0.22); margin-top: 0.9em; opacity: 0.85; }
.sig em { display: block; font-style: normal; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; font-size: calc(var(--fs, 150px) * 0.2); margin-bottom: 0.8em; color: var(--ac, #ffd9a0); }
.sig--warm { --c1: rgba(255, 170, 90, 0.55); --c2: #3a1a10; --c3: #120807; }
.sig--rose { --c1: rgba(255, 120, 140, 0.5); --c2: #3a0f22; --c3: #0d0610; --ac: #ffc2d0; }
.sig--teal { --c1: rgba(70, 220, 200, 0.45); --c2: #08303a; --c3: #04101a; --ac: #b8fff2; }
.sig--blue { --c1: rgba(90, 160, 255, 0.55); --c2: #0b2350; --c3: #040a1c; --ac: #bcd8ff; }
.sig--gold { --c1: rgba(255, 210, 110, 0.5); --c2: #3a2b0a; --c3: #100c04; --ac: #ffe7a8; }
.sig--ink  { --c1: rgba(226, 35, 26, 0.45); --c2: #1d0b0b; --c3: #070707; --ac: #ff9b95; }
.hw-span { position: absolute; background: url("content-wall.webp") center / cover; transform: scale(1.04) translateX(-1%); }
.on > .hw-span { animation: hwDrift 22s ease-in-out infinite alternate; }
.hw-span::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%) no-repeat;
  background-size: 300% 100%; background-position: 150% 0; }
.on > .hw-span::after { animation: hwSweep 1.6s var(--ease-out) 0.2s 1 both; }
@keyframes hwDrift { from { transform: scale(1.04) translateX(-1%); } to { transform: scale(1.12) translateX(1.5%); } }
@keyframes hwSweep { from { background-position: 150% 0; } to { background-position: -50% 0; } }

/* Type lockups: always in a container, centred. */
.hw-lock { text-align: center; padding: 34px 64px 40px; border-radius: 28px; background: rgba(4, 6, 12, 0.55); backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.08); translate: 0 24px; transition: opacity 0.7s var(--ease-out), translate 0.9s var(--ease-out); }
.hw-lock.on { translate: 0 0; }
.hw-lock--c { left: 50%; width: max-content; translate: -50% 24px; }
.hw-lock--c.on { translate: -50% 0; }
.hw-lock p { margin: 0; }
.hw-eyebrow { font-size: 30px; font-weight: 700; letter-spacing: 0.34em; text-transform: uppercase; color: var(--red); }
.hw-eyebrow::after { content: ""; display: block; width: 72px; height: 3px; margin: 22px auto 0; background: var(--red); }
.hw-h { font-size: 76px; font-weight: 800; letter-spacing: 0.01em; line-height: 1.02; text-transform: uppercase; margin-top: 22px !important; }
.hw-h small { font-size: 0.82em; font-weight: 800; text-transform: none; }
.hw-sub { font-size: 36px; font-weight: 500; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.78); margin-top: 18px !important; }
.hw-chip { padding: 16px 30px; border-radius: 999px; background: rgba(6, 10, 20, 0.78); border: 1px solid rgba(var(--glow), 0.45);
  box-shadow: 0 0 40px rgba(var(--glow), 0.25); font-size: 32px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; translate: -50% -50%; }
.hw-chip span { display: block; font-size: 22px; font-weight: 500; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.65); margin-top: 4px; text-align: center; }

/* Connection lines: drawn in, then a light travels along them. */
.hw-svg { inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 10px rgba(var(--glow), 0.8)); }
.hw-line { fill: none; stroke: rgba(var(--glow), 0.9); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.2s var(--ease-out); }
.on > .hw-line, .hw-line.on { stroke-dashoffset: 0; }
.hw-flow { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 0.03 0.14; opacity: 0; transition: opacity 0.6s linear 1s; }
.on > .hw-flow { opacity: 0.9; animation: hwFlow 2.4s linear infinite; }
.hw-flow--red { stroke: var(--red); }
.hw-svg .hw-quiet { stroke: rgba(255, 255, 255, 0.35); stroke-width: 3; }
@keyframes hwFlow { to { stroke-dashoffset: -0.17; } }
.hw-wifi path { fill: none; stroke: rgba(var(--glow), 0.9); stroke-width: 5; stroke-linecap: round; opacity: 0; }
.on .hw-wifi path { animation: hwWave 2.4s ease-out infinite; }
.on .hw-wifi path:nth-child(2) { animation-delay: 0.3s; }
.on .hw-wifi path:nth-child(3) { animation-delay: 0.6s; }
@keyframes hwWave { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }

/* The display the HDMI feeds in the exploded view. */
.hw-display { border: 6px solid #1a1d24; border-radius: 10px; background: #050913; box-shadow: 0 0 0 1px rgba(var(--glow), 0.5), 0 0 80px rgba(var(--glow), 0.25);
  overflow: hidden; transform: perspective(1800px) rotateY(18deg); }
.hw-display .sl { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }

/* L Squared Hub node. */
.hw-hub { width: 420px; height: 420px; translate: -50% -50%; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(10, 30, 60, 0.95) 62%, rgba(var(--glow), 0.25) 80%, transparent);
  box-shadow: 0 0 0 2px rgba(var(--glow), 0.6), 0 0 120px rgba(var(--glow), 0.45); }
.hw-hub img { width: 70%; }
.hw-hub::before, .hw-hub::after { content: ""; position: absolute; inset: -40px; border-radius: 50%; border: 2px solid rgba(var(--glow), 0.5); animation: hwRing 3s ease-out infinite; }
.hw-hub::after { animation-delay: 1.5s; }
.hw-hub p { position: absolute; top: calc(100% + 34px); left: 50%; translate: -50% 0; white-space: nowrap; font-size: 34px; font-weight: 700; letter-spacing: 0.06em; }
@keyframes hwRing { from { scale: 0.8; opacity: 0.9; } to { scale: 1.35; opacity: 0; } }
.hw-hub--sm { width: 300px; height: 300px; }
.hw-hub--sm p { font-size: 28px; top: calc(100% + 24px); }

/* Device glow behind the display, and the X-ray. */
.hw-halo { width: 700px; height: 700px; translate: -50% -50%; border-radius: 50%; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(var(--glow), 0.35), rgba(var(--glow), 0.08) 60%, transparent); animation: hwBreath 3s ease-in-out infinite; }
@keyframes hwBreath { 50% { scale: 1.08; opacity: 0.75; } }
.hw-xray { background: rgba(3, 8, 20, 0.88); clip-path: circle(0% at 50% 50%); transition: clip-path 1.4s var(--ease-out), opacity 0.4s linear; }
.hw-xray.on { clip-path: circle(75% at 50% 50%); }
.hw-xray::before { content: ""; position: absolute; inset: 0; background:
  linear-gradient(rgba(var(--glow), 0.05) 2px, transparent 2px) 0 0 / 100% 60px,
  linear-gradient(90deg, rgba(var(--glow), 0.05) 2px, transparent 2px) 0 0 / 60px 100%; }
.hw-xray::after { content: ""; position: absolute; left: 0; right: 0; height: 18%; background: linear-gradient(transparent, rgba(var(--glow), 0.35), transparent); animation: hwScan 2.8s linear infinite; }
@keyframes hwScan { from { top: -18%; } to { top: 100%; } }
.hw-xray img { position: absolute; left: 50%; top: 50%; width: 64%; translate: -50% -50%; mix-blend-mode: screen; filter: brightness(1.6) saturate(0.6) drop-shadow(0 0 30px rgba(var(--glow), 0.7)); }
.hw-list { width: 720px; padding: 44px 50px 48px; border-radius: 28px; background: rgba(4, 6, 12, 0.72); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.1); }
.hw-list h3 { margin: 0; font-size: 50px; font-weight: 800; line-height: 1.05; }
.hw-list h3 small { display: block; font-size: 30px; font-weight: 600; text-transform: none; color: rgba(255, 255, 255, 0.75); margin-top: 12px; letter-spacing: 0.02em; }
.hw-list ul { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 22px; }
.hw-list li { display: flex; gap: 22px; align-items: baseline; font-size: 31px; font-weight: 600; line-height: 1.25; opacity: 0; translate: 16px 0; transition: opacity 0.5s var(--ease-out), translate 0.5s var(--ease-out); }
.hw-list li::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--red); translate: 0 -4px; }
.hw-list.on li { opacity: 1; translate: 0 0; }
.hw-list.on li:nth-child(2) { transition-delay: 0.15s; }
.hw-list.on li:nth-child(3) { transition-delay: 0.3s; }
.hw-list.on li:nth-child(4) { transition-delay: 0.45s; }

/* Device labels side by side. */
.hw-tag { text-align: center; translate: -50% 0; }
.hw-tag b { display: block; font-size: 60px; font-weight: 800; letter-spacing: 0.02em; }
.hw-tag b::after { content: ""; display: block; width: 56px; height: 3px; margin: 20px auto; background: var(--red); }
.hw-tag span { display: block; font-size: 34px; font-weight: 500; color: rgba(255, 255, 255, 0.8); }

/* Flow strip at the top of the complete solution. */
.hw-flowline { left: 50%; top: 70px; translate: -50% 0; display: flex; gap: 28px; align-items: center; padding: 18px 40px; border-radius: 999px;
  background: rgba(4, 6, 12, 0.7); border: 1px solid rgba(255, 255, 255, 0.1); font-size: 30px; font-weight: 700; letter-spacing: 0.16em; white-space: nowrap; }
.hw-flowline i { font-style: normal; color: var(--red); }
.hw-stmt { left: 50%; bottom: 60px; translate: -50% 0; text-align: center; padding: 26px 70px 30px; border-radius: 28px; background: rgba(4, 6, 12, 0.6);
  backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08); }
.hw-stmt p { margin: 0; font-size: 64px; font-weight: 800; line-height: 1.12; text-transform: uppercase; white-space: nowrap; }
.hw-stmt p + p { color: rgba(var(--glow), 1); }

/* Portals into the industries. */
.hw-portal { width: 560px; height: 800px; border-radius: 28px; overflow: hidden; background: #000; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 30px 90px rgba(0, 0, 0, 0.7);
  transform-origin: 0 0; transition: opacity 0.6s var(--ease-out), transform 1.2s var(--ease-out); }
.hw-portal img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: hwPortal 14s ease-in-out infinite alternate; }
.hw-portal::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 50%, rgba(0, 0, 0, 0.85)); }
.hw-portal p { position: absolute; z-index: 1; left: 0; right: 0; bottom: 54px; margin: 0; text-align: center; font-size: 38px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.hw-portal p::before { content: ""; display: block; width: 56px; height: 3px; margin: 0 auto 22px; background: var(--red); }
@keyframes hwPortal { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.14) translate(-2%, -1%); } }
.hw-portals-bg { inset: 0; background: rgba(0, 0, 0, 0.82); }

@media (prefers-reduced-motion: reduce) {
  .hw-world *, .hw-world *::before, .hw-world *::after { animation: none !important; }
  .hw-world .sl2 { opacity: 0; }
}

/* Chapter bar: shows where the talk is; appears when the pointer nears the top. */
.chapters { position: fixed; z-index: 60; top: 14px; left: 50%; translate: -50% 0; display: flex; gap: 4px; padding: 6px; border-radius: 999px;
  background: rgba(4, 8, 18, 0.72); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.12); font: 600 13px/1 "Archivo", system-ui, sans-serif;
  opacity: 0; transition: opacity 0.4s var(--ease-out); }
.chapters.show { opacity: 1; }
.chapters button { all: unset; cursor: pointer; padding: 8px 14px; border-radius: 999px; color: rgba(255, 255, 255, 0.62); letter-spacing: 0.04em; white-space: nowrap; }
.chapters button:disabled { cursor: default; color: rgba(255, 255, 255, 0.28); }
.chapters button:not(:disabled):hover { color: #fff; }
.chapters button.cur { background: #fff; color: #00122d; }
.chapters button:focus-visible { outline: 2px solid #7fc0ff; outline-offset: 2px; }