:root {
  /* compliance tokens: Interprets PZZ.lu as a pneumatic chrome luggage capsule with zipper hardware; Space Grotesk** Grotesk* for functional microcopy */
  --terminal-black: #090A12;
  --liquid-chrome: #D8E4F2;
  --oil-violet: #6B4CFF;
  --cabin-lavender: #B7A6FF;
  --customs-lime: #B8FF2C;
  --tag-peach: #FFB28A;
  --xray-cyan: #58E8FF;
  --passport-ink: #1C274C;
  --scene: 0;
  --pointer-x: .5;
  --pointer-y: .5;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100%;
  color: var(--liquid-chrome);
  background: var(--terminal-black);
  font-family: "Space Grotesk", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at calc(var(--pointer-x) * 100%) calc(var(--pointer-y) * 100%), rgba(88, 232, 255, .12), transparent 22rem),
    radial-gradient(ellipse at 18% 88%, rgba(107, 76, 255, .24), transparent 44rem),
    radial-gradient(ellipse at 82% 8%, rgba(183, 166, 255, .13), transparent 36rem),
    linear-gradient(180deg, #090A12 0%, #0d1021 58%, #090A12 100%);
  pointer-events: none;
  z-index: -3;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: repeating-linear-gradient(116deg, rgba(216, 228, 242, .035) 0 1px, transparent 1px 54px);
  opacity: .7;
  pointer-events: none;
  z-index: -2;
}

.zip-story { min-height: 500vh; position: relative; }
.terminal-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  isolation: isolate;
}

.runway-grid {
  position: absolute;
  inset: -28%;
  transform: rotate(-19deg) translateY(calc(var(--scene) * -18px));
  background:
    linear-gradient(90deg, transparent 0 46%, rgba(88, 232, 255, .16) 46.4% 46.7%, transparent 47% 100%),
    repeating-linear-gradient(90deg, rgba(216, 228, 242, .055) 0 1px, transparent 1px 82px),
    repeating-linear-gradient(0deg, rgba(216, 228, 242, .035) 0 1px, transparent 1px 82px);
  opacity: .72;
  z-index: -1;
}

.route-map { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .55; z-index: 0; }
.route { fill: none; stroke-width: 2; stroke-dasharray: 10 18; filter: drop-shadow(0 0 8px rgba(88, 232, 255, .35)); }
.route-one { stroke: var(--xray-cyan); }
.route-two { stroke: var(--cabin-lavender); stroke-dashoffset: calc(var(--scene) * -42px); }
.route-three { stroke: var(--tag-peach); stroke-width: 1.2; stroke-dasharray: 3 17; }

.floor-dots {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle, rgba(216, 228, 242, .26) 0 2px, transparent 2.5px) 0 0 / 86px 86px;
  mask-image: linear-gradient(30deg, transparent 0 16%, #000 40%, transparent 88%);
  opacity: .35;
}

.claim-lights {
  position: fixed;
  left: 50%;
  bottom: 1.15rem;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  gap: .75rem;
  padding: .55rem .8rem;
  border: 1px solid rgba(216, 228, 242, .16);
  border-radius: 999px;
  background: rgba(9, 10, 18, .66);
  box-shadow: inset 0 0 18px rgba(88, 232, 255, .08), 0 18px 48px rgba(0, 0, 0, .5);
  backdrop-filter: blur(12px);
}

