/* ============================================================================= THE COLLECTION — a walk-through 3D gallery (CSS 3D) ========================================================================== */ :root { --ink: #1f1a16; --ink-soft: #6a6258; --brass: #b08d57; --brass-deep: #936f3c; --rule: rgba(31, 26, 22, 0.14); --shadow: rgba(20, 14, 6, 0.4); --serif: "Cormorant Garamond", Georgia, serif; --sans: "Inter", system-ui, sans-serif; --ease: cubic-bezier(0.16, 1, 0.3, 1); /* hall geometry (3D px) */ --hall-w: 1240px; --hall-h: 680px; --hall-d: 4200px; --persp: 1150px; --cam: 1500px; /* how far we've walked in (animated) */ --look-x: 50%; /* perspective-origin x (turns the head) */ --look-y: 46%; /* DAY palette */ --wall: #efeae1; --wall-shade: #d8d1c4; --ceil: #201f22; --floor-a: #6e4d31; --floor-b: #4c3420; --ambient: rgba(255, 250, 240, 0); --spot: rgba(255, 242, 216, 0.14); /* a faint pool of light on every piece, even by day */ --vignette: 0; /* room-darkening overlay — 0 with the lights on */ --hud-ink: #3a342c; } /* EVENING — pull the pendant: the room drops to near-dark and each piece is spotlit */ [data-lights="off"] { --wall: #211d18; --wall-shade: #13110d; --ceil: #08070a; --floor-a: #34230f; --floor-b: #1c1209; --ink: #f3ece0; --ink-soft: #a89e8d; --rule: rgba(243, 236, 224, 0.14); --ambient: rgba(6, 5, 10, 0.6); --spot: rgba(255, 238, 200, 0.55); --vignette: 0.92; --hud-ink: #e8dfd0; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: var(--sans); color: var(--ink); background: #0c0a08; overflow: hidden; /* the hall fills the viewport */ -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.05; } .overline { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--brass-deep); font-weight: 600; } /* ============================ ENTRANCE ==================================== */ .entrance { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; color: #f3ece0; overflow: hidden; /* warm pool of light spilling up from the floor, behind the doors */ background: radial-gradient(120% 80% at 50% 118%, rgba(201,165,103,0.16), transparent 60%), radial-gradient(100% 100% at 50% 38%, #15110b 0%, #0a0806 70%, #050403 100%); /* once the doors are open, the whole dark room dissolves to reveal the hero */ transition: opacity 0.65s var(--ease) 1.05s, visibility 0s linear 1.7s; } .entrance.is-open { opacity: 0; visibility: hidden; } /* warm light that blooms out through the parting doors as you step in */ .entrance__spill { position: absolute; left: 50%; top: 50%; z-index: 0; pointer-events: none; width: min(78vw, 720px); aspect-ratio: 1; transform: translate(-50%, -50%) scale(0.45); background: radial-gradient(circle, rgba(255,238,196,0.6), rgba(255,222,150,0.18) 38%, transparent 70%); opacity: 0; filter: blur(6px); } .entrance.is-open .entrance__spill { animation: spill 1.4s var(--ease) forwards; } @keyframes spill { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.45); } 42% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.55); } } /* the two carved doors that swing open on enter */ .entrance__door { position: absolute; top: 0; bottom: 0; width: 50.4%; z-index: 1; transition: transform 1.3s var(--ease); box-shadow: 0 0 90px 26px rgba(0,0,0,0.65); } .entrance__door--l { left: 0; background: linear-gradient(95deg, #060504, #14100b 72%, #1b160e); } .entrance__door--r { right: 0; background: linear-gradient(265deg, #060504, #14100b 72%, #1b160e); } /* a recessed, brass-edged panel carved into each door */ .entrance__door::before { content: ""; position: absolute; inset: clamp(20px, 5vh, 54px) clamp(26px, 6vw, 90px); border: 1px solid rgba(176,141,87,0.22); box-shadow: inset 0 0 0 7px rgba(0,0,0,0.32), inset 0 3px 26px rgba(0,0,0,0.65), 0 1px 0 rgba(255,236,200,0.04); background: linear-gradient(150deg, rgba(255,247,228,0.035), transparent 42%); } /* brass molding down each door's meeting edge */ .entrance__door::after { content: ""; position: absolute; top: 8%; bottom: 8%; width: 2px; background: linear-gradient(180deg, transparent, var(--brass) 18%, var(--brass-deep) 50%, var(--brass) 82%, transparent); opacity: 0.55; } .entrance__door--l::after { right: 0; } .entrance__door--r::after { left: 0; } /* the hairline where the doors meet, with a small focal medallion */ .entrance__seam { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; z-index: 2; transform: translateX(-50%); background: linear-gradient(180deg, transparent, rgba(240,220,160,0.5) 40%, rgba(240,220,160,0.5) 60%, transparent); opacity: 0.7; transition: opacity 0.5s var(--ease); } .entrance__seam::before { content: ""; position: absolute; top: 50%; left: 50%; width: 13px; height: 13px; transform: translate(-50%, -50%) rotate(45deg); border: 1px solid var(--brass); background: #0d0a07; box-shadow: 0 0 14px rgba(201,165,103,0.45); } /* slender fluted columns framing the title — the colonnade, introduced */ .entrance__col { position: absolute; top: 11%; bottom: 11%; width: 9px; z-index: 2; background: linear-gradient(180deg, transparent, rgba(0,0,0,0.35) 92%), repeating-linear-gradient(90deg, rgba(0,0,0,0.28) 0 1px, transparent 1px 3px), linear-gradient(90deg, var(--brass-deep), #e7c989 50%, var(--brass-deep)); border-radius: 2px; box-shadow: 0 0 24px rgba(201,165,103,0.22); opacity: 0; transform: scaleY(0); transform-origin: 50% 0; animation: colRise 1.3s var(--ease) 0.15s forwards; transition: transform 1s var(--ease), opacity 0.7s var(--ease); } /* capital + base caps */ .entrance__col::before, .entrance__col::after { content: ""; position: absolute; left: -5px; right: -5px; height: 8px; background: linear-gradient(90deg, var(--brass-deep), #f0d89f, var(--brass-deep)); border-radius: 2px; } .entrance__col::before { top: -6px; } .entrance__col::after { bottom: -6px; } .entrance__col--l { left: clamp(20px, 13vw, 230px); } .entrance__col--r { right: clamp(20px, 13vw, 230px); } @keyframes colRise { to { opacity: 0.85; transform: scaleY(1); } } .entrance.is-open .entrance__col--l { transform: translateX(-60px) scaleY(1); opacity: 0; } .entrance.is-open .entrance__col--r { transform: translateX(60px) scaleY(1); opacity: 0; } /* gallery-frame corner brackets */ .entrance__corner { position: absolute; width: 30px; height: 30px; z-index: 4; border: 1.5px solid rgba(201,165,103,0.55); opacity: 0; animation: cornerIn 1s var(--ease) 0.5s forwards; transition: opacity 0.4s var(--ease); } @keyframes cornerIn { to { opacity: 1; } } .entrance__corner--tl { top: 22px; left: 22px; border-right: none; border-bottom: none; } .entrance__corner--tr { top: 22px; right: 22px; border-left: none; border-bottom: none; } .entrance__corner--bl { bottom: 22px; left: 22px; border-right: none; border-top: none; } .entrance__corner--br { bottom: 22px; right: 22px; border-left: none; border-top: none; } .entrance.is-open .entrance__corner { opacity: 0; } .entrance.is-open .entrance__door--l { transform: translateX(-101%); } .entrance.is-open .entrance__door--r { transform: translateX(101%); } .entrance.is-open .entrance__seam { opacity: 0; } .entrance__inner { text-align: center; padding: 2rem; transform: translateY(-2%); position: relative; z-index: 3; transition: opacity 0.55s var(--ease), transform 0.7s var(--ease); } .entrance.is-open .entrance__inner { opacity: 0; transform: translateY(-9%) scale(1.06); } .entrance__est { font-family: var(--serif); font-style: italic; font-size: 0.92rem; letter-spacing: 0.34em; color: var(--brass); opacity: 0.85; margin-bottom: 1.5rem; } .entrance__est span { font-style: normal; letter-spacing: 0.34em; } .entrance__kicker { font-size: 0.74rem; letter-spacing: 0.42em; text-transform: uppercase; color: rgba(217,207,190,0.62); margin-bottom: 1rem; } .entrance__title { font-size: clamp(2.5rem, 11vw, 8rem); letter-spacing: 0.01em; background: linear-gradient(176deg, #fdf6e8 4%, #e6cf9b 46%, #c19a52 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 24px rgba(201,165,103,0.18)); } /* an ornamental brass rule with a center diamond, under the title */ .entrance__rule { display: flex; align-items: center; justify-content: center; gap: 0; margin: 1.1rem auto 0; width: min(360px, 70vw); height: 12px; } .entrance__rule::before, .entrance__rule::after { content: ""; height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--brass)); } .entrance__rule::after { background: linear-gradient(270deg, transparent, var(--brass)); } .entrance__rule i { width: 7px; height: 7px; margin: 0 10px; flex: none; transform: rotate(45deg); border: 1px solid var(--brass); background: color-mix(in srgb, var(--brass) 30%, transparent); } .entrance__sub { font-family: var(--serif); font-style: italic; font-size: clamp(1.1rem, 2.4vw, 1.55rem); color: #d9cfbe; margin-top: 1rem; } .enter-btn { margin-top: 2.4rem; font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; color: #f3ece0; background: transparent; border: 1px solid rgba(243,236,224,0.4); padding: 1rem 2.4rem; border-radius: 999px; cursor: pointer; transition: all 0.4s var(--ease); position: relative; overflow: hidden; } .enter-btn span { position: relative; z-index: 1; } .enter-btn::after { content: ""; position: absolute; inset: 0; background: var(--brass); transform: translateY(101%); transition: transform 0.45s var(--ease); } .enter-btn:hover { color: #1a1410; border-color: var(--brass); } .enter-btn:hover::after { transform: translateY(0); } .entrance__hint { margin-top: 1.6rem; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(217,207,190,0.5); } /* ============================ TOP BAR ==================================== */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 0.9rem clamp(1rem, 4vw, 2.2rem); background: linear-gradient(180deg, rgba(0,0,0,0.45), transparent); transition: opacity 0.6s var(--ease); } .topbar.is-hidden { opacity: 0; pointer-events: none; } .brand { display: flex; align-items: center; gap: 0.65rem; background: none; border: none; cursor: pointer; color: #f6f1e8; } .brand__mark { width: 22px; height: 22px; border: 2px solid currentColor; border-radius: 3px; position: relative; flex: none; } .brand__mark::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--brass); } .brand__name { font-family: var(--serif); font-size: 1.25rem; color: #f6f1e8; text-shadow: 0 1px 6px rgba(0,0,0,0.5); } .topnav { display: flex; gap: 0.2rem; } .topnav button { background: none; border: none; cursor: pointer; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(246,241,232,0.7); padding: 0.45rem 0.6rem; border-radius: 6px; transition: all 0.3s; white-space: nowrap; } .topnav button:hover, .topnav button.is-active { color: #fff; background: rgba(255,255,255,0.12); } .mapbtn { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; background: rgba(0,0,0,0.25); border: 1px solid rgba(246,241,232,0.25); color: #f6f1e8; border-radius: 999px; padding: 0.4rem 0.85rem; font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; transition: all 0.3s; } .mapbtn:hover { border-color: var(--brass); } .mapbtn svg { width: 15px; height: 15px; } /* ============================ PENDANT LIGHT ============================== */ .pendant { position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 55; background: none; border: none; cursor: pointer; width: 120px; height: 230px; padding: 0; transform-origin: 50% 0; animation: sway 6s ease-in-out infinite; /* only the lamp itself is clickable — the full 120×230 box used to sit over the top nav and steal clicks from the middle buttons */ pointer-events: none; } .pendant__shade, .pendant__bulb, .pendant__pull { pointer-events: auto; } @keyframes sway { 0%,100% { transform: translateX(-50%) rotate(-1.1deg); } 50% { transform: translateX(-50%) rotate(1.1deg); } } .pendant__cord { position: absolute; top: 0; left: 50%; width: 2px; height: 92px; background: linear-gradient(#111, #333); transform: translateX(-50%); } .pendant__shade { position: absolute; top: 86px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 38px solid transparent; border-right: 38px solid transparent; border-top: 46px solid #1c1a18; border-radius: 6px 6px 30px 30px / 6px 6px 12px 12px; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.5)); } .pendant__shade::after { content: ""; position: absolute; left: -38px; top: -2px; width: 76px; height: 8px; background: #2a2724; border-radius: 50%; } .pendant__bulb { position: absolute; top: 128px; left: 50%; transform: translateX(-50%); width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff6d8, #f0c869); box-shadow: 0 0 16px 4px rgba(255, 222, 140, 0.85); transition: box-shadow 0.5s var(--ease), background 0.5s var(--ease), opacity 0.5s; } .pendant__glow { position: absolute; top: 96px; left: 50%; transform: translateX(-50%); width: 460px; height: 360px; border-radius: 50%; pointer-events: none; background: radial-gradient(ellipse at top, rgba(255,236,180,0.5), transparent 62%); opacity: 0; transition: opacity 0.6s var(--ease); } .pendant__pull { position: absolute; top: 150px; left: calc(50% + 30px); width: 2px; height: 52px; background: #2a2724; transform-origin: top; transition: transform 0.25s var(--ease); cursor: pointer; } .pendant__knob { position: absolute; bottom: -12px; left: 50%; margin-left: -6.5px; width: 13px; height: 13px; border-radius: 50%; background: radial-gradient(circle at 38% 32%, #f0dca0, var(--brass) 62%, var(--brass-deep)); box-shadow: 0 2px 5px rgba(0,0,0,0.5), 0 0 10px 2px rgba(201,150,47,0.5); } .pendant__shade, .pendant__bulb { cursor: pointer; } /* the cord container has pointer-events:none, so :hover never reaches it — drive the feedback from the parts that actually take the pointer */ .pendant__shade:hover ~ .pendant__pull, .pendant__bulb:hover ~ .pendant__pull, .pendant__pull:hover { transform: translateY(7px); } .pendant__shade:active ~ .pendant__pull, .pendant__bulb:active ~ .pendant__pull, .pendant__pull:active { transform: translateY(14px); } /* a small label so the lamp reads as a control, not decoration */ .pendant__hint { position: absolute; top: 214px; left: 50%; transform: translate(-50%, 4px); white-space: nowrap; pointer-events: none; opacity: 0; padding: 0.32rem 0.7rem; border-radius: 999px; background: rgba(20,16,10,0.72); color: #f3ece0; font-family: var(--sans); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; backdrop-filter: blur(4px); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); } .pendant__hint::after { content: "Pull to dim"; } [data-lights="off"] .pendant__hint::after { content: "Pull for daylight"; } .pendant__shade:hover ~ .pendant__hint, .pendant__bulb:hover ~ .pendant__hint, .pendant__pull:hover ~ .pendant__hint { opacity: 1; transform: translate(-50%, 0); } /* a slow idle tug invites the pull without shouting */ @media (prefers-reduced-motion: no-preference) { @keyframes cordTug { 0%, 86%, 100% { transform: translateY(0); } 93% { transform: translateY(5px); } } .pendant__knob { animation: cordTug 5s ease-in-out infinite; } } /* evening: bulb blazes, glow shows */ [data-lights="off"] .pendant__bulb { box-shadow: 0 0 30px 10px rgba(255, 220, 130, 0.95); background: radial-gradient(circle at 40% 35%, #fffef2, #ffd35e); } [data-lights="off"] .pendant__glow { opacity: 1; } [data-lights="on"] .pendant__bulb { opacity: 0.85; } /* ============================ THE STAGE / HALL ========================== */ .stage { position: fixed; inset: 0; z-index: 10; perspective: var(--persp); perspective-origin: var(--look-x) var(--look-y); background: #0a0908; overflow: hidden; transition: perspective-origin 1.1s var(--ease); cursor: grab; } .stage.is-dragging { cursor: grabbing; } body.is-focused .stage { filter: brightness(0.62) blur(2px); transition: filter 0.8s var(--ease); } .stage { transition: filter 0.8s var(--ease); } /* evening vignette: the gallery darkens around the edges, throwing the centre of the room (and whatever you've walked up to) into the light */ .stage::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; background: radial-gradient(ellipse 82% 70% at var(--look-x) 46%, transparent 34%, rgba(0,0,0,0.5) 74%, rgba(0,0,0,0.96) 100%); opacity: var(--vignette, 0); transition: opacity 1.2s var(--ease); } .world { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-style: preserve-3d; transform: translate3d(var(--camx, 0px), 0px, var(--cam)); transition: transform 1.2s var(--ease); will-change: transform; } .world > * { position: absolute; top: 50%; left: 50%; } /* surfaces ------------------------------------------------------------- */ /* the world plane and surfaces must not intercept clicks — only the artworks are interactive (otherwise the flat .world plane swallows every click and the 3D-positioned paintings never receive it) */ .world, .surface, .floor, .ceiling, .wall { pointer-events: none; } .art { pointer-events: auto; } .surface { transform-style: preserve-3d; } .floor { width: var(--hall-w); height: var(--hall-d); transform: translate(-50%, -50%) rotateX(-90deg) translateZ(calc(var(--hall-h) / 2)); background: linear-gradient(180deg, rgba(0,0,0,0.5), rgba(0,0,0,0.05) 30%, rgba(0,0,0,0.45)), repeating-linear-gradient(90deg, var(--floor-a) 0 78px, var(--floor-b) 78px 80px), linear-gradient(90deg, var(--floor-b), var(--floor-a) 50%, var(--floor-b)); box-shadow: inset 0 0 200px rgba(0,0,0,0.6); } .ceiling { width: var(--hall-w); height: var(--hall-d); transform: translate(-50%, -50%) rotateX(90deg) translateZ(calc(var(--hall-h) / 2)); background: linear-gradient(180deg, rgba(0,0,0,0.3), transparent 40%, rgba(0,0,0,0.3)), var(--ceil); } /* track-light rails on the ceiling */ .ceiling::before, .ceiling::after { content: ""; position: absolute; top: 0; bottom: 0; width: 10px; background: repeating-linear-gradient(180deg, #2c2c30 0 70px, #d7d2c0 70px 84px); opacity: 0.9; } .ceiling::before { left: 34%; } .ceiling::after { right: 34%; } .wall { width: var(--hall-d); height: var(--hall-h); background: linear-gradient(90deg, var(--wall-shade), var(--wall) 22%, var(--wall) 78%, var(--wall-shade)); } .wall-left { transform: translate(-50%, -50%) rotateY(90deg) translateZ(calc(var(--hall-w) / 2)); box-shadow: inset 0 80px 160px -40px rgba(0,0,0,0.4), inset 0 -120px 160px -40px rgba(0,0,0,0.5); } .wall-right { transform: translate(-50%, -50%) rotateY(-90deg) translateZ(calc(var(--hall-w) / 2)); box-shadow: inset 0 80px 160px -40px rgba(0,0,0,0.4), inset 0 -120px 160px -40px rgba(0,0,0,0.5); } .wall-back { width: var(--hall-w); transform: translate(-50%, -50%) rotateY(180deg) translateZ(calc(var(--hall-d) / 2)); background: linear-gradient(180deg, var(--wall-shade), var(--wall) 30%, var(--wall) 70%, var(--wall-shade)); } /* skirting board + a thin crown line give the flat walls some architecture. Coplanar pseudo-elements of each wall, so no extra z-sorting. */ .wall::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30px; background: linear-gradient(180deg, rgba(0,0,0,0.03), rgba(0,0,0,0.16)); border-top: 1px solid rgba(0,0,0,0.16); pointer-events: none; } .wall::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 16px; background: linear-gradient(180deg, rgba(0,0,0,0.12), transparent); border-bottom: 1px solid rgba(0,0,0,0.07); pointer-events: none; } /* artwork -------------------------------------------------------------- */ .art { --w: 280px; --h: 340px; --z-off: 8px; /* how far the piece stands off its wall */ width: var(--w); height: var(--h); transform: translate(-50%, -50%) translate3d(var(--ax), var(--ay), var(--az)) rotateY(var(--ar)) translateZ(var(--z-off)); cursor: pointer; } /* back-wall pieces sit nearly coplanar with the back wall; without a wider gap the CSS-3D painter sort flips as the camera glides and the frame flickers in and out. Standing them further off the wall makes the ordering stable. */ .art--future, .art--about { --z-off: 46px; } /* engraved gallery statement centred on the back wall, filling the space between the two frames. Non-interactive; sits flush on the wall, well clear of the frames' footprint (they start at |ax|=220; this is capped at 180) so its screen-space box never overlaps theirs. A near-coplanar overlap is what caused the Curator's Office flicker: two large preserve-3d layers a few px apart in depth, sharing a few px of screen space, is exactly the case browsers can't sort stably frame to frame. Zero overlap is the actual fix; the depth gap alone doesn't reliably prevent z-fighting. */ .wall-statement { width: 360px; text-align: center; pointer-events: none; user-select: none; transform: translate(-50%, -50%) translate3d(var(--ax), var(--ay), var(--az)) translateZ(2px); display: grid; justify-items: center; gap: 0.5rem; color: color-mix(in srgb, var(--ink) 40%, transparent); } .wall-statement__k { font-family: var(--serif); font-size: 2.5rem; line-height: 1; letter-spacing: 0.02em; color: color-mix(in srgb, var(--ink) 34%, transparent); text-shadow: 0 1px 0 color-mix(in srgb, var(--wall) 80%, #fff); } .wall-statement__rule { width: 120px; height: 1px; background: color-mix(in srgb, var(--brass) 62%, transparent); } .wall-statement__sub { font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: color-mix(in srgb, var(--ink) 46%, transparent); } .wall-statement__est { font-family: var(--serif); font-style: italic; font-size: 0.86rem; letter-spacing: 0.14em; color: color-mix(in srgb, var(--brass) 70%, transparent); } [data-lights="off"] .wall-statement__k { text-shadow: none; } .art__spot { /* pool of light a picture-light throws on the wall around the piece */ position: absolute; left: 50%; top: 42%; width: 210%; height: 230%; transform: translate(-50%, -50%); background: radial-gradient(ellipse 42% 50% at 50% 38%, color-mix(in srgb, var(--spot) 70%, transparent), transparent 60%), radial-gradient(ellipse 64% 72% at center, var(--spot), transparent 66%); pointer-events: none; opacity: 0.95; transition: opacity 0.9s var(--ease), background 0.9s var(--ease); } .art__frame { position: absolute; inset: 0; background: #14110d; padding: 14px; box-shadow: 0 8px 22px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.4); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); } .art__frame::before { content: ""; position: absolute; inset: 9px; border: 1.5px solid var(--brass); opacity: 0.55; pointer-events: none; } .art__mat { background: #faf7f0; height: 100%; padding: 18px; display: grid; place-items: center; } .art__mat svg { width: 100%; height: 100%; color: var(--art-accent, var(--brass)); } .art__label { position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); text-align: center; white-space: nowrap; pointer-events: none; } .art__label b { display: block; font-family: var(--serif); font-size: 1.1rem; color: var(--ink); } .art__label span { font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); } .art:hover .art__frame { transform: scale(1.04); box-shadow: 0 16px 40px rgba(0,0,0,0.6); } .art:hover .art__spot { opacity: 1; } /* the focused piece gets a real spotlight, even in daylight */ .art.is-focused .art__spot { opacity: 1; background: radial-gradient(ellipse 40% 46% at 50% 36%, rgba(255,240,205,0.55), transparent 60%), radial-gradient(ellipse 64% 72% at center, rgba(255,238,200,0.4), transparent 66%); } /* dust drifting in the gallery air — quiet ambient life */ .hall-air { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; } .hall-air span { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255,244,214,0.85), transparent 70%); opacity: 0; animation: dust var(--dur, 22s) ease-in-out infinite; will-change: transform, opacity; } @keyframes dust { 0% { transform: translate(0, 12px); opacity: 0; } 18% { opacity: 0.55; } 82% { opacity: 0.55; } 100% { transform: translate(var(--dx, 10px), -48px); opacity: 0; } } .art.is-focused { cursor: default; } /* a placard mounted next to wall pieces (engraved plate) */ .art__plate { position: absolute; left: 50%; bottom: -58px; transform: translateX(-50%); background: linear-gradient(180deg, #d9b87a, var(--brass-deep)); color: #2a1f10; font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; padding: 0.2rem 0.7rem; border-radius: 2px; white-space: nowrap; } /* ============================ PIECE DETAIL ============================== */ .piece { position: fixed; top: 0; right: 0; z-index: 60; width: min(440px, 92vw); height: 100%; background: color-mix(in srgb, var(--wall) 92%, #000 0%); color: var(--ink); border-left: 1px solid var(--rule); box-shadow: -30px 0 80px -30px rgba(0,0,0,0.6); padding: clamp(1.4rem, 3vw, 2.4rem); overflow-y: auto; transform: translateX(100%); transition: transform 0.45s var(--ease); } .piece.is-open { transform: translateX(0); } /* when the focused piece is on the right wall, the panel comes in from the left so the painting stays in view */ .piece--left { right: auto; left: 0; border-left: none; border-right: 1px solid var(--rule); box-shadow: 30px 0 80px -30px rgba(0,0,0,0.6); transform: translateX(-100%); } .piece__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.4rem; } .piece__steps { display: flex; gap: 0.5rem; } .piece__steps button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rule); background: transparent; color: var(--ink); font-size: 1.3rem; line-height: 1; cursor: pointer; transition: all 0.3s; } .piece__steps button:hover { border-color: var(--brass); color: var(--brass); } .piece__art { background: #14110d; padding: 12px; margin-bottom: 1.4rem; box-shadow: 0 14px 34px rgba(0,0,0,0.45); position: relative; } .piece__art::before { content: ""; position: absolute; inset: 7px; border: 1.5px solid var(--brass); opacity: 0.55; pointer-events: none; } .piece__art-mat { background: #faf7f0; aspect-ratio: 1.15 / 1; padding: 22px; display: grid; place-items: center; } .piece__art-mat svg { width: 100%; height: 100%; } .piece__close { background: none; border: 1px solid var(--rule); color: var(--ink-soft); border-radius: 999px; padding: 0.5rem 1rem; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.08em; cursor: pointer; transition: all 0.3s; margin-bottom: 1.6rem; } .piece__close { margin-bottom: 0; } .piece__close:hover { border-color: var(--brass); color: var(--ink); } .piece__no { font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: var(--brass-deep); } .piece__title { font-size: clamp(2.2rem, 5vw, 3rem); margin: 0.1rem 0 0.2rem; } .piece__tagline { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--ink-soft); margin-bottom: 1.2rem; } .piece__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 0.8rem; align-items: center; padding: 0.85rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-bottom: 1.2rem; } .chip { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.3rem 0.7rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--ink); border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent); } .chip--status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 7px var(--accent); } .piece__medium { font-size: 0.78rem; color: var(--ink-soft); } .piece__blurb { font-size: 1.04rem; margin-bottom: 0.8rem; } .piece__detail { color: var(--ink-soft); font-size: 0.95rem; margin-bottom: 1.2rem; } .piece__list { list-style: none; display: grid; gap: 0.5rem; margin-bottom: 1.6rem; } .piece__list li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.92rem; } .piece__list li::before { content: ""; margin-top: 0.55em; width: 6px; height: 6px; flex: none; background: var(--accent); transform: rotate(45deg); } .piece__links { display: flex; flex-wrap: wrap; gap: 0.7rem; } .linkbtn { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; letter-spacing: 0.06em; text-decoration: none; padding: 0.6rem 1.15rem; border-radius: 999px; transition: all 0.35s var(--ease); } .linkbtn--primary { background: var(--accent); color: #1a120a; font-weight: 600; border: 1px solid var(--accent); } .linkbtn--primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--accent) 60%, transparent); } .linkbtn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--rule); } .linkbtn--ghost:hover { border-color: var(--accent); color: var(--accent); } .linkbtn svg { width: 14px; height: 14px; } /* ============================ HUD ======================================= */ .hud { position: fixed; left: 0; right: 0; bottom: clamp(1rem, 4vh, 2.2rem); z-index: 45; display: flex; align-items: center; justify-content: center; gap: 1.2rem; transition: opacity 0.5s var(--ease); } .hud.is-hidden { opacity: 0; pointer-events: none; } .hud__btn { width: 50px; height: 50px; border-radius: 50%; border: 1px solid rgba(246,241,232,0.3); background: rgba(0,0,0,0.35); color: #f6f1e8; font-size: 1.5rem; line-height: 1; cursor: pointer; backdrop-filter: blur(6px); transition: all 0.3s; } .hud__btn:hover { border-color: var(--brass); background: rgba(0,0,0,0.55); } .hud__hint { color: #f6f1e8; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; text-shadow: 0 1px 6px rgba(0,0,0,0.7); min-width: 16rem; text-align: center; } /* ============================ MAP ROOM ================================== */ .maproom { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem); background: rgba(10,8,6,0.7); backdrop-filter: blur(14px); opacity: 0; visibility: hidden; transition: opacity 0.4s var(--ease), visibility 0.4s; } .maproom.is-open { opacity: 1; visibility: visible; } .maproom__inner { width: min(960px, 100%); max-height: 100%; background: var(--wall); border: 1px solid var(--rule); border-radius: 6px; padding: clamp(1.2rem, 3vw, 2.2rem); box-shadow: 0 40px 90px -30px rgba(0,0,0,0.6); position: relative; transform: scale(0.96); transition: transform 0.45s var(--ease); overflow: auto; color: var(--ink); } .maproom.is-open .maproom__inner { transform: scale(1); } .maproom__title { font-family: var(--serif); font-size: clamp(1.6rem, 4vw, 2.4rem); text-align: center; } .maproom__hint { text-align: center; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass-deep); margin-top: 0.2rem; margin-bottom: 1rem; } .maproom__close { position: absolute; top: 0.9rem; right: 1rem; z-index: 2; background: transparent; border: 1px solid var(--rule); color: var(--ink-soft); border-radius: 999px; padding: 0.35rem 0.85rem; cursor: pointer; font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; transition: all 0.3s; } .maproom__close:hover { border-color: var(--brass); color: var(--ink); } .blueprint { width: 100%; height: auto; display: block; } .blueprint .grid line { stroke: var(--ink); opacity: 0.05; } .blueprint .spine { fill: color-mix(in srgb, var(--brass) 8%, transparent); stroke: var(--rule); stroke-width: 1.5; } .blueprint .door { stroke: var(--brass); stroke-width: 2; opacity: 0.5; } .room-a { cursor: pointer; outline: none; } .room-a .room-rect { fill: color-mix(in srgb, var(--wall) 60%, #fff 40%); stroke: var(--ink); stroke-opacity: 0.25; stroke-width: 1.5; transition: fill 0.3s var(--ease), stroke 0.3s var(--ease); } .room-a .room-no { fill: var(--brass-deep); font-family: var(--serif); font-style: italic; } .room-a .room-name { fill: var(--ink); font-family: var(--serif); } .room-a:hover .room-rect, .room-a:focus-visible .room-rect { fill: color-mix(in srgb, var(--brass) 22%, var(--wall)); stroke: var(--brass); stroke-opacity: 1; } .room-a.is-here .room-rect { stroke: var(--brass); stroke-opacity: 0.9; stroke-dasharray: 5 4; } .youhere { transform-box: fill-box; transform-origin: center; } .youhere circle.ping { animation: ping 1.8s var(--ease) infinite; transform-origin: center; } @keyframes ping { 0% { r: 6; opacity: 0.8; } 70%, 100% { r: 20; opacity: 0; } } .maproom__legend { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 0.8rem; font-size: 0.72rem; color: var(--ink-soft); } .maproom__legend .pin { width: 10px; height: 10px; border-radius: 50%; background: var(--brass); box-shadow: 0 0 8px var(--brass); } /* ============================ RESPONSIVE / A11Y ========================= */ /* ============================================================================= MOBILE — scroll gallery with themed animations (hidden on desktop) ========================================================================== */ .scroll { display: none; } .lights-m { display: none; } @media (max-width: 720px) { /* swap the experience: turn off the 3D hall, turn on scrolling */ html, body { height: auto; overflow-x: hidden; overflow-y: auto; } body { background: var(--wall); transition: background 0.5s var(--ease); } .stage, .pendant, .hud, .piece, .maproom { display: none !important; } .topnav, .mapbtn { display: none; } .topbar { position: fixed; background: linear-gradient(180deg, color-mix(in srgb, var(--wall) 88%, transparent), transparent); } .brand, .brand__name { color: var(--ink); text-shadow: none; } .brand__mark { border-color: var(--ink); } .scroll { display: block; color: var(--ink); } .entrance__title { font-size: clamp(2rem, 8.5vw, 3rem); } .entrance__inner { padding: 1.4rem; } .entrance__col { display: none; } /* entrance columns only on desktop */ } /* ============================================================================= MOBILE — a pull-chain to dim the gallery, and a real picture-light spotlight ========================================================================== */ @media (max-width: 720px) { /* the light control: a brass pull-chain hanging from the top-right corner */ .lights-m { display: block; position: fixed; top: 0; right: clamp(14px, 5vw, 26px); z-index: 56; width: 34px; height: 66px; padding: 0; background: none; border: none; cursor: pointer; animation: lmBob 3.6s ease-in-out infinite; } @keyframes lmBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } } .lights-m__cord { position: absolute; top: 0; left: 50%; width: 2px; height: 42px; border-radius: 0 0 2px 2px; transform: translateX(-50%); transform-origin: 50% 0; background: linear-gradient(180deg, transparent, var(--brass-deep) 24%, var(--brass)); } .lights-m__bead { position: absolute; top: 38px; left: 50%; width: 16px; height: 16px; border-radius: 50%; transform: translateX(-50%); background: radial-gradient(circle at 38% 33%, #fff3cf, var(--brass) 66%); box-shadow: 0 0 0 1px rgba(0,0,0,0.12), 0 3px 6px rgba(0,0,0,0.28); transition: box-shadow 0.5s var(--ease), background 0.5s var(--ease); } .lights-m__label { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); font-family: var(--sans); font-size: 0.46rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; opacity: 0.65; } /* tap = a satisfying pull: the bead drops and the cord stretches, then snaps back */ .lights-m.is-pulled { animation: none; } .lights-m.is-pulled .lights-m__bead { animation: lmPull 0.5s var(--ease); } .lights-m.is-pulled .lights-m__cord { animation: lmPullCord 0.5s var(--ease); } @keyframes lmPull { 0% { transform: translateX(-50%) translateY(0); } 34% { transform: translateX(-50%) translateY(11px); } 100% { transform: translateX(-50%) translateY(0); } } @keyframes lmPullCord { 0% { transform: translateX(-50%) scaleY(1); } 34% { transform: translateX(-50%) scaleY(1.22); } 100% { transform: translateX(-50%) scaleY(1); } } /* evening: the bead glows like a lit picture-light, so the state is obvious */ [data-lights="off"] .lights-m__bead { background: radial-gradient(circle at 38% 33%, #fffaf0, #ffd25e 66%); box-shadow: 0 0 14px 4px rgba(255,210,120,0.8), 0 0 0 1px rgba(0,0,0,0.1); } [data-lights="off"] .lights-m__label { color: var(--brass); opacity: 0.85; } /* LIGHTS OFF: the page drops to night, edges fall into shadow, and a real picture-light pours onto each framed piece */ [data-lights="off"] body { background: #0d0b09; } [data-lights="off"] .scroll::before { content: ""; position: fixed; inset: 0; z-index: 4; pointer-events: none; background: radial-gradient(ellipse 92% 58% at 50% 42%, transparent 26%, rgba(0,0,0,0.5) 78%, rgba(0,0,0,0.82) 100%); } [data-lights="off"] .m-artwrap { box-shadow: 0 0 72px 16px rgba(255,231,178,0.18), 0 24px 52px rgba(0,0,0,0.62); } /* the lamp glow above the frame + the pool it casts over the artwork */ [data-lights="off"] .m-artwrap::after { content: ""; position: absolute; inset: -34% -16% -10%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 34% 26% at 50% -2%, rgba(255,240,200,0.55), transparent 70%), radial-gradient(ellipse 72% 80% at 50% 28%, rgba(255,236,194,0.22), transparent 72%); } [data-lights="off"] .m-soon__frame { box-shadow: 0 0 56px 8px rgba(255,236,194,0.1); } /* the connective thread + nodes catch the warm light too */ [data-lights="off"] .m-link__node { box-shadow: 0 0 0 5px var(--wall), 0 0 18px 2px rgba(255,224,150,0.25); } } /* hero */ .m-hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 6rem 1.5rem 3rem; } /* the connective thread leaves the hero, leading the eye into the gallery */ .m-hero__thread { position: absolute; left: 50%; bottom: 0; width: 1.5px; height: 13svh; transform: translateX(-50%) scaleY(0); transform-origin: 50% 0; background: linear-gradient(180deg, transparent, var(--brass)); animation: threadDrop 1s var(--ease) 2.6s forwards; animation-play-state: paused; } @keyframes threadDrop { to { transform: translateX(-50%) scaleY(1); } } .m-hero > *:not(.m-hero__thread) { width: 100%; max-width: 30rem; } /* let text wrap instead of shrink-fitting */ .m-est { font-family: var(--serif); font-style: italic; letter-spacing: 0.3em; color: var(--brass-deep); margin-bottom: 0.6rem; } .m-name { position: relative; font-size: clamp(2.1rem, 8.6vw, 4.2rem); line-height: 1; } /* a slow gold sheen catches the name, like gallery light moving across it */ .m-name::after { content: ""; position: absolute; top: -10%; bottom: -10%; left: -12%; width: 46%; background: linear-gradient(100deg, transparent, rgba(255,246,214,0.6) 50%, transparent); pointer-events: none; transform: translateX(-60%) skewX(-12deg); animation: nameSheen 6.5s ease-in-out 3.1s infinite; animation-play-state: paused; } @keyframes nameSheen { 0% { transform: translateX(-60%) skewX(-12deg); opacity: 0; } 9% { opacity: 0.85; } 33% { transform: translateX(360%) skewX(-12deg); opacity: 0; } 100% { transform: translateX(360%) skewX(-12deg); opacity: 0; } } /* per-letter reveal; the lowercase "l"s rise like gallery columns — held until you enter */ .ltr { display: inline-block; opacity: 0; transform: translateY(26px); animation: ltrIn 0.75s var(--ease) forwards; animation-delay: calc(var(--i) * 0.06s + 1.15s); animation-play-state: paused; } .ltr--sp { width: 0.28em; } .ltr--col { color: var(--brass); transform-origin: 50% 100%; opacity: 0; animation: ltrCol 1s var(--ease) forwards, colGlow 3s ease-in-out infinite; animation-delay: calc(var(--i) * 0.06s + 1.15s), 2.9s; animation-play-state: paused; text-shadow: 0 0 18px color-mix(in srgb, var(--brass) 55%, transparent); } @keyframes ltrIn { to { opacity: 1; transform: none; } } @keyframes ltrCol { 0% { opacity: 0; transform: scaleY(0); } 55% { opacity: 1; transform: scaleY(1.18); } 100% { opacity: 1; transform: scaleY(1); } } /* the gold columns keep a living glow once they've risen */ @keyframes colGlow { 0%, 100% { text-shadow: 0 0 9px color-mix(in srgb, var(--brass) 32%, transparent); } 50% { text-shadow: 0 0 24px color-mix(in srgb, var(--brass) 82%, transparent), 0 0 5px color-mix(in srgb, var(--brass) 55%, transparent); } } /* the gallery only wakes up once you've stepped through the doors */ body.is-entered .ltr, body.is-entered .ltr--col, body.is-entered .m-hero__thread, body.is-entered .m-name::after { animation-play-state: running; } /* the name keeps a slow, living drift */ body.is-entered .m-name { animation: nameFloat 7s ease-in-out 3.1s infinite; } @keyframes nameFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } } .m-est, .m-tag, .m-lede, .m-cue { opacity: 0; transform: translateY(22px); transition: opacity 0.85s var(--ease), transform 0.85s var(--ease); } body.is-entered .m-est { transition-delay: 1.15s; } body.is-entered .m-tag { transition-delay: 1.85s; } body.is-entered .m-lede { transition-delay: 2.05s; } body.is-entered .m-cue { transition-delay: 2.3s; } body.is-entered .m-est, body.is-entered .m-tag, body.is-entered .m-lede, body.is-entered .m-cue { opacity: 1; transform: none; } .m-tag { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--ink-soft); margin-top: 0.4rem; } .m-lede { max-width: 22rem; margin: 1.6rem auto 0; color: var(--ink-soft); } .m-cue { margin-top: 2.6rem; font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--brass-deep); } body.is-entered .m-cue { animation: bob 2.2s var(--ease) 3s infinite; } @keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } } /* exhibit section — sized to its content, with gallery breathing room (no forced full-screen voids, so consecutive pieces read as connected) */ .m-exhibit { position: relative; overflow: hidden; padding: 8vh 1.5rem 7vh; } .m-stack { position: relative; z-index: 1; } /* staggered reveal of every line as the piece enters view */ .m-stack > * { opacity: 0; transform: translateY(26px); transition: opacity 0.75s var(--ease), transform 0.75s var(--ease); } .m-exhibit.in .m-stack > * { opacity: 1; transform: none; } .m-exhibit.in .m-stack > *:nth-child(1) { transition-delay: 0.04s; } .m-exhibit.in .m-stack > *:nth-child(2) { transition-delay: 0.12s; } .m-exhibit.in .m-stack > *:nth-child(3) { transition-delay: 0.20s; } .m-exhibit.in .m-stack > *:nth-child(4) { transition-delay: 0.28s; } .m-exhibit.in .m-stack > *:nth-child(5) { transition-delay: 0.36s; } .m-exhibit.in .m-stack > *:nth-child(6) { transition-delay: 0.44s; } .m-exhibit.in .m-stack > *:nth-child(7) { transition-delay: 0.52s; } .m-exhibit.in .m-stack > *:nth-child(8) { transition-delay: 0.60s; } .m-no { font-family: var(--serif); font-style: italic; color: var(--brass-deep); font-size: 1.05rem; } .m-artwrap { background: #14110d; padding: 12px; margin: 0.6rem 0 1.4rem; max-width: 320px; box-shadow: 0 16px 40px rgba(0,0,0,0.35); position: relative; } /* the connective thread — one thin gold line strung between pieces with the next room's numeral as a node. The gallery's through-line; compact, so the works feel deliberately spaced yet connected. */ .m-link { position: relative; min-height: 19svh; display: grid; place-items: center; } .m-link__line { position: absolute; left: 50%; top: 0; bottom: 0; width: 1.5px; background: linear-gradient(180deg, transparent, var(--brass) 16%, var(--brass) 84%, transparent); transform: translateX(-50%) scaleY(0); transform-origin: 50% 0; transition: transform 1.1s var(--ease); } .m-link.in .m-link__line { transform: translateX(-50%) scaleY(1); } .m-link__node { position: relative; z-index: 1; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--wall); border: 1px solid var(--brass); box-shadow: 0 0 0 5px var(--wall), 0 6px 16px rgba(0,0,0,0.12); /* mask the line behind the node */ opacity: 0; transform: scale(0.4); transition: opacity 0.6s var(--ease) 0.4s, transform 0.6s var(--ease) 0.4s; } .m-link.in .m-link__node { opacity: 1; transform: scale(1); } .m-link__node i { font-style: italic; font-family: var(--serif); font-size: 1.35rem; line-height: 1; color: var(--brass-deep); } .m-link__cap { position: absolute; left: 50%; bottom: 12%; transform: translateX(-50%); font-family: var(--sans); font-size: 0.62rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; opacity: 0; transition: opacity 0.7s var(--ease) 0.65s; } .m-link.in .m-link__cap { opacity: 0.8; } .m-artwrap::before { content: ""; position: absolute; inset: 7px; border: 1.5px solid var(--brass); opacity: 0.55; } .m-mat { background: #faf7f0; aspect-ratio: 1.1/1; display: grid; place-items: center; padding: 22px; } .m-mat svg { width: 100%; height: 100%; } .m-title { font-size: clamp(2.4rem, 10vw, 3.4rem); line-height: 1; } .m-ptag { font-family: var(--serif); font-style: italic; font-size: 1.25rem; color: var(--ink-soft); margin: 0.2rem 0 1rem; } .m-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 0.8rem; align-items: center; padding: 0.7rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-bottom: 1rem; } .m-medium { font-size: 0.76rem; color: var(--ink-soft); } .m-blurb { font-size: 1.04rem; margin-bottom: 0.8rem; } .m-list { list-style: none; display: grid; gap: 0.45rem; margin-bottom: 1.4rem; } .m-list li { display: flex; gap: 0.6rem; font-size: 0.92rem; } .m-list li::before { content: ""; margin-top: 0.55em; width: 6px; height: 6px; flex: none; background: var(--accent); transform: rotate(45deg); } .m-links { display: flex; flex-wrap: wrap; gap: 0.6rem; } /* ---- "Coming Soon" — the single reserved frame (desktop + mobile) ---- */ .soon-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--brass); animation: soonPulse 2.6s var(--ease) infinite; } @keyframes soonPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brass) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 15px transparent; } } /* desktop back-wall frame */ .art__frame--soon { background: #14110d; } .art__mat--soon { background: #161009; color: #e8dcc6; display: grid; place-items: center; align-content: center; gap: 0.55rem; text-align: center; padding: 1rem; } .art__mat--soon .soon-title { font-family: var(--serif); font-style: italic; font-size: 1.55rem; color: #e7c989; } .art__mat--soon .soon-cap { font-size: 0.58rem; letter-spacing: 0.24em; text-transform: uppercase; color: #9a8e79; } /* mobile section */ .m-soon { min-height: 74svh; display: flex; align-items: center; justify-content: center; padding: 7vh 1.5rem 12vh; } .m-soon__frame { position: relative; width: min(30rem, 84vw); padding: clamp(2.6rem, 10vw, 4rem) 1.5rem; text-align: center; background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--brass) 11%, transparent), transparent 72%); border: 1px solid var(--rule); opacity: 0; transform: translateY(26px) scale(0.985); transition: opacity 0.85s var(--ease), transform 0.85s var(--ease); } .m-soon.in .m-soon__frame { opacity: 1; transform: none; } .m-soon .soon-dot { margin-bottom: 1.1rem; } .m-soon__corner { position: absolute; width: 16px; height: 16px; border: 1px solid var(--brass); opacity: 0.7; } .m-soon__corner--tl { top: -1px; left: -1px; border-right: none; border-bottom: none; } .m-soon__corner--tr { top: -1px; right: -1px; border-left: none; border-bottom: none; } .m-soon__corner--bl { bottom: -1px; left: -1px; border-right: none; border-top: none; } .m-soon__corner--br { bottom: -1px; right: -1px; border-left: none; border-top: none; } .m-soon__no { font-family: var(--serif); font-style: italic; color: var(--brass-deep); font-size: 1rem; } .m-soon__title { font-family: var(--serif); font-size: clamp(2rem, 11vw, 3rem); margin: 0.3rem 0 0.55rem; color: var(--ink); line-height: 1; } .m-soon__cap { font-size: 0.68rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--ink-soft); } /* curator + footer */ .m-about { padding: 10vh 1.6rem; text-align: center; border-top: 1px solid var(--rule); } .m-about h2 { font-size: clamp(2rem, 9vw, 3rem); margin: 0.4rem 0 1rem; } .m-about p { color: var(--ink); max-width: 28rem; margin: 0 auto; } .m-about .m-links { justify-content: center; margin-top: 1.6rem; } .m-footer { text-align: center; padding: 3rem 1.5rem; border-top: 1px solid var(--rule); color: var(--ink-soft); } .m-footer b { font-family: var(--serif); font-style: italic; font-size: 1.4rem; color: var(--ink); display: block; margin-bottom: 0.4rem; } /* ============================================================================= LIVE APP PREVIEWS — each framed "artwork" is a faithful, animated recreation of the real product UI (real colours pulled from each codebase). They fill the mat edge to edge like a screen on the wall, and scale with the frame via container units. Base (un-animated) state is the finished frame, so prefers-reduced-motion freezes them on something legible. ========================================================================== */ .art__mat, .piece__art-mat, .m-mat { position: relative; } .art__mat:has(.shot), .piece__art-mat:has(.shot), .m-mat:has(.shot) { padding: 0; background: #0b0d12; container-type: inline-size; overflow: hidden; } .shot { position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column; font-family: var(--sans); text-align: left; line-height: 1.3; -webkit-font-smoothing: antialiased; } .shot * { box-sizing: border-box; } .shot svg { display: block; } .shot b { font-weight: 700; } /* ---- GitGauge — the real in-page verdict overlay (GitHub dark) ---- */ .shot--gg { background: #161b22; color: #e6edf3; } .shot--la { background: #14120D; color: #F4EFE4; } /* a faint green-tinted glow under the notch, so the mat reads as a Mac desktop with a wallpaper rather than an empty void between loops */ .shot--ts { background: radial-gradient(130% 100% at 50% 0%, #131f17 0%, #0b0d10 60%); color: #eef1f3; } .gg-bar { display: flex; align-items: center; gap: 1.8cqw; padding: 3cqw 4cqw; background: #0d1117; border-bottom: 1px solid #30363d; } .gg-dot { width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: #58a6ff; flex: none; } .gg-brand { font-size: 3cqw; font-weight: 700; letter-spacing: .1em; color: #58a6ff; } .gg-repo { margin-left: auto; font-size: 3.2cqw; font-weight: 600; color: #e6edf3; white-space: nowrap; } .gg-repo b { color: #8b949e; font-weight: 400; } .gg-body { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 2.6cqw; padding: 2cqw 0; } .gg-row { display: flex; align-items: center; gap: 3.5cqw; padding: 0 4.5cqw; } .gg-stats { display: flex; flex-wrap: wrap; gap: 1.6cqw; padding: 0 4.5cqw; } .gg-pill { font-size: 2.5cqw; color: #8b949e; background: #0d1117; border: 1px solid #30363d; border-radius: 10cqw; padding: 0.6cqw 2cqw; } .shot .gg-gauge { width: 22cqw; height: 22cqw; flex: none; overflow: visible; } .gg-arc-track, .gg-arc-fill { fill: none; stroke-width: 6; stroke-linecap: round; transform-box: view-box; transform-origin: center; transform: rotate(135deg); } .gg-arc-track { stroke: #30363d; stroke-dasharray: 136.7 45.6; } .gg-arc-fill { stroke: #3fb950; stroke-dasharray: 123 200; stroke-dashoffset: 0; animation: ggFill 4.6s var(--ease) infinite; } @keyframes ggFill { 0% { stroke-dashoffset: 123; } 28% { stroke-dashoffset: 0; } 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 123; } } .gg-arc-num { fill: #3fb950; font-size: 17px; font-weight: 700; text-anchor: middle; } .gg-info { min-width: 0; } .gg-num { font-size: 11cqw; font-weight: 700; color: #3fb950; line-height: 1; } .gg-lbl { font-size: 3.1cqw; color: #8b949e; margin-top: 1cqw; } .gg-metrics { display: flex; flex-direction: column; gap: 1.9cqw; padding: 0 4.5cqw; } .gg-mt { display: flex; justify-content: space-between; font-size: 2.9cqw; } .gg-mt span { color: #8b949e; } .gg-mt b { color: #3fb950; font-weight: 600; } .gg-track { height: 1.7cqw; background: #0d1117; border-radius: 2cqw; margin-top: 1cqw; overflow: hidden; } .gg-track i { display: block; height: 100%; width: var(--w); background: #3fb950; border-radius: 2cqw; animation: ggBar 4.6s var(--ease) infinite; } @keyframes ggBar { 0% { width: 0; } 30% { width: var(--w); } 88% { width: var(--w); } 100% { width: 0; } } /* ---- BetaTrace — the real glucose dashboard (dark mint) ---- */ .shot--bt { background: #0e1512; color: #E8F5F0; } .bt-bar { display: flex; align-items: center; gap: 2cqw; padding: 3cqw 4cqw; border-bottom: 1px solid rgba(45,212,168,0.15); } .bt-logo { width: 3.4cqw; height: 3.4cqw; border-radius: 1cqw; background: linear-gradient(135deg, #56f1c3, #2DD4A8); flex: none; } .bt-name { font-size: 3.4cqw; font-weight: 600; } .bt-tag { margin-left: auto; font-size: 2.5cqw; color: #2DD4A8; border: 1px solid rgba(45,212,168,0.3); border-radius: 4cqw; padding: 0.6cqw 2cqw; } .bt-chart { position: relative; flex: 1; min-height: 0; padding: 3cqw 4cqw 1cqw; } .shot .bt-chart svg { width: 100%; height: 100%; } .bt-band { fill: rgba(45,212,168,0.09); } .bt-line { fill: none; stroke: #56f1c3; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 0; filter: drop-shadow(0 0 2px rgba(86,241,195,0.55)); animation: btDraw 5s var(--ease) infinite; } @keyframes btDraw { 0% { stroke-dashoffset: 100; } 34% { stroke-dashoffset: 0; } 88% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 100; } } .bt-read { position: absolute; right: 6cqw; top: 36%; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: #56f1c3; animation: btPulse 2.6s ease-in-out infinite; } @keyframes btPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(86,241,195,0.5); } 60% { box-shadow: 0 0 0 3cqw rgba(86,241,195,0); } } .bt-stats { display: flex; gap: 2cqw; padding: 1cqw 4cqw 2cqw; } .bt-stat { flex: 1; background: #132B23; border: 1px solid rgba(45,212,168,0.12); border-radius: 2cqw; padding: 2cqw 2.2cqw; } .bt-stat b { display: block; font-size: 5.2cqw; color: #56f1c3; line-height: 1; } .bt-stat span { font-size: 2.3cqw; color: #8BA89F; } .bt-ai { display: flex; align-items: center; gap: 2cqw; margin: 0 4cqw 3.6cqw; padding: 1.8cqw 2.6cqw; background: rgba(45,212,168,0.08); border: 1px solid rgba(45,212,168,0.16); border-radius: 2.5cqw; overflow: hidden; } .bt-ai-dot { width: 3.4cqw; height: 3.4cqw; border-radius: 50%; flex: none; background: linear-gradient(135deg, #56f1c3, #2DD4A8); animation: btAiDot 2.6s ease-in-out infinite; } @keyframes btAiDot { 0%, 100% { box-shadow: 0 0 0 0 rgba(86,241,195,0.5); } 55% { box-shadow: 0 0 0 1.6cqw rgba(86,241,195,0); } } .bt-ai-msg { font-size: 2.7cqw; color: #bfeadd; white-space: nowrap; overflow: hidden; } .bt-ai-msg b { color: #56f1c3; font-weight: 700; margin-right: 1cqw; } .shot--bt .bt-ai-msg { display: inline-block; max-width: 100%; animation: btType 5s steps(40) infinite; } @keyframes btType { 0% { max-width: 0; } 24% { max-width: 100%; } 92% { max-width: 100%; } 100% { max-width: 0; } } /* ---- FutBoard — the real near-black, Linear-style dashboard ---- */ .shot--fb { background: #080809; color: #ededee; letter-spacing: -0.01em; } .fb-bar { display: flex; align-items: center; gap: 1.6cqw; padding: 2.8cqw 3.4cqw; border-bottom: 1px solid rgba(255,255,255,0.05); } .fb-logo { width: 4cqw; height: 4cqw; border-radius: 1.2cqw; background: #ededee; flex: none; } .fb-name { font-size: 3.3cqw; font-weight: 700; } .fb-tabs { display: flex; gap: 0.8cqw; margin-left: 2cqw; } .fb-tab { font-size: 2.3cqw; font-weight: 600; color: #707077; padding: 0.8cqw 1.8cqw; border-radius: 2cqw; } .fb-tab--on { background: #ededee; color: #08090a; } .fb-count { margin-left: auto; font-size: 2.3cqw; font-weight: 600; color: #ededee; background: #141419; border: 1px solid rgba(255,255,255,0.06); border-radius: 2cqw; padding: 0.8cqw 2cqw; } /* the story: a drifting constellation of idea nodes. A fresh capture flies in from past the corner, its link draws to the cluster, the graph gives a little settle, and the rank chips stamp in beside it. */ .fb-space { position: relative; flex: 1; min-height: 0; } .shot--fb .fb-space svg { width: 100%; height: 100%; animation: fbSettleNudge 9s var(--ease) infinite; } .fb-drift { animation: fbDrift 14s ease-in-out infinite alternate; transform-origin: 120px 66px; } @keyframes fbDrift { from { transform: translate(-2px, 1px) rotate(-0.35deg); } to { transform: translate(2px, -1.5px) rotate(0.35deg); } } @keyframes fbSettleNudge { 0%, 34% { transform: none; } 40% { transform: translate(-1.5px, 1px); } 48%, 100% { transform: none; } } .fb-l { stroke: rgba(165,180,252,0.3); stroke-width: 1.2; } .fb-l--new { stroke: #a5b4fc; stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 0; filter: drop-shadow(0 0 2px rgba(129,140,248,0.6)); animation: fbLink 9s var(--ease) infinite; } @keyframes fbLink { 0%, 26% { stroke-dashoffset: 1; } 36% { stroke-dashoffset: 0; } 96% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } } .fb-n circle { fill: #141419; stroke: #6b78f0; stroke-width: 1.6; } .fb-n text { fill: #9d9da6; font: 600 7px var(--sans); text-anchor: middle; letter-spacing: 0.02em; } /* every node breathes on its own clock, so the graph never sits still */ .fb-orbit { animation: fbOrbit 6s ease-in-out infinite alternate; } .fb-n--2 .fb-orbit { animation-duration: 7.3s; animation-delay: -2s; } .fb-n--3 .fb-orbit { animation-duration: 5.4s; animation-delay: -1s; } .fb-n--4 .fb-orbit { animation-duration: 8.1s; animation-delay: -3.4s; } .fb-n--5 .fb-orbit { animation-duration: 6.8s; animation-delay: -4.2s; } @keyframes fbOrbit { from { transform: translate(-1.3px, 1px); } to { transform: translate(1.3px, -1px); } } /* the new idea: in from past the top-right corner, overshoot, land, glow */ .fb-n--new { animation: fbArrive 9s var(--ease) infinite; } .fb-n--new circle { fill: rgba(99,102,241,0.25); stroke: #a5b4fc; animation: fbNewGlow 9s ease-in-out infinite; } .fb-n--new text { fill: #e0e7ff; } @keyframes fbArrive { 0%, 16% { transform: translate(258px, -14px) scale(0.3); opacity: 0; } 20% { opacity: 1; } 27% { transform: translate(199px, 37px) scale(1.06); } 31% { transform: translate(202px, 34px) scale(1); } 96% { transform: translate(202px, 34px) scale(1); opacity: 1; } 100% { transform: translate(258px, -14px) scale(0.3); opacity: 0; } } @keyframes fbNewGlow { 0%, 34% { filter: none; } 40% { filter: drop-shadow(0 0 6px rgba(129,140,248,0.9)); } 52%, 100% { filter: drop-shadow(0 0 2px rgba(129,140,248,0.45)); } } .fb-rank { position: absolute; top: 7%; right: 4%; display: flex; gap: 1.2cqw; animation: fbRank 9s var(--ease) infinite; } @keyframes fbRank { 0%, 40% { opacity: 0; transform: translateY(2cqw) scale(0.6); } 46% { opacity: 1; transform: scale(1.1); } 50% { transform: scale(1); } 94% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } } .fb-chip { font-size: 1.95cqw; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #707077; background: rgba(20,20,25,0.65); border: 1px solid rgba(255,255,255,0.05); border-radius: 3cqw; padding: 0.5cqw 1.6cqw; white-space: nowrap; } .fb-chip--p0 { color: #fda4af; background: rgba(244,63,94,0.1); border-color: rgba(244,63,94,0.2); } .fb-chip--score { color: #6ee7b7; background: rgba(16,185,129,0.1); border-color: rgba(16,185,129,0.2); } .fb-chip--prog { color: #67e8f9; background: rgba(6,182,212,0.1); border-color: rgba(6,182,212,0.18); } .fb-chip--plan { color: #a5b4fc; background: rgba(99,102,241,0.1); border-color: rgba(99,102,241,0.18); } .fb-chip--inbox { color: #cbd5e1; background: rgba(100,116,139,0.12); border-color: rgba(100,116,139,0.18); } /* ---- Signal Labs — the brand diagnostic (dark + signal yellow) ---- */ .shot--sl { background: #07090d; color: #f5f3ea; } .sl-bar { display: flex; align-items: center; gap: 2cqw; padding: 3cqw 4cqw; border-bottom: 1px solid rgba(242,194,0,0.18); } .sl-logo { width: 3.4cqw; height: 3.4cqw; border-radius: 1cqw; background: #f2c200; flex: none; } .sl-name { font-size: 3.4cqw; font-weight: 700; } .sl-pill { margin-left: auto; font-size: 2.5cqw; color: #07090d; background: #f2c200; border-radius: 4cqw; padding: 0.7cqw 2.2cqw; font-weight: 600; } /* two-phase loop: answer a diagnostic prompt, then the archetype radar resolves */ .sl-stage { position: relative; flex: 1; min-height: 0; color: #f2c200; } .sl-quiz, .sl-out { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 3cqw 4.5cqw; } .sl-quiz { animation: slQuiz 7s var(--ease) infinite; } @keyframes slQuiz { 0% { opacity: 0; transform: translateY(2cqw); } 6% { opacity: 1; transform: none; } 44% { opacity: 1; } 50%, 100% { opacity: 0; } } .sl-prog { height: 1.6cqw; background: #1a1d24; border-radius: 2cqw; overflow: hidden; } .sl-prog i { display: block; height: 100%; width: 33%; background: #f2c200; border-radius: 2cqw; animation: slProg 7s var(--ease) infinite; } @keyframes slProg { 0%, 18% { width: 22%; } 30%, 100% { width: 33%; } } .sl-qno { font-size: 2.5cqw; color: #9b9588; margin: 2.6cqw 0 1.4cqw; letter-spacing: .05em; } .sl-q { font-size: 4.4cqw; font-weight: 700; color: #f5f3ea; line-height: 1.15; } .sl-opts { display: flex; flex-direction: column; gap: 1.8cqw; margin-top: 3cqw; } .sl-opt { font-size: 3cqw; color: #cfcabd; background: #14161c; border: 1px solid #23262e; border-radius: 2cqw; padding: 2cqw 2.6cqw; } .sl-opt--pick { animation: slPick 7s var(--ease) infinite; } @keyframes slPick { 0%, 18% { background: #14161c; border-color: #23262e; color: #cfcabd; } 26%, 100% { background: rgba(242,194,0,0.16); border-color: #f2c200; color: #f2c200; } } .sl-out { opacity: 0; align-items: center; justify-content: center; animation: slOut 7s var(--ease) infinite; } @keyframes slOut { 0%, 50% { opacity: 0; } 58% { opacity: 1; } 95% { opacity: 1; } 100% { opacity: 0; } } .shot .sl-radar { width: 33cqw; height: 33cqw; max-width: 100%; overflow: visible; } .sl-grid { opacity: 0.22; } .sl-poly { transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 4px rgba(242,194,0,0.4)); animation: slPlot 7s var(--ease) infinite; } @keyframes slPlot { 0%, 52% { opacity: 0; transform: scale(0.5); } 64% { opacity: 1; transform: scale(1.05); } 71% { transform: scale(1); } 95% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } } .sl-verts circle { transform-box: fill-box; transform-origin: center; animation: slBlink 2.4s ease-in-out infinite; } .sl-verts circle:nth-child(2) { animation-delay: .4s; } .sl-verts circle:nth-child(3) { animation-delay: .8s; } .sl-verts circle:nth-child(4) { animation-delay: 1.2s; } .sl-verts circle:nth-child(5) { animation-delay: 1.6s; } .sl-verts circle:nth-child(6) { animation-delay: 2s; } @keyframes slBlink { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } .sl-sweep { transform-box: view-box; transform-origin: center; opacity: 0.28; animation: slSpin 4.6s linear infinite; } @keyframes slSpin { to { transform: rotate(360deg); } } .sl-res { text-align: center; margin-top: 1cqw; animation: slRes 7s var(--ease) infinite; } @keyframes slRes { 0%, 64% { opacity: 0; transform: translateY(1.5cqw); } 72% { opacity: 1; transform: none; } 95% { opacity: 1; } 100% { opacity: 0; } } .sl-res span { display: block; font-size: 2.3cqw; color: #9b9588; letter-spacing: .12em; text-transform: uppercase; } .sl-res b { font-size: 4.6cqw; color: #f2c200; } /* ---- Ledger AI (exhibit) : the autopilot conveyor — busywork rides the belt through the scanner and comes out stamped done. Nobody typed. ---- */ .shot--la { font-family: var(--sans); } .shot--la .la-bar { display: flex; align-items: center; gap: 1.6cqw; padding: 3.2cqw 4cqw; border-bottom: 1px solid rgba(244,239,228,.12); font: 600 2.3cqw var(--mono, ui-monospace, monospace); } .shot--la .la-dot { width: 2.2cqw; height: 2.2cqw; border-radius: 50%; } .shot--la .la-dot--g { background: #2f9e44; animation: laPulse 3s ease-in-out infinite; } .shot--la .la-dot--m { background: #7a7566; } .shot--la .la-dot--s { background: #8fbfa6; } .shot--la .la-title { margin-left: 1.4cqw; opacity: .55; font-weight: 500; } @keyframes laPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(47,158,68,.5); } 60% { box-shadow: 0 0 0 1.6cqw rgba(47,158,68,0); } } /* the belt: a dashed rail streaming left, a scan beam at center */ .shot--la .la-belt { position: relative; flex: 1; min-height: 0; overflow: hidden; } .shot--la .la-rail { position: absolute; left: -4cqw; right: -4cqw; top: 66%; height: 2px; background: repeating-linear-gradient(90deg, rgba(244,239,228,.22) 0 2.2cqw, transparent 2.2cqw 4.4cqw); animation: laRail 1.1s linear infinite; } @keyframes laRail { to { transform: translateX(-4.4cqw); } } .shot--la .la-scan { position: absolute; left: 50%; top: 10%; bottom: 14%; width: .8cqw; transform: translateX(-50%); border-radius: 1cqw; background: linear-gradient(180deg, transparent, #5fae86 30%, #5fae86 70%, transparent); animation: laScan 2.667s ease-in-out infinite; } @keyframes laScan { 0%, 100% { opacity: .35; filter: drop-shadow(0 0 0 rgba(95,174,134,0)); } 42% { opacity: 1; filter: drop-shadow(0 0 3cqw rgba(95,174,134,.9)); } } /* jobs ride in from the right, hold under the beam, leave stamped green. Position + state flip share one 8s clock; delays fan three jobs out. */ .shot--la .la-job { position: absolute; bottom: 35%; left: 0; width: 46cqw; background: #211d16; border: 1px solid rgba(244,239,228,.16); border-radius: 2.4cqw; padding: 2.2cqw 2.6cqw; box-shadow: 0 3cqw 6cqw rgba(0,0,0,.35); animation: laRide 8s cubic-bezier(.45,0,.25,1) infinite, laFlash 8s ease-in-out infinite; } /* base transforms are the frozen frame: a spread conveyor, one job mid-scan */ .shot--la .la-job--1 { transform: translateX(68cqw); } .shot--la .la-job--2 { transform: translateX(27cqw); animation-delay: -2.667s, -2.667s; } .shot--la .la-job--3 { transform: translateX(-14cqw); animation-delay: -5.333s, -5.333s; } @keyframes laRide { 0% { transform: translateX(104cqw); } 28% { transform: translateX(27cqw); } 42% { transform: translateX(27cqw); } 44% { transform: translateX(25.8cqw); } 100% { transform: translateX(-58cqw); } } @keyframes laFlash { 0%, 32% { border-color: rgba(244,239,228,.16); box-shadow: 0 3cqw 6cqw rgba(0,0,0,.35); } 37% { border-color: #5fae86; box-shadow: 0 0 6cqw rgba(95,174,134,.55), 0 3cqw 6cqw rgba(0,0,0,.35); } 50%, 100% { border-color: rgba(95,174,134,.45); box-shadow: 0 3cqw 6cqw rgba(0,0,0,.35); } } .shot--la .la-jt { display: block; font-size: 2.7cqw; font-weight: 600; color: #F4EFE4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .shot--la .la-state { position: relative; display: block; height: 3.2cqw; margin-top: 1.3cqw; font: 600 2.2cqw var(--mono, ui-monospace, monospace); } .shot--la .la-state i { position: absolute; left: 0; top: 0; font-style: normal; } .shot--la .la-q { color: #9a937f; animation: laQ 8s steps(1) infinite; } .shot--la .la-d { color: #5fae86; opacity: 0; animation: laD 8s var(--ease) infinite; } /* not every verdict is a yes: a "later" and a "don't bother" must not read green */ .shot--la .la-d--maybe { color: #c2b08a; } .shot--la .la-d--no { color: #9a8f7c; } .shot--la .la-job--2 .la-q, .shot--la .la-job--2 .la-d { animation-delay: -2.667s; } .shot--la .la-job--3 .la-q, .shot--la .la-job--3 .la-d { animation-delay: -5.333s; } @keyframes laQ { 0%, 35% { opacity: 1; } 36%, 100% { opacity: 0; } } @keyframes laD { 0%, 35% { opacity: 0; transform: scale(.4); } 39% { opacity: 1; transform: scale(1.18); } 42% { transform: scale(1); } 100% { opacity: 1; transform: scale(1); } } /* the odometer: one more job cleared every pass of the scanner */ .shot--la .la-tally { display: flex; align-items: baseline; gap: 1.8cqw; padding: 0 4cqw 1.6cqw; } .shot--la .la-odo { display: block; height: 5.4cqw; overflow: hidden; flex: none; } .shot--la .la-odo i { display: block; height: 5.4cqw; font: 700 5cqw/5.4cqw var(--sans); font-style: normal; color: #5fae86; animation: laOdo 32s steps(4, end) infinite; animation-delay: -5s; } @keyframes laOdo { 0% { transform: translateY(0); } 100% { transform: translateY(-21.6cqw); } } .shot--la .la-tlbl { font: 500 2.2cqw var(--mono, ui-monospace, monospace); opacity: .55; } .shot--la .la-foot { margin-top: auto; padding: 2.6cqw 4cqw; border-top: 1px solid rgba(244,239,228,.12); display: flex; justify-content: space-between; font: 500 2.2cqw var(--mono, ui-monospace, monospace); opacity: .5; } /* ---- Topsoil (exhibit) : the real interaction — hover the notch and it expands into the module stack (Now Playing, Calendar, Battery, Shelf). Base (un-animated) state is the expanded panel, so it freezes legible. ---- */ .shot--ts { font-family: var(--sans); } /* the Mac's top edge: a thin glassy menu bar either side of the notch */ .shot--ts .ts-menubar { position: absolute; top: 0; left: 0; right: 0; height: 6cqw; background: rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.06); display: flex; align-items: center; justify-content: space-between; padding: 0 3cqw; font: 600 2.2cqw var(--sans); color: #cfd4d8; } .shot--ts .ts-mb-l::before { content: ""; display: block; width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: #cfd4d8; opacity: .75; } /* the panel: hugs the notch, borderless, expands on hover */ .shot--ts .ts-panel { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 92cqw; height: 58cqw; background: #000; border-radius: 0 0 5cqw 5cqw; box-shadow: 0 10px 34px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05); overflow: hidden; display: flex; flex-direction: column; animation: tsPanel 8s var(--ease) infinite; } @keyframes tsPanel { 0%, 10% { width: 42cqw; height: 8cqw; border-radius: 0 0 3.4cqw 3.4cqw; } 17% { width: 93cqw; height: 59cqw; border-radius: 0 0 5cqw 5cqw; } 20%, 92% { width: 92cqw; height: 58cqw; border-radius: 0 0 5cqw 5cqw; } 98%, 100% { width: 42cqw; height: 8cqw; border-radius: 0 0 3.4cqw 3.4cqw; } } /* what the closed notch shows: live rec + clock, still visible when open */ .shot--ts .ts-mini { flex: none; height: 8cqw; display: flex; align-items: center; justify-content: center; gap: 2.2cqw; font: 600 2.3cqw var(--mono, ui-monospace, monospace); color: #eef1f3; } .shot--ts .ts-rec { width: 2cqw; height: 2cqw; border-radius: 50%; background: #3fbf5f; animation: tsRec 1.8s ease-in-out infinite; } .shot--ts .ts-rect { color: #3fbf5f; } .shot--ts .ts-sep { width: 1px; height: 3cqw; background: #3a3f45; } .shot--ts .ts-clock { opacity: .7; } @keyframes tsRec { 0%,100% { box-shadow: 0 0 0 0 rgba(63,191,95,.5); } 60% { box-shadow: 0 0 0 1.6cqw rgba(63,191,95,0); } } /* the module stack, fading in as the panel opens */ .shot--ts .ts-mods { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; padding: 0.6cqw 3cqw 3cqw; min-height: 0; animation: tsMods 8s var(--ease) infinite; } @keyframes tsMods { 0%, 15% { opacity: 0; transform: translateY(2.5cqw); } 25%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } } .shot--ts .ts-mod { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); border-radius: 2.8cqw; padding: 2.4cqw 2.8cqw; min-width: 0; } .shot--ts .ts-lbl { font: 600 1.9cqw var(--mono, ui-monospace, monospace); color: #3fbf5f; letter-spacing: .09em; } /* the garden tile — the whole point: a pixel plant that grows while your agents run. Deliberately stepped (steps(1), no easing): pixel-art time, unlike every smooth curve elsewhere in the gallery. Base state = in bloom. */ .shot--ts .ts-mod--garden { grid-column: 1 / -1; display: flex; flex-direction: column; } .shot--ts .ts-code-head { display: flex; align-items: center; gap: 2cqw; } .shot--ts .ts-proj { font: 600 2.2cqw var(--mono, ui-monospace, monospace); color: #eef1f3; opacity: .85; } .shot--ts .ts-run { margin-left: auto; font: 600 1.9cqw var(--mono, ui-monospace, monospace); color: #3fbf5f; background: rgba(63,191,95,.1); border: 1px solid rgba(63,191,95,.28); border-radius: 3cqw; padding: 0.5cqw 1.7cqw; white-space: nowrap; } .shot--ts .ts-plot { flex: 1; display: flex; align-items: flex-end; gap: 3.2cqw; margin-top: 1.4cqw; min-height: 0; } .shot--ts .ts-plant { position: relative; width: 15cqw; height: 12.4cqw; flex: none; } .shot--ts .ts-plant::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.4cqw; border-radius: 0.5cqw; background: linear-gradient(180deg, #5b4327, #3a2c1a); } .shot--ts .ts-px { position: absolute; width: 2.1cqw; height: 2.1cqw; } .shot--ts .p-st1 { left: 6.5cqw; bottom: 1.4cqw; background: #2e8b47; animation: tsPxA 8s steps(1) infinite; } .shot--ts .p-st2 { left: 6.5cqw; bottom: 3.5cqw; background: #2e8b47; animation: tsPxB 8s steps(1) infinite; } .shot--ts .p-st3 { left: 6.5cqw; bottom: 5.6cqw; background: #2e8b47; animation: tsPxC 8s steps(1) infinite; } .shot--ts .p-lf1 { left: 4.4cqw; bottom: 3.5cqw; background: #3fbf5f; animation: tsPxD 8s steps(1) infinite; } .shot--ts .p-lf2 { left: 8.6cqw; bottom: 5.6cqw; background: #3fbf5f; animation: tsPxE 8s steps(1) infinite; } .shot--ts .p-bl1 { left: 6.5cqw; bottom: 7.7cqw; background: #e76f51; animation: tsPxF 8s steps(1) infinite; } .shot--ts .p-bl2 { left: 4.4cqw; bottom: 7.7cqw; background: #f2c94c; animation: tsPxF 8s steps(1) infinite; } .shot--ts .p-bl3 { left: 8.6cqw; bottom: 7.7cqw; background: #f2c94c; animation: tsPxF 8s steps(1) infinite; } .shot--ts .p-bl4 { left: 6.5cqw; bottom: 9.8cqw; background: #f2c94c; animation: tsPxF 8s steps(1) infinite; } @keyframes tsPxA { 0%, 29% { opacity: 0; } 30%, 92% { opacity: 1; } 93%, 100% { opacity: 0; } } @keyframes tsPxB { 0%, 36% { opacity: 0; } 37%, 92% { opacity: 1; } 93%, 100% { opacity: 0; } } @keyframes tsPxC { 0%, 43% { opacity: 0; } 44%, 92% { opacity: 1; } 93%, 100% { opacity: 0; } } @keyframes tsPxD { 0%, 50% { opacity: 0; } 51%, 92% { opacity: 1; } 93%, 100% { opacity: 0; } } @keyframes tsPxE { 0%, 56% { opacity: 0; } 57%, 92% { opacity: 1; } 93%, 100% { opacity: 0; } } @keyframes tsPxF { 0%, 63% { opacity: 0; } 64%, 92% { opacity: 1; } 93%, 100% { opacity: 0; } } .shot--ts .ts-gwrap { flex: 1; min-width: 0; align-self: flex-end; padding-bottom: 0.6cqw; } .shot--ts .ts-glbl { display: block; font: 500 2cqw var(--sans); color: #9aa3ab; margin-bottom: 1cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .shot--ts .ts-gbar { height: 2cqw; border-radius: 1.5cqw; background: rgba(255,255,255,.08); overflow: hidden; } .shot--ts .ts-gbar i { display: block; height: 100%; width: 86%; border-radius: inherit; background: linear-gradient(90deg, #2e8b47, #3fbf5f); animation: tsGrow 8s infinite; } @keyframes tsGrow { 0%, 25% { width: 0; animation-timing-function: steps(6, end); } 64%, 92% { width: 86%; } 100% { width: 0; } } .shot--ts .ts-val { font: 700 3.3cqw var(--sans); letter-spacing: -.01em; margin-top: 1.1cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .shot--ts .ts-sub { font: 500 2.1cqw var(--sans); color: #9aa3ab; margin-top: 0.6cqw; } /* now playing: a little equalizer that never stops dancing */ .shot--ts .ts-eq { display: flex; align-items: flex-end; gap: 1cqw; height: 4.2cqw; margin-top: 1.4cqw; } .shot--ts .ts-eq i { width: 1.7cqw; border-radius: 0.6cqw 0.6cqw 0 0; background: #3fbf5f; transform-origin: 50% 100%; animation: tsEq 0.9s ease-in-out infinite; } .shot--ts .ts-eq i:nth-child(1) { height: 55%; } .shot--ts .ts-eq i:nth-child(2) { height: 92%; animation-delay: 0.15s; } .shot--ts .ts-eq i:nth-child(3) { height: 40%; animation-delay: 0.3s; } .shot--ts .ts-eq i:nth-child(4) { height: 74%; animation-delay: 0.45s; } @keyframes tsEq { 0%, 100% { transform: scaleY(0.45); } 50% { transform: scaleY(1); } } .shot--ts .ts-eq + .ts-val { font-size: 2.7cqw; margin-top: 1.2cqw; } /* drop shelf: two files sitting in the tray, dropping in as it opens */ .shot--ts .ts-files { display: flex; gap: 1.2cqw; margin-top: 1.4cqw; } .shot--ts .ts-files span { width: 5cqw; height: 3.8cqw; border-radius: 0.9cqw; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.2); animation: tsFile 8s var(--ease) infinite; } .shot--ts .ts-files span:nth-child(2) { animation-delay: 0.14s; } @keyframes tsFile { 0%, 24% { opacity: 0; transform: translateY(-2cqw) scale(0.7); } 30% { opacity: 1; transform: scale(1.08); } 34%, 92% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } } /* the cursor that triggers it all: glides up, hovers the notch, drifts off */ .shot--ts .ts-cursor { position: absolute; left: 0; top: 0; width: 4.2cqw; height: 4.2cqw; z-index: 2; filter: drop-shadow(0 2px 3px rgba(0,0,0,.55)); animation: tsCursor 8s ease-in-out infinite; } @keyframes tsCursor { 0% { transform: translate(74cqw, 72cqw); } 10% { transform: translate(48cqw, 4.5cqw); } 34% { transform: translate(48cqw, 4.5cqw); } 46%, 88% { transform: translate(26cqw, 22cqw); } /* drifts down to Now Playing */ 100% { transform: translate(74cqw, 72cqw); } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; } /* frozen art frames: the base states already read as the finished scene (spread conveyor, linked-up graph, plant in bloom) — just show the done stamps that normally pop in mid-cycle */ .ts-mods, .ts-files span { opacity: 1 !important; transform: none !important; } .la-d, .fb-rank { opacity: 1 !important; transform: none !important; } .la-q { opacity: 0 !important; } .ts-cursor { display: none !important; } .world { transition: none; } /* anything that relied on an entrance animation must show without one */ .ltr, .ltr--col { opacity: 1 !important; transform: none !important; } .entrance__col { opacity: 0.85 !important; transform: none !important; } .entrance__corner { opacity: 1 !important; } .m-hero__thread, .m-link__line { transform: translateX(-50%) scaleY(1); } .m-link__node, .m-link__cap { opacity: 1 !important; transform: none !important; } /* app previews: freeze on the finished frame */ .gg-track i { width: var(--w) !important; } .gg-arc-fill, .bt-line { stroke-dashoffset: 0 !important; } .bt-ai-msg { max-width: 100% !important; } .sl-quiz { opacity: 1 !important; transform: none !important; } /* no WebGL ambience for reduced-motion visitors (JS also skips mounting it) */ .m-hero__vanta { display: none !important; } } /* ============================================================================ ENHANCEMENTS — Lenis (smooth scroll) + Vanta (mobile hero ambience) These layer on top of the base site; if their libraries fail to load the markup/JS simply never appears, so nothing here can break the page. ========================================================================= */ /* Lenis owns the scroll position on mobile; these are its recommended rules. */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } /* Vanta FOG canvas, mounted behind the mobile hero for a little warm depth. Edges are masked so it melts into the wall instead of ending on a hard box. */ .m-hero__vanta { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.1s var(--ease); -webkit-mask-image: radial-gradient(125% 100% at 50% 38%, #000 42%, transparent 86%); mask-image: radial-gradient(125% 100% at 50% 38%, #000 42%, transparent 86%); } .m-hero__vanta.is-in { opacity: 0.6; } [data-lights="off"] .m-hero__vanta.is-in { opacity: 0.85; } /* keep the hero text and thread above the canvas */ .m-hero > *:not(.m-hero__vanta) { position: relative; z-index: 1; }