/* The Sets: the Originals as a wall of screens. Each world is a set, a glass with a hairline bezel that plays its trailer
   under the hand, and a plate beneath it in the world's own face. What is next is a dimmed set; open channels are dark
   glass with static, the mark of a place a world can land. When the wall holds fewer sets than there are, pages flip at
   the edges. Our own take on a channel menu: ink, hairlines, pixel type, the print pass's scanlines on every glass. */
.scene[data-key="originals"] .cols.sets { display: block !important; padding: 0 !important; overflow: hidden !important;
  background-color: var(--ink); background-image: radial-gradient(120% 80% at 50% 12%, rgba(255, 250, 248, .045), transparent 60%); }
/* the wall's grid drifts, slowly, toward the lower right; when a set is chosen it surges and comes at you */
.sets-grid-wrap { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; transform-origin: 50% 50%; transition: transform 1.1s cubic-bezier(.6, 0, .2, 1), opacity .8s ease; }
.sets-grid { position: absolute; left: -56px; top: -56px; width: calc(100% + 56px); height: calc(100% + 56px); will-change: transform;
  background-image: linear-gradient(rgba(255, 250, 248, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 250, 248, .04) 1px, transparent 1px); background-size: 56px 56px; animation: sets-drift 4.6s linear infinite; }
@keyframes sets-drift { from { transform: translate(0, 0); } to { transform: translate(56px, 56px); } }
.cols.sets.warp .sets-grid-wrap { transform: scale(1.7); opacity: .5; }
.cols.sets.warp .sets-grid { animation-duration: .55s; }
.sets-track { position: absolute; inset: 0; z-index: 1; display: flex; transition: transform .6s var(--ease); will-change: transform; }
.sets-page { flex: none; width: 100%; height: 100%; box-sizing: border-box; padding: 126px 5vw 104px; display: grid;
  grid-template-columns: repeat(var(--sc, 4), minmax(0, 1fr)); grid-template-rows: repeat(var(--sr, 2), auto); gap: 30px 24px; align-content: center; perspective: 1200px; }
/* a set: the glass over the plate; it lifts and tilts toward the hand */
.sets .set { position: relative; display: grid; grid-template-rows: auto auto; gap: 10px; min-width: 0; min-height: 0; align-content: start;
  transform-style: preserve-3d; transform: translateY(0) rotateX(calc(var(--rx, 0deg) * 1.5)) rotateY(calc(var(--ry, 0deg) * 1.5)); }
.sets .col:hover, .sets .col.focus { z-index: 3; }
.scene[data-key="originals"] .cols.sets .col { flex: none !important; height: auto !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; overflow: visible !important; cursor: pointer; filter: none !important;
  transition: transform .45s var(--ease), filter .4s var(--ease) !important; }
.scene[data-key="originals"] .cols.sets .col:hover, .scene[data-key="originals"] .cols.sets .col.focus { transform: translateY(-10px) rotateX(calc(var(--rx, 0deg) * 1.5)) rotateY(calc(var(--ry, 0deg) * 1.5)); }
.scene[data-key="originals"] .cols.sets:hover .col:not(.focus) { filter: none !important; }
.scene[data-key="originals"] .cols.sets:hover .col:not(.focus) .glass { filter: brightness(.72) saturate(.85); }
.scene[data-key="originals"] .cols.sets .col::after { display: none; }
.set-stage { position: relative; grid-row: 1; min-width: 0; transform-style: preserve-3d; }
.sets .glass { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: calc((100vh - 420px) / var(--sr, 2)); min-height: 120px; box-sizing: border-box; border-radius: 10px; overflow: hidden; z-index: 1;
  border: 1px solid rgba(255, 250, 248, .16); background: #0a0b0f; box-shadow: 0 22px 44px -26px rgba(0, 0, 0, .95), inset 0 0 0 1px rgba(0, 0, 0, .5); transform: translateZ(0);
  transition: border-color .3s ease, box-shadow .5s var(--ease), filter .4s var(--ease), transform .5s var(--ease), border-radius .4s ease; }
