/* HOME R14: a living photograph — people, cart wheel, lamps and sky move inside the still image (WebGL).
   The plain <img> stays underneath as the fallback and the motion-off state. */
.page-home .hero-original .hero-visual{overflow:hidden}
.hero-zoom{position:absolute;inset:0;display:block;transform-origin:50% 55%;animation:hero-drift 22s ease-in-out infinite;animation-play-state:paused;will-change:transform}
.hero-original[data-motion="running"] .hero-zoom{animation-play-state:running}
.page-home .hero-original .hero-art-plane .hero-zoom img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:none;transform:none;filter:none}
.hero-live{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .6s ease;pointer-events:none}
.hero-zoom.is-live .hero-live{opacity:1}
.hero-grain{position:absolute;inset:-40%;z-index:1;display:block;pointer-events:none;opacity:.06;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:hero-grain 1.1s steps(6) infinite;animation-play-state:paused}
.hero-original[data-motion="running"] .hero-grain{animation-play-state:running}
@keyframes hero-drift{0%,100%{transform:scale(1.015)}50%{transform:scale(1.035) translate3d(-.3%,-.2%,0)}}
@keyframes hero-grain{0%{transform:translate(0,0)}17%{transform:translate(-4%,3%)}33%{transform:translate(3%,-5%)}50%{transform:translate(-6%,-2%)}67%{transform:translate(5%,4%)}83%{transform:translate(-2%,6%)}100%{transform:translate(0,0)}}
/* Motion off: the plain photograph. */
.reduce-motion .hero-live{display:none}
.reduce-motion .hero-zoom,.reduce-motion .hero-grain{animation:none!important}
@media(prefers-reduced-motion:reduce){.hero-original:not(.motion-optin) .hero-live{display:none}}
@media(max-width:760px){.hero-grain{opacity:.05}}
/* Keep the people in view: the hero's action label sits in the sky, top right. */
.page-home .hero-original .hero-visual .image-action{top:16px;bottom:auto}
@media(max-width:760px){.page-home .hero-original .hero-visual .image-action{top:10px;right:10px}}