/* Studio's interaction layer: gather → reveal → carry into the next area.
 * Everything settles. Nothing needs an idle animation loop or delays a link.
 */
.studio-cue { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; color: var(--text-dim); font: 500 11px/1.5 var(--font-body); }
.studio-cue i { width: 4px; height: 4px; background: currentColor; border-radius: 1px; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
a:hover .studio-cue, a:focus-visible .studio-cue { color: var(--ember); }
a:hover .studio-cue i, a:focus-visible .studio-cue i { transform: rotate(90deg); box-shadow: 0 0 10px var(--spark-line); }
.studio-area-copy > .studio-cue { margin-top: 13px; }
.studio-area-card { position: relative; isolation: isolate; padding-inline: 14px; margin-inline: -14px; border-radius: var(--r-sm); transition: background .25s var(--ease), transform .2s var(--ease); }
[data-studio-surface] { position: relative; isolation: isolate; }
[data-studio-surface]::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; background: radial-gradient(280px circle at var(--spot-x, 70%) var(--spot-y, 50%), var(--spark-wash), transparent 78%); opacity: 0; transition: opacity .28s var(--ease); }
[data-studio-surface]:hover::before, [data-studio-surface]:focus-visible::before { opacity: 1; }
.studio-area-card:hover, .studio-area-card:focus-visible { background: var(--card); }
.studio-area-card:active { transform: translateY(1px); }
.studio-area-card-heading { align-items: baseline; }
.studio-area-card-heading > span { font-size: 10px; }
.studio-signature { --signature-spread: .17; position: relative; display: grid; align-self: center; place-items: center; width: 108px; height: 108px; flex: 0 0 108px; pointer-events: none; }
.studio-signature::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse, var(--spark-wash), transparent 70%); opacity: .4; transform: scale(.8); transition: transform .65s var(--ease), opacity .65s var(--ease); }
.studio-signature svg { display: block; width: 100%; height: auto; overflow: visible; }
.studio-signature g { transform-origin: 60px 48px; transform: translate(var(--signal-x, 0px), var(--signal-y, 0px)) rotate(-3deg); transition: transform .5s cubic-bezier(.18,.8,.2,1.1); }
.studio-signature circle { fill: var(--spark); opacity: .8; transform: translate(calc(var(--atom-x) * var(--signature-spread)), calc(var(--atom-y) * var(--signature-spread))); transition: transform .65s cubic-bezier(.18,.8,.2,1.15), opacity .4s var(--ease); }
.studio-signature .is-paper { fill: var(--paper); opacity: .55; }
.studio-signature .is-ember { fill: var(--glow); }
.studio-area-card:hover .studio-signature, .studio-area-card:focus-visible .studio-signature, .studio-area-heading:hover .studio-signature, .studio-area-heading:focus-within .studio-signature { --signature-spread: 0; }
.studio-area-card:hover .studio-signature g, .studio-area-card:focus-visible .studio-signature g, .studio-area-heading:hover .studio-signature g, .studio-area-heading:focus-within .studio-signature g { transform: translate(var(--signal-x, 0px), var(--signal-y, 0px)) rotate(0) scale(1.04); }
.studio-area-card:hover .studio-signature::before, .studio-area-card:focus-visible .studio-signature::before, .studio-area-heading:hover .studio-signature::before, .studio-area-heading:focus-within .studio-signature::before { opacity: 1; transform: scale(1.15); }
.studio-area-card:hover .studio-signature circle, .studio-area-card:focus-visible .studio-signature circle { opacity: 1; }
.studio-area-heading { display: flex; align-items: center; padding-bottom: 10px; }
.studio-area-heading > .studio-signature { width: 155px; height: 155px; flex-basis: 155px; margin-right: 20px; --signature-spread: .08; }
.studio-area-heading .studio-page-heading { flex: 1; min-width: 0; }
.studio-area-heading .studio-page-heading > .btn { display: inline-flex; margin-top: 23px; font-size: 12px; }
.studio-area-heading .btn { transition: transform .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); }
.studio-area-heading .btn:hover { transform: translateY(-2px); box-shadow: 0 5px 22px -12px var(--spark); }
.studio-area-heading .btn:active { transform: translateY(0); }
.studio-directory-tool { grid-template-columns: 36px 175px minmax(0, 1fr) 46px; border-radius: var(--r-sm); transition: background .22s var(--ease); }
.studio-directory-tool:hover { background: var(--card); }
.studio-directory-tool > .studio-cue { color: var(--text-muted); }
.studio-directory-tool:hover > .studio-cue, .studio-directory-tool:focus-visible > .studio-cue { color: var(--ember); }
.studio-outcome .studio-cue { color: var(--paper-muted); font-size: 10px; }
.studio-outcome:hover .studio-cue, .studio-outcome:focus-visible .studio-cue { color: var(--spark-deep); }
.studio-outcome h3 { align-items: baseline; }
.studio-outcome p { transition: color .25s var(--ease); }
.studio-outcome:hover p { color: var(--paper-ink); }
.studio-outcome::before { background: radial-gradient(220px circle at var(--spot-x, 50%) var(--spot-y, 50%), var(--paper-hi), transparent 80%); }
.studio-recent-tool { border-radius: var(--r-sm); transition: background .2s var(--ease); }
.studio-recent-tool:hover { background: var(--card); }
.studio-recent-tool > .studio-cue { font-size: 10px; }
.studio-search-trigger, .studio-brief-link { transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease); }
.studio-search-trigger:hover, .studio-brief-link:hover { color: var(--text); background: var(--card-2); border-color: var(--spark-line); box-shadow: 0 0 18px -10px var(--spark-line); }
.studio-navigation a { transition: background .18s var(--ease), color .18s var(--ease); }
.studio-nav-area > summary { transition: background .18s var(--ease), color .18s var(--ease); }
.studio-workflow a { padding: 4px 0; border-bottom: 1px solid transparent; transition: border-color .2s var(--ease), color .2s var(--ease); }
.studio-workflow a:hover { color: var(--text); border-bottom-color: var(--spark-line); }
.studio-workflow [aria-current=step] { border-bottom-color: var(--spark); }
.studio-search[open] { animation: studio-palette-in .22s cubic-bezier(.2,.8,.2,1); }
.studio-search-results a { border-radius: 4px; transition: background .15s var(--ease), padding-left .15s var(--ease); }
.studio-search-results a:hover, .studio-search-results a:focus-visible { background: var(--spark-wash); padding-left: 15px; }
.studio-search-results a:focus-visible { outline-offset: -2px; }
@keyframes studio-palette-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes studio-workspace-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes studio-workspace-out { to { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  html[data-studio-transition=fallback] .studio-content { animation: studio-workspace-in .3s cubic-bezier(.2,.75,.2,1) both; }
  .studio-rail { view-transition-name: studio-rail; }
  .studio-topbar { view-transition-name: studio-topbar; }
  .studio-content { view-transition-name: studio-workspace; }
  ::view-transition-group(*) { animation-duration: .42s; animation-timing-function: cubic-bezier(.2,.75,.2,1); }
  ::view-transition-old(studio-workspace) { animation: .15s ease-out both studio-workspace-out; }
  ::view-transition-new(studio-workspace) { animation: .3s .06s cubic-bezier(.2,.75,.2,1) both studio-workspace-in; }
  ::view-transition-old(studio-rail), ::view-transition-new(studio-rail), ::view-transition-old(studio-topbar), ::view-transition-new(studio-topbar) { animation: none; mix-blend-mode: normal; }
}
@media (max-width: 1180px) {
  .studio-signature { width: 88px; height: 88px; flex-basis: 88px; }
  .studio-area-heading { display: flex; }
}
@media (max-width: 620px) {
  .studio-area-card { padding-inline: 10px; margin-inline: -10px; gap: 10px; }
  .studio-area-card h3 { font-size: 21px; }
  .studio-area-card .studio-signature { width: 64px; height: 70px; flex-basis: 64px; align-self: flex-start; margin-top: 8px; }
  .studio-area-examples { display: none; }
  .studio-area-copy > .studio-cue { font-size: 11px; margin-top: 10px; }
  .studio-area-heading { display: block; }
  .studio-area-heading > .studio-signature { display: none; }
  .studio-directory-tool { grid-template-columns: 28px minmax(0, 1fr) 44px; }
  .studio-directory-tool > .studio-cue { grid-column: 3; grid-row: 1; }
  .studio-directory-tool p { grid-column: 2 / -1; }
  .studio-area-card .studio-signature { --signature-spread: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .studio-shell *, .studio-shell *::before, .studio-shell *::after { animation: none !important; transition: none !important; }
  .studio-signature circle, .studio-signature g, .studio-signature::before, .studio-area-card:active { transform: none !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}