/* Original implementation of pointer-lit surfaces; design references in docs/界面设计参考.md. */
.studio-page .tool-card.tool-preview-card {
  --surface-x: 50%; --surface-y: 35%; --surface-intensity: 0;
  --tilt-x: 0deg; --tilt-y: 0deg; --lift: 0px; --icon-x: 0px; --icon-y: 0px;
  --card-art-x: 0px; --card-art-y: 0px; --card-art-hue: 0deg;
  isolation: isolate;
  transition: transform .24s ease-out, box-shadow .24s, border-color .24s;
}
.studio-page .card-art { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; pointer-events: none; }
.studio-page .card-art-plane {
  position: absolute; inset: -16px;
  background: url("../art/card-contours-v1.8de8e0767614.png") right bottom / cover no-repeat;
  opacity: .42; filter: hue-rotate(var(--card-art-hue)) saturate(.75);
  transform: translate3d(var(--card-art-x), var(--card-art-y), 0);
  transition: transform .2s ease-out;
}
.studio-page .tool-card[data-tone=blue] { --card-art-hue: 45deg; }
.studio-page .tool-card[data-tone=amber] { --card-art-hue: -65deg; }
.studio-page .card-art-reveal {
  position: absolute; inset: 0; opacity: calc(var(--surface-intensity) * .2);
  -webkit-mask-image: radial-gradient(230px circle at var(--surface-x) var(--surface-y), #000, transparent 85%);
  mask-image: radial-gradient(230px circle at var(--surface-x) var(--surface-y), #000, transparent 85%);
  transition: opacity .22s;
}
.studio-page .card-art-reveal .card-art-plane { opacity: .75; }
:root[data-theme=light] .studio-page .card-art-plane { filter: invert(1) hue-rotate(calc(160deg + var(--card-art-hue))) saturate(.45); opacity: .24; }
:root[data-theme=light] .studio-page .card-art-reveal .card-art-plane { opacity: .45; }
/* The light sits above the opaque card surface and below its text. */
.studio-page .tool-card.tool-preview-card::before {
  content: ''; display: block; position: absolute; inset: 0; width: auto; height: auto;
  border-radius: inherit; pointer-events: none; z-index: 0;
  opacity: var(--surface-intensity);
  background: radial-gradient(340px circle at var(--surface-x) var(--surface-y), color-mix(in srgb, var(--card-tone) 18%, transparent), transparent 72%),
              radial-gradient(120px circle at var(--surface-x) var(--surface-y), #ffffff09, transparent 85%);
  transition: opacity .2s ease-out;
}
.studio-page .tool-card.tool-preview-card:hover::before { opacity: var(--surface-intensity); }
.studio-page .tool-card.tool-preview-card::after {
  content: ''; position: absolute; inset: -1px; z-index: 2; pointer-events: none;
  border-radius: inherit; padding: 1.5px; opacity: var(--surface-intensity);
  background: radial-gradient(230px circle at var(--surface-x) var(--surface-y), var(--card-tone), color-mix(in srgb, var(--card-tone) 32%, transparent) 45%, transparent 78%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  transition: opacity .2s ease-out;
}
.studio-page .tool-preview { position: relative; z-index: 1; }
.studio-page .tool-card.tool-preview-card[data-surface-active] { box-shadow: inset 0 1px 0 #ffffff12, 0 18px 42px #0000002a, 0 0 24px color-mix(in srgb, var(--card-tone) 5%, transparent); }
.studio-page .preview-heading .tool-monogram { transition: transform .25s ease-out, box-shadow .25s; }
.studio-page .tool-card[data-surface-active] .tool-monogram { box-shadow: inset 0 1px 0 #ffffff18, 0 0 22px color-mix(in srgb, var(--card-tone) 17%, transparent); }
.studio-page .tool-card:focus-within { --surface-intensity: .55; }
.studio-page .tool-preview:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.studio-page .tool-card .surface-ripple {
  position: absolute; z-index: 0; width: 26px; height: 26px; border-radius: 50%;
  left: var(--ripple-x); top: var(--ripple-y); pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--card-tone) 60%, transparent);
  background: color-mix(in srgb, var(--card-tone) 10%, transparent);
  animation: surface-ripple .7s ease-out forwards;
}
.studio-page .search-box { position: relative; isolation: isolate; }
.studio-page .search-box::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(260px circle at var(--surface-x, 50%) var(--surface-y, 50%), color-mix(in srgb, var(--accent) 14%, transparent), transparent 75%);
  opacity: var(--surface-intensity, 0); transition: opacity .2s;
}
.studio-page .module-pill { position: relative; overflow: hidden; }
.studio-page .module-pill::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 20%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 80%);
  transform: translateX(-120%); opacity: 0;
}
.studio-page .module-pill:hover::after { transform: translateX(120%); opacity: 1; transition: transform .65s ease, opacity .2s; }
.studio-page .scope-tabs a, .studio-page .layout-switch .icon-button { transition: background .2s, color .2s, box-shadow .2s; }
.studio-page .scope-tabs a:hover, .studio-page .layout-switch .icon-button:hover { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent); }
:root[data-theme=light] .studio-page .tool-card.tool-preview-card::before {
  background: radial-gradient(340px circle at var(--surface-x) var(--surface-y), color-mix(in srgb, var(--card-tone) 13%, transparent), transparent 72%);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .studio-page .tool-card.tool-preview-card[data-surface-active] { transform: perspective(1200px) translateY(var(--lift)) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); }
  .studio-page .tool-card[data-surface-active] .tool-monogram { transform: translate(var(--icon-x), var(--icon-y)); }
  .studio-page .list-layout .tool-card.tool-preview-card[data-surface-active] { transform: translateY(-2px); }
}
@keyframes surface-ripple {
  from { transform: translate(-50%, -50%) scale(.4); opacity: .8; }
  to { transform: translate(-50%, -50%) scale(16); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .studio-page .tool-card.tool-preview-card::before { opacity: 0; }
  .studio-page .tool-card.tool-preview-card:focus-within::before { opacity: .4; }
  .studio-page .tool-card .surface-ripple { display: none; }
}