/* /studio — the crew, the values, and a way to say hi. (content agent) */

body.page-studio {
  --ink-accent: var(--molten);
  --card-edge: var(--outline);
  --stage-a: #26304F;
  --stage-b: #1A2138;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body.page-studio {
    --ink-accent: #A8480A;
    --stage-a: #FFE7C2;
    --stage-b: #FFD9A3;
  }
  :root:not([data-theme="dark"]) body.page-studio .kicker { color: var(--ink-accent); }
  :root:not([data-theme="dark"]) body.page-studio .draft-tag { color: #7A4E00; background: rgba(255, 194, 61, .28); border-color: rgba(160, 105, 0, .55); }
}

.studio-head .lede { max-width: 46ch; }

/* ── the crew ─────────────────────────────────────────────────────────── */
.crew-section { padding-bottom: clamp(40px, 7vw, 90px); }
.crew {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(20px, 3vw, 36px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
}
.crew-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--panel); border: var(--stroke) solid var(--card-edge); border-radius: var(--r-xl);
  box-shadow: 0 8px 0 rgba(0, 0, 0, .28);
  overflow: hidden;
}
.crew-av {
  position: relative; display: block; width: 100%; padding: 0; margin: 0;
  aspect-ratio: 240 / 232; overflow: hidden;
  border: 0; border-bottom: var(--stroke) solid var(--card-edge);
  background:
    radial-gradient(circle at 50% 42%, var(--av-glow, rgba(255, 107, 26, .28)), transparent 58%),
    linear-gradient(180deg, var(--stage-a), var(--stage-b));
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.crew-partner .crew-av { --av-glow: rgba(79, 209, 197, .3); }
.crew-av:focus-visible { outline-offset: -6px; border-radius: var(--r-xl) var(--r-xl) 0 0; }
.crew-av .av { position: absolute; left: 0; right: 0; bottom: -2px; width: 100%; height: auto; overflow: visible; }
/* a little wallpaper: bolts and a shelf line */
.crew-av::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, .08) 2px, transparent 2.5px);
  background-size: 34px 34px; background-position: 8px 8px;
}

.crew-info { padding: 18px 22px 8px; }
.crew-name { font-size: var(--step-2); margin: 0 0 .1em; display: flex; flex-wrap: wrap; align-items: center; gap: .4em; }
.crew-role { font: 600 var(--step-0)/1.3 var(--font-display); color: var(--ink-accent); margin: 0 0 .7em; letter-spacing: .02em; }
.crew-fun { margin: 0; }
.crew-fun-k { display: block; font: 700 .72rem/1 var(--font-display); letter-spacing: .16em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: .35em; }
.crew-poke {
  margin: auto 22px 18px; padding-top: 10px; font: 600 var(--step--1)/1 var(--font-display); color: var(--fg-muted);
  display: flex; align-items: center; gap: .5em;
}
.crew-poke::before { content: ''; width: 18px; height: 18px; border-radius: 50%; border: 3px solid currentColor; opacity: .7; animation: poke-ping 2.4s ease-out infinite; }
@keyframes poke-ping { 0%, 60%, 100% { transform: scale(1); } 70% { transform: scale(1.35); } 80% { transform: scale(.9); } }

/* avatar parts */
.av * { transform-box: fill-box; }
.av-glow circle { fill: none; }
.av-body { transform-origin: 50% 100%; animation: av-breathe 3.8s ease-in-out infinite; }
.crew-partner .av-body { animation-delay: -1.7s; }
.av-head { transform-box: view-box; transform-origin: 120px 150px; transform: rotate(var(--tilt, 0deg)); transition: transform .5s var(--spring); }
.av-look { transform-box: view-box; transform: translate(calc(var(--lx, 0) * 1px), calc(var(--ly, 0) * 1px)); transition: transform .18s var(--ease-out); }
.av-blink { transform-origin: center; animation: av-blink 5.2s infinite; }
.crew-partner .av-blink { animation-delay: -2.3s; animation-duration: 6.1s; }
.av-happy, .av-ooh { opacity: 0; transition: opacity .12s; }
.av-brows { transition: transform .3s var(--spring); }
.av-smile { transition: opacity .12s; }
.crew-av:hover .av-brows, .crew-av:focus-visible .av-brows { transform: translateY(-3px); }
.crew-av:hover .av-head { --tilt-extra: 1; }

