.case-page.case-eval { --case-accent: #c3b9f1; }
.eval-status { margin-block: 20px; color: var(--case-accent); font-size: 13px; }
.eval-figure { margin: 40px 0 0; }
.eval-figure a { display: block; border-radius: 12px; overflow: hidden; border: 1px solid var(--case-outline); }
.eval-figure img, .eval-figure video { display: block; width: 100%; height: auto; background: #101414; }
.eval-figure video { border: 1px solid var(--case-outline); border-radius: 12px; }
.eval-figure figcaption { margin-top: 16px; max-width: 90ch; color: var(--muted); font-size: 13px; line-height: 1.75; }
.eval-opening { margin-block: 48px; }
.eval-flow { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.eval-flow li { min-width: 0; padding: 24px; border: 1px solid color-mix(in srgb, var(--case-tone) 30%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--case-tone) 7%, var(--paper-light)); font-size: 17px; line-height: 1.5; }
.eval-flow li:nth-child(2) { --case-tone: var(--case-sky); }
.eval-flow li:nth-child(3) { --case-tone: var(--case-mint); }
.eval-flow li:nth-child(4) { --case-tone: var(--case-peach); }
.eval-flow span { display: block; color: var(--case-tone); font-size: 12px; margin-bottom: 24px; font-variant-numeric: tabular-nums; }
.eval-flow small { display: block; color: var(--body); font-size: 14px; line-height: 1.6; margin-top: 10px; }
.eval-video-links { display: flex; flex-wrap: wrap; gap: 16px 32px; margin-top: 20px; }
.eval-video-links a { min-height: 44px; display: inline-flex; align-items: center; }
.eval-walkthrough { border-block: 1px solid var(--line); margin-top: 24px; padding-block: 16px; }
.eval-walkthrough summary { cursor: pointer; min-height: 44px; align-content: center; font-size: 16px; }
.eval-walkthrough summary:hover { color: var(--case-accent); }
.eval-walkthrough ol { padding-left: 24px; margin-block: 24px; }
.eval-followup { margin-top: 48px; }
.home-page .eval-cover, .eval-mascot-cover { position: relative; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse at 30% 30%, #4f3b7638, transparent 65%), #16171f; }
.home-page .eval-cover { display: grid; place-items: center; padding: 32px 24px 16px; }
.eval-cover-mark { position: absolute; top: 24px; left: 28px; color: #d5cff0; font-size: 13px; letter-spacing: .02em; }
.eval-mascot-stage { position: relative; isolation: isolate; display: grid; place-items: center; width: min(100%, 430px); aspect-ratio: 1; margin-inline: auto; }
.home-page .eval-cover .eval-mascot-stage { width: min(82%, 340px, calc(66.6667cqw - 48px)); }
.eval-mascot-stage .eval-mascot { position: relative; width: 90%; height: auto; transform-origin: 50% 85%; animation: eval-mascot-float 6s ease-in-out infinite; }
.elvo-rig { aspect-ratio: 480 / 512; }
.elvo-rig img { display: block; width: 100%; height: auto; pointer-events: none; }
.elvo-rig .elvo-hand, .elvo-lids { position: absolute; inset: 0; width: 100%; height: 100%; }
.elvo-hand { transform-origin: 79% 62%; animation: elvo-wave 10s ease-in-out infinite; }
.elvo-eye { position: absolute; height: 21.09375%; clip-path: inset(0); mask-size: 100% 100%; mask-repeat: no-repeat; animation: elvo-blink 7.4s linear infinite; }
.elvo-eye--left { left: 18.958333%; top: 35.351563%; width: 19.166667%; mask-image: url("assets/cases/eval-studio/elvo-eye-left.png"); }
.elvo-eye--right { left: 54.375%; top: 34.179688%; width: 21.458333%; mask-image: url("assets/cases/eval-studio/elvo-eye-right.png"); }
.elvo-eye .elvo-pupil { position: absolute; inset: 0; animation: elvo-look 12s ease-in-out infinite; }
.elvo-lids { fill: none; stroke: #10264c; stroke-width: 3; stroke-linecap: round; opacity: 0; animation: elvo-eyelids 7.4s linear infinite; }
.eval-mascot-error { max-width: 38ch; color: var(--muted); font-size: 12px; line-height: 1.7; padding: 16px; }
.eval-mascot-halo { position: absolute; z-index: -1; inset: 9%; border-radius: 50%; background: radial-gradient(circle, #6879d63b, #7150b629 45%, transparent 70%); animation: eval-mascot-glow 6s ease-in-out infinite; }
.eval-mascot-shadow { position: absolute; z-index: -1; bottom: 9%; left: 27%; width: 46%; height: 5%; border-radius: 50%; background: #05050bc9; filter: blur(9px); animation: eval-mascot-shadow 6s ease-in-out infinite; }
.eval-mascot-cover { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 32px; min-height: 470px; padding: 32px 48px; border: 1px solid var(--line); border-radius: 12px; }
.eval-mascot-intro { min-width: 0; }
.eval-mascot-intro h2 { margin-block: 12px 16px; font-size: 36px; }
.eval-mascot-intro > p:not(.case-kicker, .eval-art-note) { max-width: 36ch; font-size: 16px; line-height: 1.75; color: var(--body); }
.eval-expressions { display: flex; gap: 16px; margin-block: 28px 16px; }
.eval-expression { width: 88px; max-width: calc((100% - 32px) / 3); height: auto; border-radius: 12px; animation: eval-expression-bob 4.8s ease-in-out infinite; }
.eval-expression:nth-child(2) { animation-delay: -1.6s; }
.eval-expression:nth-child(3) { animation-delay: -3.2s; }
.eval-art-note { font-size: 12px; line-height: 1.7; color: var(--muted); }
.eval-mascot-intro .motion-toggle { margin-top: 16px; padding-left: 0; color: var(--case-accent); font-size: 12px; }
@keyframes eval-mascot-float {
  0%, 100% { transform: translateY(2px) rotate(-1deg) scale(1.008, .992); }
  50% { transform: translateY(-5px) rotate(1deg) scale(.996, 1.008); }
}
@keyframes elvo-wave {
  0%, 9%, 31%, 100% { transform: rotate(0deg); }
  15%, 23% { transform: rotate(-62deg); }
  19%, 27% { transform: rotate(-40deg); }
}
@keyframes elvo-blink {
  0%, 28%, 31%, 72%, 75%, 78%, 81%, 100% { clip-path: inset(0); }
  29.5%, 73.5%, 79.5% { clip-path: inset(50% 0 50% 0); }
}
@keyframes elvo-eyelids {
  0%, 28.5%, 30.5%, 72.5%, 74.5%, 78.5%, 80.5%, 100% { opacity: 0; }
  29.5%, 73.5%, 79.5% { opacity: 1; }
}
@keyframes elvo-look {
  0%, 12%, 44%, 54%, 88%, 100% { transform: translate(0, 0); }
  18%, 36% { transform: translate(6%, -2%); }
  61%, 79% { transform: translate(-7%, 2%); }
}
@keyframes eval-mascot-shadow {
  0%, 100% { transform: scaleX(1); opacity: .75; }
  50% { transform: scaleX(.8); opacity: .4; }
}
@keyframes eval-mascot-glow {
  0%, 100% { transform: scale(.95); opacity: .65; }
  50% { transform: scale(1.12); opacity: 1; }
}
@keyframes eval-expression-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-7px) rotate(2deg); }
}
@media (max-width: 1000px) {
  .eval-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eval-mascot-cover { gap: 20px; padding: 32px; }
}
@media (max-width: 760px) {
  .eval-mascot-cover { grid-template-columns: 1fr; gap: 0; padding: 24px; }
  .eval-mascot-cover .eval-mascot-stage { width: min(100%, 320px); }
  .eval-mascot-intro { padding: 0 8px 8px; }
  .eval-mascot-intro h2 { font-size: 30px; }
}
@media (max-width: 600px) {
  .eval-flow { grid-template-columns: 1fr; gap: 12px; }
  .eval-flow li { padding: 20px; }
  .eval-flow span { margin-bottom: 12px; }
  .home-page .eval-cover { padding: 32px 16px 8px; }
}
@media print {
  .eval-flow li { background: none; border-color: var(--line); }
  .eval-mascot-cover .motion { animation: none; }
}
@media (forced-colors: active) {
  .eval-flow li { background: Canvas; border-color: CanvasText; }
}