/* A cinemagraph treatment of the approved cold-fog photograph. No new footage or claims. */
.cinema-scene { transform-origin: 50% 45%; }
.cinema-mist { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.cinema-mist span { position: absolute; width: 68%; height: 24%; left: -10%; top: 15%; opacity: 0; background: radial-gradient(ellipse at 70% 55%, rgb(255 254 251 / .35), rgb(255 254 251 / .15) 30%, transparent 68%); transform-origin: 100% 70%; }
.cinema-mist span:nth-child(2) { top: 20%; height: 20%; }
.cinema-mist span:nth-child(3) { top: 10%; height: 28%; }
.cinema-light-trace { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.cinema-light-trace::before, .cinema-light-trace::after { content: ''; position: absolute; left: -40%; width: 40%; height: 2px; background: linear-gradient(90deg,transparent,var(--lime),var(--paper),transparent); box-shadow: 0 0 16px rgb(219 237 167 / .7); }
.cinema-light-trace::before { top: 14px; }
.cinema-light-trace::after { bottom: 14px; }
.cinema-plane { position: relative; transform-origin: center; }
.cinema-plane::after { content: ''; position: absolute; inset: -20%; pointer-events: none; background: linear-gradient(115deg, transparent 34%, rgb(255 254 251 / .26) 48%, transparent 64%); transform: translateX(-65%); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
 @view-transition { navigation: auto; }
 .cinema-plane, .cinema-scene { transition: transform var(--motion-feedback) var(--ease); }
 .cinema-running .cinema-scene > img { animation: cinema-camera 18000ms ease-in-out infinite alternate; }
 .cinema-running .cinema-mist span { animation: cinema-fog 4800ms linear infinite; }
 .cinema-running .cinema-mist span:nth-child(2) { animation-delay: -1600ms; }
 .cinema-running .cinema-mist span:nth-child(3) { animation-delay: -3200ms; }
 .cinema-running .cinema-light-trace::before { animation: cinema-trace 6000ms linear infinite; }
 .cinema-running .cinema-light-trace::after { animation: cinema-trace 6000ms linear infinite reverse; }
 @keyframes cinema-camera { from { transform: scale(1.035) translate3d(0,0,0); } to { transform: scale(1.09) translate3d(-.7%,-.4%,0); } }
 @keyframes cinema-fog { 0% { transform: translate3d(22%,8%,0) scale(.72) rotate(8deg); opacity: 0; } 25% { opacity: .7; } 75% { opacity: .4; } 100% { transform: translate3d(-30%,-18%,0) scale(1.25) rotate(-6deg); opacity: 0; } }
 @keyframes cinema-trace { from { transform: translateX(0); } to { transform: translateX(350%); } }
 .cinema-route::view-transition-old(root) { animation: cinema-route-out 180ms var(--ease) both; }
 .cinema-route::view-transition-new(root) { animation: cinema-route-in 300ms var(--ease) both; }
 @keyframes cinema-route-out { to { opacity: 0; transform: scale(.99); } }
 @keyframes cinema-route-in { from { opacity: 0; transform: translateY(12px) scale(1.01); } }
 .site-header { view-transition-name: site-header; }
 .v7-mobile-actions { view-transition-name: mobile-actions; }
 ::view-transition-group(site-header), ::view-transition-group(mobile-actions) { animation-duration: 0s; }
 ::view-transition-old(site-header), ::view-transition-old(mobile-actions) { display: none; }
 ::view-transition-new(site-header), ::view-transition-new(mobile-actions) { animation: none; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
 .cinema-plane, .cinema-scene { transition: transform var(--motion-feedback) var(--ease); }
 .cinema-plane::after { transition: transform 700ms var(--ease), opacity var(--motion-feedback) var(--ease); }
 .cinema-tilted .cinema-plane::after { opacity: 1; transform: translateX(22%); }
}
.motion-keyboard .cinema-scene, .motion-keyboard .cinema-plane,
.motion-effects-off .cinema-scene, .motion-effects-off .cinema-plane { transform: none !important; transition: none; }
.motion-keyboard .cinema-mist, .motion-effects-off .cinema-mist,
.motion-keyboard .cinema-light-trace, .motion-effects-off .cinema-light-trace { display: none; }
.motion-keyboard .cinema-plane::after, .motion-effects-off .cinema-plane::after { opacity: 0; transition: none; }
@media(max-width:650px) {
 .cinema-mist span { top: 19%; left: -20%; width: 75%; height: 28%; }
 .cinema-mist span:nth-child(2) { top: 23%; }
 .cinema-mist span:nth-child(3) { display: none; }
 .cinema-running .cinema-scene > img { animation-name: cinema-camera-mobile; }
 @keyframes cinema-camera-mobile { from { transform: scale(1.015); } to { transform: scale(1.045); } }
}
@media(prefers-reduced-motion:reduce) {
 @view-transition { navigation: none; }
 .cinema-mist, .cinema-light-trace { display: none; }
 .cinema-scene, .cinema-plane, .cinema-scene > img { transform: none !important; transition: none !important; animation: none !important; }
 .cinema-plane::after { display: none; }
}
@media print { .cinema-mist, .cinema-light-trace, .cinema-plane::after { display: none; } }