/* ═══════════════════════════════════════════════════════════════ The metal CTA, lifted verbatim from index.html so the work section's button is the same object as the home page's — not a lookalike. Knob/slider variants were dropped; nothing in this section uses them. Needs the defs and the pointer JS in the page. ═══════════════════════════════════════════════════════════════ */ .filters { position: absolute; width: 0; height: 0; overflow: hidden; } :root { /* ── liquid design tokens (from the liquid template) ── */ --card: #ffffff; /* surface the liquid controls sit on here */ --track: #efeef2; --cell: #ffffff; --hair: rgba(0, 0, 0, .035); --chrome: conic-gradient(from 0deg at 50% 50%, #ffffff 0deg 4deg, #b0aeb6 12deg, #403c4a 26deg 31deg, #cbc9d1 40deg, #ffffff 46deg 53deg, #6e6b78 64deg, #464152 76deg 80deg, #eeecf1 92deg, #ffffff 96deg 105deg, #9a97a3 116deg, #3d3947 129deg 135deg, #918e9b 146deg, #ffffff 153deg 159deg, #bcb9c4 168deg, #383445 183deg 193deg, #d8d5de 206deg, #ffffff 211deg 221deg, #858291 232deg, #433f4e 243deg 249deg, #e6e3ea 262deg, #ffffff 265deg 275deg, #a09daa 286deg, #3b3746 299deg 305deg, #757281 316deg, #ffffff 321deg 329deg, #c6c3ce 340deg, #4a4655 351deg 354deg, #ffffff 360deg); --chrome-detail: conic-gradient(from 0deg at 50% 50%, rgba(255,255,255,0) 0deg, rgba(255,255,255,.95) 20deg 25deg, rgba(255,255,255,0) 44deg, rgba(0,0,0,0) 92deg, rgba(0,0,0,.6) 108deg 115deg, rgba(0,0,0,0) 134deg, rgba(255,255,255,0) 198deg, rgba(255,255,255,.85) 217deg 223deg, rgba(255,255,255,0) 242deg, rgba(0,0,0,0) 288deg, rgba(0,0,0,.55) 305deg 312deg, rgba(0,0,0,0) 332deg, rgba(255,255,255,0) 360deg); --iridescence: conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(255,145, 90,.90) 16deg, rgba(255, 90,150,.95) 30deg, transparent 48deg, transparent 135deg, rgba(155,110,255,.90) 152deg, rgba(120,140,255,.80) 168deg, transparent 188deg, transparent 245deg, rgba(200,110,255,.90) 262deg, rgba(255,155,110,.85) 278deg, transparent 298deg, transparent 360deg); --shade: linear-gradient(180deg, #ffffff 0%, #ffffff 9%, #cfccd6 21%, #8e8a99 42%, #9c98a7 56%, #cac6d2 70%, #ffffff 87%, #ffffff 100%); --crest: linear-gradient(180deg, rgba(255,255,255,.80) 0%, rgba(255,255,255,.25) 12%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 74%, rgba(255,255,255,.30) 88%, rgba(255,255,255,.55) 100%); --prism: conic-gradient(from 0deg at 50% 50%, transparent 0deg, transparent 28deg, rgba(255, 60, 40,.95) 37deg, rgba(255,170, 20,.90) 45deg, rgba(255,240, 90,.65) 53deg, transparent 63deg, transparent 138deg, rgba( 70,200,255,.85) 150deg, rgba( 40,110,255,.80) 159deg, transparent 170deg, transparent 246deg, rgba(180, 80,255,.90) 256deg, rgba(255, 50,120,.95) 265deg, rgba(255,150, 40,.75) 274deg, transparent 286deg, transparent 330deg, rgba(120,190,255,.55) 338deg, transparent 348deg, transparent 360deg); --ease: cubic-bezier(.32, .72, 0, 1); --fluid: cubic-bezier(.55, 0, .07, 1); --spring: linear(0, .42 8%, .86 16%, 1.14 24%, 1.23 30%, 1.17 38%, 1.03 48%, .97 58%, .99 72%, 1); } @keyframes spin { to { rotate: 360deg; } } @keyframes spin-back { to { rotate: -360deg; } } @keyframes orbit { 0% { left: 20%; top: 0%; } 14% { left: 80%; top: 0%; } 25% { left: 100%; top: 22%; } 39% { left: 100%; top: 78%; } 50% { left: 80%; top: 100%; } 64% { left: 20%; top: 100%; } 75% { left: 0%; top: 78%; } 89% { left: 0%; top: 22%; } 100% { left: 20%; top: 0%; } } @keyframes spin-back { to { rotate: -360deg; } } @keyframes orbit { 0% { left: 20%; top: 0%; } 14% { left: 80%; top: 0%; } 25% { left: 100%; top: 22%; } 39% { left: 100%; top: 78%; } 50% { left: 80%; top: 100%; } 64% { left: 20%; top: 100%; } 75% { left: 0%; top: 78%; } 89% { left: 0%; top: 22%; } 100% { left: 20%; top: 0%; } } @keyframes breathe { 0%, 100% { scale: 1; } 50% { scale: 1.14; } } @keyframes sheen { 0% { transform: translateX(0) skewX(-14deg); } 72%, 100% { transform: translateX(250%) skewX(-14deg); } } @keyframes orbit { 0% { left: 20%; top: 0%; } 14% { left: 80%; top: 0%; } 25% { left: 100%; top: 22%; } 39% { left: 100%; top: 78%; } 50% { left: 80%; top: 100%; } 64% { left: 20%; top: 100%; } 75% { left: 0%; top: 78%; } 89% { left: 0%; top: 22%; } 100% { left: 20%; top: 0%; } } @keyframes sheen { 0% { transform: translateX(0) skewX(-14deg); } 72%, 100% { transform: translateX(250%) skewX(-14deg); } } /* ── THE METAL ── */ .metal { --bezel: 4px; --radius: 19px; --mx: 50%; --my: 28%; position: relative; display: flex; isolation: isolate; padding: 0; border: 0; background: none; border-radius: var(--radius); cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: filter .3s ease; } .metal:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } :is(button, a).metal:hover { filter: brightness(1.05) saturate(1.04); } .metal__ring { position: absolute; inset: 0; z-index: 0; border-radius: var(--radius); clip-path: inset(0 round var(--radius)); overflow: hidden; isolation: isolate; pointer-events: none; background: #aeb4bb; } .metal__flow { position: absolute; inset: -50%; filter: url(#liquid); } .metal__flow::before, .metal__flow::after { content: ""; position: absolute; top: 50%; left: 50%; width: 150%; aspect-ratio: 1; translate: -50% -50%; will-change: rotate; } .metal__flow::before { background: var(--chrome); animation: spin 11s linear infinite; } .metal__flow::after { background: var(--chrome-detail); mix-blend-mode: hard-light; opacity: .5; animation: spin-back 7s linear infinite; } .metal__iris { position: absolute; inset: -50%; mix-blend-mode: overlay; opacity: .66; } .metal__iris::before { content: ""; position: absolute; top: 50%; left: 50%; width: 150%; aspect-ratio: 1; translate: -50% -50%; background: var(--iridescence); animation: spin-back 17s linear infinite; will-change: rotate; } .metal__env { position: absolute; inset: 0; background: var(--shade); mix-blend-mode: multiply; } .metal__lite { position: absolute; inset: 0; background: var(--crest); mix-blend-mode: screen; } .metal__prism { position: absolute; inset: -50%; mix-blend-mode: plus-lighter; opacity: .72; } .metal__prism::before, .metal__prism::after { content: ""; position: absolute; top: 50%; left: 50%; width: 150%; aspect-ratio: 1; translate: -50% -50%; background: var(--prism); animation: spin 11s linear infinite; will-change: rotate; } .metal__prism::before { filter: blur(1.5px) saturate(1.5); } .metal__prism::after { filter: blur(6px) saturate(1.7); opacity: .32; } :is(button, a).metal:hover .metal__prism { opacity: .95; } .metal__glints { position: absolute; inset: 0; z-index: 4; opacity: .8; mix-blend-mode: plus-lighter; pointer-events: none; } .metal__glints::before, .metal__glints::after { content: ""; position: absolute; translate: -50% -50%; border-radius: 50%; filter: blur(2px); will-change: left, top, scale; } .metal__glints::before { width: 17px; height: 17px; background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,.5) 22%, rgba(255,250,235,.14) 46%, rgba(255,255,255,0) 66%); animation: orbit 9s linear infinite, glint-size 3.3s ease-in-out infinite; } .metal__glints::after { width: 11px; height: 11px; opacity: .9; background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(230,242,255,.45) 24%, rgba(210,230,255,.12) 48%, rgba(255,255,255,0) 68%); animation: orbit 13s linear infinite reverse, glint-size 4.7s ease-in-out -1.6s infinite; } .metal__rim { position: absolute; inset: 0; z-index: 1; border-radius: var(--radius); pointer-events: none; box-shadow: inset 0 .5px .5px rgba(255,255,255,.9), inset 0 -.5px .5px rgba(255,255,255,.5), inset 0 0 0 .5px rgba(0,0,0,.3), inset 0 0 2px rgba(0,0,0,.1); } .metal__face { position: relative; margin: var(--bezel); flex: 1 0 auto; z-index: 2; display: grid; place-items: center; border-radius: calc(var(--radius) - var(--bezel) - 1px); background: radial-gradient(130% 100% at 28% 2%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 56%), linear-gradient(176deg, #efeef2 0%, #e6e5ea 42%, #dbd9e0 74%, #e5e3e9 100%); box-shadow: inset 0 .5px 0 rgba(255,255,255,1), inset 0 -1.5px 2px rgba(140,148,158,.22), 0 -1px 2px rgba(0,0,0,.16), 0 1px 2px rgba(0,0,0,.24); transition: transform .12s var(--ease), box-shadow .12s ease; } .metal:active .metal__face { box-shadow: inset 0 2px 4px rgba(90,100,112,.28), inset 0 -.5px 0 rgba(255,255,255,.6); } .metal__glass { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: var(--radius); clip-path: inset(0 round var(--radius)); overflow: hidden; mix-blend-mode: screen; opacity: .3; -webkit-mask-image: radial-gradient(120% 120% at 50% 50%, transparent 38%, #000 88%); mask-image: radial-gradient(120% 120% at 50% 50%, transparent 38%, #000 88%); } .metal__glass::before { content: ""; position: absolute; inset: -40%; background: repeating-radial-gradient(circle at 50% 44%, rgba(255,255,255,0) 0px, rgba(255,255,255,0) 7px, rgba(255,255,255,.6) 10px, rgba(255,255,255,0) 14px); filter: url(#dispersion-soft); animation: breathe 14s ease-in-out infinite; } .metal__spec { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; border-radius: var(--radius); background: radial-gradient(60% 60% at var(--mx) var(--my), rgba(255,255,255,.9) 0%, rgba(255,255,255,.3) 34%, rgba(255,255,255,0) 70%); mix-blend-mode: soft-light; transition: opacity .35s ease; } .metal:hover .metal__spec { opacity: 1; } .metal__sheen { position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: var(--radius); clip-path: inset(0 round var(--radius)); overflow: hidden; opacity: 0; transition: opacity .3s ease; } .metal__sheen::before { content: ""; position: absolute; top: -40%; bottom: -40%; left: -85%; width: 75%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.8) 45%, rgba(255,255,255,.8) 55%, rgba(255,255,255,0)); filter: blur(6px); mix-blend-mode: screen; transform: translateX(0) skewX(-14deg); } :is(button, a).metal:hover .metal__sheen { opacity: 1; } :is(button, a).metal:hover .metal__sheen::before { animation: sheen 1.15s cubic-bezier(.4, 0, .3, 1); } .metal--pill { --radius: 999px; --bezel: 3px; height: 48px; width: max-content; } .metal--pill .metal__flow { filter: url(#liquid-fine); } .metal--pill .metal__face { border-radius: 999px; padding: 0 24px; font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: #55585d; text-shadow: 0 1px 0 rgba(255,255,255,.9); white-space: nowrap; } .metal--wide { width: 100%; } .metal--wide .metal__face { flex: 1; } /* ── aurora on the pill CTAs: the tabs' living light, kept subtle. Two layers inside the FACE's own rounded mask, growing out of the bottom edge on hover. Paused and invisible at rest — zero cost until hovered. ── */ .metal--pill .metal__face { overflow: hidden; } .metal--pill .metal__face::before, .metal--pill .metal__face::after { content: ""; position: absolute; left: -15%; right: -15%; /* the bloom cores sit AT the visible bottom edge — hung any lower and the bright centres live in the clipped zone */ bottom: -3px; height: 100%; pointer-events: none; opacity: 0; transform: scale(.6); transform-origin: 50% 100%; transition: opacity .45s ease, transform .55s var(--fluid); animation-play-state: paused; } /* five lobes at five DIFFERENT heights — the top edge is a waveline, not a flat band */ .metal--pill .metal__face::before { background: radial-gradient(26% 34% at 14% 100%, rgba(122, 80,255,.6), transparent 70%), radial-gradient(20% 56% at 34% 100%, rgba( 45,120,255,.62), transparent 70%), radial-gradient(28% 26% at 52% 100%, rgba( 80,180,255,.68), transparent 72%), radial-gradient(20% 48% at 68% 100%, rgba(100, 95,255,.55), transparent 70%), radial-gradient(24% 38% at 86% 100%, rgba( 60,150,255,.6), transparent 70%); filter: blur(5px) saturate(1.45); animation: aurora-am 11s ease-in-out infinite; } /* two hot crests, unequal heights, on their own slower path */ .metal--pill .metal__face::after { background: radial-gradient(14% 42% at 40% 100%, rgba(150,220,255,.75), rgba(120,195,255,.3) 55%, transparent 78%), radial-gradient(10% 26% at 64% 100%, rgba(190,235,255,.7), transparent 74%); filter: blur(6px) saturate(1.3); animation: aurora-bm 7s ease-in-out infinite; } :is(button, a).metal--pill:hover .metal__face::before, :is(button, a).metal--pill:hover .metal__face::after { opacity: 1; transform: scale(1); animation-play-state: running; } /* Sway via the independent translate/scale properties — the transform slot stays free for the grow/shrink entrance, which an animation on `transform` would silently override. Multi-stop paths on non-matching periods: crests rise and fall in different places, and the combination never visibly repeats. scale is bottom-anchored, so height changes read as swell. */ @keyframes aurora-am { 0% { translate: -6% 0; scale: 1 .9; } 30% { translate: 3% 0; scale: 1 1.14; } 55% { translate: 7% 0; scale: 1 .95; } 80% { translate: -2% 0; scale: 1 1.22; } 100% { translate: -6% 0; scale: 1 .9; } } @keyframes aurora-bm { 0% { translate: 12% 0; scale: 1 1.05; } 35% { translate: -8% 0; scale: 1 .82; } 65% { translate: -14% 0; scale: 1 1.2; } 100% { translate: 12% 0; scale: 1 1.05; } } /* ── performance: metal sleeps while off-screen ────────────── Paused animations stop invalidating the SVG filters, so an off-screen button costs nothing. JS toggles is-off from an IntersectionObserver. */ .metal.is-off .metal__flow::before, .metal.is-off .metal__flow::after, .metal.is-off .metal__iris::before, .metal.is-off .metal__prism::before, .metal.is-off .metal__prism::after, .metal.is-off .metal__glints::before, .metal.is-off .metal__glints::after, .metal.is-off .metal__glass::before { animation-play-state: paused; }