/* These rules only apply while a delayed preview is playing. */
.project-visual { --preview-turn-duration: 450ms; }
/* Immediate card motion stays on the outer visual, independent of the delayed clip. */
@media (prefers-reduced-motion: no-preference) {
  .visual-link > .project-visual,
  .gallery-card > .project-visual {
    transition: transform var(--preview-turn-duration) cubic-bezier(.22,.61,.36,1);
  }
  .visual-link > .project-visual.is-preview-hovered,
  .gallery-card > .project-visual.is-preview-hovered {
    transform: perspective(1000px) translateY(-4px) rotateX(2deg) rotateY(-3deg);
  }
  .demo-window { transition: transform var(--preview-turn-duration) cubic-bezier(.22,.61,.36,1); }
  .is-preview-hovered .demo-window { transform: perspective(900px) rotateY(0) rotateX(0); }
}
.project-visual.is-demo-playing > :not(.hover-demo-layer) { opacity: 0; animation: clip-depart .18s ease-in-out both; }
.project-visual > .hover-demo-layer { position: absolute; inset: 0; height: 100%; pointer-events: none; animation: clip-arrive .18s ease-in-out both; }
.hover-demo-layer .gallery-footnote { font-size: 1.85cqw; }
.clip-life-label { margin: 3% 0 0; color: #42675b; font-size: 2.5cqw; }
.clip-chart { width: 100%; height: 57%; overflow: visible; margin-top: 2%; }
.clip-grid { stroke: #cdded3; stroke-width: 1; }
.clip-line { stroke: #397f70; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: clip-draw 3.6s cubic-bezier(.25,.1,.25,1) forwards; }
.clip-area { fill: #397f7015; opacity: 0; animation: clip-arrive 1s 3s forwards; }
.clip-end { fill: #397f70; opacity: 0; animation: clip-arrive .4s 3.8s forwards; }
.clip-week { display: flex; justify-content: space-between; color: #527466; font-size: 1.8cqw; }
.clip-nutri .nutrition-planner { top: 28%; bottom: 12%; height: auto; }
.clip-plan-action { margin-top: 3%; display: flex; align-items: center; justify-content: space-between; padding: 2.5% 4%; border-radius: 1cqw; background: #437b59; color: #fff; font-size: 2.25cqw; box-shadow: 0 .5cqw 1.5cqw #25472d12; transition: background .3s, transform .3s; }
.clip-generating .clip-plan-action { background: #eef1e4; color: #426747; transform: scale(.99); }
.clip-complete .clip-plan-action { background: #dcead6; color: #345e3c; transform: none; }
.clip-meals { margin-top: 2%; display: grid; gap: .6cqw; }
.clip-meal { display: flex; align-items: center; gap: 1.7cqw; color: #456045; font-size: 1.85cqw; line-height: 1.35; }
.clip-meal b { width: 4cqw; font-size: 1.65cqw; }
.clip-meal span { flex: 1; opacity: 0; transform: translateY(.5cqw); transition: opacity .3s, transform .3s; }
.clip-meal i { font-style: normal; opacity: 0; transition: opacity .3s; }
.clip-meal.is-ready span, .clip-meal.is-ready i { opacity: 1; transform: none; }
.clip-nutri .nutrition-list { opacity: 0; transition: opacity .9s ease, transform .9s ease; transform: translateY(1cqw) rotate(5deg); }
.clip-nutri.clip-complete .nutrition-list { opacity: 1; transform: rotate(5deg); }
.clip-codex .clip-prompt, .clip-codex .clip-task { opacity: 0; transform: translateY(.6cqw); transition: opacity .3s, transform .3s; }
.clip-codex.clip-sent .clip-prompt, .clip-codex .clip-task.is-ready { opacity: 1; transform: none; }
.clip-codex .clip-typing { display: block; clip-path: inset(0 100% 0 0); animation: clip-type 1.3s .15s steps(24, end) forwards; }
.clip-codex.clip-sent .clip-typing { clip-path: none; animation: none; }
.clip-codex.clip-complete .demo-composer { border-color: #779b88; }
.clip-voice .voice-wave i { transform-origin: center; animation: clip-voice .45s var(--beat) ease-in-out 6 alternate; }
.clip-voice .voice-note { min-height: 0; }
.clip-voice .voice-note > div:first-child { margin-bottom: 0; }
.clip-voice .voice-note .clip-transcript-space { display: block; position: relative; height: 9cqw; padding-top: 1.5cqw; margin: 0; }
.clip-listening { font-size: 4cqw; letter-spacing: 1cqw; color: #7885b2; }
.clip-loading { position: absolute; top: 5cqw; left: 0; right: 0; height: .55cqw; background: #e2e4ee; border-radius: 1cqw; overflow: hidden; opacity: 0; }
.clip-loading i { display: block; height: 100%; background: #8b8fc2; transform: scaleX(0); transform-origin: left; }
.clip-processing .clip-listening { opacity: 0; }
.clip-processing .clip-loading { opacity: 1; }
.clip-processing .clip-loading i { animation: clip-load .85s ease-in-out forwards; }
.clip-processing .voice-wave i { animation: none; transform: scaleY(.18); transition: transform .4s; }
.clip-processing .recording-dot { opacity: .3; }
.clip-voice .voice-note .clip-transcript { margin: 0; white-space: normal; font-size: 2.65cqw; line-height: 1.55; opacity: 0; transform: translateY(.7cqw); transition: opacity .4s, transform .4s; }
.clip-voice.clip-complete .clip-transcript { opacity: 1; transform: none; }
.clip-complete .clip-loading, .clip-complete .clip-listening { display: none; }
@keyframes clip-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes clip-depart { from { opacity: 1; } to { opacity: 0; } }
@keyframes clip-draw { to { stroke-dashoffset: 0; } }
@keyframes clip-type { to { clip-path: inset(0); } }
@keyframes clip-voice { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
@keyframes clip-load { to { transform: scaleX(1); } }
/* The remaining gallery projects each have their own short, finite sequence. */
.clip-caption { position: absolute; top: 29%; left: 7%; font-size: 2.2cqw; letter-spacing: .015em; }
.clip-search-panel { position: absolute; left: 8%; right: 8%; top: 31%; bottom: 13%; padding: 4%; background: #f6f4e9; color: #384c46; border-radius: 1.7cqw; box-shadow: 0 2cqw 4cqw #253f3220; transform: rotate(-2deg); }
.clip-search-input { display: flex; align-items: center; gap: 3%; border-bottom: 1px solid #cedbd0; padding-bottom: 3%; font-size: 2.8cqw; }
.clip-search-input b { font-weight: 500; flex: 1; clip-path: inset(0 100% 0 0); animation: clip-type 1.3s steps(20,end) both; }
.clip-search-input i { font-style: normal; color: #819888; }
.clip-search-results { display: grid; gap: 1.2cqw; margin-top: 3%; }
.clip-search-result { opacity: 0; transform: translateY(1cqw); transition: opacity .35s, transform .35s; }
.clip-search-result.is-ready { opacity: 1; transform: none; }
.clip-search-result small { display: block; font-size: 1.25cqw; letter-spacing: .1em; color: #7b9182; }
.clip-search-result strong { display: block; font-size: 2.3cqw; line-height: 1.5; font-weight: 550; }
.clip-search-result>span { display: block; width: 84%; height: .45cqw; margin-top: .5cqw; background: #dce4d9; border-radius: 1cqw; }
.clip-search-result>span:last-child { width: 58%; }
.clip-phone-screen { position: relative; height: 100%; background: #edf0e3; color: #354d3c; padding: 13% 9%; display: flex; align-items: center; flex-direction: column; gap: 2.3cqw; }
.clip-phone-screen>small { font-size: 1.55cqw; letter-spacing: .05em; text-align: center; }
.clip-phone-label { font-size: 1.9cqw; margin-top: 12%; }
.clip-rep-original { position: relative; width: 100%; aspect-ratio: 430 / 720; container-type: inline-size; font-family: Arial, sans-serif; font-weight: 400; }
.clip-rep-original>img { display: block; width: 100%; height: auto; }
.clip-rep-original .clip-rep-time,.clip-rep-original .clip-rep-number { position: absolute; left: 0; width: 96.51163%; display: flex; align-items: center; justify-content: center; background: #292626; color: aliceblue; font-weight: 400; letter-spacing: normal; white-space: pre; font-variant-numeric: tabular-nums; }
.clip-rep-original .clip-rep-time { top: 12.77778%; height: 10.27778%; font-size: 14.88372cqw; line-height: 1.15625; }
.clip-rep-original .clip-rep-number { top: 45.27778%; height: 19.16667%; font-size: 27.90698cqw; line-height: 1.15; }
.clip-rep-press { position: absolute; display: flex; align-items: center; justify-content: center; border-radius: 1.86047cqw; background: #008000; color: #000; font-size: 5.11628cqw; line-height: 1; opacity: 0; }
.clip-rep-start { left: 20%; top: 27.5%; width: 26.51163%; height: 6.66667%; }
.clip-rep-stop { left: 50.23256%; top: 27.5%; width: 26.27907%; height: 6.66667%; background: #f00; }
.clip-rep-add { left: 49.53488%; top: 68.88889%; width: 23.02326%; height: 6.66667%; }
.clip-rep-press.is-pressed { animation: clip-rep-press .3s ease-out both; }
@keyframes clip-rep-press { 0%,100% { opacity: 0; } 20%,65% { opacity: 1; } }
.clip-reps .reps-ghost { transition: opacity .3s; }
.clip-scan { position: absolute; left: 6%; right: 6%; top: 5%; height: 1px; background: #aedcd9; box-shadow: 0 0 1cqw #aedcd9; animation: clip-scan 1.1s 2 alternate both; }
.clip-cxr .prompt-stack i { animation: clip-signal .6s var(--clip-delay) 2 alternate both; }
.clip-cxr .embedding-line i { animation: clip-signal .8s calc(1s + var(--clip-delay)) 2 alternate both; }
.clip-cxr .cxr-output { transition: color .4s; }
.clip-cxr.clip-complete .cxr-output { color: #abdbcb; }
.clip-cxr .cxr-diagram { transition: opacity .45s, transform .45s; }
.clip-cxr.clip-results-visible .cxr-diagram { opacity: 0; transform: translateY(-1cqw); }
.clip-cxr-results { position: absolute; top: 34%; bottom: 14%; left: 9%; right: 9%; opacity: 0; transform: translateY(1.5cqw); transition: opacity .45s, transform .45s; }
.clip-results-visible .clip-cxr-results { opacity: 1; transform: none; }
.clip-score-heading { display: flex; align-items: center; justify-content: space-between; font-size: 2.25cqw; line-height: 1.2; color: #deebef; }
.clip-score-heading>b { font-size: 3cqw; color: #9dd8c8; font-weight: 400; }
.clip-score-legend { display: flex; gap: 4cqw; margin: 1.4cqw 0; font-size: 1.8cqw; line-height: 1.2; color: #a9bbcf; }
.clip-score-legend span::before { content: ''; display: inline-block; width: 1.6cqw; height: .65cqw; margin-right: .8cqw; vertical-align: middle; border-radius: 1cqw; background: #8ba4c1; }
.clip-score-legend span:last-child { color: #9dd8c8; }
.clip-score-legend span:last-child::before { background: #9dd8c8; }
.clip-score-rows { display: grid; gap: 1.4cqw; }
.clip-score-row>div:first-child { display: flex; justify-content: space-between; align-items: center; font-size: 2.3cqw; line-height: 1.2; color: #dae6ed; }
.clip-score-row b { display: flex; align-items: baseline; gap: 1.3cqw; font-size: 2.3cqw; font-weight: 500; font-variant-numeric: tabular-nums; }
.clip-score-row small { color: #a9bbcf; font-size: inherit; }
.clip-score-row b>i { color: #7f97ac; font-style: normal; font-weight: 400; }
.clip-score-row strong { color: #9dd8c8; font-weight: 600; }
.clip-score-track { position: relative; height: 1.6cqw; margin-top: .75cqw; border-radius: 1cqw; background: #b6cadb10; overflow: hidden; }
.clip-score-track i,.clip-score-track em { position: absolute; inset: 0; background: #8ba4c1; transform: scaleX(var(--score)); transform-origin: left; border-radius: 1cqw; }
.clip-score-track i { bottom: 58%; }
.clip-score-track em { top: 58%; background: #9dd8c8; transform: scaleX(var(--before)); transition: transform 1.1s cubic-bezier(.22,.61,.36,1); }
.clip-scores-updated .clip-score-track em { transform: scaleX(var(--after)); }
.clip-cxr-results>p { margin: 1.4cqw 0 0; color: #a9bbcf; font-size: 1.65cqw; line-height: 1.2; }
.clip-agent-a { animation: clip-hockey-a 4.2s ease-in-out both; }
.clip-agent-b { animation: clip-hockey-b 4.2s ease-in-out both; }
.clip-hockey .hockey-puck { animation: clip-puck 4.2s linear both; }
.reconstruction-visual .point-cloud { top: 20%; height: 78%; }
.clip-reconstruction .clip-cloud { object-fit: contain; filter: none; }
.clip-cameras { position: absolute; left: 9%; top: 34%; display: flex; gap: 1.6cqw; }
.clip-cameras i { font-style: normal; font-size: 1.6cqw; padding: 1.5cqw 1.9cqw; border: 1px solid #c4b8d15c; color: #c4b8d1; border-radius: .6cqw; animation: clip-camera 3s both; }
.clip-cameras i:nth-child(2) { animation-delay: .25s; }
.clip-cameras i:nth-child(3) { animation-delay: .5s; }
.clip-pencil { background: #eee5e3; overflow: hidden; }
.pencil-visual.is-demo-playing { container-type: inline-size; }
.clip-pencil-result { position: absolute; left: 54%; top: 25%; width: 40%; height: 59%; padding: 1.2cqw; border-radius: 1.5cqw; background: #fffaf7; box-shadow: 0 1cqw 4cqw #48223818; }
.clip-pencil .clip-pencil-result .pencil-output { display: block; width: 100%; height: 100%; border-radius: .7cqw; transform: none; animation: clip-picture 3.5s .8s ease-in-out both; }
.clip-pencil-result>span { position: absolute; left: 0; right: 0; top: calc(100% + 1.4cqw); text-align: center; font-size: 1.8cqw; line-height: 1.3; color: #795e6b; }
.clip-pencil .sketch-inset { left: 6%; top: 24%; bottom: auto; width: 34%; height: 34%; padding: 1.6cqw; display: flex; flex-direction: column; border-radius: 1.2cqw; transform: none; animation: clip-pencil-sketch .6s .1s both; }
.clip-pencil .sketch-inset img { flex: 1; min-height: 0; height: 0; object-fit: contain; }
.clip-pencil .sketch-inset span { margin-top: .7cqw; flex: none; font-size: 1.8cqw; line-height: 1.3; letter-spacing: .03em; }
.clip-pencil-prompt { position: absolute; left: 6%; top: 65%; width: 34%; padding: 2cqw; border: 1px solid #fff9; border-radius: 1.2cqw; background: #fffaf7; color: #4d3843; box-shadow: 0 1cqw 4cqw #48223810; animation: clip-arrive .4s .25s both; }
.clip-pencil-prompt>span { display: block; font-size: 1.8cqw; line-height: 1.3; letter-spacing: .03em; color: #795e6b; }
.clip-pencil-prompt>p { margin: 1.1cqw 0 0; color: #4d3843; font-size: 2.3cqw; line-height: 1.4; font-weight: 500; text-wrap: pretty; animation: clip-type 1.2s .55s steps(32,end) both; }
.clip-pencil-connectors { position: absolute; inset: 0; width: 100%; height: 100%; stroke: #a67588; stroke-width: .35; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.clip-pencil-connectors path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: clip-draw .85s 1s both; }
.clip-pencil-connectors .clip-pencil-arrowheads { stroke-dasharray: none; stroke-dashoffset: 0; animation: clip-arrive .3s 1.6s both; }
.clip-pencil .gallery-footnote { left: 6%; bottom: 3%; color: #795e6b; font-size: 1.65cqw; line-height: 1.3; z-index: 3; }
.clip-pencil .visual-pill { font-size: 2cqw; top: 6%; right: 6%; }
.clip-aqua .aqua-art { animation: clip-island 4.8s ease-in-out both; }
.clip-aqua .clip-player { animation: clip-player 3.2s ease-in-out both; }
.clip-aqua .clip-pirate { animation: clip-pirate 3.8s ease-in-out both; }
.clip-resources { position: absolute; top: 51%; left: 37%; display: flex; gap: 4cqw; color: #f7d783; }
.clip-resources i { font-style: normal; font-size: 4cqw; animation: clip-collect 1.8s ease-in-out both; }
.clip-resources i:nth-child(2) { animation-delay: .25s; }
.clip-resources i:nth-child(3) { animation-delay: .5s; }
.clip-boat { position: absolute; width: 16%; left: 63%; top: 59%; opacity: 0; transform: translateY(2cqw); transition: opacity .5s, transform 1.3s ease-in-out; }
.clip-boat svg { display: block; width: 100%; }
.clip-built .clip-boat { opacity: 1; transform: none; }
.clip-sail .clip-boat { transform: translate(9cqw,-5cqw) rotate(5deg); }
/* Preserve Connect's original screenshot, including its gradient card borders. */
.clip-connect-original { position: relative; width: 100%; aspect-ratio: 430 / 720; }
.clip-connect-original>img { display: block; width: 100%; height: auto; }
.clip-connect-selection { position: absolute; left: 8.6%; top: 29.7%; width: 38.6%; height: 18.4%; border: 1px solid white; border-radius: 22%; background: #ffffff0c; box-shadow: 0 0 1.2cqw #ffffff40; opacity: 0; transition: opacity .35s ease; }
.clip-connect-selected .clip-connect-selection { opacity: 1; }
.clip-connect-original { container-type: inline-size; }
.clip-connect-view { position: absolute; inset: 0; overflow: hidden; opacity: 0; transform: translateX(8%); transition: opacity .45s ease, transform .45s ease; }
.clip-connect-view>img { display: block; width: 100%; height: auto; }
.clip-show-reps .clip-connect-reps { opacity: 1; transform: none; }
.clip-connect .phone-preview { transition: opacity .55s ease, transform .85s cubic-bezier(.2,.7,.2,1); }
.clip-connect-overview .phone-preview { opacity: 0; transform: translate(-8cqw,2cqw) rotate(-3deg) scale(.72); }
.clip-connect-overview .gallery-headline { top: 17%; max-width: 88%; font-size: 5.5cqw; }
.clip-connect-overview .connect-caption { left: 6%; bottom: 12%; width: 88%; max-width: 88%; text-align: center; font-size: 1.8cqw; }
.clip-connect-fan { position: absolute; left: 7%; right: 7%; top: 31%; height: 49%; }
.clip-fan-device { position: absolute; left: calc(var(--device) * 26.333%); top: 0; width: 21%; opacity: 0; transform: translate(calc((1.5 - var(--device)) * 70%),4cqw) rotate(0deg) scale(.75); transition: opacity .45s ease, transform 1s cubic-bezier(.2,.75,.2,1); transition-delay: calc(var(--device) * .1s); }
.clip-connect-overview .clip-fan-device { opacity: 1; transform: rotate(var(--angle)); }
.clip-fan-screen { position: relative; width: 100%; aspect-ratio: 430 / 720; border: .55cqw solid #423651; border-radius: 1.8cqw; overflow: hidden; background: #292626; box-shadow: 0 1.2cqw 2cqw #30283d25; container-type: inline-size; }
.clip-fan-screen>img { display: block; width: 100%; height: auto; }
.clip-fan-label { display: block; text-align: center; color: #4c405d; font-size: 1.6cqw; font-weight: 600; white-space: nowrap; line-height: 1.3; margin-top: .9cqw; }
.clip-fan-gems { background: #2c2c2c; }
.clip-fan-gems>img { transform: translateY(0); transition: transform 2.1s cubic-bezier(.4,0,.2,1); }
.clip-fan-active .clip-fan-gems>img { transform: translateY(-42.4%); }
.clip-fan-egg { background: #f0f0f0; }
.clip-connect-time { position: absolute; top: 43.6914%; left: 34%; width: 32%; height: 7.6389%; display: flex; justify-content: center; align-items: center; font: 700 11.16279cqw/1 Arial,sans-serif; color: #333; background: #f0f0f0; }
.clip-connect-start { position: absolute; left: 25.1%; top: 54.2%; width: 21.2%; height: 6.7%; border-radius: 1cqw; background: #173d2026; opacity: 0; }
.clip-fan-active .clip-connect-start { animation: clip-connect-tap .4s ease; }
@keyframes clip-connect-tap { 0%,100% { opacity: 0; } 40% { opacity: 1; } }
.clip-cards .collection-stack { inset: 34% 9% 14%; }
.clip-cards .clip-wallet-card { left: calc(9% + var(--card) * 8%); top: calc(var(--card) * 5%); width: 64%; height: 86%; padding: 5%; opacity: 0; transform: translateX(var(--entry)) rotate(var(--entry-turn)); transition: opacity .25s ease, transform .9s cubic-bezier(.2,.75,.2,1); z-index: calc(1 + var(--card)); animation: none; }
.clip-cards .clip-wallet-card.is-in { opacity: 1; transform: rotate(var(--turn)); }
.clip-cards .clip-wallet-card.is-stacked { transform: translate(-6%,-4%) rotate(var(--turn)); }
.clip-cards .clip-wallet-card>strong { margin: 0 0 5%; font-size: 2.3cqw; line-height: 1.2; }
.clip-cards .clip-wallet-card .collection-landscape { height: 54%; }
.clip-cards .clip-wallet-card .collection-tags { margin-top: 6%; font-size: 1.4cqw; color: #4a7b63; }
.clip-cards .collection-plus { z-index: 5; transition: color .3s; }
.clip-gems .gem-art { animation: clip-gem 3.2s ease-in-out both; }
.clip-gems .gem-comparison i { transform: scaleX(0); transform-origin: left; animation: clip-load 2.1s .4s cubic-bezier(.2,.7,.2,1) both; }
.clip-gems.clip-complete .gem-comparison>div:nth-child(2) b { color: #38693d; }
.mini-portfolio.mini-site, .clip-portfolio .mini-portfolio { top: 30%; left: 8%; right: 8%; height: 55%; padding: 0; border: 1px solid #ffffff24; border-radius: 1.3cqw; overflow: hidden; color: #eeeae0; background: #19201c; transform: rotate(-2deg); box-shadow: 0 2cqw 4cqw #26302530; }
.clip-site-nav { height: 18%; margin: 0 6%; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ffffff14; }
.clip-site-nav>b { font-size: 3cqw; letter-spacing: -.15cqw; }
.clip-site-nav>b span { color: #de8d73; }
.clip-site-nav>span { font-size: 1.5cqw; color: #aaa99f; }
.clip-site-stage { position: relative; height: 68%; margin: 0 6%; }
.clip-site-home, .clip-site-gallery { position: absolute; inset: 0; padding-top: 5%; transition: opacity .55s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.clip-site-home small { display: block; font-size: 1.4cqw; color: #b2b6aa; }
.clip-site-home strong { display: block; font-size: 4cqw; line-height: 1.1; letter-spacing: -.18cqw; margin-top: 3%; }
.clip-site-home em { font-style: normal; color: #d79075; }
.clip-site-button { display: inline-block; font-size: 1.3cqw; border-radius: 3cqw; background: #e7c79e; color: #222c25; padding: 2% 4%; margin-top: 4%; }
.clip-site-object { position: absolute; width: 23%; height: 65%; right: 4%; top: 17%; perspective: 300px; }
.clip-site-object i { position: absolute; inset: 7% 0; border: 1px solid #d5b89390; border-radius: 15%; transform: rotate(-18deg) skewY(12deg); background: linear-gradient(135deg,#b0c6ab20,#c1a88b09); box-shadow: 1cqw 1cqw 3cqw #acbdaa0c; }
.clip-site-object i:nth-child(2) { transform: translate(-1.8cqw,-.7cqw) rotate(-18deg) skewY(12deg); }
.clip-site-object i:nth-child(3) { transform: translate(1.8cqw,.7cqw) rotate(-18deg) skewY(12deg); }
.clip-site-gallery { padding-top: 3%; opacity: 0; transform: translateY(12%); }
.clip-site-gallery>small { font-size: 1.35cqw; letter-spacing: .08cqw; color: #b6bcad; }
.clip-site-projects { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 5%; margin-top: 3%; }
.clip-site-projects>div { opacity: 0; transform: translateY(1.5cqw); transition: opacity .45s ease, transform .55s ease; }
.clip-site-projects>div.is-ready { opacity: 1; transform: none; }
.clip-site-projects>div>div { height: 9cqw; border-radius: .8cqw; padding: 10%; overflow: hidden; }
.clip-site-projects>div>span { display: block; font-size: 1.3cqw; line-height: 1.2; margin-top: 6%; }
.clip-site-chart { background: #d9e9df; color: #527963; }
.clip-site-chart svg { width: 100%; height: 100%; }
.clip-site-plan { background: #e6ebce; color: #688159; }
.clip-site-plan b { display: block; font-size: 1.6cqw; }
.clip-site-plan i { display: block; height: .5cqw; background: #9caa8660; border-radius: 1cqw; margin-top: .7cqw; }
.clip-site-code { background: #293830; color: #b9cdbd; }
.clip-site-code small, .clip-site-code b { display: block; font-size: 1.1cqw; font-weight: 400; }
.clip-site-code i { display: block; width: 85%; height: .4cqw; background: #617b694f; margin: .8cqw 0; }
.clip-site-bottom { height: 14%; margin: 0 6%; display: flex; align-items: center; justify-content: space-between; color: #8d9a8c; font-size: 1.1cqw; border-top: 1px solid #ffffff10; }
.clip-portfolio-gallery .clip-site-home { opacity: 0; transform: translateY(-12%); }
.clip-portfolio-gallery .clip-site-gallery { opacity: 1; transform: none; }
/* Light cover and the animated dark miniature share the same layout. */
.mini-portfolio.mini-site { background: #f7f5ec; color: #303e35; border-color: #7c897827; }
.mini-site .clip-site-nav { border-color: #53685120; }
.mini-site .clip-site-nav>span, .mini-site .clip-site-home small { color: #687565; }
.mini-site .clip-site-home em { color: #a65f47; }
.mini-site .clip-site-button { background: #dec5a2; }
.mini-site .clip-site-object i { border-color: #809277a8; background: linear-gradient(135deg,#bbc9b759,#d9bc9522); box-shadow: 1cqw 1cqw 2cqw #5060440a; }
.mini-site .clip-site-bottom { color: #78816e; border-color: #53685116; }
.clip-site-projects .clip-site-chart path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.clip-site-projects .is-ready .clip-site-chart path { animation: clip-draw 2s .35s ease-in-out forwards; }
.clip-site-plan b span { opacity: 0; }
.clip-site-plan i { transform: scaleX(0); transform-origin: left; }
.clip-site-projects .is-ready .clip-site-plan i { animation: clip-load .65s .35s ease-out forwards; }
.clip-site-projects .is-ready .clip-site-plan i:nth-of-type(2) { animation-delay: .8s; }
.clip-site-projects .is-ready .clip-site-plan i:nth-of-type(3) { animation-delay: 1.25s; }
.clip-site-projects .is-ready .clip-site-plan b span { animation: clip-arrive .3s .7s both; }
.clip-site-projects .is-ready .clip-site-plan b span:nth-child(2) { animation-delay: 1.15s; }
.clip-site-projects .is-ready .clip-site-plan b span:nth-child(3) { animation-delay: 1.6s; }
.clip-site-code i { transform: scaleX(0); transform-origin: left; }
.clip-site-code .clip-site-ready { opacity: 0; }
.clip-site-projects .is-ready .clip-site-code i { animation: clip-load .8s .4s steps(9,end) forwards; }
.clip-site-projects .is-ready .clip-site-code i:nth-of-type(2) { animation-delay: 1.2s; }
.clip-site-projects .is-ready .clip-site-ready { animation: clip-arrive .35s 2.1s forwards; }
.clip-egg .egg-timer>span { font-variant-numeric: tabular-nums; }
.clip-egg .egg-timer circle:last-child { stroke-dasharray: 616 616; animation: clip-countdown 5s linear both; }
.clip-egg .timer-play { animation: clip-tap .45s both; }
.clip-routing .route-tabs span { transition: background .3s, color .3s; }
.clip-routing .route-body { animation: clip-arrive .4s both; }
.clip-route-info { font-size: 2.2cqw; line-height: 1.4; font-weight: 500; color: #486175; margin-bottom: 1cqw; }
.clip-route-switch { display: flex; gap: 3cqw; }
.clip-route-switch>i { position: relative; width: 7cqw; height: 3.7cqw; background: #7c9f9b; border-radius: 3cqw; }
.clip-route-switch>i:last-child { width: 7cqw; background: #c4d0d6; }
.clip-route-switch>i::after { content: ''; position: absolute; width: 2.7cqw; height: 2.7cqw; border-radius: 50%; background: #f4f6f5; top: .5cqw; right: .5cqw; }
.clip-route-switch>i:last-child::after { right: auto; left: .5cqw; }
.clip-campfire .campfire-art path:not(:first-child) { transform-box: fill-box; transform-origin: bottom center; animation: clip-flame .55s ease-in-out 8 alternate; }
.clip-campfire .campfire-art path:last-child { animation-delay: -.2s; }
.clip-campfire .fire-halo { animation: clip-warmth 1.1s ease-in-out 4 alternate; }
.clip-embers { position: absolute; inset: 30% 20% 20%; }
.clip-embers i { position: absolute; bottom: 6%; left: calc(35% + var(--spark) * 5%); width: .6cqw; height: 1cqw; border-radius: 50%; background: #e4b384; opacity: 0; animation: clip-ember 2s calc(var(--spark) * .25s) 2 ease-out; }
@keyframes clip-tap { 0%,100% { transform: scale(1); } 45% { transform: scale(.88); } }
@keyframes clip-scan { from { transform: translateY(0); opacity: .2; } to { transform: translateY(12cqw); opacity: 1; } }
@keyframes clip-signal { from { opacity: .25; } to { opacity: 1; } }
@keyframes clip-hockey-a { 0%,100% { transform: translate(0,0); } 22% { transform: translate(37px,-39px); } 48% { transform: translate(-10px,17px); } 77% { transform: translate(32px,-18px); } }
@keyframes clip-hockey-b { 0%,100% { transform: translate(0,0); } 22% { transform: translate(13px,34px); } 48% { transform: translate(-32px,63px); } 77% { transform: translate(20px,5px); } }
@keyframes clip-puck { 0% { transform: translate(0,0); } 22% { transform: translate(120px,8px); } 48% { transform: translate(-98px,51px); } 77% { transform: translate(116px,-38px); } 100% { transform: translate(238px,10px); } }
@keyframes clip-camera { 0% { opacity: 0; transform: translateY(1cqw); } 25%,65% { opacity: 1; transform: none; } 100% { opacity: .3; transform: none; } }
@keyframes clip-picture { 0%,30% { clip-path: inset(0 100% 0 0); } 100% { clip-path: inset(0); } }
@keyframes clip-pencil-sketch { from { opacity: 0; transform: translateY(.8cqw) rotate(-3deg); } to { opacity: 1; transform: none; } }
@keyframes clip-island { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-1cqw); } }
@keyframes clip-player { 0%,100% { transform: translate(0,0); } 55% { transform: translate(33px,7px); } }
@keyframes clip-pirate { from { transform: translate(-30px,-15px); opacity: 0; } to { transform: translate(0,0); opacity: 1; } }
@keyframes clip-collect { 0% { opacity: 0; transform: translateY(2cqw) scale(.6); } 30%,60% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6cqw) scale(.5); } }
@keyframes clip-card-in { 0% { opacity: 0; transform: translate(12cqw,-4cqw) rotate(16deg); } 100% { opacity: 1; transform: rotate(-3deg); } }
@keyframes clip-gem { 0%,100% { transform: rotate(0); } 45% { transform: rotate(-10deg) translateY(-1cqw); } }
@keyframes clip-countdown { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 10.27; } }
@keyframes clip-flame { from { transform: scale(.96,1.02) rotate(-1deg); } to { transform: scale(1.03,.94) rotate(1deg); } }
@keyframes clip-warmth { from { opacity: .55; transform: scale(.94); } to { opacity: .9; transform: scale(1.04); } }
@keyframes clip-ember { 0% { opacity: 0; transform: translate(0,0); } 20% { opacity: .85; } 100% { opacity: 0; transform: translate(var(--drift),-22cqw); } }
@media (prefers-reduced-motion: reduce) {
  .project-visual.is-demo-playing > :not(.hover-demo-layer) { opacity: 1; }
  .project-visual > .hover-demo-layer { display: none; }
}