/* ─── 3D Carousel View (UNVEIL-style) ─── */ .carousel-view { --carousel-perspective: 1200px; --carousel-perspective-origin: 78% 26%; --carousel-scene-x: -54%; --carousel-scene-y: -47%; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; overflow: hidden; perspective: var(--carousel-perspective); perspective-origin: var(--carousel-perspective-origin); background: var(--bg); z-index: 1; transition: opacity 0.6s ease, transform 0.6s ease; touch-action: none; overscroll-behavior: none; } .carousel-view[data-layout="legacy"] { --carousel-perspective: 1200px; --carousel-perspective-origin: 78% 26%; --carousel-scene-x: -54%; --carousel-scene-y: -47%; } .carousel-view[data-layout="screenshot"] { --carousel-perspective: 4200px; --carousel-perspective-origin: 62% 16%; --carousel-scene-x: -52%; --carousel-scene-y: -47%; } .carousel-view.hidden { display: none; } .carousel-view.exiting { opacity: 0; transform: scale(1.05); pointer-events: none; } .carousel-scene { position: absolute; top: 50%; left: 50%; transform-style: preserve-3d; transform: translate(var(--carousel-scene-x), var(--carousel-scene-y)); transition: transform 0.3s ease; touch-action: none; cursor: grab; } .carousel-scene.grabbing, .carousel-scene.grabbing .carousel-card { cursor: grabbing; } .carousel-card { --glass-rgb: 180 180 180; --glass-highlight-rgb: 220 220 220; --glass-shadow-rgb: 40 40 40; --glass-border-rgb: 210 210 210; --hover-shift: 0px; --drag-x: 0px; position: absolute; width: 390px; height: 390px; border-radius: 3px; cursor: grab; transition: transform 0.32s cubic-bezier(0.18, 0.9, 0.22, 1), box-shadow 0.32s cubic-bezier(0.23, 1, 0.32, 1), border-color 0.32s ease, opacity 0.22s ease; will-change: transform; transform-style: preserve-3d; transform-origin: 42% 50%; transform: var(--base-transform) translateX(calc(var(--hover-shift) + var(--drag-x))); backface-visibility: hidden; -webkit-backface-visibility: hidden; opacity: 1; border: 1px solid rgb(var(--glass-border-rgb) / 0.24); box-shadow: 0 12px 28px rgba(0,0,0,0.16), 0 1px 0 rgb(var(--glass-highlight-rgb) / 0.18) inset, 0 -1px 0 rgb(var(--glass-shadow-rgb) / 0.12) inset; background: linear-gradient(180deg, rgb(var(--glass-highlight-rgb) / 0.08), rgb(var(--glass-rgb) / 0.03) 42%, rgb(var(--glass-shadow-rgb) / 0.08) 100%); overflow: visible; touch-action: none; user-select: none; } /* Dense center, transparency only in the outer ring. */ .carousel-card img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; opacity: 1; -webkit-user-drag: none; user-select: none; -webkit-touch-callout: none; -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.14) 3%, rgba(0,0,0,0.28) 6%, rgba(0,0,0,0.5) 9%, rgba(0,0,0,0.73) 12%, rgba(0,0,0,0.9) 15%, black 18%, black 82%, rgba(0,0,0,0.9) 85%, rgba(0,0,0,0.73) 88%, rgba(0,0,0,0.5) 91%, rgba(0,0,0,0.28) 94%, rgba(0,0,0,0.14) 97%, rgba(0,0,0,0.05) 100%), linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.14) 3%, rgba(0,0,0,0.28) 6%, rgba(0,0,0,0.5) 9%, rgba(0,0,0,0.73) 12%, rgba(0,0,0,0.9) 15%, black 18%, black 82%, rgba(0,0,0,0.9) 85%, rgba(0,0,0,0.73) 88%, rgba(0,0,0,0.5) 91%, rgba(0,0,0,0.28) 94%, rgba(0,0,0,0.14) 97%, rgba(0,0,0,0.05) 100%); -webkit-mask-composite: destination-in; mask-image: linear-gradient(to right, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.14) 3%, rgba(0,0,0,0.28) 6%, rgba(0,0,0,0.5) 9%, rgba(0,0,0,0.73) 12%, rgba(0,0,0,0.9) 15%, black 18%, black 82%, rgba(0,0,0,0.9) 85%, rgba(0,0,0,0.73) 88%, rgba(0,0,0,0.5) 91%, rgba(0,0,0,0.28) 94%, rgba(0,0,0,0.14) 97%, rgba(0,0,0,0.05) 100%), linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.14) 3%, rgba(0,0,0,0.28) 6%, rgba(0,0,0,0.5) 9%, rgba(0,0,0,0.73) 12%, rgba(0,0,0,0.9) 15%, black 18%, black 82%, rgba(0,0,0,0.9) 85%, rgba(0,0,0,0.73) 88%, rgba(0,0,0,0.5) 91%, rgba(0,0,0,0.28) 94%, rgba(0,0,0,0.14) 97%, rgba(0,0,0,0.05) 100%); mask-composite: intersect; } /* Video cover: no mask (prevents GPU bleed in preserve-3d) */ .carousel-card video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; -webkit-user-drag: none; user-select: none; } /* Frosted glass edge ring */ .carousel-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 2; pointer-events: none; backdrop-filter: blur(12px) saturate(1.1) brightness(1.04); -webkit-backdrop-filter: blur(12px) saturate(1.1) brightness(1.04); background: linear-gradient(180deg, rgb(var(--glass-highlight-rgb) / 0.18) 0%, rgb(var(--glass-highlight-rgb) / 0.08) 10%, rgba(0,0,0,0.0) 20%, rgba(0,0,0,0.0) 80%, rgb(var(--glass-rgb) / 0.09) 90%, rgb(var(--glass-rgb) / 0.18) 100%), linear-gradient(90deg, rgb(var(--glass-highlight-rgb) / 0.19) 0%, rgb(var(--glass-highlight-rgb) / 0.07) 5%, rgba(0,0,0,0.0) 12%, rgba(0,0,0,0.0) 88%, rgb(var(--glass-rgb) / 0.08) 95%, rgb(var(--glass-rgb) / 0.18) 100%), linear-gradient(115deg, rgb(var(--glass-highlight-rgb) / 0.24) 0%, rgb(var(--glass-highlight-rgb) / 0.1) 9%, rgba(0,0,0,0.0) 24%), var(--glass-tint, rgba(180,180,180,0.045)); box-shadow: 0 0 0 1px rgb(var(--glass-border-rgb) / 0.16) inset, 0 10px 16px rgb(var(--glass-highlight-rgb) / 0.04) inset, 0 -8px 14px rgb(var(--glass-shadow-rgb) / 0.045) inset; opacity: 0.96; -webkit-mask: linear-gradient(to right, black 0%, rgba(0,0,0,0.96) 3%, rgba(0,0,0,0.86) 6%, rgba(0,0,0,0.66) 9%, rgba(0,0,0,0.42) 12%, rgba(0,0,0,0.2) 15%, rgba(0,0,0,0.08) 18%, rgba(0,0,0,0.0) 22%, rgba(0,0,0,0.0) 78%, rgba(0,0,0,0.08) 82%, rgba(0,0,0,0.2) 85%, rgba(0,0,0,0.42) 88%, rgba(0,0,0,0.66) 91%, rgba(0,0,0,0.86) 94%, rgba(0,0,0,0.96) 97%, black 100%), linear-gradient(to bottom, black 0%, rgba(0,0,0,0.96) 3%, rgba(0,0,0,0.86) 6%, rgba(0,0,0,0.66) 9%, rgba(0,0,0,0.42) 12%, rgba(0,0,0,0.2) 15%, rgba(0,0,0,0.08) 18%, rgba(0,0,0,0.0) 22%, rgba(0,0,0,0.0) 78%, rgba(0,0,0,0.08) 82%, rgba(0,0,0,0.2) 85%, rgba(0,0,0,0.42) 88%, rgba(0,0,0,0.66) 91%, rgba(0,0,0,0.86) 94%, rgba(0,0,0,0.96) 97%, black 100%); -webkit-mask-composite: source-over; mask: linear-gradient(to right, black 0%, rgba(0,0,0,0.96) 3%, rgba(0,0,0,0.86) 6%, rgba(0,0,0,0.66) 9%, rgba(0,0,0,0.42) 12%, rgba(0,0,0,0.2) 15%, rgba(0,0,0,0.08) 18%, rgba(0,0,0,0.0) 22%, rgba(0,0,0,0.0) 78%, rgba(0,0,0,0.08) 82%, rgba(0,0,0,0.2) 85%, rgba(0,0,0,0.42) 88%, rgba(0,0,0,0.66) 91%, rgba(0,0,0,0.86) 94%, rgba(0,0,0,0.96) 97%, black 100%), linear-gradient(to bottom, black 0%, rgba(0,0,0,0.96) 3%, rgba(0,0,0,0.86) 6%, rgba(0,0,0,0.66) 9%, rgba(0,0,0,0.42) 12%, rgba(0,0,0,0.2) 15%, rgba(0,0,0,0.08) 18%, rgba(0,0,0,0.0) 22%, rgba(0,0,0,0.0) 78%, rgba(0,0,0,0.08) 82%, rgba(0,0,0,0.2) 85%, rgba(0,0,0,0.42) 88%, rgba(0,0,0,0.66) 91%, rgba(0,0,0,0.86) 94%, rgba(0,0,0,0.96) 97%, black 100%); mask-composite: add; } /* Glass edge bloom */ .carousel-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 12% 18%, rgb(var(--glass-highlight-rgb) / 0.08) 0%, rgb(var(--glass-highlight-rgb) / 0.04) 8%, rgba(0,0,0,0.0) 18%), radial-gradient(circle at 88% 82%, rgb(var(--glass-rgb) / 0.07) 0%, rgb(var(--glass-rgb) / 0.035) 7%, rgba(0,0,0,0.0) 16%), radial-gradient(circle at 18% 88%, rgb(var(--glass-highlight-rgb) / 0.05) 0%, rgba(0,0,0,0.0) 14%), linear-gradient(115deg, rgb(var(--glass-highlight-rgb) / 0.2) 0%, rgb(var(--glass-highlight-rgb) / 0.075) 9%, rgba(0,0,0,0.0) 18%), radial-gradient(circle at top left, rgb(var(--glass-highlight-rgb) / 0.24), rgba(0,0,0,0.0) 20%), radial-gradient(circle at bottom right, rgb(var(--glass-rgb) / 0.14), rgba(0,0,0,0.0) 18%); z-index: 3; pointer-events: none; transition: all 0.28s ease; mix-blend-mode: screen; -webkit-mask: linear-gradient(to right, black 0%, rgba(0,0,0,0.9) 4%, rgba(0,0,0,0.66) 7%, rgba(0,0,0,0.32) 10%, rgba(0,0,0,0.1) 14%, rgba(0,0,0,0.0) 20%, rgba(0,0,0,0.0) 80%, rgba(0,0,0,0.1) 86%, rgba(0,0,0,0.32) 90%, rgba(0,0,0,0.66) 93%, rgba(0,0,0,0.9) 96%, black 100%), linear-gradient(to bottom, black 0%, rgba(0,0,0,0.9) 4%, rgba(0,0,0,0.66) 7%, rgba(0,0,0,0.32) 10%, rgba(0,0,0,0.1) 14%, rgba(0,0,0,0.0) 20%, rgba(0,0,0,0.0) 80%, rgba(0,0,0,0.1) 86%, rgba(0,0,0,0.32) 90%, rgba(0,0,0,0.66) 93%, rgba(0,0,0,0.9) 96%, black 100%); -webkit-mask-composite: source-over; mask: linear-gradient(to right, black 0%, rgba(0,0,0,0.9) 4%, rgba(0,0,0,0.66) 7%, rgba(0,0,0,0.32) 10%, rgba(0,0,0,0.1) 14%, rgba(0,0,0,0.0) 20%, rgba(0,0,0,0.0) 80%, rgba(0,0,0,0.1) 86%, rgba(0,0,0,0.32) 90%, rgba(0,0,0,0.66) 93%, rgba(0,0,0,0.9) 96%, black 100%), linear-gradient(to bottom, black 0%, rgba(0,0,0,0.9) 4%, rgba(0,0,0,0.66) 7%, rgba(0,0,0,0.32) 10%, rgba(0,0,0,0.1) 14%, rgba(0,0,0,0.0) 20%, rgba(0,0,0,0.0) 80%, rgba(0,0,0,0.1) 86%, rgba(0,0,0,0.32) 90%, rgba(0,0,0,0.66) 93%, rgba(0,0,0,0.9) 96%, black 100%); mask-composite: add; } .carousel-card.hovered::after { background: radial-gradient(circle at 12% 18%, rgb(var(--glass-highlight-rgb) / 0.1) 0%, rgb(var(--glass-highlight-rgb) / 0.05) 8%, rgba(0,0,0,0.0) 18%), radial-gradient(circle at 88% 82%, rgb(var(--glass-rgb) / 0.09) 0%, rgb(var(--glass-rgb) / 0.045) 7%, rgba(0,0,0,0.0) 16%), radial-gradient(circle at 18% 88%, rgb(var(--glass-highlight-rgb) / 0.06) 0%, rgba(0,0,0,0.0) 14%), linear-gradient(115deg, rgb(var(--glass-highlight-rgb) / 0.16) 0%, rgb(var(--glass-highlight-rgb) / 0.05) 10%, rgba(0,0,0,0.0) 20%), radial-gradient(circle at top left, rgb(var(--glass-highlight-rgb) / 0.2), rgba(0,0,0,0.0) 22%), radial-gradient(circle at bottom right, rgb(var(--glass-rgb) / 0.1), rgba(0,0,0,0.0) 20%); } .carousel-card .carousel-card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1a1a1a, #0e0e0e); color: var(--text-muted); font-size: 36px; border-radius: inherit; opacity: 1; -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.14) 3%, rgba(0,0,0,0.28) 6%, rgba(0,0,0,0.5) 9%, rgba(0,0,0,0.73) 12%, rgba(0,0,0,0.9) 15%, black 18%, black 82%, rgba(0,0,0,0.9) 85%, rgba(0,0,0,0.73) 88%, rgba(0,0,0,0.5) 91%, rgba(0,0,0,0.28) 94%, rgba(0,0,0,0.14) 97%, rgba(0,0,0,0.05) 100%), linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.14) 3%, rgba(0,0,0,0.28) 6%, rgba(0,0,0,0.5) 9%, rgba(0,0,0,0.73) 12%, rgba(0,0,0,0.9) 15%, black 18%, black 82%, rgba(0,0,0,0.9) 85%, rgba(0,0,0,0.73) 88%, rgba(0,0,0,0.5) 91%, rgba(0,0,0,0.28) 94%, rgba(0,0,0,0.14) 97%, rgba(0,0,0,0.05) 100%); -webkit-mask-composite: destination-in; mask-image: linear-gradient(to right, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.14) 3%, rgba(0,0,0,0.28) 6%, rgba(0,0,0,0.5) 9%, rgba(0,0,0,0.73) 12%, rgba(0,0,0,0.9) 15%, black 18%, black 82%, rgba(0,0,0,0.9) 85%, rgba(0,0,0,0.73) 88%, rgba(0,0,0,0.5) 91%, rgba(0,0,0,0.28) 94%, rgba(0,0,0,0.14) 97%, rgba(0,0,0,0.05) 100%), linear-gradient(to bottom, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.14) 3%, rgba(0,0,0,0.28) 6%, rgba(0,0,0,0.5) 9%, rgba(0,0,0,0.73) 12%, rgba(0,0,0,0.9) 15%, black 18%, black 82%, rgba(0,0,0,0.9) 85%, rgba(0,0,0,0.73) 88%, rgba(0,0,0,0.5) 91%, rgba(0,0,0,0.28) 94%, rgba(0,0,0,0.14) 97%, rgba(0,0,0,0.05) 100%); mask-composite: intersect; } .carousel-card-info-overlay { position: absolute; left: 0; top: 0; padding: 0; z-index: 8; opacity: 0; transform: translateY(8px); transition: all 0.24s cubic-bezier(0.18, 0.9, 0.22, 1); white-space: nowrap; display: grid; gap: 2px; min-width: 196px; pointer-events: none; } .carousel-card-info-overlay.visible { transform: translateY(0); opacity: 1; } /* HOVERED: slide out to the RIGHT, keep original z-order */ .carousel-card.hovered { --hover-shift: 92px; opacity: 1; box-shadow: 0 14px 30px rgba(0,0,0,0.14), 0 1px 0 rgb(var(--glass-highlight-rgb) / 0.24) inset, 0 -1px 0 rgb(var(--glass-shadow-rgb) / 0.14) inset; border-color: rgb(var(--glass-border-rgb) / 0.3); } .carousel-card.dragging { cursor: grabbing; transition: none !important; } .carousel-card-title { font-size: 14px; font-weight: 500; color: var(--text); letter-spacing: -0.015em; padding: 0; background: transparent; border: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } .carousel-card-meta { font-size: 11px; color: var(--text-dim); padding: 0; background: transparent; border: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; } /* Light theme carousel */ [data-theme="light"] .carousel-card { border-color: rgb(var(--glass-border-rgb) / 0.22); box-shadow: 0 12px 28px rgba(0,0,0,0.09), 0 1px 0 rgb(var(--glass-highlight-rgb) / 0.28) inset, 0 -1px 0 rgb(var(--glass-shadow-rgb) / 0.08) inset; background: linear-gradient(180deg, rgb(var(--glass-highlight-rgb) / 0.18), rgb(var(--glass-rgb) / 0.07) 42%, rgb(var(--glass-rgb) / 0.03) 100%); } [data-theme="light"] .carousel-card::before { backdrop-filter: blur(9px) saturate(1.04) brightness(1.03); -webkit-backdrop-filter: blur(9px) saturate(1.04) brightness(1.03); background: linear-gradient(180deg, rgb(var(--glass-highlight-rgb) / 0.16) 0%, rgb(var(--glass-highlight-rgb) / 0.05) 12%, rgba(0,0,0,0.0) 18%, rgba(0,0,0,0.0) 82%, rgb(var(--glass-rgb) / 0.04) 88%, rgb(var(--glass-rgb) / 0.1) 100%), linear-gradient(90deg, rgb(var(--glass-highlight-rgb) / 0.16) 0%, rgb(var(--glass-highlight-rgb) / 0.04) 6%, rgba(0,0,0,0.0) 12%, rgba(0,0,0,0.0) 88%, rgb(var(--glass-rgb) / 0.04) 94%, rgb(var(--glass-rgb) / 0.11) 100%), linear-gradient(115deg, rgb(var(--glass-highlight-rgb) / 0.18) 0%, rgb(var(--glass-highlight-rgb) / 0.06) 10%, rgba(0,0,0,0.0) 24%), var(--glass-tint, rgba(245,245,245,0.03)); } [data-theme="light"] .carousel-card::after { background: linear-gradient(115deg, rgb(var(--glass-highlight-rgb) / 0.18) 0%, rgb(var(--glass-highlight-rgb) / 0.06) 9%, rgba(0,0,0,0.0) 18%), radial-gradient(circle at top left, rgb(var(--glass-highlight-rgb) / 0.18), rgba(0,0,0,0.0) 20%), radial-gradient(circle at bottom right, rgb(var(--glass-rgb) / 0.08), rgba(0,0,0,0.0) 18%); } [data-theme="light"] .carousel-card.hovered { box-shadow: 0 14px 30px rgba(0,0,0,0.1), 0 1px 0 rgb(var(--glass-highlight-rgb) / 0.34) inset, 0 -1px 0 rgb(var(--glass-shadow-rgb) / 0.08) inset; border-color: rgb(var(--glass-border-rgb) / 0.28); } [data-theme="dark"] .carousel-card-title { color: rgba(255,255,255,0.96); } [data-theme="dark"] .carousel-card-meta { color: rgba(255,255,255,0.72); } [data-theme="light"] .carousel-view { background: #f5f5f5; } /* Carousel on mobile */ @media (max-width: 768px) { .carousel-view[data-layout="screenshot"] { --carousel-perspective: 2600px; --carousel-perspective-origin: 60% 18%; --carousel-scene-x: -52%; --carousel-scene-y: -45%; } .carousel-card { width: 220px; height: 220px; } .carousel-card.hovered { --hover-shift: 64px; } .carousel-card-info-overlay { position: fixed; left: 50% !important; top: auto !important; bottom: 140px; transform: translateX(-50%) !important; text-align: center; white-space: normal; max-width: 90vw; } .carousel-card-info-overlay.visible { transform: translateX(-50%) !important; } } /* ─── .webm video cover cards ────────────────────────────────────────────── The img approach (blob URL via offscreen canvas) is used instead of a real