/* Device illustrations retain the original introduction layout and text sizing. */
.intro-story { position: relative; min-width: 0; }
.intro-story-reveal { position: relative; }
.intro-story-reveal > .intro-type-face { display: block; }
.intro-story-reveal > .intro-glyph-stage { inset: 50% 0 auto; height: 146px; translate: 0 -50%; }
.intro-story-devices { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(28px,4vw,70px); align-items: center; height: 100%; }
.intro-story-device { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; height: 100%; transform: perspective(700px) translate3d(calc(var(--glyph-x) * var(--device-depth,8px)),calc(var(--glyph-y) * var(--device-rise,4px)),0) rotateY(calc(var(--glyph-x) * 7deg)); }
.intro-story-device[data-device="playstation"] { --device-depth: -7px; --device-rise: -3px; }
.intro-story-device[data-device="camera"] { --device-depth: 11px; --device-rise: 6px; }
.intro-story-reveal .intro-story-device svg { width: 100%; height: 116px; flex: 0 0 116px; stroke-width: 2.7; }
.intro-device-label { display: block; margin-top: 10px; font: 500 11px/1.4 var(--sans); letter-spacing: .13em; white-space: nowrap; opacity: .75; }
.intro-story-computer { color: var(--skill-code); }
.intro-story-console { color: var(--skill-character); }
.intro-story-camera { color: var(--skill-fx); }
.intro-story-computer-drift { animation: intro-workstation-drift 7s ease-in-out infinite; }
.intro-story-console-drift { animation: intro-controller-drift 8s ease-in-out infinite; }
.intro-story-camera-drift { animation: intro-workstation-drift 9s ease-in-out -3s infinite reverse; }
.intro-story-scan { stroke-width: 3.5; stroke-dasharray: .25 .75; animation: intro-brain-signal 5s linear infinite; }
.intro-story-code { opacity: .55; stroke-width: 1.5; }
.intro-story-button { animation: intro-brain-node 3.6s ease-in-out infinite; }
.intro-story-button-late { animation-delay: -1.8s; }
.intro-story-focus { transform-box: view-box; transform-origin: 517px 144px; animation: intro-story-focus 6s ease-in-out infinite; }
.intro-story-aperture { transform-box: view-box; transform-origin: 517px 144px; animation: intro-story-aperture 8s ease-in-out infinite; }
.intro-story-console-light { animation: intro-brain-node 5s ease-in-out infinite; }
.intro-story-status { fill: currentColor; stroke: none; animation: intro-brain-node 4.5s ease-in-out infinite; }
@keyframes intro-workstation-drift { 0%,100% { transform: translate(0,2px); } 50% { transform: translate(-3px,-4px); } }
@keyframes intro-controller-drift { 0%,100% { transform: translate(0,-3px); } 50% { transform: translate(2px,4px); } }
@keyframes intro-story-focus { 0%,100% { transform: scale(.95); } 50% { transform: scale(1.035); } }
@keyframes intro-story-aperture { 0%,100% { transform: rotate(-9deg); } 50% { transform: rotate(14deg); } }
@media (max-width: 760px) {
  .intro-story-reveal > .intro-glyph-stage { inset-inline: 0; height: 134px; }
  .intro-story-devices { gap: clamp(22px,6vw,42px); }
  .intro-story-reveal .intro-story-device svg { height: 103px; flex-basis: 103px; }
  .intro-device-label { font-size: 10px; letter-spacing: .08em; }
  .intro-story-reveal .intro-glyph-stage svg { stroke-width: 3; }
}