@view-transition{navigation:auto}
/* Keep an opaque paper canvas while cross-document snapshots are exchanged. */
html{background:#f6f1e8;color-scheme:light}
::view-transition{background:#f6f1e8}
.project-heading{display:flow-root}
/* Capture the page as one surface; separate hero surfaces can flash blank during the handoff. */
.case-study.is-active .project-heading,.case-hero .hero-copy{view-transition-name:none}
#projects.is-active .actions-panel,#monitors.is-active .case-image,#netflow.is-active .case-image,.case-hero .hero-art{view-transition-name:none}
.project-asset-grid,.hero-asset-grid{view-transition-name:none}
html[data-project-page="actions"] .hero-window img{animation:actions-page-scroll 18s ease-in-out infinite}
html[data-project-page="actions"] .hero-window img[data-preview-paused]{animation-play-state:paused}
html.project-leaving #projects .actions-screen img,html.project-returning #projects .actions-screen img,html.project-arriving .hero-window img,html.project-leaving .hero-window img{animation-play-state:paused}
@keyframes actions-page-scroll{0%,8%{object-position:center top}59%{object-position:center bottom}72%{object-position:center bottom;animation-timing-function:ease-out}96%,100%{object-position:center top}}
html.project-returning .project-deck .is-active :is(.case-eyebrow,h2,p,.case-link,.case-image){opacity:1!important;transform:none!important;transition:none!important}
/* Establish one selected card before enabling the deck's scroll transitions. */
html[data-project-deck-booting] .project-deck :is(.case-study,.case-eyebrow,h2,p,.case-link,.case-image){transition:none!important}
html.project-returning .project-deck .case-study:not(.is-active){visibility:hidden;transition:none}
html.project-returning .project-deck .case-study:not(.is-active) :is(.case-eyebrow,h2,p,.case-link,.case-image){opacity:0!important;transition:none!important}
html.project-leaving .project-counter,html.project-leaving .case-link{pointer-events:none}
/* Project trips use real-page exits/entrances, without native snapshot animation. */
::view-transition-old(root),::view-transition-new(root){animation:none;opacity:1;mix-blend-mode:normal}
@media(prefers-reduced-motion:reduce){@view-transition{navigation:none}html[data-project-page="actions"] .hero-window img{animation:none}::view-transition-group(*){animation-duration:1ms!important}}

/* View Case Study: shared content lands before its frame and navigation assemble. */
:root{--case-entry-rule-duration:480ms;--case-entry-mark-start:360ms;--case-entry-text-duration:440ms}
html[data-case-entry] .page-header{border-bottom-color:transparent}
html[data-case-entry] .chapter-nav{border-block-color:transparent}
html[data-case-entry] .page-header::after,html[data-case-entry] .chapter-nav::before,html[data-case-entry] .chapter-nav::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--rule);pointer-events:none;transform:scaleX(0)}
html[data-case-entry] .page-header::after{bottom:-1px;transform-origin:left}
html[data-case-entry] .chapter-nav::before{top:-1px;transform-origin:right}
html[data-case-entry] .chapter-nav::after{bottom:-1px;transform-origin:left}
html[data-case-entry] :is(.chapter-inner,.diamond-layer){opacity:0}
html[data-case-entry] .project-back{opacity:0}
html[data-case-entry="links"] .project-back{animation:case-entry-links-in 180ms ease both}
html[data-case-entry] .project-back:focus{opacity:1;animation:none}
html[data-case-entry]:not([data-case-entry="pending"]) .page-header::after,html[data-case-entry]:not([data-case-entry="pending"]) .chapter-nav::before,html[data-case-entry]:not([data-case-entry="pending"]) .chapter-nav::after{animation:case-entry-rule-in var(--case-entry-rule-duration) cubic-bezier(.22,1,.36,1) both}
html[data-case-entry]:not([data-case-entry="pending"]) .chapter-nav::after{animation-delay:40ms}
html[data-case-entry]:not([data-case-entry="pending"]) .diamond-layer{animation:case-entry-marks-in 220ms ease var(--case-entry-mark-start) both}
html[data-case-entry]:not([data-case-entry="pending"]) :is(.chapter-inner){animation:case-entry-links-in 180ms ease var(--case-entry-mark-start) both}
/* Keyboard navigation remains legible even before the authored reveal reaches it. */
html[data-case-entry] :is(.chapter-inner):focus-within{opacity:1;animation:none}
@keyframes case-entry-rule-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes case-entry-marks-in{from{opacity:0}to{opacity:1}}
@keyframes case-entry-links-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){html[data-case-entry] .page-header{border-bottom-color:var(--rule)}html[data-case-entry] .chapter-nav{border-block-color:var(--rule)}html[data-case-entry] :is(.chapter-inner,.diamond-layer,.project-back){opacity:1;animation:none}html[data-case-entry] .page-header::after,html[data-case-entry] .chapter-nav::before,html[data-case-entry] .chapter-nav::after{display:none}}