.sets .col:hover .glass, .sets .col.focus .glass { transform: translateZ(20px) scale(1.015); }
.sets .col:hover .glass, .sets .col.focus .glass { border-color: rgba(255, 250, 248, .5); box-shadow: 0 34px 70px -30px rgba(0, 0, 0, 1), 0 0 44px -14px var(--acc, rgba(255, 250, 248, .25)); }
.sets .col.bb { --acc: rgba(240, 85, 42, .55); } .sets .col.ms { --acc: rgba(255, 212, 90, .5); } .sets .col.sp { --acc: rgba(255, 159, 28, .5); }
.sets .glass img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; filter: saturate(.9); transform: scale(1.001); transition: transform 6s linear, filter .4s ease; }
.sets .col:hover .glass img, .sets .col.focus .glass img { transform: scale(1.04); filter: none; }
.sets .glass video.cv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s var(--ease); pointer-events: none; }
.sets .glass video.cv.ready { opacity: 1; }
.sets .glass .cs { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(14, 15, 18, .86) 0%, rgba(14, 15, 18, .25) 42%, rgba(14, 15, 18, .06) 100%); opacity: .55; transition: opacity .35s ease; }
.sets .col:hover .glass .cs, .sets .col.focus .glass .cs { opacity: 1; }
/* the print pass on the glass: scanlines, and the light from the hand's side */
.sets .glass::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px); opacity: .55; mix-blend-mode: multiply; }
.sets .glass::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity .3s ease; mix-blend-mode: screen;
  background: radial-gradient(240px 170px at var(--mx, 50%) var(--my, 50%), rgba(255, 250, 248, .16), transparent 70%); }
