/* Progressive effects: all navigation and original media work without them. */
@view-transition { navigation: auto; }
.nav-logo { view-transition-name: feihong-brand; }
::view-transition-group(feihong-brand) { animation-duration: 520ms; animation-timing-function: cubic-bezier(.22,1,.36,1); }
::view-transition-old(root) { animation: cinematic-out 520ms ease-out both; mix-blend-mode: normal; }
::view-transition-new(root) { animation: cinematic-in 620ms cubic-bezier(.22,1,.36,1) both; mix-blend-mode: normal; }
@keyframes cinematic-out { to { opacity: .25; filter: brightness(.7); } }
@keyframes cinematic-in { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
.brand-trail { position: absolute; top: 0; left: 10px; width: 48px; pointer-events: none; z-index: 7; overflow: visible; }
.brand-trail-base { fill: none; stroke: rgba(244,211,94,.12); stroke-width: 1; }
.brand-trail-progress { fill: none; stroke: #c9a832; stroke-width: 1.3; stroke-linecap: round; }
.brand-trail-head { fill: #f4d35e; filter: drop-shadow(0 0 5px rgba(244,211,94,.55)); }
.refraction-canvas { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .2s; }
.refraction-canvas.is-active { opacity: 1; }
.work-preview { z-index: 3; }
.film-frame-art::after { z-index: 4; }
@media(max-width:1100px) { .brand-trail { display: none; } }
@media(hover:none),(pointer:coarse) { .refraction-canvas { display: none; } }
@media(prefers-reduced-motion:reduce) {
  @view-transition { navigation: none; }
  .nav-logo { view-transition-name: none; }
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*) { animation: none!important; }
  .brand-trail,.refraction-canvas { display: none; }
}