body[data-page="projects"] { background: #fff; }
.project-view { --preview-surface: #fff; --preview-border: #e0e3dc; --preview-text: #242721; --preview-muted: #626a5e; --preview-chip: #eef1e9; }
.project-head { background: var(--preview-surface); }
.project-head h2 { font-size: 72px; letter-spacing: 0; color: rgba(32,32,32,.12); }
.project-card.case-preview { display: flex; flex-direction: column; min-height: 0; aspect-ratio: auto; background: var(--preview-surface); border-color: var(--preview-border); color: var(--preview-text); }
.case-preview .preview-media { position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 9; flex: 0 0 auto; background: #eef0eb; }
.case-preview .preview-media > :is(img,video) { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; background: transparent; }
.case-preview .project-meta { position: static; padding: 20px; min-height: 134px; flex: 1; gap: 20px; align-items: center; color: var(--preview-muted); }
.case-preview .project-meta strong { font-weight: 750; color: var(--preview-text); font-size: 22px; line-height: 1.35; }
.case-preview .project-meta .preview-description { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; font-size: 13px; line-height: 1.6; margin-top: 12px; }
.case-preview .project-meta .preview-type-tag { display: inline-flex; align-items: center; max-width: 100%; min-height: 27px; padding: 4px 11px; border-radius: 999px; background: var(--preview-chip); color: var(--preview-text); font-size: 11px; line-height: 1.4; margin: 0; }
.case-preview .project-meta .preview-type-detail { display: inline; margin: 0; color: var(--preview-muted); }
.preview-arrow { color: var(--preview-text); }
body[data-theme="dark"][data-page="projects"] { background: #171915; }
body[data-theme="dark"] .project-view { --preview-surface: #20231e; --preview-border: #3b4036; --preview-text: #f0f2e9; --preview-muted: #b6beb0; --preview-chip: #373e30; background: #171915; color: var(--preview-text); }
body[data-theme="dark"] .project-view .project-head { background: #171915; }
body[data-theme="dark"] .project-view .project-head h2 { color: rgba(229,229,229,.35); }
body[data-theme="dark"] .project-view .filter { background: #30352c; color: #c2cbb9; }
body[data-theme="dark"] .project-view .filter.active { background: #e5edbf; color: #242c19; }
body[data-theme="dark"][data-page="projects"] :is(.dock-tabs,.dock-icons) { background: rgba(40,44,35,.9); border-color: rgba(255,255,255,.18); color: #eef2e5; }
body[data-theme="dark"][data-page="projects"] .dock-tab.active { background: #4e5842; color: #f3f6e9; }
body[data-theme="dark"][data-page="projects"] .dock-icon img { filter: invert(1); }
.artopus-project-preview { position: absolute; inset: 0; overflow: hidden; }
.case-preview .artopus-project-preview > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.artopus-preview-layer { position: absolute; display: block; pointer-events: none; overflow: hidden; }
.artopus-preview-layer img { display: block; width: 100%; height: 100%; object-fit: fill; }
.artopus-preview-knob { left: 77.75%; top: 74.71%; width: 13%; height: 23.07%; border-radius: 50%; }
.artopus-preview-knob img { animation: artopus-preview-turn 7s ease-in-out infinite; }
.artopus-preview-blue { left: .25%; top: 37.98%; width: 16.1%; height: 26.09%; border-radius: 47%; }
.artopus-preview-lime { left: 84.4%; top: 19.52%; width: 15.5%; height: 28.48%; border-radius: 50%; }
.artopus-preview-rose { left: 74.7%; top: 38.78%; width: 14.25%; height: 25.29%; border-radius: 46%; }
.artopus-preview-capsule img { animation: artopus-preview-jiggle 5s ease-in-out infinite; }
.artopus-preview-lime img { animation-delay: -.4s; }
.artopus-preview-rose img { animation-delay: -.8s; }
body:not([data-page="projects"]) .artopus-preview-layer img,body[data-preview-motion="paused"] .artopus-preview-layer img { animation-play-state: paused; }
@keyframes artopus-preview-turn { 0%,15%,100% { transform: rotate(0); } 32%,48% { transform: rotate(35deg); } 64% { transform: rotate(-9deg); } 77% { transform: rotate(5deg); } }
@keyframes artopus-preview-jiggle { 0%,20%,44%,100% { transform: translate(0,0) rotate(0); } 25%,35% { transform: translate(1.5px,-1px) rotate(.8deg); } 30%,40% { transform: translate(-1px,1px) rotate(-.8deg); } }
@media (max-width: 900px) { .project-head h2 { font-size: 54px; } }
@media (max-width: 520px) {
  .project-head h2 { font-size: 42px; }
  .case-preview .project-meta { min-height: 126px; padding: 18px; }
  .case-preview .project-meta strong { font-size: 21px; }
}
@media (max-width: 360px) {
  .bottom-dock .dock-tabs { flex: 1; min-width: 0; }
  .bottom-dock .dock-icons { flex: 0 0 auto; }
  .bottom-dock .dock-tab { flex: 1; width: auto; min-width: 0; padding-inline: 4px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .artopus-preview-layer img { animation: none; } }

.cognisense-project-preview { position: absolute; inset: 0; overflow: hidden; }
.student-triptych-preview { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); grid-template-rows: minmax(0,1fr); gap: 0; overflow: hidden; }
.case-preview .student-triptych-preview > img { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; border: 0; border-radius: 0; }
.case-preview .cognisense-project-preview > img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: center; animation: cognisense-preview-drift 12s ease-in-out infinite; }
.case-preview[data-project-preview="cognisense"] { transition: transform .22s ease,box-shadow .22s ease; }
body:not([data-page="projects"]) .cognisense-project-preview > img,body[data-preview-motion="paused"] .cognisense-project-preview > img { animation-play-state: paused; }
@keyframes cognisense-preview-drift { 0%,100% { transform: scale(1) translate(0,0); } 50% { transform: scale(1.025) translate(-.25%,.15%); } }
@media (hover: hover) and (pointer: fine) {
  .case-preview[data-project-preview="cognisense"]:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(22,29,18,.18); }
}
@media (prefers-reduced-motion: reduce) {
  .case-preview .cognisense-project-preview > img { animation: none; }
  .case-preview[data-project-preview="cognisense"] { transition: none; }
  .case-preview[data-project-preview="cognisense"]:hover { transform: none; }
}

.popcorn-project-preview { position: absolute; inset: 0; isolation: isolate; overflow: hidden; background: #f5dcb1; container-type: size; pointer-events: none; }
.case-preview .popcorn-project-preview > .popcorn-preview-computer { position: absolute; left: 5%; top: 9%; width: 90%; height: 86%; z-index: 2; object-fit: contain; background: transparent; }
.popcorn-cover-rain { position: absolute; inset: 0; overflow: hidden; pointer-events: none; user-select: none; }
.popcorn-cover-rain--back { z-index: 1; }
.popcorn-cover-rain--front { z-index: 3; }
.popcorn-cover-drop { display: block; position: absolute; top: -60px; left: var(--cover-left); width: var(--cover-size); height: var(--cover-size); animation: popcorn-cover-fall var(--cover-duration) linear var(--cover-delay) infinite; }
.popcorn-cover-rain--back .popcorn-cover-drop { opacity: .32; }
.popcorn-cover-rain--front .popcorn-cover-drop { opacity: .65; }
.case-preview .popcorn-cover-drop > img { display: block; width: 100%; height: 100%; object-fit: contain; }
body:not([data-page="projects"]) .popcorn-cover-drop,body[data-preview-motion="paused"] .popcorn-cover-drop { animation-play-state: paused; }
@keyframes popcorn-cover-fall {
  from { transform: translate3d(-50%,0,0) rotate(-12deg); }
  to { transform: translate3d(calc(-50% + var(--cover-drift)),calc(100cqh + 100px),0) rotate(var(--cover-turn)); }
}
@media (max-width: 520px) {
  .popcorn-cover-drop { width: calc(var(--cover-size) * .65); height: calc(var(--cover-size) * .65); }
  .popcorn-cover-rain--back .popcorn-cover-drop:nth-child(n+7),.popcorn-cover-rain--front .popcorn-cover-drop:nth-child(n+5) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .popcorn-cover-rain { display: none; }
  .popcorn-cover-drop { animation: none; }
}

.er-thinking-preview { position: absolute; inset: 0; overflow: hidden; isolation: isolate; background: #fff; pointer-events: none; }
.er-thinking-stage { position: absolute; left: -14%; top: -13%; width: 128%; height: 128%; transition: transform .4s ease; }
.er-thinking-face,.er-thinking-bulb { position: absolute; inset: 0; }
.case-preview .er-thinking-stage img { display: block; width: 100%; height: 100%; object-fit: fill; }
.er-thinking-face { clip-path: polygon(30% 18%,57% 18%,57% 45%,65% 45%,65% 83%,30% 83%); transform-origin: 48% 66%; animation: er-preview-think 8s ease-in-out infinite; }
.er-thinking-bulb { clip-path: polygon(57.5% 18%,73% 18%,73% 45%,57.5% 45%); transform-origin: 64% 36%; animation: er-preview-idea 8s ease-in-out infinite; }
.case-preview .er-thinking-bulb img { position: absolute; inset: 0; mix-blend-mode: multiply; }
.er-thinking-bulb-fill { position: absolute; left: 61%; top: 28.4%; width: 5.4%; height: 9.4%; border-radius: 50%; background: #ffe47c; transform: rotate(35deg); opacity: 0; animation: er-preview-light 8s ease-in-out infinite; }
.er-thinking-dots { position: absolute; left: 49%; top: 18%; display: flex; align-items: center; gap: 6px; }
.er-thinking-dots i { display: block; width: 5px; height: 5px; background: #bd352b; border-radius: 50%; opacity: 0; animation: er-preview-dot 8s ease-in-out infinite; }
.er-thinking-dots i:nth-child(2) { animation-delay: .45s; }
.er-thinking-dots i:nth-child(3) { animation-delay: .9s; }
body:not([data-page="projects"]) .er-thinking-stage :is(.er-thinking-face,.er-thinking-bulb,.er-thinking-bulb-fill,i),body[data-preview-motion="paused"] .er-thinking-stage :is(.er-thinking-face,.er-thinking-bulb,.er-thinking-bulb-fill,i) { animation-play-state: paused; }
@keyframes er-preview-think {
  0%,12%,100% { transform: translateY(0) rotate(0); }
  30%,43% { transform: translateY(-2px) rotate(-2.5deg); }
  58%,70% { transform: translateY(-4px) rotate(1.5deg); }
  84% { transform: translateY(0) rotate(-.6deg); }
}
@keyframes er-preview-idea {
  0%,40%,100% { transform: translateY(0) rotate(0); }
  55%,68% { transform: translateY(-5px) rotate(6deg); }
  77% { transform: translateY(-2px) rotate(-3deg); }
  86% { transform: translateY(-1px) rotate(1deg); }
}
@keyframes er-preview-light { 0%,42%,100% { opacity: 0; } 56%,74% { opacity: .85; } 85% { opacity: .3; } }
@keyframes er-preview-dot { 0%,12%,54%,100% { opacity: 0; transform: translateY(2px); } 22%,40% { opacity: .8; transform: translateY(-2px); } }
@media (hover: hover) and (pointer: fine) { .case-preview[data-project-preview="epistemic-research-studio"]:hover .er-thinking-stage { transform: scale(1.035); } }
@media (max-width: 520px) { .er-thinking-dots { gap: 4px; } .er-thinking-dots i { width: 4px; height: 4px; } }
@media (prefers-reduced-motion: reduce) {
  .er-thinking-stage { transition: none; }
  .er-thinking-stage :is(.er-thinking-face,.er-thinking-bulb,.er-thinking-bulb-fill,i) { animation: none; }
  .er-thinking-dots { display: none; }
  .case-preview[data-project-preview="epistemic-research-studio"]:hover .er-thinking-stage { transform: none; }
}