/* Websites showcase: four full-screen "worlds" instead of cards. Each chapter has its own colours (--bg, --ink, --soft, --n2, --acc2),
   giant outline lettering, a browser + phone mockup of the real site, and floating oversized stats. showcase.js drives --p (scroll parallax), --c (cover by the next chapter)
   and --rx/--ry (pointer tilt). Only transform/opacity are animated. Decorative class names are scoped to their world (.art-rz/.art-pz/.art-kz/.art-az). */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.scene.work { padding: 0; }

/* ---------- intro ---------- */
.work-intro { padding-top: clamp(80px, 12vh, 140px); padding-bottom: clamp(56px, 9vh, 100px); min-height: 78vh; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 3; }
.live-all { display: flex; align-items: center; gap: 10px; margin: 0 0 26px; color: var(--mute); font-weight: 600; }
.live { display: inline-flex; align-items: center; gap: 7px; padding: 4px 12px 4px 10px; border-radius: 999px; background: rgba(8,6,20,.5); color: #fff; font: 800 .68rem var(--sans); letter-spacing: .14em; text-transform: uppercase; line-height: 1.5; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; animation: livep 2s infinite; flex: none; }
@keyframes livep { 70% { box-shadow: 0 0 0 7px rgba(61,220,132,0); } 100% { box-shadow: 0 0 0 0 rgba(61,220,132,0); } }
.live-all .live { background: #231913; }
.work-index { display: flex; flex-wrap: wrap; gap: 12px; }
.wi { display: inline-flex; align-items: center; gap: 12px; padding: 12px 20px 12px 16px; border-radius: 999px; text-decoration: none; font-weight: 800; font-size: 1.02rem; color: #fff; background: var(--g); box-shadow: 0 14px 34px var(--sh); transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.wi.rz { --g: linear-gradient(135deg, #6a3df0, #ff4fb8); --sh: rgba(140,60,240,.35); } .wi.pz { --g: linear-gradient(135deg, #3a12c8, #ff2e93); --sh: rgba(120,30,220,.35); }
.wi.kz { --g: linear-gradient(135deg, #ff9e2c, #ff5ea8); --sh: rgba(255,120,60,.35); } .wi.az { --g: linear-gradient(135deg, #2c3fd1, #8b3dff); --sh: rgba(70,60,220,.35); }
.wi-n { font: 700 .72rem var(--mono); opacity: .85; } .wi-d { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 3px rgba(255,255,255,.25); }
.wi:hover, .wi:focus-visible { transform: translateY(-4px) rotate(-1deg); box-shadow: 0 20px 44px var(--sh); }

/* ---------- chapters ---------- */
.chapters { position: relative; z-index: 3; }
.chapter { --p: 0; --c: 0; --rx: 0; --ry: 0; position: relative; overflow: hidden; isolation: isolate; background: var(--bg); color: var(--ink); border-radius: 48px 48px 0 0; box-shadow: 0 -26px 60px rgba(30,15,60,.28); }
.chapter::after { content: ""; position: absolute; inset: 0; z-index: 9; background: #07030f; opacity: calc(var(--c) * .5); pointer-events: none; }
.chapter.rz { --bg: linear-gradient(140deg, #34199e 0%, #7a3dff 44%, #ff4fb8 100%); --ink: #fff; --soft: rgba(255,255,255,.82); --n2: linear-gradient(90deg, #ffd0f0, #fff); --acc2: #ffc2ec; --line: rgba(255,255,255,.3); --glow: rgba(255,79,184,.55); }
.chapter.pz { --bg: linear-gradient(135deg, #10052e 0%, #4a14d9 46%, #ff2e93 100%); --ink: #fff; --soft: rgba(255,255,255,.84); --n2: linear-gradient(90deg, #7dfbff, #fff); --acc2: #7dfbff; --line: rgba(255,255,255,.3); --glow: rgba(0,229,255,.38); }
.chapter.kz { --bg: linear-gradient(135deg, #ffe066 0%, #ffa45e 48%, #ff6fa8 100%); --ink: #2a1200; --soft: rgba(42,18,0,.82); --n2: linear-gradient(90deg, #2a1200, #c2185b); --acc2: #fff3b0; --line: rgba(42,18,0,.3); --glow: rgba(255,255,255,.55); }
.chapter.az { --bg: linear-gradient(140deg, #0a1348 0%, #2c3fd1 50%, #8b3dff 100%); --ink: #fff; --soft: rgba(255,255,255,.84); --n2: linear-gradient(90deg, #b9c4ff, #fff); --acc2: #c7d0ff; --line: rgba(255,255,255,.3); --glow: rgba(139,61,255,.6); }
.chapter.kz .live { background: rgba(42,18,0,.8); }

.ch-bg { position: absolute; inset: 0; z-index: 0; }
.ch-bg::before, .ch-bg::after { content: ""; position: absolute; border-radius: 50%; will-change: transform; }
.ch-bg::before { width: 70vmax; height: 70vmax; right: -22vmax; top: -30vmax; background: radial-gradient(closest-side, rgba(255,255,255,.28), transparent); transform: translate3d(calc(var(--p) * -6vw), calc(var(--p) * 8vh), 0); }
.ch-bg::after { width: 56vmax; height: 56vmax; left: -22vmax; bottom: -26vmax; background: radial-gradient(closest-side, var(--glow, rgba(255,255,255,.18)), transparent); opacity: .7; transform: translate3d(calc(var(--p) * 8vw), calc(var(--p) * -6vh), 0); }

.ch-giant { position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column; justify-content: center; pointer-events: none; user-select: none; }
.ch-giant span { display: block; font-size: clamp(7rem, 25vw, 26rem); line-height: .8; font-weight: 800; letter-spacing: -.07em; color: transparent; -webkit-text-stroke: 2px rgba(255,255,255,.2); white-space: nowrap; will-change: transform; }
.chapter.kz .ch-giant span { -webkit-text-stroke-color: rgba(42,18,0,.14); }
.ch-giant span:nth-child(1) { margin-left: 2vw; transform: translate3d(calc(var(--p) * -14vw), 0, 0); } .ch-giant span:nth-child(2) { margin-left: 24vw; transform: translate3d(calc(var(--p) * 14vw), 0, 0); }
.flip .ch-giant span:nth-child(1) { margin-left: 14vw; } .flip .ch-giant span:nth-child(2) { margin-left: -2vw; }

.ch-in { position: relative; z-index: 3; width: min(1240px, calc(100% - 56px)); margin: 0 auto; min-height: 100svh; padding: 11vh 0 9vh; display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: clamp(24px, 4vw, 64px); align-items: center; transform: scale(calc(1 - var(--c) * .05)); transform-origin: 50% 40%; }
.flip .ch-copy { order: 2; }
.ch-meta { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
.ch-num { font: 700 .8rem var(--mono); letter-spacing: .14em; color: var(--soft); } .ch-num b { font-size: 1.25rem; color: var(--ink); }
.ch-cats { margin: 0 0 8px; font: 700 .76rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--soft); }
.ch-name { margin: .04em 0 .14em; font-size: clamp(3.2rem, 8vw, 8rem); line-height: .86; letter-spacing: -.065em; font-weight: 800; color: var(--ink); }
.ch-name span { display: block; } .ch-name span:last-child { background: var(--n2); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em; }
.ch-desc { max-width: 30em; margin: 10px 0 0; font-size: clamp(1rem, 1.45vw, 1.18rem); color: var(--soft); }
.ch-copy, .ch-stage { min-width: 0; }
.ch-feats { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; padding: 0; margin: 22px 0 0; }
.ch-feats li { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 5px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: .92rem; color: var(--ink); }
.ch-feats svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; opacity: .92; }
.ch-act { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin-top: 32px; }
.chapter .dom { font: 700 .8rem var(--mono); color: var(--soft); overflow-wrap: anywhere; }

.explore { position: relative; display: inline-flex; align-items: center; padding: 7px 7px 7px 26px; border-radius: 999px; background: #fff; color: #150a2e; text-decoration: none; font-weight: 800; font-size: 1.02rem; overflow: hidden; isolation: isolate; box-shadow: 0 14px 40px rgba(0,0,0,.28); transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.explore::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--acc2); transform: translateX(-101%); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.explore:hover::before, .explore:focus-visible::before { transform: none; }
.et { margin-right: 18px; transition: color .3s; }
.ec { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: #150a2e; color: #fff; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.ec svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.explore:hover, .explore:focus-visible { transform: translateY(-3px); box-shadow: 0 22px 50px rgba(0,0,0,.34); } .explore:hover .ec, .explore:focus-visible .ec { transform: rotate(45deg) scale(1.06); } .explore:active { transform: scale(.97); }
.explore:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.chapter.kz .explore { background: #2a1200; color: #fff; } .chapter.kz .ec { background: #fff; color: #2a1200; } .chapter.kz .explore:hover .et, .chapter.kz .explore:focus-visible .et { color: #2a1200; } .chapter.kz .explore:focus-visible { outline-color: #2a1200; }

/* ---------- stage: mockups and floating stats ---------- */
.ch-stage { position: relative; min-height: min(64vh, 560px); perspective: 1400px; }
.rig { position: relative; width: 100%; height: 100%; min-height: inherit; transform-style: preserve-3d; transform: rotateY(calc(var(--ry) * 1deg)) rotateX(calc(var(--rx) * 1deg)); transition: transform .35s ease-out; }
.browser { margin: 0; position: absolute; left: 0; top: 6%; width: 86%; border-radius: 16px; overflow: hidden; background: #1a1230; box-shadow: 0 50px 90px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.22); transform: translate3d(0, calc(var(--p) * 70px), 0) rotateY(-6deg) rotateX(2deg); will-change: transform; }
.flip .browser { left: auto; right: 0; transform: translate3d(0, calc(var(--p) * 70px), 0) rotateY(6deg) rotateX(2deg); }
.bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; background: rgba(20,12,40,.94); }
.bar i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; } .bar i:nth-child(2) { background: #febc2e; } .bar i:nth-child(3) { background: #28c840; }
.bar span { margin-left: 12px; flex: 1; min-width: 0; padding: 3px 12px; border-radius: 8px; background: rgba(255,255,255,.1); color: #d6d0ea; font: 600 .72rem var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.browser img { display: block; width: 100%; height: auto; }
.phone { margin: 0; position: absolute; right: 2%; bottom: -3%; width: 27%; aspect-ratio: 9 / 19.4; border-radius: 34px; padding: 7px; background: #0c0818; box-shadow: 0 40px 70px rgba(0,0,0,.5), 0 0 0 2px rgba(255,255,255,.2), inset 0 0 0 2px #2a2240; transform: translate3d(0, calc(var(--p) * 130px), 0) rotate(4deg); will-change: transform; }
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 28px; display: block; }
.notch { position: absolute; z-index: 2; top: 10px; left: 50%; width: 34%; height: 8px; margin-left: -17%; border-radius: 6px; background: #0c0818; }
.flip .phone { right: auto; left: 2%; transform: translate3d(0, calc(var(--p) * 130px), 0) rotate(-4deg); }

.fls { position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.fl { position: absolute; text-shadow: 0 8px 34px rgba(0,0,0,.42); animation: bob 6s ease-in-out infinite; }
.fl b { display: block; font-size: clamp(2.4rem, 5vw, 4.8rem); line-height: .9; letter-spacing: -.06em; font-weight: 800; color: #fff; }
.fl span { display: block; margin-top: 6px; font: 700 .72rem var(--sans); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.94); }
.chapter.kz .fl { text-shadow: 0 8px 30px rgba(255,255,255,.5); } .chapter.kz .fl b { color: #2a1200; } .chapter.kz .fl span { color: rgba(42,18,0,.88); }
@keyframes bob { 50% { translate: 0 -12px; } }
.fls .f1 { top: -8%; right: 3%; transform: translate3d(0, calc(var(--p) * -40px), 0); animation-delay: -1s; }
.fls .f2 { left: 1%; bottom: 3%; transform: translate3d(0, calc(var(--p) * -70px), 0); animation-delay: -3s; }
.fls .f3 { left: 38%; bottom: -11%; transform: translate3d(0, calc(var(--p) * -100px), 0); animation-delay: -5s; }
.flip .fls .f1 { right: auto; left: 1%; } .flip .fls .f2 { left: auto; right: 1%; } .flip .fls .f3 { left: auto; right: 38%; }

/* ---------- artwork ---------- */
.art { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
/* RandomZone: dotted grid and floating tool tiles */
.art-rz::before { content: ""; position: absolute; inset: 0; background: radial-gradient(rgba(255,255,255,.4) 1.3px, transparent 1.8px) 0 0 / 26px 26px; -webkit-mask-image: radial-gradient(75% 75% at 72% 38%, #000, transparent 78%); mask-image: radial-gradient(75% 75% at 72% 38%, #000, transparent 78%); }
.art-rz .tl { position: absolute; display: grid; place-items: center; width: 58px; height: 58px; border-radius: 18px; background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4), 0 18px 40px rgba(30,5,80,.25); animation: drift 7s ease-in-out infinite; }
.art-rz .tl svg { width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.art-rz .t1 { top: 11%; left: 5%; } .art-rz .t2 { top: 20%; left: 44%; animation-delay: -2s; width: 50px; height: 50px; } .art-rz .t3 { bottom: 12%; left: 8%; animation-delay: -4s; } .art-rz .t4 { bottom: 9%; left: 46%; animation-delay: -1s; width: 46px; height: 46px; } .art-rz .t5 { top: 8%; right: 5%; animation-delay: -3s; }
@keyframes drift { 50% { translate: 10px -16px; rotate: 6deg; } }
/* Playzone: speed stripes, die, pixel blocks */
.art-pz .stripe { position: absolute; left: -20%; width: 150%; height: 64px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); transform: rotate(-16deg); animation: slidex 10s linear infinite; }
.art-pz .s1 { top: 18%; } .art-pz .s2 { top: 48%; animation-delay: -4s; height: 90px; } .art-pz .s3 { top: 76%; animation-delay: -7s; }
@keyframes slidex { from { translate: -25% 0; } to { translate: 25% 0; } }
.art-pz .die { position: absolute; top: 10%; left: 46%; width: 76px; height: 76px; padding: 11px; border-radius: 18px; background: #fff; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); box-shadow: 0 20px 44px rgba(10,0,60,.4); animation: spin3d 12s linear infinite; }
.art-pz .die i { width: 11px; height: 11px; border-radius: 50%; background: #1b0a52; place-self: center; } .art-pz .die i:nth-child(1) { grid-area: 1 / 1; } .art-pz .die i:nth-child(2) { grid-area: 1 / 3; } .art-pz .die i:nth-child(3) { grid-area: 2 / 2; } .art-pz .die i:nth-child(4) { grid-area: 3 / 1; } .art-pz .die i:nth-child(5) { grid-area: 3 / 3; }
@keyframes spin3d { 0% { transform: rotate(-12deg) translateY(0); } 50% { transform: rotate(14deg) translateY(-18px); } 100% { transform: rotate(-12deg) translateY(0); } }
.art-pz .px { position: absolute; width: 26px; height: 26px; border-radius: 6px; animation: drift 6s ease-in-out infinite; } .art-pz .p1 { top: 14%; left: 6%; background: #7dfbff; } .art-pz .p2 { top: 62%; left: 3%; background: #ffe14d; width: 18px; height: 18px; animation-delay: -2s; } .art-pz .p3 { bottom: 10%; left: 44%; background: #ff2e93; animation-delay: -3s; } .art-pz .p4 { top: 36%; right: 3%; background: #7dfbff; width: 16px; height: 16px; animation-delay: -1s; }
.art-pz .ring { position: absolute; border-radius: 50%; border: 3px solid rgba(255,255,255,.3); } .art-pz .r1 { width: 380px; height: 380px; left: -120px; bottom: -140px; }
.art-pz .tri { position: absolute; right: 8%; bottom: 14%; width: 0; height: 0; border-left: 22px solid transparent; border-right: 22px solid transparent; border-bottom: 38px solid #ffe14d; opacity: .85; animation: drift 8s ease-in-out infinite; }
/* Kidzone: soft blobs, stars, rainbow arcs, wave */
.art-kz .blob { position: absolute; background: rgba(255,255,255,.3); animation: morph 11s ease-in-out infinite; } .art-kz .b1 { width: 340px; height: 320px; left: -90px; top: 8%; border-radius: 60% 40% 55% 45%; } .art-kz .b2 { width: 260px; height: 250px; right: 4%; bottom: 14%; border-radius: 45% 55% 40% 60%; background: rgba(255,111,168,.45); animation-delay: -4s; } .art-kz .b3 { width: 190px; height: 180px; left: 40%; top: -60px; border-radius: 55% 45% 60% 40%; background: rgba(255,255,255,.35); animation-delay: -7s; }
@keyframes morph { 50% { border-radius: 40% 60% 45% 55%; translate: 12px -14px; } }
.art-kz .star { position: absolute; width: 46px; height: 46px; clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 82% 100%, 50% 76%, 18% 100%, 30% 60%, 0 38%, 38% 36%); animation: twirl 9s linear infinite; } .art-kz .st1 { top: 12%; left: 8%; background: #fff; } .art-kz .st2 { top: 18%; right: 6%; background: #4cc9f0; width: 34px; height: 34px; animation-delay: -3s; } .art-kz .st3 { bottom: 20%; left: 46%; background: #ff5ea8; width: 40px; height: 40px; animation-delay: -6s; }
@keyframes twirl { to { rotate: 360deg; } }
.art-kz .arc { position: absolute; border-radius: 50%; border: 16px solid; border-color: #ff5ea8 #ffd23f #4cc9f0 #7bd88f; opacity: .55; } .art-kz .a1 { width: 300px; height: 300px; right: -90px; top: 30%; rotate: 20deg; } .art-kz .a2 { width: 190px; height: 190px; left: 3%; bottom: 10%; rotate: -40deg; border-width: 12px; }
.art-kz .dot { position: absolute; border-radius: 50%; animation: drift 6s ease-in-out infinite; } .art-kz .d1 { width: 20px; height: 20px; background: #fff; top: 40%; left: 3%; } .art-kz .d2 { width: 14px; height: 14px; background: #4cc9f0; top: 66%; left: 40%; animation-delay: -2s; } .art-kz .d3 { width: 24px; height: 24px; background: #ffd23f; top: 10%; left: 44%; animation-delay: -4s; }
.art-kz .wave { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 110px; fill: rgba(255,255,255,.34); }
/* AlumniZone: a network of members */
.art-az svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .6; -webkit-mask-image: radial-gradient(90% 90% at 60% 45%, #000, transparent 90%); mask-image: radial-gradient(90% 90% at 60% 45%, #000, transparent 90%); }
.art-az .links path { fill: none; stroke: rgba(199,208,255,.5); stroke-width: 1.6; stroke-dasharray: 6 8; animation: flow 14s linear infinite; } @keyframes flow { to { stroke-dashoffset: -280; } }
.art-az .nodes circle { fill: #c7d0ff; transform-box: fill-box; transform-origin: center; animation: pulse 4s ease-in-out infinite; } .art-az .nodes circle:nth-child(even) { animation-delay: -2s; fill: #fff; } @keyframes pulse { 50% { transform: scale(1.5); opacity: .55; } }

/* ---------- layout: stacking worlds on large screens ---------- */
@media (min-width: 1000px) and (min-height: 620px) { .chapter { position: sticky; top: var(--stick, 0px); } }
@media (max-width: 999px), (max-height: 619px) {
  .chapter { border-radius: 38px 38px 0 0; margin-top: -38px; padding-top: 38px; } .chapter:first-child { margin-top: 0; padding-top: 0; }
  .ch-in { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 12vh 0 9vh; gap: 36px; transform: none; } .flip .ch-copy { order: 0; }
  .ch-name { font-size: clamp(3.2rem, 17vw, 6.4rem); } .ch-giant span { font-size: clamp(6rem, 38vw, 15rem); }
  .ch-stage { min-height: 0; padding-bottom: 14%; perspective: none; } .rig { min-height: 0; transform: none; }
  .browser, .flip .browser { position: relative; left: 0; right: auto; top: 0; width: 94%; transform: none !important; }
  .phone, .flip .phone { right: 0; left: auto; bottom: -10%; width: 30%; transform: rotate(4deg) !important; }
  .fls { position: static; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 22px; margin-top: calc(16% + 18px); }
  .fl, .flip .fl { position: static; animation: none; transform: none !important; } .fl b { font-size: clamp(2rem, 9vw, 3.2rem); }
  .chapter::after { opacity: 0; }
  .art { opacity: .55; } .art-pz .die, .art-pz .tri, .art-pz .px, .art-rz .t1, .art-rz .t3, .art-rz .t4, .art-kz .st1, .art-kz .d1, .art-kz .d3, .art-kz .a2 { display: none; } .art-rz .tl { transform: scale(.8); }
}
@media (prefers-reduced-motion: reduce) { .chapter *, .chapter::before, .chapter::after, .live i, .wi { animation: none !important; transition: none !important; } .chapter, .chapter * { translate: none !important; } .browser, .phone, .fl, .ch-giant span, .ch-bg::before, .ch-bg::after { transform: none !important; } }