/* Interactive profile and real-project capability studies. */
.profile-display { align-self: center; }
.profile-display button {
    appearance: none; border: 0; padding: 0; background: none;
    color: inherit; font: inherit; letter-spacing: inherit; line-height: inherit;
    text-shadow: inherit; cursor: pointer; text-align: left;
    transition: translate 260ms var(--motion-settle), color 260ms;
}
.profile-display button:hover, .profile-display button:focus-visible { translate: 8px 0; color: var(--accent); }
.profile-display button:focus-visible { outline: 3px dashed var(--paper); outline-offset: 8px; }
.profile-display strong:nth-of-type(2) { color: var(--paper); }
.profile-display button[aria-pressed="true"] { color: var(--accent); }
.profile-display.is-visible strong { animation: poster-type 650ms var(--motion-settle) both; }
.profile-display.is-visible strong:nth-of-type(2) { animation-delay: 120ms; }
.profile-display.is-visible em { animation: poster-type 650ms 240ms var(--motion-settle) both; }
.profile-copy { min-width: 0; padding-top: 0; }
.profile-preview { margin-top: 1.8rem; max-width: 560px; min-height: 175px; }
.profile-preview__panel[hidden] { display: none; }
.profile-preview__panel:not([hidden]) { animation: explore-panel 320ms var(--motion-settle) both; }
.profile-project { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 1.1rem; padding: .65rem; border: 2px solid var(--ink); background: var(--paper); box-shadow: 5px 5px var(--ink); }
.explore-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #171717; isolation: isolate; }
.explore-media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 650ms var(--motion-settle), opacity 350ms; }
.explore-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 200ms; z-index: 4; }
.explore-media video.is-playing { opacity: 1; }
.profile-project span { display: block; font-size: .56rem; font-weight: 800; letter-spacing: .08em; color: var(--red-surface); }
.profile-project h3 { margin: .4rem 0; font-size: clamp(.9rem, 1.2vw, 1.1rem); line-height: 1.5; }
.profile-project small { font-size: .64rem; }
.profile-project:hover img { transform: scale(1.045); }
.profile-section-link { display: flex; justify-content: space-between; padding: .9rem .2rem .2rem; font-size: .69rem; font-weight: 700; }
.profile-section-link:hover { color: var(--red-surface); }
.profile-stats a { display: inline-block; padding-block: .4rem; }
.profile-stats a:hover { text-decoration: underline; text-underline-offset: 4px; }
.capabilities-section::before { translate: var(--capability-shift, 0px) 0; transition: translate 900ms var(--motion-settle); }
.capabilities-heading { padding: clamp(2.5rem, 4vw, 4rem) 0 3rem; }
.capability-grid { gap: 1rem; }
.capability-grid article, .capability-grid article:nth-child(even) { min-width: 0; padding: 1.15rem; clip-path: none; border: 1px solid #77746e; transform: none; }
.capability-grid article:hover, .capability-grid article:focus-within { background: #1c1a16; color: var(--paper); border-color: var(--accent); transform: none; }
.capability-grid article > span { font-size: 2.6rem; }
.capability-case { display: block; margin: 1.3rem 0 1.2rem; }
.capability-case .explore-media { overflow: hidden; border: 1px solid #57534c; }
.capability-case .case-caption { display: block; margin-top: .65rem; color: var(--accent); font: 600 .62rem/1.5 var(--sans); letter-spacing: .06em; }
.capability-grid h3 { margin: 0 0 .75rem; font-size: clamp(1.2rem, 1.6vw, 1.7rem); white-space: nowrap; }
.capability-grid p, .capability-grid article:hover p { color: #bdb9b0; line-height: 1.8; }
.capability-case-link { margin-top: auto; padding-top: 1.25rem; font-size: .69rem; font-weight: 700; }
.capability-case-link:hover { color: var(--accent); }
.case-corner { position: absolute; right: 0; bottom: 0; padding: .15rem .5rem; color: var(--ink); background: var(--accent); z-index: 5; font: 700 1rem/1.5 var(--sans); }
.case-route { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.case-route path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-dasharray: 500; stroke-dashoffset: 500; transition: stroke-dashoffset 1400ms 250ms var(--motion-settle); }
.case-route circle { fill: var(--accent); stroke: #111; stroke-width: 2; }
.is-visible .case-route path { stroke-dashoffset: 0; }
.capability-case--game img { filter: brightness(.6); }
.capability-case--game:hover img, .capability-case--game:focus-visible img { filter: brightness(1); }
.capability-case--product .explore-media img { position: absolute; inset: 0; object-fit: contain; transform: translate(9%, 13%) scale(.83); border: 1px solid #666; }
.capability-case--product .explore-media img:nth-child(2) { transform: translate(1%, 4%) scale(.83); }
.capability-case--product .explore-media img:nth-child(3) { transform: translate(-7%, -5%) scale(.83); }
.capability-case--product:hover img:first-child, .capability-case--product:focus-visible img:first-child { transform: translate(18%, 22%) scale(.8); }
.capability-case--product:hover img:nth-child(2), .capability-case--product:focus-visible img:nth-child(2) { transform: translate(1%, 4%) scale(.8); }
.capability-case--product:hover img:nth-child(3), .capability-case--product:focus-visible img:nth-child(3) { transform: translate(-15%, -14%) scale(.8); }
.capability-case--film .explore-media::after { position: absolute; inset: 0; content: ''; pointer-events: none; border-block: 7px dashed #111; z-index: 3; }
.capability-case--ai .explore-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, #fff6 50%, transparent 65%); transform: translateX(-120%); pointer-events: none; }
.is-visible .capability-case--ai .explore-media::after { animation: case-scan 1400ms 250ms both; }
.capability-case--ai:hover img, .capability-case--ai:focus-visible img { transform: scale(1.1) translateX(-2%); }
.is-visible .capability-case { animation: case-arrive 850ms 150ms var(--motion-settle) both; }
.capability-case:focus-visible, .capability-case-link:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
@keyframes poster-type { from { opacity: 0; translate: -35px 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes explore-panel { from { opacity: .3; translate: 14px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes case-arrive { from { opacity: 0; translate: 0 20px; } to { opacity: 1; translate: 0 0; } }
@keyframes case-scan { to { transform: translateX(120%); } }
@media (max-width: 1100px) { .capability-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) {
    .profile-layout::before { height: clamp(250px, 80vw, 430px); }
    .profile-copy { padding-top: 4rem; }
    .profile-preview { max-width: none; min-height: 0; }
    .profile-project { gap: .8rem; }
    .profile-project h3 { font-size: .9rem; }
    .profile-display button:focus-visible { outline-offset: 3px; }
    .capabilities-section { clip-path: none; }
    .capability-grid h3 { font-size: 1.35rem; }
}
@media (max-width: 540px) { .capability-grid { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) {
    .profile-display button, .profile-display.is-visible strong, .profile-display.is-visible em,
    .profile-preview__panel:not([hidden]), .is-visible .capability-case,
    .is-visible .capability-case--ai .explore-media::after { animation: none; translate: none; }
    .capabilities-section::before { translate: none; transition: none; }
    .explore-media img, .case-route path, .profile-display button { transition: none; }
    .case-route path { stroke-dashoffset: 0; }
}

/* Automatic showcase: one focal point, with a visible pause control. */
.profile-preview { max-width: 680px; }
.profile-project { display: block; position: relative; padding: 0; overflow: hidden; }
.profile-project > div:not(.explore-media) { position: absolute; inset: auto 0 0; z-index: 6; padding: 2.5rem 1rem .9rem; background: linear-gradient(transparent, #080808ed); color: var(--paper); }
.profile-project span { color: var(--accent); }
.profile-project h3 { font-size: 1.15rem; margin-bottom: 0; padding-right: 5rem; }
.profile-project small { position: absolute; right: 1rem; bottom: 1rem; }
.profile-preview__panel:not([hidden]) { animation: scene-cut 650ms var(--motion-settle) both; }
.profile-layout::before { transition: transform 850ms var(--motion-settle), background-color 850ms; }
.profile-layout[data-scene="film"]::before { transform: rotate(2deg) translateX(12px); background-color: #b5101b; }
.profile-layout[data-scene="product"]::before { transform: rotate(-5deg) translateY(12px); }
.profile-display button { transition: color 400ms, transform 750ms var(--motion-settle); }
.profile-display button[aria-pressed="true"] { transform: translateX(10px) scale(1.035); }
.showcase-controls { display: flex; align-items: center; gap: 1rem; padding-top: 1.3rem; font: 700 .65rem/1.5 var(--sans); }
.showcase-count { font-variant-numeric: tabular-nums; white-space: nowrap; }
.showcase-track { height: 3px; flex: 1; background: #8885; overflow: hidden; }
.showcase-track i { display: block; height: 100%; width: 100%; background: var(--red); transform-origin: left; }
.showcase-pause { border: 1px solid currentColor; color: inherit; background: transparent; padding: .65rem .9rem; cursor: pointer; min-width: 7rem; }
.showcase-pause:focus-visible, .capability-selectors button:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
.capability-stage { position: relative; z-index: 1; }
.capability-selectors { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.25rem; }
.capability-selectors button { border: 1px solid #777; background: #111; color: var(--paper); padding: .75rem .9rem; font: 700 .7rem/1.4 var(--sans); cursor: pointer; }
.capability-selectors button[aria-pressed="true"] { color: var(--ink); background: var(--accent); border-color: var(--accent); }
.capability-grid { transition: grid-template-columns 850ms var(--motion-settle); align-items: stretch; }
.capability-grid article { overflow: hidden; min-height: 460px; transition: background 650ms, border-color 650ms; }
.capability-grid article.is-active { background: #242019; border-color: var(--accent); }
.capability-grid h3 { font-size: 1rem; }
.capability-grid article.is-active h3 { font-size: 1.55rem; }
.capability-grid article:not(.is-active) .capability-case { opacity: .55; }
.capability-grid article:not(.is-active) p { display: none; }
.capability-grid article:not(.is-active) .case-caption { font-size: .55rem; }
.capability-case { transition: opacity 450ms; }
.capability-grid article.is-active .capability-case--product img:first-child { transform: translate(18%, 22%) scale(.8); }
.capability-grid article.is-active .capability-case--product img:nth-child(3) { transform: translate(-15%, -14%) scale(.8); }
.capability-grid article.is-active .capability-case--ai img { animation: ai-push 5.5s ease-out both; }
.capability-grid article.is-active .capability-case--ai .explore-media::after { animation: case-scan 2s 350ms both; }
.showcase-running .profile-preview__panel[data-kind="product"] .explore-media img { animation: interface-push 5.5s ease-out both; }
.capability-stage:not(.showcase-running) *, .profile-layout:not(.showcase-running) .profile-preview img { animation-play-state: paused; }
@keyframes scene-cut { from { opacity: .3; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); translate: 20px 0; } to { opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); translate: 0 0; } }
@keyframes ai-push { from { transform: scale(1); } to { transform: scale(1.13) translateX(-2%); } }
@keyframes interface-push { from { transform: scale(1.02); } to { transform: scale(1.12) translateY(2%); } }
@media (max-width: 1100px) and (min-width: 821px) { .capability-grid { gap: .6rem; } .capability-grid article { padding: .8rem; } .capability-grid h3 { font-size: .85rem; } }
@media (max-width: 820px) {
    .capability-grid { grid-template-columns: minmax(0, 1fr) !important; }
    .capability-grid article[hidden] { display: none; }
    .capability-grid article.is-active { min-height: 470px; animation: explore-panel 550ms var(--motion-settle); }
    .capability-selectors { display: grid; grid-template-columns: 1fr 1fr; }
    .profile-project h3 { font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
    .profile-preview__panel:not([hidden]), .capability-grid article.is-active,
    .capability-grid article.is-active .capability-case--ai img,
    .capability-grid article.is-active .capability-case--ai .explore-media::after,
    .showcase-running .profile-preview__panel[data-kind="product"] .explore-media img { animation: none; }
    .capability-grid, .profile-layout::before, .profile-display button { transition: none; }
    .profile-display button[aria-pressed="true"] { transform: none; }
}

/* Curated scenes: completed work first, production studies second. */
.profile-preview__panel[data-kind="game"]:not([hidden]) { animation-name: game-reveal; }
.profile-preview__panel[data-kind="film"]:not([hidden]) { animation-name: film-reveal; }
.profile-preview__panel[data-kind="product"]:not([hidden]) { animation-name: tool-reveal; }
@keyframes game-reveal { from { opacity: .2; clip-path: inset(0 100% 0 0); translate: -12px 0; } to { opacity: 1; clip-path: inset(0); translate: 0; } }
@keyframes film-reveal { from { opacity: .3; clip-path: inset(48% 0); } to { opacity: 1; clip-path: inset(0); } }
@keyframes tool-reveal { from { opacity: .2; transform: perspective(1200px) rotateX(5deg) translateY(20px) scale(.96); } to { opacity: 1; transform: none; } }
.capability-grid article { position: relative; }
.capability-grid article:not(.is-active) { background: #12110f; }
.capability-grid article > span.case-watermark { position: absolute; right: -.04em; bottom: .45em; color: var(--paper); opacity: .08; font: 400 clamp(7rem, 12vw, 12rem)/.8 var(--display); pointer-events: none; transition: opacity 550ms, translate 750ms var(--motion-settle); }
.capability-grid article.is-active > span.case-watermark { opacity: 0; translate: 25% 0; }
.capability-grid article:not(.is-active) .explore-media { aspect-ratio: 3 / 4; }
.capability-grid article:not(.is-active) .explore-media > img { object-fit: cover; filter: grayscale(.45); }
.capability-grid article:not(.is-active) .capability-case { opacity: .85; }
.capability-grid article:not(.is-active) .case-caption { display: none; }
.capability-grid article:not(.is-active) h3 { margin-top: .25rem; font-size: .95rem; }
.capability-grid article.is-active .capability-case--game img { filter: none; }
.capability-grid article.is-active .capability-case--ai img { animation: none; }
.capability-grid article.is-active .capability-case--ai .explore-media::after { animation: none; display: none; }
.capability-grid article .capability-case--product .explore-media,
.capability-grid article .capability-case--film .explore-media { position: relative; }
.study-frame { position: absolute; inset: 0; opacity: 0; }
.study-frame:first-child { opacity: 1; }
.capability-grid article[data-capability] .capability-case .explore-media .study-frame img { position: static; inset: auto; object-fit: contain; transform: none; border: 0; width: 100%; height: 100%; }
.study-label { position: absolute; left: 0; bottom: 0; right: 0; padding: .6rem .7rem; font: 700 .64rem/1.4 var(--sans); color: var(--accent); background: #090909e8; letter-spacing: .04em; }
.capability-grid article:not(.is-active) .study-label { display: none; }
.capability-grid article:not(.is-active) .study-frame img { object-fit: cover; }
.capability-grid article.is-active .study-frame--1 { animation: study-first 6.5s linear infinite; }
.capability-grid article.is-active .study-frame--2 { animation: study-second 6.5s linear infinite; }
.capability-grid article.is-active .study-frame--3 { animation: study-third 6.5s linear infinite; }
.capability-stage:not(.showcase-running) article.is-active .study-frame { animation-play-state: paused; }
.capability-case--film .explore-media::after { border-block-width: 5px; }
.showcase-running .profile-preview__panel[data-kind="product"] .explore-media img { animation-duration: 6.5s; }
@keyframes study-first { 0%, 28% { opacity: 1; } 34%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes study-second { 0%, 28% { opacity: 0; } 34%, 61% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes study-third { 0%, 61% { opacity: 0; } 67%, 96% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 1100px) and (min-width: 821px) { .capability-grid article:not(.is-active) h3 { font-size: .8rem; } }
@media (prefers-reduced-motion: reduce) {
    .profile-preview__panel:not([hidden]), .capability-grid article.is-active .study-frame { animation: none; }
    .study-frame:not(:first-child) { opacity: 0; }
    .study-frame:first-child { opacity: 1; }
    .capability-grid article > span.case-watermark { transition: none; }
}
.capability-grid article[data-capability]:not(.is-active) .capability-case .explore-media .study-frame img { object-fit: cover; }

/* Overlap the outgoing frame with the new scene, without moving page content. */
.profile-preview { display: grid; isolation: isolate; }
.profile-preview__panel { grid-area: 1 / 1; min-width: 0; }
.profile-preview__panel.is-front { z-index: 2; }
.profile-preview__panel[data-kind].is-leaving { z-index: 1; pointer-events: none; animation: scene-depart 780ms var(--motion-settle) both; }
.profile-preview__panel[data-kind].is-front { animation-duration: 780ms; }
.profile-preview__panel.is-front .profile-project > div:not(.explore-media) { animation: scene-caption 580ms 180ms var(--motion-settle) both; }
@keyframes scene-depart { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-25px) scale(.985); } }
@keyframes scene-caption { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
.capability-grid { transition-duration: 780ms; }
.capability-grid article .explore-media { height: clamp(240px, 24vw, 350px); aspect-ratio: auto; }
.capability-grid article:not(.is-active) .explore-media { aspect-ratio: auto; }
.capability-grid article .capability-case { margin-bottom: 1.2rem; }
.capability-grid article .case-caption,
.capability-grid article:not(.is-active) .case-caption { display: block; height: 2rem; overflow: hidden; }
.capability-grid article:not(.is-active) .case-caption { visibility: hidden; }
.capability-grid article.is-active .case-caption,
.capability-grid article.is-active h3,
.capability-grid article.is-active > p { animation: scene-caption 550ms 180ms var(--motion-settle) both; }
.capability-grid article.is-active .explore-media { animation: case-picture-in 700ms var(--motion-settle) both; }
@keyframes case-picture-in { from { opacity: .45; clip-path: inset(0 8% 0 0); } to { opacity: 1; clip-path: inset(0); } }
@media (max-width: 820px) {
    .capability-grid article .explore-media { height: auto; aspect-ratio: 16 / 9; }
    .capability-grid article.is-active { animation: mobile-scene-in 650ms var(--motion-settle) both; }
    .profile-preview__panel[data-kind].is-leaving { animation-name: mobile-scene-out; }
}
@keyframes mobile-scene-in { from { opacity: .2; translate: 22px 0; } to { opacity: 1; translate: 0; } }
@keyframes mobile-scene-out { from { opacity: 1; translate: 0; } to { opacity: 0; translate: -16px 0; } }
@media (prefers-reduced-motion: reduce) {
    .profile-preview__panel[data-kind].is-front,
    .profile-preview__panel.is-front .profile-project > div:not(.explore-media),
    .capability-grid article.is-active .case-caption, .capability-grid article.is-active h3,
    .capability-grid article.is-active > p, .capability-grid article.is-active .explore-media,
    .capability-grid article.is-active { animation: none; }
    .capability-grid { transition: none; }
}