/* Small illustrated interests inside the original about panel. */
.about--studio .about__panel { gap: clamp(30px, 4vw, 58px); }
.about--studio .about__copy h2 { text-wrap: balance; }
.about--studio .about__author { color: #ecedfa; font-weight: 650; }
.about--studio .about__actions { align-items: flex-start; flex-direction: column; gap: 10px; }
.about--studio .about__resume {
  min-height: 43px;
  padding: 11px 16px;
  border-color: rgba(177, 185, 255, .2);
  background: rgba(177, 185, 255, .035);
  color: #d1d5e7;
  font-size: .82rem;
}
.about--studio .about__resume-note {
  max-width: 310px;
  color: var(--text-muted);
  font-size: .76rem;
  line-height: 1.6;
}
.about--studio .about__interests { gap: 13px; }
.about--studio .studio-interest {
  grid-template-columns: 76px minmax(0, 1fr);
  min-height: 124px;
  gap: 17px;
  padding: 18px;
  overflow: hidden;
  transition: border-color 220ms ease, background 220ms ease;
}
.about--studio .studio-interest:hover {
  border-color: rgba(177, 185, 255, .3);
  background: rgba(177, 185, 255, .045);
}
.about--studio .studio-interest strong { font-size: 1.03rem; line-height: 1.35; }
.about--studio .studio-interest p { line-height: 1.65; }
.interest-scene { display: block; width: 76px; height: 76px; overflow: visible; }
.interest-scene__frame { fill: rgba(130, 130, 241, .055); stroke: rgba(156, 161, 245, .18); }
.interest-scene__glow { fill: #9290ff; opacity: .035; }
.studio-interest--games .interest-scene__frame { fill: rgba(112, 210, 179, .04); stroke: rgba(132, 210, 190, .17); }
.studio-interest--games .interest-scene__glow { fill: #8dd9c1; }
.studio-interest--journal .interest-scene__frame { fill: rgba(215, 155, 196, .04); stroke: rgba(215, 170, 205, .18); }
.studio-interest--journal .interest-scene__glow { fill: #edb4d8; }
.studio-tool-window, .studio-tool-check, .studio-game-star,
.studio-journal-bubble, .studio-journal-eyes, .studio-game-shadow {
  transform-box: fill-box;
  transform-origin: center;
}
.studio-game-player { transform-box: fill-box; transform-origin: center bottom; }
.studio-game-sparks { opacity: 0; }
.studio-journal-line { stroke-dasharray: 1; stroke-dashoffset: 0; }

.is-playing .studio-tool-window { animation: studio-tool-build 3800ms ease both; }
.is-playing .studio-tool-row--one { animation: studio-tool-row 3800ms ease both; }
.is-playing .studio-tool-row--two { animation: studio-tool-row 3800ms 160ms ease both; }
.is-playing .studio-tool-check { animation: studio-tool-done 3800ms ease both; }
.is-playing .studio-tool-spark { animation: studio-spark 3800ms ease both; }
.is-playing .studio-game-player { animation: studio-game-jump 3800ms ease-in-out both; }
.is-playing .studio-game-star { animation: studio-game-collect 3800ms ease both; }
.is-playing .studio-game-shadow { animation: studio-game-shadow 3800ms ease both; }
.is-playing .studio-game-sparks { animation: studio-game-sparks 3800ms ease both; }
.is-playing .studio-journal-bubble { animation: studio-journal-pop 3800ms ease both; }
.is-playing .studio-journal-line--one { animation: studio-journal-write 1200ms 100ms ease both; }
.is-playing .studio-journal-line--two { animation: studio-journal-write 1200ms 450ms ease both; }
.is-playing .studio-journal-line--three { animation: studio-journal-write 1200ms 800ms ease both; }
.is-playing .studio-journal-eyes { animation: studio-journal-wink 3800ms ease both; }
.is-playing .studio-journal-spark { animation: studio-spark 3800ms ease both; }

@keyframes studio-tool-build {
  0%, 100% { transform: translateY(0) rotate(0); }
  14% { transform: translateY(-3px) rotate(-3deg); }
  32% { transform: translateY(1px) rotate(1deg); }
  48%, 85% { transform: translateY(0) rotate(0); }
}
@keyframes studio-tool-row {
  0% { transform: translateX(-6px); opacity: .15; }
  26%, 100% { transform: translateX(0); opacity: 1; }
}
@keyframes studio-tool-done {
  0%, 28% { transform: scale(.3); opacity: 0; }
  46% { transform: scale(1.15); opacity: 1; }
  56%, 100% { transform: scale(1); opacity: 1; }
}
@keyframes studio-spark {
  0%, 100% { opacity: .55; }
  40%, 62% { opacity: 1; }
  50% { opacity: .2; }
}
@keyframes studio-game-jump {
  0%, 10%, 100% { transform: translate(0, 0) scale(1, 1); }
  19% { transform: translate(0, 2px) scale(1.12, .86); }
  38% { transform: translate(25px, -28px) scale(.94, 1.06); }
  51% { transform: translate(29px, -10px) scale(1.12, .86); }
  60% { transform: translate(29px, -10px) scale(1, 1); }
  77% { transform: translate(12px, -26px) scale(.96, 1.04); }
  91% { transform: translate(0, 1px) scale(1.08, .9); }
}
@keyframes studio-game-collect {
  0%, 20%, 100% { transform: translateY(0) scale(1) rotate(0); opacity: 1; }
  31% { transform: translateY(-2px) scale(1.1) rotate(10deg); opacity: 1; }
  43% { transform: translateY(-8px) scale(.4) rotate(30deg); opacity: 0; }
  72% { transform: translateY(2px) scale(.5); opacity: 0; }
  89% { transform: translateY(0) scale(1.1); opacity: 1; }
}
@keyframes studio-game-shadow {
  0%, 18%, 100% { transform: scaleX(1); opacity: .2; }
  38%, 65% { transform: scaleX(.4); opacity: .07; }
}
@keyframes studio-game-sparks {
  0%, 31%, 65%, 100% { opacity: 0; }
  43% { opacity: 1; }
}
@keyframes studio-journal-pop {
  0%, 12% { transform: translateY(4px) scale(.85) rotate(-6deg); }
  34% { transform: translateY(-2px) scale(1.06) rotate(4deg); }
  50%, 100% { transform: translateY(0) scale(1) rotate(0); }
}
@keyframes studio-journal-write {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}
@keyframes studio-journal-wink {
  0%, 58%, 68%, 100% { transform: scaleY(1); }
  62%, 64% { transform: scaleY(.15); }
}

@media (max-width: 960px) {
  .about--studio .about__panel { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .about--studio .studio-interest { grid-template-columns: 64px minmax(0, 1fr); gap: 13px; padding: 14px; min-height: 106px; }
  .about--studio .interest-scene { width: 64px; height: 64px; }
  .about--studio .studio-interest strong { font-size: .95rem; }
  .about--studio .studio-interest p { font-size: .78rem; }
}
@media (max-width: 360px) {
  .about--studio .studio-interest { grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 12px; }
  .about--studio .interest-scene { width: 52px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .about--studio .studio-interest { transition: none; }
  .about--studio .interest-scene * { animation: none !important; }
}