.sets .col:hover .glass::after { opacity: 1; }
/* the corner mark: a red pixel for a pilot that is live, bone for a founding build */
.set-sig { position: absolute; left: 10px; top: 10px; z-index: 4; display: inline-flex; align-items: center; gap: 7px; padding: 5px 8px; border-radius: 3px; background: rgba(14, 15, 18, .55); backdrop-filter: blur(6px); font: 500 8.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-70); }
.set-sig i { width: 6px; height: 6px; border-radius: 1px; background: var(--bone-45); box-shadow: none; }
.set-sig.live i { background: var(--r); box-shadow: 0 0 8px var(--r); animation: set-blink 3s ease-in-out infinite; }
@keyframes set-blink { 0%, 100% { box-shadow: 0 0 6px var(--r); } 50% { box-shadow: 0 0 14px var(--r); } }
.sets .glass .rate { position: absolute; right: 10px; top: 9px; z-index: 4; margin: 0; transform: scale(.72); transform-origin: right top; }
/* over the glass, under the hand: what the world is and the ways in */
.set-over { position: absolute; left: 14px; right: 14px; bottom: 13px; z-index: 5; display: grid; gap: 10px; opacity: 0; transform: translateY(8px) translateZ(0); transition: opacity .25s ease, transform .5s var(--ease); pointer-events: none; }
.sets .col:hover .set-over, .sets .col.focus .set-over { opacity: 1; transform: translateY(0) translateZ(48px); pointer-events: auto; }
.sets .set.tuning .set-over { opacity: 0; }
.set-over p { margin: 0; font: 400 12.5px/1.45 var(--sans); color: var(--bone); text-shadow: 0 1px 3px rgba(0, 0, 0, .7); max-width: 48ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sets .col .set-over .cacts { display: flex; gap: 8px; opacity: 1; transform: none; }
.sets .col .set-over .cacts .btn { height: 30px; padding: 0 12px; font-size: 12px; border-radius: 4px; }
.sets .col .set-over .cacts .btn kbd { font-size: 10px; }
/* the plate: the world's own face, the eyebrow, who made it */
.sets .set .cc { position: static !important; grid-row: 2; left: auto !important; right: auto !important; bottom: auto !important; display: grid; gap: 7px; padding: 0 2px; min-width: 0; transform-style: preserve-3d; }
.sets .set .cc h3 { transform: translateZ(0); transform-origin: left bottom; transition: transform .5s var(--ease), color .3s ease, text-shadow .3s ease; }
.sets .col:hover .cc h3, .sets .col.focus .cc h3 { transform: translateZ(30px); }
.sets .set .cc .eyebrow { color: var(--bone-55); }
.sets .set .cc h3 { margin: 0; font-size: clamp(18px, 1.45vw, 26px) !important; line-height: 1 !important; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sets .set .cc h3.haslogo img { height: clamp(22px, 1.9vw, 34px) !important; }
.sets .set .cc .cfoot { display: flex; align-items: center; gap: 10px; margin-top: 1px; min-width: 0; }
.sets .set .cc .ccast img { width: 22px; height: 22px; margin-left: -6px; }
.sets .set .cc .cmade { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sets .set.ms .cc h3 { font-family: 'Cinzel', Georgia, serif; font-weight: 700; } .sets .set.sp .cc h3 { font-family: 'Fredoka', system-ui, sans-serif; font-weight: 700; letter-spacing: 0; } .sets .set.bb .cc h3 { font-family: var(--bb); font-weight: 400; color: var(--cream); letter-spacing: .005em; }

/* ── the IP's own skin on its set: a plate at depth behind the glass, a burst further back, colours and type of the world ── */
.sets .set.bb { --w-bg: #0A0908; --w-ink: #F6E9D2; --w-acc: #F0552A; --acc: rgba(240, 85, 42, .6); }
.sets .set.ms { --w-bg: #0B0A14; --w-ink: #F3EAD3; --w-acc: #FFD45A; --acc: rgba(255, 212, 90, .5); }
.sets .set.sp { --w-bg: #14101C; --w-ink: #FFF4FA; --w-acc: #FF9F1C; --acc: rgba(255, 159, 28, .55); }
.set-plate, .set-lines { position: absolute; z-index: 0; pointer-events: none; opacity: 0; display: block; }
.set-plate { inset: -12px; border-radius: 14px; transform: translateZ(-70px) scale(.92); transition: opacity .35s ease, transform .6s var(--ease); }
.set-lines { inset: -45% -30%; transform: translateZ(-120px) scale(.7); transition: opacity .45s ease, transform .7s var(--ease); }
.sets .col:hover .set-plate, .sets .col.focus .set-plate { opacity: 1; transform: translateZ(-70px) scale(1); }
.sets .col:hover .set-lines, .sets .col.focus .set-lines { opacity: 1; transform: translateZ(-120px) scale(1); }
/* BLACKBIRD: the comic pop. A slanted red halftone panel with a hard cream offset, speed lines bursting from behind,
   a cream panel border with an ink shadow, the slab title knocked out with a red offset and a tilt */
.sets .set.bb .set-plate { inset: -14px -12px 6px -14px; border-radius: 5px; transform: translateZ(-70px) scale(.92) skewY(-2.5deg) rotate(-1.2deg);
  background: radial-gradient(circle, rgba(10, 9, 8, .48) 1px, transparent 1.7px) 0 0 / 7px 7px, var(--w-acc); box-shadow: 10px 9px 0 var(--w-ink); }
.sets .set.bb:hover .set-plate, .sets .set.bb.focus .set-plate { transform: translateZ(-70px) scale(1) skewY(-2.5deg) rotate(-1.2deg); }
.sets .set.bb .set-lines { background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(246, 233, 210, .42) 0 1.1deg, transparent 1.1deg 6.5deg);
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 18%, transparent 60%); mask: radial-gradient(circle at 50% 50%, #000 18%, transparent 60%); }
.sets .set.bb:hover .set-lines, .sets .set.bb.focus .set-lines { opacity: .8; }
.sets .set.bb .glass { border-radius: 4px; }
.sets .set.bb:hover .glass, .sets .set.bb.focus .glass { border: 2px solid var(--w-ink); box-shadow: 7px 7px 0 var(--w-bg), 0 40px 80px -30px rgba(0, 0, 0, 1); }
.sets .set.bb .glass::after { background: radial-gradient(240px 170px at var(--mx, 50%) var(--my, 50%), rgba(246, 233, 210, .22), transparent 70%); }
.sets .set.bb .cc .eyebrow .dot { background: var(--w-acc); box-shadow: 0 0 8px var(--w-acc); }
.sets .set.bb:hover .cc .eyebrow, .sets .set.bb.focus .cc .eyebrow { color: var(--w-ink); }
.sets .set.bb .cc { gap: 9px; }
.sets .set.bb:hover .cc h3, .sets .set.bb.focus .cc h3 { color: var(--w-ink); text-shadow: 3px 3px 0 var(--w-acc), 5px 5px 0 var(--w-bg); transform: translateZ(30px) rotate(-2deg) scale(1.06); }
.sets .set.bb:hover .set-sig, .sets .set.bb.focus .set-sig { background: var(--w-acc); color: var(--w-bg); }
.sets .set.bb:hover .set-sig i, .sets .set.bb.focus .set-sig i { background: var(--w-bg); box-shadow: none; animation: none; }
.sets .set.bb .set-over .cacts .btn-primary { background: var(--w-ink); color: var(--w-bg); border-color: var(--w-ink); border-radius: 3px; box-shadow: 3px 3px 0 var(--w-acc); }
.sets .set.bb .set-over .cacts .btn-secondary { border-color: var(--w-ink); color: var(--w-ink); border-radius: 3px; }
.sets .set.bb .set-over p { font-weight: 500; }
/* The Myth of SANSHU: a gold-rimmed indigo plate with corner ticks, a warm light rising behind, the logo lit */
.sets .set.ms .set-plate { inset: -10px; border-radius: 12px; background: radial-gradient(90% 90% at 50% 105%, rgba(255, 212, 90, .3), transparent 65%), var(--w-bg);
  border: 1px solid rgba(255, 212, 90, .5); box-shadow: inset 0 0 0 5px var(--w-bg), inset 0 0 0 6px rgba(255, 212, 90, .28), 0 30px 80px -30px rgba(255, 212, 90, .35); }
.sets .set.ms .set-plate::before, .sets .set.ms .set-plate::after { content: ''; position: absolute; width: 14px; height: 14px; border: 1px solid var(--w-acc); }
.sets .set.ms .set-plate::before { left: 4px; top: 4px; border-right: 0; border-bottom: 0; } .sets .set.ms .set-plate::after { right: 4px; bottom: 4px; border-left: 0; border-top: 0; }
.sets .set.ms .set-lines { background: radial-gradient(circle at 50% 70%, rgba(255, 212, 90, .38), transparent 55%); filter: blur(22px); }
.sets .set.ms:hover .set-lines, .sets .set.ms.focus .set-lines { opacity: .9; }
.sets .set.ms .glass { border-radius: 8px; }
.sets .set.ms:hover .glass, .sets .set.ms.focus .glass { border-color: rgba(255, 212, 90, .85); box-shadow: 0 0 0 1px rgba(255, 212, 90, .25), 0 40px 80px -30px rgba(0, 0, 0, 1), 0 0 56px -12px rgba(255, 212, 90, .55); }
.sets .set.ms .glass::after { background: radial-gradient(240px 170px at var(--mx, 50%) var(--my, 50%), rgba(255, 212, 90, .2), transparent 70%); }
.sets .set.ms .cc .eyebrow .dot { background: var(--w-acc); box-shadow: 0 0 8px var(--w-acc); }
.sets .set.ms:hover .cc h3.haslogo img, .sets .set.ms.focus .cc h3.haslogo img { filter: drop-shadow(0 0 14px rgba(255, 212, 90, .55)) !important; }
.sets .set.ms:hover .cc h3, .sets .set.ms.focus .cc h3 { color: var(--w-acc); text-shadow: 0 0 22px rgba(255, 212, 90, .45); }
.sets .set.ms .set-over .cacts .btn-primary { background: var(--w-acc); color: var(--w-bg); border-color: var(--w-acc); }
.sets .set.ms .set-over .cacts .btn-secondary { border-color: rgba(255, 212, 90, .6); color: var(--w-ink); }
/* SANSHU Pals: a bubbly purple plate with orange dots, rounder glass, a springy lift and a tilt the other way */
.sets .set.sp .set-plate { inset: -12px; border-radius: 24px; background: radial-gradient(circle, rgba(255, 159, 28, .5) 1.6px, transparent 2.4px) 0 0 / 15px 15px, linear-gradient(160deg, #2C1C44, var(--w-bg)); border: 2px solid rgba(255, 159, 28, .55); transition-timing-function: ease, cubic-bezier(.34, 1.5, .64, 1); }
.sets .set.sp .set-lines { background: radial-gradient(circle at 50% 60%, rgba(255, 159, 28, .35), transparent 58%); filter: blur(24px); }
.sets .set.sp:hover .set-lines, .sets .set.sp.focus .set-lines { opacity: .9; }
.sets .set.sp .glass { border-radius: 16px; transition-timing-function: ease, var(--ease), var(--ease), cubic-bezier(.34, 1.5, .64, 1), ease; }
.sets .set.sp:hover .glass, .sets .set.sp.focus .glass { border: 2px solid var(--w-acc); transform: translateZ(20px) scale(1.03) rotate(-1deg); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 1), 0 0 50px -14px rgba(255, 159, 28, .5); }
.sets .set.sp .glass::after { background: radial-gradient(240px 170px at var(--mx, 50%) var(--my, 50%), rgba(255, 159, 28, .22), transparent 70%); }
.sets .set.sp .cc .eyebrow .dot { background: var(--w-acc); box-shadow: 0 0 8px var(--w-acc); }
.sets .set.sp:hover .cc h3, .sets .set.sp.focus .cc h3 { color: var(--w-acc); text-shadow: 0 4px 0 rgba(20, 16, 28, .9), 0 0 24px rgba(255, 159, 28, .4); transform: translateZ(30px) rotate(1.5deg) scale(1.06); transition-timing-function: cubic-bezier(.34, 1.5, .64, 1), ease, ease; }
.sets .set.sp .set-over .cacts .btn { border-radius: 10px; }
.sets .set.sp .set-over .cacts .btn-primary { background: var(--w-acc); color: var(--w-bg); border-color: var(--w-acc); }
/* what is next: the same set, the picture dimmed, static on the glass */
.set-static { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .28; mix-blend-mode: screen; background-size: 180px 180px; animation: set-static .5s steps(4) infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .7 0 0 0 0 .7 0 0 0 0 .7 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); }
@keyframes set-static { 0% { background-position: 0 0; } 25% { background-position: 60px 30px; } 50% { background-position: -40px 90px; } 75% { background-position: 90px -50px; } 100% { background-position: 0 0; } }
.sets .set.next { cursor: pointer; outline: none; }
.sets .set.next .glass img { filter: grayscale(.7) brightness(.42) contrast(1.1); }
.sets .set.next:hover .glass img, .sets .set.next:focus-visible .glass img { filter: grayscale(.4) brightness(.55); }
.sets .set.next:hover .glass, .sets .set.next:focus-visible .glass { border-color: rgba(255, 250, 248, .38); }
.sets .set.next .cc h3 { color: var(--bone-70); }
.sets .set.next .cc .eyebrow .dot { background: var(--bone-45); box-shadow: none; }
/* open channels: dark glass, faint static, the words in pixel type */
.sets .set.open { cursor: default; }
.sets .set.open .glass { border-color: rgba(255, 250, 248, .09); background: #090a0d; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6); }
.sets .set.open .set-static { opacity: .1; animation-duration: .9s; }
.sets .set.open .glass:hover { border-color: rgba(255, 250, 248, .2); }
.sets .set.open .glass:hover .set-static { opacity: .2; }
.set-open-l { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; font: 800 11px/1 'Doto', var(--mono); letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 250, 248, .22); white-space: nowrap; transition: color .3s ease; }
.sets .set.open .glass:hover .set-open-l { color: rgba(255, 250, 248, .45); }
.sets .set.open .cc { min-height: 1px; }
/* pages: the counter in the head, the arrows at the edges of the wall */
.sets-pager { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; align-self: flex-end; padding-bottom: 4px; }
.sets-count { display: inline-flex; align-items: baseline; gap: 6px; font: 800 13px/1 'Doto', var(--mono); letter-spacing: .08em; color: var(--bone); font-variant-numeric: tabular-nums; }
.sets-count i { font-style: normal; color: var(--bone-45); font-weight: 500; }
.sets-count .of { color: var(--bone-45); }
.sets-pager .w { font: 500 9px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-45); }
.sets-arrow { all: unset; position: absolute; top: 50%; z-index: 5; display: none; width: 40px; height: 72px; margin-top: -36px; place-items: center; box-sizing: border-box; border: 1px solid var(--line); border-radius: 4px; background: rgba(14, 15, 18, .55); color: var(--bone-70); font: 800 20px/1 'Doto', var(--mono); cursor: pointer; transition: color .2s ease, border-color .2s ease, background .2s ease, transform .3s var(--ease); }
.sets-arrow.l { left: 14px; } .sets-arrow.r { right: 14px; }
.scene[data-key="originals"].sets-paged .sets-arrow { display: grid; }
.sets-arrow:hover, .sets-arrow:focus-visible { color: var(--bone); border-color: rgba(255, 250, 248, .35); background: rgba(14, 15, 18, .8); }
.sets-arrow.l:hover { transform: translateX(-2px); } .sets-arrow.r:hover { transform: translateX(2px); }
.sets-arrow[disabled] { opacity: .25; cursor: default; transform: none; }
/* tuning in: the chosen set presses and the others recede; the copy grows to the screen; a light as it covers */
.scene[data-key="originals"].tuning .cols.sets .set:not(.tuning) { transform: scale(.94) translateY(10px) !important; opacity: .28; transition: transform .6s cubic-bezier(.6, 0, .2, 1), opacity .5s ease !important; }
.scene[data-key="originals"].tuning .cols.sets .set:not(.tuning) .glass { filter: brightness(.5); }
.scene[data-key="originals"] .cols.sets .col.tuning { transform: translateY(-8px) rotateX(0deg) rotateY(0deg) !important; filter: none !important; }
.sets .set.tuning .glass { transform: scale(.962); border-color: var(--bone); box-shadow: 0 0 0 2px var(--bone), 0 0 90px -6px var(--acc, rgba(255, 250, 248, .5)); transition: transform .13s ease-out, box-shadow .13s ease-out, border-color .13s ease-out; }
.sets .set.tuning .glass::after { opacity: 1; }
.sets .set.tuning.lift .glass { opacity: 0; transition: opacity .08s ease; }
.set-zoom { position: fixed; z-index: 90; transform-origin: 50% 50%; border-radius: 10px; overflow: hidden; background: #0a0b0f center / cover no-repeat; pointer-events: none; will-change: transform, opacity;
  box-shadow: 0 0 0 2px rgba(255, 250, 248, .55), 0 60px 160px -40px rgba(0, 0, 0, 1); transform: scale(.962);
  transition: transform .66s cubic-bezier(.62, 0, .12, 1), border-radius .5s ease .1s, opacity .44s ease, box-shadow .4s ease; }
.set-zoom video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.set-zoom::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px); opacity: .55; }
.set-zoom.go { transform: translate(var(--tx), var(--ty)) scale(var(--s)); border-radius: 0; box-shadow: 0 0 0 0 rgba(255, 250, 248, 0), 0 0 0 0 rgba(0, 0, 0, 0); }
.set-zoom.out { opacity: 0; }
.set-light { position: fixed; inset: 0; z-index: 91; pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(70% 70% at var(--cx, 50%) var(--cy, 50%), rgba(255, 250, 248, .7), rgba(255, 250, 248, .12) 45%, transparent 72%); animation: set-light .62s cubic-bezier(.2, .8, .2, 1) forwards; }
@keyframes set-light { 0% { opacity: 0; } 28% { opacity: .75; } 100% { opacity: 0; } }
.set-burst { position: fixed; z-index: 92; width: 0; height: 0; pointer-events: none; }
.set-burst i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; background: var(--bone); opacity: 0; transform: translate(var(--sx), var(--sy)); animation: set-px .62s steps(7, end) .04s forwards; }
.set-burst i.r { background: var(--r); } .set-burst i.g { background: var(--g); } .set-burst i.b { background: #2E7BFF; }
@keyframes set-px { 0% { opacity: 1; transform: translate(var(--sx), var(--sy)); } 100% { opacity: 0; transform: translate(var(--tx), var(--ty)); } }
@media (max-width: 1000px) { .sets-page { padding: 118px 4vw 100px; gap: 20px 16px; } .sets .set .cc h3 { font-size: 18px !important; } .set-over { display: none; } .set-lines { display: none; } }
@media (max-width: 700px) { .sets-page { padding: 110px 16px 110px; gap: 16px; } .sets-arrow { width: 32px; height: 56px; margin-top: -28px; } .sets-arrow.l { left: 6px; } .sets-arrow.r { right: 6px; } .set-sig { font-size: 7.5px; } }
@media (prefers-reduced-motion: reduce) { .sets-track, .sets .col, .sets .glass, .sets .glass img, .set-over, .sets-arrow, .set-zoom, .sets-grid-wrap, .set-plate, .set-lines, .sets .set .cc h3 { transition: none !important; } .set-static, .set-sig.live i, .sets-grid, .set-light, .set-burst i { animation: none; } .sets .col:hover .glass img { transform: none; } }