/* Original venture artwork styles. Preserve geometry, colors and animation keyframes. */
.pixel-mark { overflow: visible; color: #c3c5c1; transition: color .35s ease; }
.pixel-mark__disc { fill: transparent; transition: fill .35s ease; }
.pixel-mark__orbit { transform-box: fill-box; transform-origin: center; }
.pixel-mark__orbit circle { fill: none; stroke: currentColor; stroke-width: 6; }
.pixel-mark__orbit .pixel-ring-inner { stroke-width: 3; stroke-dasharray: 3 5; }
.pixel-labels { fill: currentColor; font: 500 15px var(--mono); text-anchor: middle; }
.pixel-mark__face { fill: currentColor; transform-box: fill-box; transform-origin: center; }
.pixel-ear, .pixel-eye-cover { transform-box: fill-box; transform-origin: center; }
.pixel-ear--left { transform-origin: 100% 50%; }
.pixel-ear--right { transform-origin: 0 50%; }
.pixel-eye-base { fill: currentColor; }
.pixel-eye-cover { fill: #333733; transition: fill .35s ease; }
.project--pixel.is-active-mobile .pixel-mark { color: var(--ink); }
.project--pixel.is-active-mobile .pixel-mark__disc, .project--pixel.is-active-mobile .pixel-eye-cover { fill: #7544df; }
.project--pixel.is-active-mobile .pixel-mark__orbit { animation: pixel-orbit 18s linear infinite; }
.project--pixel.is-active-mobile .pixel-mark__face { animation: pixel-float 3.8s ease-in-out infinite; }
.project--pixel.is-active-mobile .pixel-ear--left { animation: pixel-ear-left 4.2s ease-in-out infinite; }
.project--pixel.is-active-mobile .pixel-ear--right { animation: pixel-ear-right 4.2s ease-in-out .16s infinite; }
.project--pixel.is-active-mobile .pixel-eye-cover { animation: pixel-blink 4.6s steps(1,end) infinite; }

.thleng-mark { overflow: visible; color: #b7bab6; }
.thleng-person { transform-box: fill-box; transform-origin: center; }
.thleng-mark rect { transition: fill .32s ease; }
.thleng-mark .thleng-hair { fill: #777b77; }
.thleng-mark .thleng-face, .thleng-mark .thleng-hand { fill: #d2d3cf; }
.thleng-mark .thleng-shirt { fill: #a4a7a3; }
.thleng-mark .thleng-eye { fill: #303430; }
.thleng-mark .thleng-hand { transform-box: fill-box; transform-origin: 15% 90%; }
.thleng-label { fill: currentColor; font: 600 21px var(--mono); letter-spacing: -.08em; }
.project--thleng.is-active-mobile .thleng-hair { fill: #692f21; }
.project--thleng.is-active-mobile .thleng-face, .project--thleng.is-active-mobile .thleng-hand { fill: #eecb75; }
.project--thleng.is-active-mobile .thleng-shirt { fill: #69c2f9; }
.project--thleng.is-active-mobile .thleng-eye { fill: #181816; }
.project--thleng.is-active-mobile .thleng-person { animation: thleng-bob 2.8s steps(1,end) infinite; }
.project--thleng.is-active-mobile .thleng-eye { animation: thleng-blink 3.6s steps(1,end) infinite; }
.project--thleng.is-active-mobile .thleng-hand { animation: thleng-wave 3.8s steps(1,end) infinite; }
.project--thleng.is-active-mobile .thleng-label { animation: thleng-label-live 3.8s steps(1,end) infinite; }

.saints-mark { position: relative; aspect-ratio: 1; display: grid; place-items: center; }
.saints-mark img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: contain; filter: grayscale(1); opacity: .68; transition: filter .4s ease, opacity .4s ease; }
.saints-mark i { position: absolute; z-index: 0; inset: 14%; border-radius: 50%; background: radial-gradient(circle, rgba(63,98,87,.42), transparent 68%); opacity: 0; transform: scale(.8); transition: opacity .4s ease, transform .4s ease; }
.project--saints.is-active-mobile .saints-mark img { filter: grayscale(0); opacity: 1; animation: saints-float 4.2s ease-in-out infinite; }
.project--saints.is-active-mobile .saints-mark i { opacity: 1; transform: scale(1); }

@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .project:hover .project__art > * { transform: scale(1.045) rotate(-2deg); }
  .project--pixel:hover .pixel-mark { color: var(--ink); }
  .project--pixel:hover .pixel-mark__disc, .project--pixel:hover .pixel-eye-cover { fill: #7544df; }
  .project--pixel:hover .pixel-mark__orbit { animation: pixel-orbit 18s linear infinite; }
  .project--pixel:hover .pixel-mark__face { animation: pixel-float 3.8s ease-in-out infinite; }
  .project--pixel:hover .pixel-ear--left { animation: pixel-ear-left 4.2s ease-in-out infinite; }
  .project--pixel:hover .pixel-ear--right { animation: pixel-ear-right 4.2s ease-in-out .16s infinite; }
  .project--pixel:hover .pixel-eye-cover { animation: pixel-blink 4.6s steps(1,end) infinite; }
  .project--thleng:hover .thleng-hair { fill: #692f21; }
  .project--thleng:hover .thleng-face, .project--thleng:hover .thleng-hand { fill: #eecb75; }
  .project--thleng:hover .thleng-shirt { fill: #69c2f9; }
  .project--thleng:hover .thleng-eye { fill: #181816; }
  .project--thleng:hover .thleng-person { animation: thleng-bob 2.8s steps(1,end) infinite; }
  .project--thleng:hover .thleng-eye { animation: thleng-blink 3.6s steps(1,end) infinite; }
  .project--thleng:hover .thleng-hand { animation: thleng-wave 3.8s steps(1,end) infinite; }
  .project--thleng:hover .thleng-label { animation: thleng-label-live 3.8s steps(1,end) infinite; }
  .project--saints:hover .saints-mark img { filter: grayscale(0); opacity: 1; animation: saints-float 4.2s ease-in-out infinite; }
  .project--saints:hover .saints-mark i { opacity: 1; transform: scale(1); }
}

@keyframes pixel-orbit { to { transform: rotate(360deg); } }
@keyframes pixel-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes pixel-blink { 0%,38%,42%,46%,100% { transform: scaleY(1); } 40%,44% { transform: scaleY(.12); } }
@keyframes pixel-ear-left { 0%,58%,86%,100% { transform: rotate(0); } 66% { transform: rotate(13deg); } 74% { transform: rotate(-7deg); } 81% { transform: rotate(5deg); } }
@keyframes pixel-ear-right { 0%,58%,86%,100% { transform: rotate(0); } 66% { transform: rotate(-13deg); } 74% { transform: rotate(7deg); } 81% { transform: rotate(-5deg); } }
@keyframes thleng-bob { 0%,45%,100% { transform: translateY(0); } 48%,52% { transform: translateY(-4px); } 55% { transform: translateY(1px); } }
@keyframes thleng-blink { 0%,44%,50%,100% { opacity: 1; } 46%,48% { opacity: 0; } }
@keyframes thleng-wave { 0%,54%,82%,100% { transform: rotate(0) translateY(0); } 60% { transform: rotate(-13deg) translateY(-2px); } 67% { transform: rotate(8deg); } 74% { transform: rotate(-7deg) translateY(-1px); } }
@keyframes thleng-label-live { 0%,54%,82%,100% { opacity: .78; } 60%,74% { opacity: 1; } 67% { opacity: .58; } }
@keyframes saints-float { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-.7deg); } }

/* Sketch2Play: original favicon geometry and colours, animated in separate groups. */
.sketch-mark { overflow: visible; filter: grayscale(1); opacity: .7; transition: filter .35s ease, opacity .35s ease; }
.sketch-mark__pencil { transform-origin: 13px 54px; }
.sketch-mark__outline { stroke-dasharray: 1; stroke-dashoffset: 0; }
.sketch-mark__sparks { transform-box: fill-box; transform-origin: center; }
.project--sketch.is-active-mobile .sketch-mark { filter: grayscale(0); opacity: 1; }
.project--sketch.is-active-mobile .sketch-mark__pencil { animation: sketch-pencil 4s ease-in-out infinite; }
.project--sketch.is-active-mobile .sketch-mark__outline { animation: sketch-outline 4s ease-in-out infinite; }
.project--sketch.is-active-mobile .sketch-mark__sparks { animation: sketch-sparks 4s ease-in-out infinite; }
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
  .project--sketch:hover .sketch-mark { filter: grayscale(0); opacity: 1; }
  .project--sketch:hover .sketch-mark__pencil { animation: sketch-pencil 4s ease-in-out infinite; }
  .project--sketch:hover .sketch-mark__outline { animation: sketch-outline 4s ease-in-out infinite; }
  .project--sketch:hover .sketch-mark__sparks { animation: sketch-sparks 4s ease-in-out infinite; }
}
@keyframes sketch-pencil {
  0%, 52%, 100% { transform: translate(0, 0) rotate(0); }
  12% { transform: translate(1px, -1px) rotate(-5deg); }
  25% { transform: translate(-1px, 0) rotate(3deg); }
  38% { transform: translate(.5px, -.5px) rotate(-3deg); }
}
@keyframes sketch-outline { 0% { stroke-dashoffset: 1; } 45%, 100% { stroke-dashoffset: 0; } }
@keyframes sketch-sparks { 0%, 30%, 65%, 100% { opacity: .45; transform: scale(1); } 48% { opacity: 1; transform: scale(1.12); } }