/* Motion layers share the existing palette, type and composition. */
.motion-word {display:inline-block;white-space:nowrap}
.motion-glyph {display:inline-block;transform-origin:50% 90%}
.motion-ink {font:inherit;color:inherit}
.motion-word,.motion-glyph {font:inherit;color:inherit}
.lua-copy h3>.motion-ink,.lua-copy h3 .motion-word,.lua-copy h3 .motion-glyph {color:inherit}
.hero-surname .period .motion-glyph {color:var(--signal)}
.hero h1 {perspective:1000px}
.hero-surname {overflow:clip;overflow-clip-margin:14px;padding-bottom:.12em;margin-bottom:-.12em}
.object-parallax,.object-depth,.object-hover {position:relative;width:100%;height:100%}
html[data-motion=playing] .object-scene[data-motion-object] .object-float {animation:object-weight 7s ease-in-out infinite}
html[data-motion=playing] .object-scene[data-motion-object].is-held .object-float,
.object-scene[data-motion-object].offscreen .object-float {animation-play-state:paused!important}
@keyframes object-weight {0%,100%{translate:0 0}50%{translate:0 -7px}}
.object-scene[data-motion-object]::after {content:'';position:absolute;inset:20%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse,#b8d1b612,transparent 68%);opacity:.7}
.lua-project {position:relative}
.lua-project::after {content:'';pointer-events:none;position:absolute;left:0;bottom:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--signal),transparent);transform-origin:left;opacity:.5}
.project-tags span {transition:color .2s,background .2s,translate .2s}
.project-tags span:hover {color:var(--bg);background:var(--mint);translate:0 -2px}
.weather-preview {position:relative;isolation:isolate}
.weather-preview::after {content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 90px #fff4;opacity:var(--weather-pulse,0)}
.weather-face strong .temperature-number {font:inherit;color:inherit;display:inline-block;min-width:1.08em;font-variant-numeric:tabular-nums}
html[data-scenes=active] .weather-orbit {animation:weather-breathe 9s ease-in-out infinite}
@keyframes weather-breathe {50%{translate:0 -5px;rotate:3deg}}
.film-preview {position:relative}
.film-reel {position:relative}
.film-reel::after {content:'';position:absolute;left:0;right:0;bottom:0;height:6px;pointer-events:none;background:repeating-linear-gradient(90deg,#eeeee33d 0 6px,transparent 6px 18px);opacity:.6}
html[data-scenes=active] .film-reel::after {animation:film-transport 3s linear infinite}
@keyframes film-transport {to{background-position:36px 0}}
.film-ticket {position:relative}
.film-ticket::after {content:'';position:absolute;inset:0;pointer-events:none;border:2px solid var(--signal);opacity:var(--favorite-flash,0)}
.archive-item summary {position:relative}
.archive-item summary::after {content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--signal);scale:0 1;transform-origin:left;transition:scale .3s}
.archive-item summary:hover::after,.archive-item summary:focus-visible::after,.archive-item[open] summary::after {scale:1 1}
.archive-number {transition:color .2s}
.archive-item summary:hover .archive-number {color:var(--signal)}
.timeline {position:relative;padding-left:20px;--journey:1}
.timeline::before,.timeline::after {content:'';position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--line);pointer-events:none}
.timeline::after {background:var(--signal);scale:1 var(--journey);transform-origin:top}
.timeline article {position:relative}
.timeline article::before {content:'';position:absolute;left:-24px;top:22px;width:7px;height:7px;border:1px solid var(--signal);border-radius:50%;background:var(--bg);transition:background .35s,box-shadow .35s}
.timeline .journey-active::before {background:var(--signal);box-shadow:0 0 0 5px #ff815c15}
.timeline-future {position:relative;background:var(--bg);margin-left:-20px;padding-left:20px;z-index:1;border-left:1px dashed var(--mint)}
.timeline-future article::before {left:-24px;border-color:var(--mint);border-radius:0;background:var(--bg)}
.timeline-future .journey-active::before {background:var(--bg);box-shadow:0 0 0 4px #b8d1b615}
.timeline-future article h3 {color:var(--mint)}
.skill-switches {display:flex;flex-wrap:wrap;gap:7px}
.skill-chip {min-height:44px;padding:7px 12px;border:1px solid var(--line);background:transparent;color:var(--ink);font:11px var(--mono);cursor:pointer;transition:background .22s,color .22s,border-color .22s,translate .22s}
.skill-chip:hover,.skill-chip:focus-visible,.skill-chip[aria-pressed=true] {background:var(--mint);color:var(--bg);border-color:var(--mint);translate:0 -2px}
.skill-evidence>div {position:relative;padding:10px 0;transition:background .3s}
.skill-selected {background:#b8d1b608}
.skill-selected .evidence-links a {text-decoration-color:var(--mint)}
.evidence-links a {transition:color .2s,translate .2s}
.evidence-links a:hover {translate:3px 0}
.watch-entry {position:relative;--journal-progress:1}
.watch-entry::after {content:'';position:absolute;left:0;top:-1px;height:2px;width:100%;background:var(--mint);scale:var(--journal-progress) 1;transform-origin:left;pointer-events:none}
.watch-diagram {position:relative;overflow:hidden}
.watch-diagram::before {content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#b8d1b609 1px,transparent 1px),linear-gradient(#b8d1b609 1px,transparent 1px);background-size:24px 24px;mask-image:linear-gradient(150deg,black,transparent 65%)}
html[data-scenes=active] .watch-cursor {animation:journal-cursor 1.5s steps(2,end) infinite}
@keyframes journal-cursor {50%{opacity:.25}}
a[href$=".pdf"] {position:relative;transition:color .25s,box-shadow .25s}
a[href$=".pdf"]::after {content:'';position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--signal);scale:0 1;transform-origin:left;transition:scale .3s}
a[href$=".pdf"]:hover::after,a[href$=".pdf"]:focus-visible::after {scale:1 1}
.masthead a[href$=".pdf"] span {display:inline-block;transition:translate .25s}
.masthead a[href$=".pdf"]:hover span {translate:3px -3px}
#contact-form label {transition:color .2s,translate .2s}
#contact-form label.field-active {color:var(--signal);translate:3px 0}
#contact-form input,#contact-form textarea {transition:border-color .2s,box-shadow .2s}
#contact-form input:focus,#contact-form textarea:focus {box-shadow:inset 3px 0 var(--signal)}
#contact-form [aria-invalid=true] {border-color:var(--signal)}
.replay-intro {position:relative;border-bottom:1px solid var(--line);padding:10px 0;transition:color .2s,border-color .2s}
.replay-intro:hover,.replay-intro:focus-visible {color:var(--signal);border-color:var(--signal)}
.replay-intro span {display:inline-block;transition:rotate .3s,translate .3s}
.replay-intro:hover span {rotate:90deg;translate:2px 0}
html.intro-active .object-float,html.intro-active .work-stamp,
html[data-page-hidden=true] .object-float,html[data-page-hidden=true] .weather-orbit,
html[data-page-hidden=true] .film-reel::after,html[data-page-hidden=true] .watch-cursor,
.motion-outside .weather-orbit,.motion-outside .film-reel::after,.motion-outside .watch-cursor {animation-play-state:paused!important}
/* Cinematic elements never cover the skip control or intercept game input. */
.cinema-atmosphere {position:absolute;inset:0;pointer-events:none;overflow:hidden}
.cinema-grid {position:absolute;inset:40% -50% -70%;background:linear-gradient(#b8d1b617 1px,transparent 1px),linear-gradient(90deg,#b8d1b617 1px,transparent 1px);background-size:72px 72px;transform:perspective(450px) rotateX(62deg);mask-image:radial-gradient(ellipse,black,transparent 62%)}
.cinema-halo {position:absolute;inset:15%;background:radial-gradient(ellipse,#b8d1b621,transparent 60%);opacity:.6}
.cinema-scan {position:absolute;inset:0;background:linear-gradient(transparent 48%,#b8d1b629 49.5%,#edffde80 50%,transparent 51%);opacity:0}
.cinema-impact {position:absolute;inset:10%;border:1px solid #b8d1b64d;border-radius:50%;box-shadow:0 0 90px #b8d1b617,inset 0 0 90px #b8d1b617;opacity:0}
.cinema-veil {position:absolute;inset:0;z-index:8;display:grid;place-items:center;background:#10120f;color:var(--mint);font:800 clamp(45px,7vw,100px)/1 var(--display);text-align:center}
.cinema-veil::after {content:'';position:absolute;inset:0;opacity:.15;background:repeating-linear-gradient(transparent 0 3px,#b8d1b61a 3px 4px);animation:boot-grain .19s steps(2,end) 5}
@keyframes boot-grain {50%{translate:0 2px}}
.cinema-veil small {display:block;font:8px var(--mono);letter-spacing:.12em;margin-top:12px}
.cinematic-intro:has(.cinema-veil) .intro-frame {position:relative}
.socket-sparks {position:absolute;inset:0;pointer-events:none;opacity:0}
.socket-sparks i {position:absolute;left:50%;top:50%;width:40px;height:1px;transform-origin:left;transform:rotate(var(--ray)) translateX(22px);background:linear-gradient(90deg,#eaffe4,transparent)}
#cinematic-intro:has(.cinema-atmosphere) .screen-bezel {box-shadow:inset 0 0 65px #16433240,0 0 70px #b8d1b60e}
#cinematic-intro:has(.cinema-atmosphere) .code-line {transform:translateX(calc((1 - var(--line-ready,1))*8px))}
@media(max-width:1050px) {
  .timeline-future {grid-column:1/-1;margin-left:0}
  .timeline article::before {display:none}
}
@media(max-width:700px) {
  .timeline {padding-left:18px}
  .timeline article::before {display:block;left:-22px}
  .timeline-future {margin-left:-18px;padding-left:18px}
  .timeline-future article::before {left:-22px}
  .cinema-grid {background-size:60px 60px}
  html[data-motion=playing] .object-scene[data-motion-object] .object-float {animation:none}
}
/* ScrollTrigger restores its cached inline scroll behavior when reverted. */
html[data-motion=paused] {scroll-behavior:auto!important}
html[data-motion=paused] .motion-glyph {transform:none!important;filter:none!important;opacity:1!important}
html[data-motion=paused] .timeline {--journey:1!important}
html[data-motion=paused] .watch-entry {--journal-progress:1!important}
@media(prefers-reduced-motion:reduce) {
  html:not([data-motion=playing]) .motion-glyph {transform:none!important;opacity:1!important;filter:none!important}
}
@media(forced-colors:active) {
  .timeline::after {background:CanvasText}
  .skill-chip[aria-pressed=true] {outline:2px solid Highlight}
}
@media print {
  .motion-glyph {transform:none!important;opacity:1!important;filter:none!important}
  .skill-switches {display:none}
}