/* Capture the viewport, never the full-height main. Page length and scroll
   position must not become animated size/position differences. */
@view-transition{navigation:auto}
main,.site-header,.client-panel-image,.client-panel-copy{view-transition-name:none}
.af-header{view-transition-name:af-navigation}
::view-transition{pointer-events:none}
::view-transition-group(root){animation:none;z-index:1}
::view-transition-image-pair(root){isolation:isolate}
::view-transition-old(root),::view-transition-new(root){
 width:100%;height:100%;object-fit:fill;mix-blend-mode:normal;
}
::view-transition-old(root){animation:none;opacity:1}
::view-transition-new(root){animation:af-client-curtain 560ms cubic-bezier(.4,0,.2,1) both}
::view-transition-group(af-navigation){animation:none;z-index:2}
::view-transition-old(af-navigation){display:none}
::view-transition-new(af-navigation){animation:none;mix-blend-mode:normal}
html.af-client-arrival::view-transition-new(root){animation:af-client-curtain 780ms cubic-bezier(.4,0,.2,1) both}
@keyframes af-client-curtain{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
/* Fixed gradient, animated position: no custom property interpolation and no
   document-sized mask texture. The old viewport stays opaque underneath. */
@supports(mask-image:linear-gradient(to right,#000,transparent)){
 ::view-transition-new(root){
  mask-image:linear-gradient(to right,#000 49%,transparent 51%);
  mask-size:210% 100%;mask-repeat:no-repeat;
  animation:af-client-curtain-soft 560ms cubic-bezier(.4,0,.2,1) both;
 }
 html.af-client-arrival::view-transition-new(root){animation-name:af-client-curtain-soft;animation-duration:780ms}
 @keyframes af-client-curtain-soft{from{mask-position:100% 0}to{mask-position:0 0}}
}
/* The first screen is stable from its first paint; interactions retain their own motion. */
.af-nav-motion .af-header-inner>.af-brand,
.af-nav-motion .af-desktop-nav,.af-nav-motion .af-header-actions,
.creative main h1,
.creative [data-page-opening],
.creative [data-page-opening] > *,
.creative [data-page-opening] h1 *,
.creative [data-page-opening] [data-title-arrival],
.creative [data-page-opening] [data-hero-kicker],
.creative [data-page-opening] [data-hero-follow],
.creative [data-page-opening] [data-hero-visual],
.creative [data-page-opening] .cinema-copy > *,
.creative [data-page-opening] .af4-screening,
.creative [data-page-opening] .af4-creator-art{animation:none!important}
.creative main h1,
.creative [data-page-opening] [data-hero-kicker],
.creative [data-page-opening] [data-hero-follow]{opacity:1;transform:none}
.af-nav-pill:not(.af-pill-ready){transition:none!important}
/* The poster remains underneath until playback has actually started. */
.creative .cinema-montage > video{opacity:0;transition:opacity 180ms ease-out}
.creative .cinema-montage > video.is-ready{opacity:1}
@media(prefers-reduced-motion:reduce){
 @view-transition{navigation:none}
 ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
 .creative .cinema-montage > video{transition:none}
}

/* Reserve the client preview width before its lazy assets decode. */
.af-case-preview{width:min(100%,470px);min-width:0}
.af-case-preview>.af-film-card{min-width:0}

/* Talent-to-talent navigation keeps its quiet dissolve, with assets warmed before departure. */
html.af-talents-arrival::view-transition-old(root){animation:af-talent-out 520ms ease-in-out both;mix-blend-mode:plus-lighter}
html.af-talents-arrival::view-transition-new(root){animation:af-talent-in 520ms ease-in-out both;mask-image:none;clip-path:none;mix-blend-mode:plus-lighter}
@keyframes af-talent-out{from{opacity:1}to{opacity:0}}
@keyframes af-talent-in{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){html::view-transition-old(root),html::view-transition-new(root){animation:none!important}}