@keyframes av-breathe { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(1.5px) scale(1.012, .99); } }
@keyframes av-blink { 0%, 93%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.08); } 97% { transform: scaleY(1); } }

/* coffee: steam, the sip, the ahh */
.av-steam .st { animation: av-steam 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
.av-steam .st2 { animation-delay: -1.3s; }
@keyframes av-steam { 0% { transform: translateY(6px) scaleY(.7); opacity: 0; } 30% { opacity: .9; } 100% { transform: translateY(-14px) scaleY(1.1); opacity: 0; } }
.av-arm { transform-box: view-box; transform-origin: 172px 182px; transition: transform .5s var(--spring); }
.av-steam { transition: opacity .2s; }
.crew-av.is-sipping .av-arm { transform: translate(-30px, -56px) rotate(-32deg); }
.crew-av.is-sipping .av-steam { opacity: 0; }
.crew-av.is-sipping .av-blink { opacity: 0; }
.crew-av.is-sipping .av-happy { opacity: 1; }
.crew-av.is-ahh .av-smile { opacity: 0; }
.crew-av.is-ahh .av-ooh { opacity: 1; }
.crew-av.is-ahh .av-blink { opacity: 0; }
.crew-av.is-ahh .av-happy { opacity: 1; }
.av-puffs circle { transform-origin: center; }

/* typing: two busy hands and a keyboard */
.av-hand { transform-origin: 50% 0; }
.av-hand-l { animation: av-tap 7s ease-in-out infinite; }
.av-hand-r { animation: av-tap 7s ease-in-out -3.1s infinite; }
@keyframes av-tap { 0%, 88%, 100% { transform: translateY(0); } 90% { transform: translateY(-6px); } 92% { transform: translateY(0); } 94% { transform: translateY(-5px); } 96% { transform: translateY(0); } }
.crew-av.is-typing .av-hand-l { animation: av-type .16s ease-in-out infinite alternate; }
.crew-av.is-typing .av-hand-r { animation: av-type .16s ease-in-out -.08s infinite alternate; }
@keyframes av-type { from { transform: translateY(0); } to { transform: translateY(-9px) rotate(-3deg); } }
.crew-av.is-typing .av-look { transform: translate(0, 4px); }
.crew-av.is-typing .av-brows { transform: translateY(2px); }
.crew-av.is-typing .av-keys rect { animation: av-key .16s steps(2) infinite; }
.crew-av.is-typing .av-keys rect:nth-child(2n) { animation-delay: -.08s; }
@keyframes av-key { 0% { transform: translateY(0); } 100% { transform: translateY(2px); } }
.av-flyers { pointer-events: none; }
.av-flyers text { font: 700 11px/1 var(--font-display); }

/* Dustin's fun fact: the forehead wiggle. studio.js adds .is-wiggling while he types. */
.av-forehead { opacity: 0; transition: opacity .15s; }
.av-hair { transform-box: view-box; }
.crew-av.is-wiggling .av-hair, .crew-av.is-wiggling .av-forehead { animation: av-scalp .2s ease-in-out infinite alternate; }
.crew-av.is-wiggling .av-forehead { opacity: 1; }
@keyframes av-scalp { from { transform: translateY(1px); } to { transform: translateY(-6px); } }
.crew-av.is-wiggling .av-brows path { transform-origin: center; }
.crew-av.is-wiggling .av-brows path:first-child { animation: av-brow-a .2s ease-in-out infinite alternate; }
.crew-av.is-wiggling .av-brows path:last-child { animation: av-brow-b .2s ease-in-out infinite alternate; }
@keyframes av-brow-a { from { transform: translateY(1px) rotate(5deg); } to { transform: translateY(-6px) rotate(-8deg); } }
@keyframes av-brow-b { from { transform: translateY(-6px) rotate(8deg); } to { transform: translateY(1px) rotate(-5deg); } }

/* Seth's fun fact: a toy Cessna 172 flies by. studio.js adds .is-flying. */
.av-plane { transform-box: view-box; transform-origin: 0 0; transform: translate(-90px, 20px); visibility: hidden; pointer-events: none; }
.av-plane.is-flying { visibility: visible; animation: av-flyby 3.6s linear forwards; }
@keyframes av-flyby {
  0% { transform: translate(-90px, 36px) rotate(-4deg) scale(.8); }
  25% { transform: translate(10px, 27px) rotate(-2deg) scale(.8); }
  50% { transform: translate(100px, 27px) rotate(2deg) scale(.8); }
  75% { transform: translate(190px, 25px) rotate(-3deg) scale(.8); }
  100% { transform: translate(300px, 22px) rotate(-6deg) scale(.8); }
}
.av-plane.is-flying .av-plane-body { animation: av-bob .45s ease-in-out infinite alternate; }
@keyframes av-bob { from { transform: translateY(0); } to { transform: translateY(-2px); } }
.av-prop { transform-origin: center; }
.av-plane.is-flying .av-prop { animation: av-prop .06s linear infinite alternate; }
@keyframes av-prop { from { transform: scaleY(1); } to { transform: scaleY(.2); } }

/* a little bounce on every poke */
.crew-av:active .av-body { animation: none; transform: translateY(3px) scale(1.02, .97); transition: transform .08s; }
.crew-av.is-poked { animation: crew-jiggle .5s var(--spring); }
@keyframes crew-jiggle { 0% { transform: scale(1); } 30% { transform: scale(1.02, .98); } 60% { transform: scale(.99, 1.01); } 100% { transform: scale(1); } }

/* pause idle motion when the crew is off screen */
.crew-section.is-off .av *, .values-section.is-off * { animation-play-state: paused !important; }

/* ── the values ───────────────────────────────────────────────────────── */
.values-section h2 { margin-bottom: 1em; }
.values {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(18px, 2.6vw, 30px);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.value {
  background: var(--panel); border: var(--stroke) solid var(--card-edge); border-radius: var(--r-lg);
  padding: 24px 24px 20px; box-shadow: 0 6px 0 rgba(0, 0, 0, .25);
  transition: transform .35s var(--spring);
}
.value:nth-child(1) { transform: rotate(-1deg); }
.value:nth-child(3) { transform: rotate(1deg); }
.value:hover { transform: translateY(-4px) rotate(0); }
.value h3 { font-size: var(--step-2); margin: .5em 0 .3em; }
.value p { margin: 0; color: var(--fg-muted); }
.value-icon {
  width: 96px; height: 96px; padding: 8px; border-radius: 50%;
  border: var(--stroke) solid var(--outline); background: #FFC23D; cursor: pointer;
  display: grid; place-items: center; box-shadow: 0 5px 0 rgba(0, 0, 0, .3);
  transition: transform .3s var(--spring); touch-action: manipulation;
}
.value-hand .value-icon { background: var(--steam); }
.value-heart .value-icon { background: #FFD1EF; }
.value-icon svg { width: 100%; height: 100%; overflow: visible; }
.value-icon:hover { transform: scale(1.08) rotate(-6deg); }
.value-icon:active { transform: scale(.92); }

/* ── say hi ───────────────────────────────────────────────────────────── */
.say-hi-wrap { padding-bottom: clamp(56px, 9vw, 120px); }
.say-hi {
  display: grid; grid-template-columns: auto 1fr auto; gap: clamp(16px, 3vw, 32px); align-items: center;
  padding: clamp(20px, 3.4vw, 36px) clamp(20px, 4vw, 44px);
  background: linear-gradient(135deg, color-mix(in srgb, var(--ember) 22%, var(--panel)), var(--panel) 70%);
  border: var(--stroke) solid var(--card-edge); border-radius: var(--r-xl); box-shadow: 0 8px 0 rgba(0, 0, 0, .28);
}
.say-hi h2 { font-size: var(--step-3); margin: 0 0 .2em; }
.say-hi p { margin: 0; color: var(--fg-muted); max-width: 44ch; }
.say-hi-art { width: clamp(80px, 11vw, 120px); height: auto; overflow: visible; }
.say-hi-art .env { transform-origin: 50% 60%; animation: env-bob 3.2s ease-in-out infinite; }
@keyframes env-bob { 0%, 100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-4px); } }
@media (max-width: 720px) {
  .say-hi { grid-template-columns: 1fr; text-align: left; }
  .say-hi .btn { justify-self: start; }
}

/* calm: show the end state */
html.calm .crew-poke::before { animation: none; }
.av-flyers g { transform-box: view-box; transform-origin: 0 0; }