.claim-lights button {
  width: .9rem;
  height: .9rem;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: radial-gradient(circle at 35% 30%, var(--liquid-chrome), var(--passport-ink) 58%, #05060c 100%);
  box-shadow: 0 0 0 1px rgba(216, 228, 242, .28), inset -3px -3px 7px rgba(0, 0, 0, .55);
  cursor: pointer;
  position: relative;
}

.claim-lights button span {
  position: absolute;
  left: 50%;
  bottom: 1.35rem;
  transform: translateX(-50%) translateY(5px);
  white-space: nowrap;
  color: var(--liquid-chrome);
  font: 700 .56rem/1 "Azeret Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
}

.claim-lights button:hover span, .claim-lights button.is-active span { opacity: 1; transform: translateX(-50%) translateY(0); }
.claim-lights button.is-active { background: radial-gradient(circle at 34% 26%, #ffffff, var(--customs-lime) 38%, #5f8b14 100%); box-shadow: 0 0 18px rgba(184, 255, 44, .8), 0 0 0 3px rgba(184, 255, 44, .18); }

.scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity .65s ease, transform .65s cubic-bezier(.2, .9, .25, 1);
  pointer-events: none;
  z-index: 5;
}
.scene.is-active { opacity: 1; transform: translateY(0); }

.scene-label {
  position: absolute;
  max-width: 31rem;
  padding: 1.05rem 1.2rem 1.15rem;
  color: var(--passport-ink);
  background: linear-gradient(135deg, rgba(216, 228, 242, .78), rgba(183, 166, 255, .34));
  border: 1px solid rgba(216, 228, 242, .68);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.34), 0 20px 60px rgba(0,0,0,.34);
  clip-path: polygon(0 0, calc(100% - 1.2rem) 0, 100% 1.2rem, 100% 100%, 1.2rem 100%, 0 calc(100% - 1.2rem));
  backdrop-filter: blur(10px) saturate(1.4);
}

.label-main { left: 5vw; top: 7vh; transform: rotate(-4deg); }
.label-left { left: 6vw; top: 23vh; transform: rotate(-3deg); }
.label-right { right: 6vw; top: 16vh; transform: rotate(3deg); }
.label-final { right: 7vw; bottom: 17vh; transform: rotate(2deg); }
.sticker-peach { background: linear-gradient(135deg, rgba(255, 178, 138, .82), rgba(216, 228, 242, .28)); }
.sticker-lavender { background: linear-gradient(135deg, rgba(183, 166, 255, .82), rgba(216, 228, 242, .24)); }
.sticker-cyan { background: linear-gradient(135deg, rgba(88, 232, 255, .74), rgba(216, 228, 242, .22)); }

.scene-label b, .boarding-stub span, .inspection, .lu-tag small {
  font-family: "Azeret Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.scene-label b { font-size: .72rem; color: var(--passport-ink); }
.scene-label h1, .scene-label h2 {
  margin: .2rem 0 .45rem;
  font-family: "Syncopate", "Space Grotesk", "Inter", system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: .86;
}
.scene-label h1 { font-size: clamp(3.9rem, 9vw, 9.5rem); color: var(--liquid-chrome); text-shadow: 0 1px 0 #fff, 0 0 22px rgba(88, 232, 255, .5), -2px 3px 0 var(--passport-ink); }
.scene-label h2 { font-size: clamp(2rem, 5vw, 5.5rem); color: var(--passport-ink); }
.scene-label p { margin: 0; font: 500 clamp(1rem, 1.45vw, 1.25rem)/1.28 "Instrument Serif", Georgia, serif; color: rgba(28, 39, 76, .88); }

.capsule-wrap {
  position: absolute;
  left: calc(33% + var(--scene) * 6%);
  top: calc(58% - var(--scene) * 5%);
  width: min(1120px, 112vw);
  aspect-ratio: 2.05;
  transform: translate(-50%, -50%) rotate(calc(-11deg + var(--scene) * 5deg)) rotateX(calc((var(--pointer-y) - .5) * -8deg)) rotateY(calc((var(--pointer-x) - .5) * 10deg));
  transform-style: preserve-3d;
  transition: left .9s cubic-bezier(.2,.9,.18,1), top .9s cubic-bezier(.2,.9,.18,1), transform .28s ease-out;
  z-index: 3;
}

.capsule-shadow { position: absolute; inset: 72% 8% 6%; border-radius: 50%; background: radial-gradient(ellipse, rgba(0,0,0,.85), transparent 68%); filter: blur(18px); transform: translateZ(-80px); }

.chrome-capsule {
  position: absolute;
  inset: 3% 0 10%;
  border-radius: 45% 55% 50% 50% / 52% 50% 47% 48%;
  overflow: visible;
  background:
    radial-gradient(circle at 18% 24%, rgba(255,255,255,.96) 0 5%, transparent 14%),
    radial-gradient(ellipse at 72% 20%, rgba(88,232,255,.48), transparent 22%),
    radial-gradient(ellipse at 38% 88%, rgba(183,166,255,.58), transparent 34%),
    linear-gradient(112deg, #eef7ff 0%, #8c9cc6 10%, #D8E4F2 17%, #465280 28%, #f8fbff 38%, #B7A6FF 49%, #1C274C 66%, #D8E4F2 78%, #6B4CFF 100%);
  border: clamp(.7rem, 1.2vw, 1.1rem) solid rgba(216, 228, 242, .8);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.38), inset -44px -52px 80px rgba(9,10,18,.5), inset 52px 42px 95px rgba(255,255,255,.45), 0 35px 95px rgba(0,0,0,.62), 0 0 38px rgba(88,232,255,.17);
  transform: scale(calc(.94 + var(--scene) * .025));
  transition: transform .85s cubic-bezier(.2, .9, .2, 1), border-radius .85s ease, filter .85s ease;
}

.chrome-capsule::before {
  content: "";
  position: absolute;
  inset: 8% 5%;
  border-radius: inherit;
  background: repeating-linear-gradient(96deg, rgba(255,255,255,.2) 0 2px, transparent 2px 42px);
  mix-blend-mode: screen;
  opacity: .55;
}
.chrome-capsule::after {
  content: "PNEUMATIC ZIP CAPSULE · PZZ.LU · DO NOT WAKE BEFORE CUSTOMS";
  position: absolute;
  left: 9%;
  bottom: 12%;
  color: rgba(28, 39, 76, .72);
  font: 800 .7rem/1 "Azeret Mono", ui-monospace, monospace;
  letter-spacing: .16em;
}

.reflection { position: absolute; inset: -15% auto; width: 17%; transform: skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.8), rgba(88,232,255,.45), transparent); filter: blur(10px); opacity: .6; animation: chromeSlide 7s ease-in-out infinite; pointer-events: none; }
.band-one { left: 10%; animation-delay: -1s; }
.band-two { left: 45%; width: 11%; animation-delay: -3s; }
.band-three { left: 75%; width: 20%; animation-delay: -5s; }

.pillow { position: absolute; border-radius: 50%; background: radial-gradient(ellipse at 30% 25%, rgba(255,255,255,.62), rgba(183,166,255,.26) 34%, rgba(28,39,76,.18) 70%, transparent); box-shadow: inset -18px -20px 38px rgba(28,39,76,.24); opacity: .72; transition: transform .8s ease; }
.pillow-a { width: 34%; height: 66%; left: 4%; top: 13%; }
.pillow-b { width: 31%; height: 58%; left: 34%; top: 18%; }
.pillow-c { width: 32%; height: 63%; right: 5%; top: 13%; }

.capsule-ribs, .skeleton-lines { position: absolute; inset: 18% 9%; border-radius: 45%; opacity: .42; }
.capsule-ribs { background: repeating-linear-gradient(90deg, transparent 0 8%, rgba(28,39,76,.3) 8.2% 8.45%, transparent 8.7% 16%); }
.skeleton-lines { opacity: 0; transition: opacity .7s ease; z-index: 8; }
.skeleton-lines i { position: absolute; left: 5%; right: 5%; height: 2px; background: var(--xray-cyan); box-shadow: 0 0 16px var(--xray-cyan); }
.skeleton-lines i:nth-child(1){ top: 18%; transform: rotate(6deg); } .skeleton-lines i:nth-child(2){ top: 34%; transform: rotate(-4deg); } .skeleton-lines i:nth-child(3){ top: 50%; } .skeleton-lines i:nth-child(4){ top: 66%; transform: rotate(4deg); } .skeleton-lines i:nth-child(5){ top: 82%; transform: rotate(-6deg); }

.word-hardware { position: absolute; left: 13%; top: 21%; width: 68%; height: 48%; display: flex; align-items: center; gap: 2.6%; z-index: 9; }
.letter { position: relative; width: 31%; height: 100%; display: grid; place-items: center; color: var(--terminal-black); text-shadow: 0 1px 0 #fff, 0 0 18px rgba(88,232,255,.55); background: linear-gradient(145deg, #ffffff, #9eabc2 18%, #D8E4F2 28%, #495779 46%, #ffffff 58%, #B7A6FF 72%, #1C274C); border: 2px solid rgba(255,255,255,.78); box-shadow: inset 0 0 0 3px rgba(28,39,76,.2), inset -18px -15px 30px rgba(9,10,18,.35), 0 18px 38px rgba(9,10,18,.34); transition: transform .8s cubic-bezier(.2,1.4,.28,1), filter .8s ease; clip-path: polygon(8% 0, 88% 0, 100% 16%, 90% 100%, 5% 100%, 0 18%); }
.letter span { font: 900 clamp(5rem, 15vw, 13rem)/.8 "Syncopate", "Space Grotesk", system-ui, sans-serif; letter-spacing: -.08em; }
.letter i { position: absolute; inset: 13%; border: 2px solid rgba(88,232,255,.35); border-radius: 50%; opacity: .65; }
.zip-z i { border-radius: 0; clip-path: polygon(0 0,100% 0,22% 47%,100% 47%,100% 100%,0 100%,78% 53%,0 53%); background: repeating-linear-gradient(135deg, transparent 0 11px, rgba(184,255,44,.55) 11px 15px, transparent 15px 26px); }
.valve-p { transform: translateY(8%) rotate(-5deg); }
.z-one { transform: translateY(-5%) rotate(4deg); }
.z-two { transform: translateY(7%) rotate(-3deg); }

.zipper-rail { position: absolute; z-index: 10; display: grid; grid-template-columns: repeat(10, 1fr); gap: .45rem; width: 52%; left: 25%; height: 1.4rem; transition: transform .75s cubic-bezier(.2,.9,.22,1); }
.rail-one { top: 18%; transform: translateX(-18%) rotate(-3deg); }
.rail-two { bottom: 22%; transform: translateX(18%) rotate(2deg); }
.zipper-rail span { background: linear-gradient(135deg, var(--liquid-chrome), var(--customs-lime) 40%, var(--passport-ink)); clip-path: polygon(0 0,100% 12%,78% 100%,8% 88%); box-shadow: 0 0 10px rgba(184,255,44,.25); }

.scanner-rivet { position: absolute; right: 16%; top: 45%; width: clamp(3.2rem, 7vw, 5.5rem); aspect-ratio: 1; border: 0; border-radius: 50%; padding: 0; z-index: 14; cursor: pointer; background: radial-gradient(circle at 34% 28%, #ffffff 0 10%, var(--xray-cyan) 11% 27%, var(--liquid-chrome) 28% 48%, var(--passport-ink) 70%); box-shadow: inset -9px -10px 20px rgba(9,10,18,.55), 0 0 0 5px rgba(216,228,242,.18), 0 0 26px rgba(88,232,255,.48); }
.scanner-rivet span { position: absolute; inset: 34%; border-radius: 50%; background: var(--customs-lime); box-shadow: 0 0 18px var(--customs-lime); opacity: .45; }
.lime-seam { position: absolute; left: 22%; right: 21%; top: 51%; height: 5px; border-radius: 99px; background: var(--customs-lime); box-shadow: 0 0 24px var(--customs-lime), 0 0 55px rgba(184,255,44,.7); transform: scaleX(.04); transform-origin: center; opacity: .12; transition: transform .9s ease, opacity .9s ease; z-index: 12; }

.inspection { position: absolute; z-index: 13; padding: .55rem .72rem; color: var(--passport-ink); border: 1px solid rgba(28,39,76,.3); box-shadow: 0 10px 25px rgba(0,0,0,.18); font-size: .68rem; transform: translateY(22px) rotate(-4deg); opacity: 0; transition: transform .7s cubic-bezier(.2,1.2,.24,1), opacity .7s ease; }
.sticker-one { left: 12%; top: 62%; background: rgba(255,178,138,.75); }
.sticker-two { left: 47%; top: 11%; background: rgba(183,166,255,.76); transform: translateY(22px) rotate(4deg); }
.sticker-three { right: 18%; bottom: 16%; background: rgba(88,232,255,.72); }
.customs-stamp { position: absolute; left: 76%; top: 21%; z-index: 13; width: 5.5rem; height: 5.5rem; display: grid; place-items: center; border: .28rem solid #FFB28A; border-radius: 50%; color: #FFB28A; font: 900 1.4rem "Syncopate", system-ui; letter-spacing: .12em; transform: rotate(18deg) scale(.3); opacity: 0; transition: transform .65s ease, opacity .65s ease; mix-blend-mode: multiply; }

.tag-string { position: absolute; right: 12%; top: 76%; width: 2px; height: 5rem; background: linear-gradient(var(--liquid-chrome), transparent); transform-origin: top; transform: rotate(-10deg); z-index: 4; }
.lu-tag { position: absolute; right: 5%; top: calc(82% + var(--scene) * -2%); width: 10rem; height: 13rem; padding: 2.2rem 1rem 1rem; color: var(--passport-ink); background: linear-gradient(145deg, rgba(255,178,138,.88), rgba(216,228,242,.45)); border: 1px solid rgba(255,255,255,.65); box-shadow: inset 0 0 0 1px rgba(255,255,255,.32), 0 24px 45px rgba(0,0,0,.35); clip-path: polygon(50% 0, 100% 18%, 100% 100%, 0 100%, 0 18%); transform-origin: 50% 0; transform: rotate(calc(-10deg + var(--pointer-x) * 8deg)); animation: tagSwing 3.8s ease-in-out infinite; z-index: 15; }
.tag-hole { position: absolute; left: 50%; top: .65rem; width: 1.25rem; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: var(--terminal-black); box-shadow: inset 0 0 0 3px rgba(216,228,242,.72); }
.lu-tag strong { display: block; font: 900 3rem/.8 "Syncopate", "Space Grotesk", sans-serif; letter-spacing: .02em; }
.lu-tag small { display: block; margin-top: 1rem; font-size: .68rem; line-height: 1.45; }

.xray-beam { position: absolute; top: -20%; bottom: -10%; left: 42%; width: 14%; background: linear-gradient(90deg, transparent, rgba(88,232,255,.12), rgba(88,232,255,.62), rgba(88,232,255,.12), transparent); filter: blur(1px); opacity: 0; transform: translateX(-240%) skewX(-12deg); z-index: 20; pointer-events: none; transition: opacity .45s ease; }
.boarding-stub { position: absolute; left: 1.3rem; bottom: 1.2rem; display: grid; gap: .25rem; color: rgba(216,228,242,.72); font-size: .62rem; letter-spacing: .1em; z-index: 8; transform: rotate(-2deg); }

body[data-scene="1"] .chrome-capsule { border-radius: 50% 48% 55% 43% / 58% 45% 54% 42%; filter: saturate(1.15); }
body[data-scene="1"] .pillow-a { transform: scale(1.09) translate(1%, -2%); } body[data-scene="1"] .pillow-b { transform: scale(1.12); } body[data-scene="1"] .pillow-c { transform: scale(1.08) translate(-1%, 2%); }
body[data-scene="1"] .sticker-one { opacity: 1; transform: translateY(0) rotate(-4deg); }

body[data-scene="2"] .rail-one, body[data-scene="2"] .rail-two { transform: translateX(0) rotate(0); }
body[data-scene="2"] .z-one, body[data-scene="2"] .z-two, body[data-scene="2"] .valve-p { transform: translateY(0) rotate(0); }
body[data-scene="2"] .sticker-one, body[data-scene="2"] .sticker-two { opacity: 1; transform: translateY(0) rotate(4deg); }
body[data-scene="2"] .sticker-one { transform: translateY(0) rotate(-4deg); }

body[data-scene="3"] .xray-beam { opacity: 1; animation: scanPass 2.2s ease-in-out infinite; }
body[data-scene="3"] .skeleton-lines { opacity: .92; }
body[data-scene="3"] .scanner-rivet { box-shadow: inset -9px -10px 20px rgba(9,10,18,.55), 0 0 0 9px rgba(88,232,255,.22), 0 0 38px rgba(88,232,255,.9); }
body[data-scene="3"] .sticker-one, body[data-scene="3"] .sticker-two, body[data-scene="3"] .sticker-three { opacity: 1; transform: translateY(0) rotate(-4deg); }
body[data-scene="3"] .sticker-two { transform: translateY(0) rotate(4deg); }
body[data-scene="3"] .customs-stamp { opacity: 1; transform: rotate(18deg) scale(1); }

body[data-scene="4"] .capsule-wrap { left: 66%; top: 43%; }
body[data-scene="4"] .chrome-capsule { transform: scale(.86) translateY(-4%); filter: saturate(1.25) brightness(1.06); }
body[data-scene="4"] .lime-seam { opacity: 1; transform: scaleX(1); }
body[data-scene="4"] .rail-one, body[data-scene="4"] .rail-two { transform: translateX(0) rotate(0); }
body[data-scene="4"] .letter { transform: translateY(0) rotate(0); }
body[data-scene="4"] .skeleton-lines { opacity: .25; }
body[data-scene="4"] .inspection, body[data-scene="4"] .customs-stamp { opacity: 1; transform: translateY(0) rotate(0); }
body[data-scene="4"] .customs-stamp { transform: rotate(18deg) scale(1); }

@keyframes chromeSlide { 0%, 100% { transform: translateX(-55%) skewX(-18deg); opacity: .18; } 48% { transform: translateX(180%) skewX(-18deg); opacity: .7; } }
@keyframes tagSwing { 0%,100% { rotate: -2deg; } 50% { rotate: 3deg; } }
@keyframes scanPass { 0% { transform: translateX(-330%) skewX(-12deg); } 55% { transform: translateX(290%) skewX(-12deg); } 100% { transform: translateX(290%) skewX(-12deg); } }

@media (max-width: 820px) {
  .capsule-wrap { width: 150vw; left: calc(24% + var(--scene) * 7%); }
  .scene-label { left: 1rem !important; right: 1rem !important; top: 1rem; bottom: auto; max-width: none; transform: rotate(-1deg); }
  .label-final { top: auto; bottom: 5rem; }
  .claim-lights { bottom: .65rem; }
  .claim-lights button span { display: none; }
  .lu-tag { width: 7rem; height: 9rem; }
  .lu-tag strong { font-size: 2rem; }
  .boarding-stub { display: none; }
}